FinalsClub/public/assets/css/scss/screen.scss

/* ----------------------------------------------------------------

Title: Master styles for screen media
Author: Jordan Cooperman, jordan@vectormediagroup.com
Year: 2012

----------------------------------------------------------------

Oh, I didn't see you there, friend.

Please have a look around, I hope you enjoy your stay.

----------------------------------------------------------------

[Table of contents] - a map of our grounds.

	0.General
		a.elements
		b.classes

	1.Layout
		a.header
		b.content
		c.footer

	2.Forms
	3.Extensible Classes

	*.Pages, modules, sprites and media queries imported at end

----------------------------------------------------------------

[Prefixes] - some patterns that you may observe.

	g: global
	s: state

---------------------------------------------------------------- */

$blue: #0ca6ff;
$dark: #1f1e1c;
$gold: #ffcd58;
$mustard: #e8a200;


/* 0.`General
---------------------------------------------- */

@import "partials/mixins";

@import "partials/grid";

@import "partials/type";

/* a.`elements
-------------------------- */

h1, h2, h3, h4, h5, h6 { margin: 0; margin-bottom: $base/4; }

h1 {
    @extend .gigantic;
    @extend .futura-light;
}

h2 {
    @extend .huge;
}

h3 {
    @extend .large;
}

h4 {
	@extend .big;
}

a {
    @include transition( color );
    color: $mustard;

    &:hover {
        color: $mustard;
    }
}

p {
    @extend .futura;
    @extend .big;
    margin: 0;
    margin-bottom: $base/2;
    color: #444;
}

img {
    max-width: 100%;
}

button {
	padding: $base/4 $base/2;
	border: 0;
	background: none;
	background-color: #333;
	border: 1px solid #000;
	color: #fff;
	// color: #fff;
}

::-moz-selection { background: #44a1dd; color: #fff; text-shadow: none; }
::selection { background: #44a1dd; color: #fff; text-shadow: none; }


/* b.`classes
-------------------------- */

// for asychronous typekit loading
@each $element in h1, h2, h3, h4, h5, h6, p, li {
    .wf-loading #{$element} {
        opacity: 0;
    }

    #{$element} {
        @include transition( opacity );
        opacity: 1;
    }
}


/* 1.`Layout
---------------------------------------------- */

html,
body {
  height: 100%;
  margin: 0;
}

body {
    background-position: 20% 0;
}

.sidebar {
	@extend .grid-3;

	form {
		margin-left: $base;
	}
}


/* a.`header
-------------------------- */

#g-masthead {
    @extend .futura;
    background-color: #262626;

    .wrapper {
        background-color: #262626;
    }
}

#g-logo {
    @extend .grid-3;

    a {
        display: block;
    }
}

#g-nav-user {
    @extend .grid-8;
    padding: $base/4 $base/2 $base/2;
    text-align: right;
    @extend .small;

    ul {
        @extend .tight-line-height;
    }

    li {
        display: inline;

        &.first, &.first a {
            border: 0;
        }
    }

    a {
        padding: 0 $base/2;
        color: $gold;
    }
}

#g-nav-main {
    @extend .grid-5;
    @extend .group;

    ul {
        float: right;
        padding: $base/4 0;
    }

    li { @include inline-block; }

    a {
        position: relative;
        display: block;
        padding: $base/4 0;
        margin-left: $base;
        @extend .big;
        color: #fff;

        &:hover {
            color: $gold;
        }

        .icon {
            position: absolute;
            left: 0;
        }
    }

    #school_link {
        padding-left: $base*1.1;

        &:hover .icon { @extend .paperclip-active; }

        .icon {
            @extend .paperclip;
            top: 50%;
            margin-top: -10px;
        }
    }

    #blog_link {
        padding-left: $base*1.2;

        &:hover .icon { @extend .align-lines-active; }

        .icon {
            top: 50%;
            margin-top: -9px;
            @extend .align-lines;
        }
    }

    #archive_link {
        padding-left: $base*1.1;

        &:hover {

            .icon { @extend .book-active; }
        }

        .icon { @extend .book; }
    }
}

#g-masthead-hr {
    position: absolute;
    margin-top: 0;
    margin-bottom: 0;
    @extend .grid-8;
    top: 100%;
    height: 3px;
    border: 0;
    background-color: $gold;
}


/* b.`content

-------------------------- */

#g-page {
    background-color: #fff;
    margin-bottom: $base*2;
}

.page {
	display: none;
	@extend .group;
	margin-bottom: $base;
	margin-top: 3px;
	color: #333;
}

.breadcrumb {
	position: relative;
	@extend .grid-8;
	@extend .big;
	@extend .group;
	border-bottom: 1px solid #f8f8f8;
	background-color: #fafafa;

	a {
		display: block;
		float: left;
		padding: $base/4;
		opacity: 0.7;
		@include transition( opacity );

		.action {
			color: $mustard;
		}

		.location {
			color: #666;
		}

		&:hover {
			opacity: 1;
		}

		span {
				@include transition( color );
		}
	}

	.action {
		color: #666;
	}

	.location {
		@extend .futura-oblique;
		color: #bbb;
	}
}

$rgba-gold: rgba(255, 205, 88, 0.1);

.subheader {
    @extend .grid-8;
    padding: $base*1.5 0 $base*2;
		margin-bottom: $base*1.5;
		border-top: 1px solid #f7f7f7;
		border-bottom: 1px solid #fbf7eb;
		border-bottom: 1px solid $rgba-gold;
		background-color: #fcfcfc;

    h1, h3 {
        margin: 0;
        @extend .tight-line-height;
    }

    h1 {
        color: #333;
    }

    h2 {
        @extend .futura-light;
    }
}

.main-content {
    @extend .grid-8;
}

/* c.`footer
-------------------------- */


#g-footer {
    @extend .grid-8;
    text-align: center;
}

#g-nav-footer {
    margin-bottom: $base/2;
    text-align: center;

    li {
        display: inline;
        text-align: center;
        @extend .mini;
    }

    a {
        padding: 0 $base/2;
    }
}

#g-footer-copyright {
    @extend .tiny;

    img {
        margin: 0 auto;
        margin-bottom: $base/2;
    }

}
.footer {
  color: #444;
  padding-top: 24px;
  #footer-nav {
    float: right;
    margin-right: -16px;

    li {
      display: inline-block;
      *display: inline;
    }
    a {
      @include transition(color);
      padding: 5px 16px;
      color: #999;
      &:hover {
        color: #fff;
      }
    }
  }
  p {
    float: right;
    clear: both;
    margin-top: 24px;
  }
  .creative_commons {
    .section {
      clear: both;
      float: right;
    }
    float: right;
    clear: both;
    a {
      color: #777;
    }
  }
}

/* 2.`Forms
---------------------------------------------- */

input.text {
	padding: $base/4;
	background-color: #e5e5e5;
	border: 1px solid #ccc;

	&:focus {
		border: 1px solid #aaa;
		outline: 0;
	}
}

.form-header {

	h4 {
		color: $mustard;
		@extend .futura;
	}

	p {
		@extend .small;
	}
}

.form-section {
	margin-bottom: $base*2;
}

form {

	.row {
		margin-bottom: $base/2;

		button {
			margin-top: $base/2;
		}
	}
}


/* 3.`Extensible Classes
---------------------------------------------- */

.group {
    &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
}

.right { float: right !important; }
.left { float: left !important; }

.spacer {
  padding-top: 16px;
  padding-bottom: 32px;
}

.half-width { width: 50%; }
.centered { text-align: center;}
.centered-rt-parent { margin: 0 auto;}

.light {
	color: #444;
}

.info {
	@extend .futura-bold;
	color: #6bcf77;
}

.error {
	@extend .futura-bold;
	color: #b7300b;
}

@import "partials/sprites"; // A
@import "partials/pages";   // B
@import "partials/modules"; // C
@import "partials/mixins"; // C
@import "partials/media";   // D