From: jordan Date: Sat, 14 Jan 2012 03:46:57 +0000 (-0500) Subject: employed new cleaner layout with futura, added asynchornous typekit loading to correc... X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=ca4af37cb1b8aa60a04281133e787c276b0420ec;p=oweals%2Ffinalsclub.git employed new cleaner layout with futura, added asynchornous typekit loading to correct for FOUT --- diff --git a/fc-new-design/assets/css/scss/includes/type.scss b/fc-new-design/assets/css/scss/includes/type.scss index 71bb9a1..252ae01 100755 --- a/fc-new-design/assets/css/scss/includes/type.scss +++ b/fc-new-design/assets/css/scss/includes/type.scss @@ -112,4 +112,4 @@ button, #footer-nav a { font-family: "museo-sans"; font-weight: 500; -} \ No newline at end of file +} diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index 38e4ae5..579bd6e 100755 --- a/public/assets/css/reset.css +++ b/public/assets/css/reset.css @@ -28,7 +28,7 @@ body, button, input, select, textarea { font-family: sans-serif; color: #222; } /* Links ============================================== */ -a { color: #4b8eda; cursor: pointer; text-decoration: none; } +a { color: #0ca6ff; cursor: pointer; text-decoration: none; } a:link, a:visited { outline: none; } diff --git a/public/assets/css/screen.css b/public/assets/css/screen.css index 93fbea6..f6e9670 100755 --- a/public/assets/css/screen.css +++ b/public/assets/css/screen.css @@ -1,90 +1,94 @@ -/* +/* ---------------------------------------------------------------- + Title: Master styles for screen media Author: Jordan Cooperman, jordan@vectormediagroup.com -Year: 2011 +Year: 2012 -Welcome, thou wanderer of the interwebs! -If you have any questions, Don't be shy. Send me a line! -================================================================ ---------------------------------------------------------------- -[Table of contents] +Oh, I didn't see you there, friend. - 0.General - 1.Layout - a.Header - b.Footer - 5.Pages - 6.Modules - 7.Forms - 8.Sprites - *.User Defined +Please have a look around, I hope you enjoy your stay. -----------------------------------------------------------------*/ -/* positioning */ -/* sprites */ -/* borders made from backgrounds */ -/* triangles */ -/* css3 */ +---------------------------------------------------------------- + +[Table of contents] - a map of our grounds. + + 0.General + a.elements + b.classes + + 1.Layout + a.header + b.content + c.footer + + 2.Extensible Classes + + + *.Pages, modules, sprites and media queries imported at end + +---------------------------------------------------------------- + +[Prefixes] - some patterns that you may observe. + + g: global + s: state + +---------------------------------------------------------------- */ .wrapper { - width: 930px; + width: 880px; margin: 0 auto; } - .wrapper:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; } .grid-1 { - width: 9.274%; + float: left; + width: 9.091%; padding: 0; - margin: 0 1.613%; - float: left; } + margin: 0 1.705%; } .grid-2 { - width: 21.774%; + float: left; + width: 21.591%; padding: 0; - margin: 0 1.613%; - float: left; } + margin: 0 1.705%; } .grid-3 { - width: 34.274%; + float: left; + width: 34.091%; padding: 0; - margin: 0 1.613%; - float: left; } + margin: 0 1.705%; } -.grid-4, #site-logo, #nav-masthead { - width: 46.774%; +.grid-4, #g-logo, #nav-main, #intro-text, #intro-schools { + float: left; + width: 46.591%; padding: 0; - margin: 0 1.613%; - float: left; } + margin: 0 1.705%; } .grid-5 { - width: 59.274%; + float: left; + width: 59.091%; padding: 0; - margin: 0 1.613%; - float: left; } + margin: 0 1.705%; } .grid-6 { - width: 71.774%; + float: left; + width: 71.591%; padding: 0; - margin: 0 1.613%; - float: left; } + margin: 0 1.705%; } .grid-7 { - width: 84.274%; + float: left; + width: 84.091%; padding: 0; - margin: 0 1.613%; - float: left; } + margin: 0 1.705%; } -.grid-8 { - width: 96.774%; +.grid-8, #nav-user, .subheader, #intro-video { + float: left; + width: 96.591%; padding: 0; - margin: 0 1.613%; - float: left; } + margin: 0 1.705%; } -.futura, .futura-italic, .futura-light, .futura-bold, #masthead { +.futura, .futura-italic, .futura-light, .subheader h2, .futura-bold, h1, h2, h3, h4, h5, h6, p, #g-masthead { font-family: "futura-pt", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; } @@ -92,13 +96,13 @@ If you have any questions, Don't be shy. Send me a line! .futura-italic { font-style: italic; } -.futura-light { +.futura-light, .subheader h2 { font-weight: 300; } .futura-bold { font-weight: 700; } -.minion, .minion-italic, p { +.minion, .minion-italic { font-family: "minion-pro", "Georgia", serif; font-weight: 400; -webkit-font-smoothing: antialiased; } @@ -119,38 +123,53 @@ body { font-size: 0.875em; line-height: 1.286em; } -.normal, h3 { +.normal { /* 16px / 24px */ font-size: 1em; line-height: 1.5em; /* 24 */ } -.large { +.big, p, #nav-main a { + /* 18px / 24px */ + font-size: 1.125em; + line-height: 1.333em; } + +.large, h3 { /* 26 / 36px */ font-size: 1.625em; line-height: 1.385em; } -.huge { - /* 42px / 48px */ - font-size: 2.625em; - line-height: 1.143em; } +.huge, h2 { + /* 36px / 42px */ + font-size: 2.25em; + line-height: 1.167em; } .massive { - /* 68px / 72px */ - font-size: 4.25em; - line-height: 0.988em; } + /* 52px / 60px */ + font-size: 3.25em; + line-height: 1.154em; } -.gigantic { - /* 110px / 120px */ - font-size: 6.875em; - line-height: 1.091em; } +.gigantic, h1 { + /* 60px / 72px */ + font-size: 3.75em; + line-height: 1.2em; } -.tight-line-height, #nav-user ul { +.tight-line-height, #nav-user ul, .subheader h1, .subheader h3 { line-height: 1em; } -/* media queries included at end of document */ -/* 0.`general -============================================== */ +/* 0.`General +---------------------------------------------- */ +/* a.`elements +-------------------------- */ +h1, h2, h3, h4, h5, h6 { + margin: 0; + margin-bottom: 0.375em; } + +p { + margin: 0; + margin-bottom: 0.75em; + color: #444; } + ::-moz-selection { background: #44a1dd; color: #fff; @@ -161,129 +180,178 @@ body { color: #fff; text-shadow: none; } -h1, h2, h3, h4, h5, h6 { - margin: 0; } - -button { - -moz-border-radius: 5px; - border-radius: 5px; - padding: 8px 24px; - border: 0; - background-image: url("../img/button-bg.png"); - background-repeat: repeat-x; - background-position: left bottom; } - button.blue { - background-color: #367da9; - border: 1px solid #16567e; - color: #fff; } - button.green { - background-color: #78b343; - border: 1px solid #4f901b; - color: #fff; } - button.three-dim.blue { - -moz-box-shadow: 2px 2px 0 #16567e; - -webkit-box-shadow: 2px 2px 0 #16567e; - box-shadow: 2px 2px 0 #16567e; } - button.three-dim.green { - -moz-box-shadow: 2px 2px 0 #4f901b; - -webkit-box-shadow: 2px 2px 0 #4f901b; - box-shadow: 2px 2px 0 #4f901b; } - +/* b.`classes +-------------------------- */ +.wf-loading h1 { + opacity: 0; } + +h1 { + -webkit-transition: opacity 0.25s ease-in-out; + -moz-transition: opacity 0.25s ease-in-out; + -o-transition: opacity 0.25s ease-in-out; + -ms-transition: opacity 0.25s ease-in-out; + transition: opacity 0.25s ease-in-out; + opacity: 1; } + +.wf-loading h2 { + opacity: 0; } + +h2 { + -webkit-transition: opacity 0.25s ease-in-out; + -moz-transition: opacity 0.25s ease-in-out; + -o-transition: opacity 0.25s ease-in-out; + -ms-transition: opacity 0.25s ease-in-out; + transition: opacity 0.25s ease-in-out; + opacity: 1; } + +.wf-loading h3 { + opacity: 0; } + +h3 { + -webkit-transition: opacity 0.25s ease-in-out; + -moz-transition: opacity 0.25s ease-in-out; + -o-transition: opacity 0.25s ease-in-out; + -ms-transition: opacity 0.25s ease-in-out; + transition: opacity 0.25s ease-in-out; + opacity: 1; } + +.wf-loading h4 { + opacity: 0; } + +h4 { + -webkit-transition: opacity 0.25s ease-in-out; + -moz-transition: opacity 0.25s ease-in-out; + -o-transition: opacity 0.25s ease-in-out; + -ms-transition: opacity 0.25s ease-in-out; + transition: opacity 0.25s ease-in-out; + opacity: 1; } + +.wf-loading h5 { + opacity: 0; } + +h5 { + -webkit-transition: opacity 0.25s ease-in-out; + -moz-transition: opacity 0.25s ease-in-out; + -o-transition: opacity 0.25s ease-in-out; + -ms-transition: opacity 0.25s ease-in-out; + transition: opacity 0.25s ease-in-out; + opacity: 1; } + +.wf-loading h6 { + opacity: 0; } + +h6 { + -webkit-transition: opacity 0.25s ease-in-out; + -moz-transition: opacity 0.25s ease-in-out; + -o-transition: opacity 0.25s ease-in-out; + -ms-transition: opacity 0.25s ease-in-out; + transition: opacity 0.25s ease-in-out; + opacity: 1; } + +.wf-loading p { + opacity: 0; } + +p { + -webkit-transition: opacity 0.25s ease-in-out; + -moz-transition: opacity 0.25s ease-in-out; + -o-transition: opacity 0.25s ease-in-out; + -ms-transition: opacity 0.25s ease-in-out; + transition: opacity 0.25s ease-in-out; + opacity: 1; } + +.wf-loading li { + opacity: 0; } + +li { + -webkit-transition: opacity 0.25s ease-in-out; + -moz-transition: opacity 0.25s ease-in-out; + -o-transition: opacity 0.25s ease-in-out; + -ms-transition: opacity 0.25s ease-in-out; + transition: opacity 0.25s ease-in-out; + opacity: 1; } + +/* 1.`Layout +---------------------------------------------- */ html, body { height: 100%; margin: 0; } body { - background-image: url("../img/bg.gif"); + background-color: #262626; background-position: 20% 0; border-top: 3px solid #1f1e1c; } -.content { - background-color: #fff; } - -#masthead { - border-top: 1px solid #4c4a46; - border-top: 1px solid rgba(255, 255, 255, 0.2); - border-bottom: 3px solid #ffcd58; } - -#site-logo a { - display: block; - padding: 1.5em; } - -#nav-masthead { - margin-top: -1px; } +/* a.`header +-------------------------- */ +#g-logo a { + display: block; } #nav-user { - float: right; padding: 0.375em 0.75em 0.75em; - background-color: #1f1e1c; - border-bottom-left-radius: 8px; - -moz-border-radius-bottomleft: 8px; - -webkit-border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - -moz-border-radius-bottomright: 8px; - -webkit-border-bottom-right-radius: 8px; } + text-align: right; } #nav-user li { - display: inline-block; - *display: inline; - *zoom: 1; - vertical-align: middle; - color: #818181; - border-left: 1px solid #222; - border-left: 1px solid rgba(0, 0, 0, 0.2); } + display: inline; } #nav-user li.first, #nav-user li.first a { border: 0; } #nav-user a { - display: block; - padding: 0 0.375em; - color: #818181; - border-left: 1px solid #2a2a2a; - border-left: 1px solid rgba(255, 255, 255, 0.1); } - #nav-user a.username { - font-style: italic; } - -#nav-main { - clear: both; } - #nav-main:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; } - #nav-main ul { - float: right; - padding: 0.375em 0; } - #nav-main li { - display: inline-block; - vertical-align: middle; - float: none; } - #nav-main li a { - position: relative; - display: block; - padding: 0.375em; - margin-left: 1.5em; - color: #fff; } - #nav-main li a:hover { - color: #ffcd58; } - #nav-main li a .icon { - position: absolute; - left: 0; } - #nav-main li #school_link { - padding-left: 2.1em; } - #nav-main li #school_link .icon { - top: 50%; - margin-top: -10px; } - #nav-main li #blog_link { - padding-left: 1.8em; } - #nav-main li #blog_link .icon { - top: 50%; - margin-top: -9px; } - #nav-main li #archive_link { - padding-left: 1.8em; } - -/* 4.`footer -============================================== */ + padding: 0 0.75em; + color: #ffcd58; } + +#nav-main ul { + float: right; + padding: 0.375em 0; } +#nav-main li { + display: inline-block; + *display: inline; + *zoom: 1; + vertical-align: middle; } +#nav-main a { + position: relative; + display: block; + padding: 0.375em 0; + margin-left: 1.5em; + color: #fff; } + #nav-main a:hover { + color: #ffcd58; } + #nav-main a .icon { + position: absolute; + left: 0; } +#nav-main #school_link { + padding-left: 2.1em; } + #nav-main #school_link .icon { + top: 50%; + margin-top: -10px; } +#nav-main #blog_link { + padding-left: 1.95em; } + #nav-main #blog_link .icon { + top: 50%; + margin-top: -9px; } +#nav-main #archive_link { + padding-left: 1.8em; } + +/* b.`content +-------------------------- */ +#g-page { + border-top: 1px solid #333; + background-color: #fff; } + +.page { + color: #333; } + +.subheader { + padding: 3em 0; + border-top: 3px solid #ffcd58; + text-align: center; } + .subheader h1, .subheader h3 { + display: inline; + padding: 0.15em; + margin: 0; } + .subheader h1 { + color: #333; } + +/* c.`footer +-------------------------- */ .footer { color: #444; padding-top: 24px; } @@ -316,45 +384,47 @@ body { .footer .creative_commons a { color: #777; } -/* 6.`modules -============================================== */ -.padded-loose { - padding: 10px; - padding-top: 0; - padding-bottom: 0; } - -.button-set.vertical button { - margin-bottom: 16px; } -.button-set.half-width-buttons button { - width: 48%; } -.button-set.centered { - text-align: center; } - -.video-wrapper { - -moz-border-radius: 5px; - border-radius: 5px; - padding: 5px; - background-color: #f5f5f5; - text-align: center; } - -.schools ul:after { +/* 7.`Extensible Classes +---------------------------------------------- */ +.group:after, .wrapper:after, #nav-main:after, .schools ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } -.schools li { - float: left; - width: 25%; - height: 100px; } -.schools em { + +.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; } -/* 8.`sprites -============================================== */ +/* A.Sprites +---------------------------------------------------------------- + +[Table of contents] - a map of our sprites + + A1.Setup + A2.Sprites + +---------------------------------------------------------------- */ +/* A1.`Setup +---------------------------------------------- */ .icon, -.sprite, -.sprite-school { +.sprite { text-indent: -9999px; line-height: 0; font-size: 0; @@ -367,113 +437,141 @@ body { .icon { background-image: url("../img/finalsclub-sprite-icons.png"); } -.sprite-school { - background-image: url("../img/finalsclub-sprite-schools.gif"); } - -.paperclip, #nav-main li #school_link .icon, .paperclip-active, #nav-main li #school_link:hover .icon { +/* A2.`Sprites +---------------------------------------------- */ +.paperclip, #nav-main #school_link .icon, .paperclip-active, #nav-main #school_link:hover .icon { background-position: 0 0; width: 22px; height: 20px; } -.paperclip-active, #nav-main li #school_link:hover .icon { +.paperclip-active, #nav-main #school_link:hover .icon { background-position: -24px 0; } -.align-lines, #nav-main li #blog_link .icon { +.align-lines, #nav-main #blog_link .icon { background-position: 0 -25px; width: 24px; height: 17px; } -.align-lines-active, #nav-main li #blog_link:hover .icon { +.align-lines-active, #nav-main #blog_link:hover .icon { background-position: -27px -25px; } -.book, #nav-main li #archive_link .icon, .book-active, #nav-main li #archive_link:hover .icon { +.book, #nav-main #archive_link .icon, .book-active, #nav-main #archive_link:hover .icon { background-position: 0 -46px; width: 19px; height: 26px; } -.book-active, #nav-main li #archive_link:hover .icon { +.book-active, #nav-main #archive_link:hover .icon { background-position: -24px -46px; } -.brown { - background-position: 0 0; - width: 61px; - height: 72px; } - -.columbia { - background-position: -62px 0; - width: 81px; - height: 61px; } - -.cornell { - background-position: -144px 0; - width: 71px; - height: 72px; } - -.dartmouth { - background-position: -216px 0; - width: 56px; - height: 71px; } - -.shield { - background-position: -273px 0; - width: 59px; - height: 60px; } - -.mit { - background-position: -333px 0; - width: 79px; - height: 41px; } - -.lock_haven { - background-position: -413px 0; - width: 61px; - height: 68px; } - -.cal { - background-position: -475px 0; - width: 91px; - height: 72px; } - -.texas { - background-position: -567px 0; - width: 54px; - height: 68px; } - -.yale { - background-position: -622px 0; +.logo-brown { + display: block; + background: url(../img/sprite-schools.png) no-repeat -117px -78px; + width: 32px; + height: 37px; } + +.logo-california { + display: block; + background: url(../img/sprite-schools.png) no-repeat -53px -78px; + width: 46px; + height: 37px; } + +.logo-columbia { + display: block; + background: url(../img/sprite-schools.png) no-repeat 0px -78px; width: 51px; - height: 50px; } + height: 37px; } + +.logo-cornell { + display: block; + background: url(../img/sprite-schools.png) no-repeat -117px 0px; + width: 38px; + height: 37px; } -.penn { - background-position: -674px 0; +.logo-dartmouth { + display: block; + background: url(../img/sprite-schools.png) no-repeat 0px -117px; + width: 30px; + height: 37px; } + +.logo-harvard { + display: block; + background: url(../img/sprite-schools.png) no-repeat -72px -39px; + width: 39px; + height: 37px; } + +.logo-lock_haven { + display: block; + background: url(../img/sprite-schools.png) no-repeat -32px -117px; + width: 33px; + height: 37px; } + +.logo-mit { + display: block; + background: url(../img/sprite-schools.png) no-repeat 0px -39px; + width: 70px; + height: 37px; } + +.logo-penn { + display: block; + background: url(../img/sprite-schools.png) no-repeat 0px 0px; width: 115px; - height: 65px; } + height: 37px; } -.harvard { - background-position: -790px 0; - width: 67px; - height: 65px; } +.logo-shield { + display: block; + background: url(../img/sprite-schools.png) no-repeat -67px -117px; + width: 36px; + height: 37px; } -/* media queries */ -/* media queries -============================================== */ -/* *.`user defined -============================================== */ -.right { - float: right !important; } +.logo-texas { + display: block; + background: url(../img/sprite-schools.png) no-repeat -105px -117px; + width: 29px; + height: 37px; } -.no-top-margin { - margin-top: 0; } +.logo-yale { + display: block; + background: url(../img/sprite-schools.png) no-repeat -117px -39px; + width: 38px; + height: 37px; } -.spacer { - padding-top: 16px; - padding-bottom: 32px; } +/*---------------------------------------------------------------- -.half-width { - width: 50%; } +[Table of contents] -.centered { + 0.Home + 1.Layout + +----------------------------------------------------------------*/ +.section-home h3 { + padding-bottom: 0.375em; + margin-bottom: 0.375em; } + +#intro-schools li { + float: left; + width: 33.333%; + min-height: 50px; + margin: 0.75em 0; } + #intro-schools li .sprite { + margin: 0 auto; } + +.button { + background-color: #e5e5e5; + color: #0ca6ff; } + +.video-wrapper { + -moz-border-radius: 5px; + border-radius: 5px; + padding: 5px; + background-color: #f5f5f5; text-align: center; } -.centered-rt-parent { +.schools li { + float: left; + width: 25%; + height: 100px; } +.schools em { margin: 0 auto; } + +/* media queries +============================================== */ diff --git a/public/assets/css/scss/partials/_grid.scss b/public/assets/css/scss/partials/_grid.scss index 3c64a72..8dd2af2 100755 --- a/public/assets/css/scss/partials/_grid.scss +++ b/public/assets/css/scss/partials/_grid.scss @@ -1,8 +1,7 @@ // edit these values $cols: 8; $margin: 15; -$layout-width: 900; - +$layout-width: 850; // do not edit these values $layout-margin-width: $layout-width + $margin * 2; $col-width: $layout-margin-width / $cols; @@ -13,23 +12,17 @@ $percent-margin: $margin / $layout-margin-width; width: $layout-margin-width + px; margin: 0 auto; - &:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - } + @extend .group; } // Grid Columns @for $i from 1 through $cols { - .grid-#{$i} { - width: ( ($col_width * $i / $layout-margin-width) - 2 * $percent-margin) * 100%; - padding: 0; - margin: 0 $percent-margin * 100%; - float: left; - } + .grid-#{$i} { + float: left; + width: ( ($col_width * $i / $layout-margin-width) - 2 * $percent-margin) * 100%; + padding: 0; + margin: 0 $percent-margin * 100%; + } } diff --git a/public/assets/css/scss/partials/_mixins.scss b/public/assets/css/scss/partials/_mixins.scss index 346553b..cd3703c 100755 --- a/public/assets/css/scss/partials/_mixins.scss +++ b/public/assets/css/scss/partials/_mixins.scss @@ -1,113 +1,68 @@ -/* positioning */ -@mixin group { - - &:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - } -} +// positioning @mixin inline-block( $vertical-align: middle ) { display: inline-block; *display: inline; *zoom: 1; - @if ($vertical-align) { - vertical-align: $vertical-align; - } -} - -@mixin text-hidden { - text-indent: 0; - line-height: 0; - font-size: 0; -} - -/* sprites */ - -@mixin sprite-icon { - text-indent: -9999px; - line-height: 0; - font-size: 0; - overflow: hidden; - display: block; - background-image: url("../img/greentech-sprite-icons.png"); - background-repeat: no-repeat; -} - -@mixin sprite-image { - text-indent: -9999px; - line-height: 0; - font-size: 0; - overflow: hidden; - display: block; - background-image: url("../img/greentech-sprite-images.png"); - background-repeat: no-repeat; + vertical-align: $vertical-align; } -/* borders made from backgrounds */ -@mixin border-vertical-dotted($position) { - background-image: url("../img/border-vertical-dotted.png"); - background-repeat: repeat-y; - background-position: $position top; -} +// css triangles -@mixin border-horizontal-dotted($position) { - background-image: url("../img/border-horizontal-dotted.png"); - background-repeat: repeat-x; - background-position: left $position; +@mixin triangle( $size: 7px, $position: "bottom", $color: #999 ) { + height: 0; + width: 0; + border-style: solid; + border-width: $size; + @if $position == "bottom" { + border-color : transparent transparent $color transparent; + } + @if $position == "top" { + border-color : $color transparent transparent transparent; + } + @if $position == "left" { + border-color : transparent transparent transparent $color; + } + @if $position == "right" { + border-color : transparent $color transparent transparent; + } } -/* triangles */ -@mixin triangle-vertical($size: 7px, $position: "bottom", $color: #999, $rgba: rgba(0, 0, 0, 0.7)) { - @include text-hidden; - position : absolute; - height : 0; - width : 0; - border-style : solid; - border-width : $size; - border-color : transparent transparent $color transparent; - border-color : transparent transparent $rgba transparent; - left : 50%; - margin-left : $size * -2; - #{$position} : 0; +// css3 +@mixin box-sizing( $property: "border-box" ) { + -webkit-box-sizing: $property; + -moz-box-sizing: $property; + box-sizing: $property; } -@mixin triangle-angled($size: 4px, $position: "bottom", $color: #333, $rgba: "") { - @include text-hidden; - position : absolute; - height : 0; - width : 0; - border-style : solid; - border-width : $size; - border-color : $color transparent transparent $color; - @if $rgba != "" { - border-color : $rgba transparent transparent $rgba; - } - left : 50%; - margin-left : $size * -2; - #{$position} : $size * -2; +@mixin linear-gradient($start-color: #222, $end-color: #000 ) { + background-color: $end-color; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($start-color), to($end-color)); + background-image: -webkit-linear-gradient(top, $start-color, $end-color); + background-image: -moz-linear-gradient(top, $start-color, $end-color); + background-image: -ms-linear-gradient(top, $start-color, $end-color); + background-image: -o-linear-gradient(top, $start-color, $end-color); } -/* css3 */ - -@mixin rounded($radius: 5px) { +@mixin rounded( $radius: 5px ) { -moz-border-radius: $radius; border-radius: $radius; } -@mixin roundedSide($horizontal, $vertical, $magnitude: 5px) { +@mixin rounded-side($horizontal, $vertical, $magnitude) { border-#{$vertical}-#{$horizontal}-radius: $magnitude; -moz-border-radius-#{$vertical}#{$horizontal}: $magnitude; -webkit-border-#{$vertical}-#{$horizontal}-radius: $magnitude; } +@mixin text-shadow($horizontal: 1px, $vertical: 1px, $magnitude: 1px, $color: #888) { + text-shadow: $horizontal $vertical $magnitude $color; +} + @mixin transition($property, $time: 0.25s) { -webkit-transition: $property $time ease-in-out; -moz-transition: $property $time ease-in-out; @@ -116,13 +71,13 @@ transition: $property $time ease-in-out; } -@mixin inner-shadow($horizontal: -5px, $vertical: -5px, $magnitude: 5px, $color: #888) { +@mixin inner-shadow($horizontal: 5px, $vertical: 5px, $magnitude: 5px, $color: #888) { -moz-box-shadow: inset $horizontal $vertical $magnitude $color; -webkit-box-shadow: inset $horizontal $vertical $magnitude $color; box-shadow: inset $horizontal $vertical $magnitude $color; } -@mixin drop-shadow($horizontal: 5px, $vertical: 5px, $magnitude: 5px, $color: #888) { +@mixin box-shadow($horizontal: 5px, $vertical: 5px, $magnitude: 5px, $color: #888) { -moz-box-shadow: $horizontal $vertical $magnitude $color; -webkit-box-shadow: $horizontal $vertical $magnitude $color; box-shadow: $horizontal $vertical $magnitude $color; diff --git a/public/assets/css/scss/partials/_modules.scss b/public/assets/css/scss/partials/_modules.scss new file mode 100644 index 0000000..36cedd6 --- /dev/null +++ b/public/assets/css/scss/partials/_modules.scss @@ -0,0 +1,25 @@ +.button { + background-color: #e5e5e5; + color: $blue; +} + +.video-wrapper { + @include rounded(); + padding: 5px; + background-color: #f5f5f5; + text-align: center; +} + +.schools { + ul { + @extend .group; + } + li { + float: left; + width: 25%; + height: 100px; + } + em { + margin: 0 auto; + } +} diff --git a/public/assets/css/scss/partials/_pages.scss b/public/assets/css/scss/partials/_pages.scss new file mode 100644 index 0000000..03fd32a --- /dev/null +++ b/public/assets/css/scss/partials/_pages.scss @@ -0,0 +1,39 @@ +/*---------------------------------------------------------------- + +[Table of contents] + + 0.Home + 1.Layout + +----------------------------------------------------------------*/ + +.section-home { + + h3 { + padding-bottom: $base/4; + margin-bottom: $base/4; + } + +} +#intro-text { + @extend .grid-4; +} + +#intro-schools { + @extend .grid-4; + + li { + float: left; + width: 100/3*1%; + min-height: 50px; + margin: $base/2 0; + + .sprite { + margin: 0 auto; + } + } +} + +#intro-video { + @extend .grid-8; +} diff --git a/public/assets/css/scss/partials/_sprites.scss b/public/assets/css/scss/partials/_sprites.scss new file mode 100644 index 0000000..4515fd1 --- /dev/null +++ b/public/assets/css/scss/partials/_sprites.scss @@ -0,0 +1,138 @@ + +/* A.Sprites +---------------------------------------------------------------- + +[Table of contents] - a map of our sprites + + A1.Setup + A2.Sprites + +---------------------------------------------------------------- */ + + +/* A1.`Setup +---------------------------------------------- */ + +.icon, +.sprite { + text-indent: -9999px; + line-height: 0; + font-size: 0; + overflow: hidden; + display: block; +} + +.sprite { background-image : url('../img/finalsclub-sprite-images.png'); } +.icon { background-image : url('../img/finalsclub-sprite-icons.png'); } + + +/* A2.`Sprites +---------------------------------------------- */ + +.paperclip { + background-position: 0 0; + width: 22px; + height: 20px; +} + +.paperclip-active { + @extend .paperclip; + background-position: -24px 0; +} + +.align-lines { + background-position: 0 -25px; + width: 24px; + height: 17px; +} + +.align-lines-active { + @extend align-lines; + background-position: -27px -25px; +} + +.book { + background-position: 0 -46px; + width: 19px; + height: 26px; +} + +.book-active { + @extend .book; + background-position: -24px -46px; +} + +.logo-brown { + display: block; + background: url(../img/sprite-schools.png) no-repeat -117px -78px; + width: 32px; + height: 37px; +} +.logo-california { + display: block; + background: url(../img/sprite-schools.png) no-repeat -53px -78px; + width: 46px; + height: 37px; +} +.logo-columbia { + display: block; + background: url(../img/sprite-schools.png) no-repeat 0px -78px; + width: 51px; + height: 37px; +} +.logo-cornell { + display: block; + background: url(../img/sprite-schools.png) no-repeat -117px 0px; + width: 38px; + height: 37px; +} +.logo-dartmouth { + display: block; + background: url(../img/sprite-schools.png) no-repeat 0px -117px; + width: 30px; + height: 37px; +} +.logo-harvard { + display: block; + background: url(../img/sprite-schools.png) no-repeat -72px -39px; + width: 39px; + height: 37px; +} +.logo-lock_haven { + display: block; + background: url(../img/sprite-schools.png) no-repeat -32px -117px; + width: 33px; + height: 37px; +} +.logo-mit { + display: block; + background: url(../img/sprite-schools.png) no-repeat 0px -39px; + width: 70px; + height: 37px; +} +.logo-penn { + display: block; + background: url(../img/sprite-schools.png) no-repeat 0px 0px; + width: 115px; + height: 37px; +} +.logo-shield { + display: block; + background: url(../img/sprite-schools.png) no-repeat -67px -117px; + width: 36px; + height: 37px; +} +.logo-texas { + display: block; + background: url(../img/sprite-schools.png) no-repeat -105px -117px; + width: 29px; + height: 37px; +} +.logo-yale { + display: block; + background: url(../img/sprite-schools.png) no-repeat -117px -39px; + width: 38px; + height: 37px; +} + + diff --git a/public/assets/css/scss/partials/_type.scss b/public/assets/css/scss/partials/_type.scss index 8515e26..0591ef2 100755 --- a/public/assets/css/scss/partials/_type.scss +++ b/public/assets/css/scss/partials/_type.scss @@ -52,12 +52,18 @@ body { line-height: ($line*0.75) / ($font-size*0.875) * 1em; } -.normal, h3 { +.normal { /* 16px / 24px */ font-size: #{$font-size / $em}em; line-height: #{$line / $em}em; /* 24 */ } +.big { + /* 18px / 24px */ + font-size: #{$font-size*1.125 / $em}em; + line-height: ($line*1) / ($font-size*1.125) * 1em; +} + .large { /* 26 / 36px */ font-size: #{26 / $em}em; @@ -65,21 +71,21 @@ body { } .huge { - /* 42px / 48px */ - font-size: #{42 / $em}em; - line-height: ($line*2) / 42 * 1em; + /* 36px / 42px */ + font-size: #{36 / $em}em; + line-height: ($line*1.75) / 36 * 1em; } .massive { - /* 68px / 72px */ - font-size: #{68 / $em}em; - line-height: ($line*2.8) / 68 * 1em; + /* 52px / 60px */ + font-size: #{52 / $em}em; + line-height: ($line*2.5) / 52 * 1em; } .gigantic { - /* 110px / 120px */ - font-size: #{110 / $em}em; - line-height: ($line*5) / 110 * 1em; + /* 60px / 72px */ + font-size: #{60 / $em}em; + line-height: ($line*3) / 60 * 1em; } .tight-line-height { diff --git a/public/assets/css/scss/screen.scss b/public/assets/css/scss/screen.scss index 76308fe..d446f8a 100755 --- a/public/assets/css/scss/screen.scss +++ b/public/assets/css/scss/screen.scss @@ -1,88 +1,102 @@ -/* +/* ---------------------------------------------------------------- + Title: Master styles for screen media Author: Jordan Cooperman, jordan@vectormediagroup.com -Year: 2011 +Year: 2012 + +---------------------------------------------------------------- + +Oh, I didn't see you there, friend. + +Please have a look around, I hope you enjoy your stay. -Welcome, thou wanderer of the interwebs! -If you have any questions, Don't be shy. Send me a line! -================================================================ ---------------------------------------------------------------- -[Table of contents] +[Table of contents] - a map of our grounds. + + 0.General + a.elements + b.classes - 0.General - 1.Layout - a.Header - b.Footer - 5.Pages - 6.Modules - 7.Forms - 8.Sprites - *.User Defined + 1.Layout + a.header + b.content + c.footer -----------------------------------------------------------------*/ + 2.Extensible Classes -$blue: #367da9; -$dark-blue: #16567e; -$green: #78b343; -$dark-green: #4f901b; + *.Pages, modules, sprites and media queries imported at end + +---------------------------------------------------------------- + +[Prefixes] - some patterns that you may observe. + + g: global + s: state + +---------------------------------------------------------------- */ +// hello +$blue: #0ca6ff; $dark: #1f1e1c; -$yellow-gold: #ffcd58; $gold: #ffcd58; @import "partials/mixins"; @import "partials/grid"; @import "partials/type"; -/* media queries included at end of document */ -/* 0.`general -============================================== */ +/* 0.`General +---------------------------------------------- */ -::-moz-selection { background: #44a1dd; color: #fff; text-shadow: none; } -::selection { background: #44a1dd; color: #fff; text-shadow: none; } -h1, h2, h3, h4, h5, h6 { - margin: 0; +/* a.`elements +-------------------------- */ + +h1, h2, h3, h4, h5, h6 { margin: 0; margin-bottom: $base/4; @extend .futura; } + +h1 { + @extend .gigantic; } -p { - @extend .minion; +h2 { + @extend .huge; } -button { - @include rounded; - padding: 8px 24px; - border: 0; - background-image: url("../img/button-bg.png"); - background-repeat: repeat-x; - background-position: left bottom; - - &.blue { - background-color: $blue; - border: 1px solid $dark-blue; - color: #fff; - } - &.green { - background-color: $green; - border: 1px solid $dark-green; - color: #fff; - } - &.three-dim.blue { - @include drop-shadow(2px, 2px, 0, $dark-blue); - } - &.three-dim.green { - @include drop-shadow(2px, 2px, 0, $dark-green); - } +h3 { + @extend .large; } +p { + @extend .futura; + @extend .big; + margin: 0; + margin-bottom: $base/2; + color: #444; +} + +::-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 -//************************************* +/* 1.`Layout +---------------------------------------------- */ html, body { @@ -91,58 +105,40 @@ body { } body { - background-image: url("../img/bg.gif"); + background-color: #262626; background-position: 20% 0; border-top: 3px solid $dark; } -.content { background-color: #fff; } -//********************* +/* a.`header +-------------------------- */ -// a.`Header - -//********************* - -#masthead { +#g-masthead { @extend .futura; - border-top: 1px solid #4c4a46; - border-top: 1px solid rgba( 255, 255, 255, 0.2 ); - border-bottom: 3px solid $gold; } -#site-logo { +#g-logo { @extend .grid-4; a { display: block; - padding: $base; } } -#nav-masthead { - @extend .grid-4; - margin-top: -1px; -} - #nav-user { - float: right; + @extend .grid-8; padding: $base/4 $base/2 $base/2; + text-align: right; @extend .small; - background-color: $dark; - @include roundedSide('left', 'bottom', 8px); - @include roundedSide('right', 'bottom', 8px); ul { @extend .tight-line-height; } li { - @include inline-block( middle ); - color: #818181; - border-left: 1px solid #222; - border-left: 1px solid rgba(0, 0, 0, 0.2); + display: inline; &.first, &.first a { border: 0; @@ -150,91 +146,114 @@ body { } a { - display: block; - padding: 0 $base/4; - color: #818181; - border-left: 1px solid #2a2a2a; - border-left: 1px solid rgba(255, 255, 255, 0.1); - - &.username { - font-style: italic; - } + padding: 0 $base/2; + color: $gold; } } #nav-main { - @include group; - clear: both; + @extend .grid-4; + @extend .group; ul { float: right; padding: $base/4 0; } - li { - display: inline-block; - vertical-align: middle; - float: none; - - a { - position: relative; - display: block; - padding: $base/4; - margin-left: $base; - color: #fff; - - &:hover { - color: $gold; - } - - .icon { - position: absolute; - left: 0; - } - } + li { @include inline-block; } - #school_link { - padding-left: $base*1.4; + a { + position: relative; + display: block; + padding: $base/4 0; + margin-left: $base; + @extend .big; + color: #fff; - &:hover .icon { @extend .paperclip-active; } + &:hover { + color: $gold; + } - .icon { - @extend .paperclip; - top: 50%; - margin-top: -10px; - } + .icon { + position: absolute; + left: 0; } + } - #blog_link { - padding-left: $base*1.2; + #school_link { + padding-left: $base*1.4; - &:hover .icon { @extend .align-lines-active; } + &:hover .icon { @extend .paperclip-active; } - .icon { - top: 50%; - margin-top: -9px; - @extend .align-lines; - } + .icon { + @extend .paperclip; + top: 50%; + margin-top: -10px; } + } + + #blog_link { + padding-left: $base*1.3; - #archive_link { - padding-left: $base*1.2; + &:hover .icon { @extend .align-lines-active; } - &:hover { + .icon { + top: 50%; + margin-top: -9px; + @extend .align-lines; + } + } - .icon { @extend .book-active; } - } + #archive_link { + padding-left: $base*1.2; - .icon { @extend .book; } + &:hover { + + .icon { @extend .book-active; } } + .icon { @extend .book; } + } +} +/* b.`content +-------------------------- */ + +#g-page { + border-top: 1px solid #333; + background-color: #fff; +} + +.page { + color: #333; +} + +.subheader { + @extend .grid-8; + padding: $base*2 0; + border-top: 3px solid $gold; + text-align: center; + + h1, h3 { + display: inline; + padding: $base/10; + margin: 0; + @extend .tight-line-height; + } + + h1 { + color: #333; + } + + h2 { + @extend .futura-light; } } -/* 4.`footer -============================================== */ + +/* c.`footer +-------------------------- */ .footer { color: #444; @@ -274,174 +293,33 @@ body { } } -/* 6.`modules -============================================== */ - -.padded-loose { - padding: 10px; - padding-top: 0; - padding-bottom: 0; -} +/* 7.`Extensible Classes +---------------------------------------------- */ -.button-set { - &.vertical { - button { - margin-bottom: 16px; - } - } - &.half-width-buttons { - button { - width: 48%; +.group { + &:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; } - } - &.centered { - text-align: center; - } } -.video-wrapper { - @include rounded(); - padding: 5px; - background-color: #f5f5f5; - text-align: center; -} -.schools { - ul { - @include group; - } - li { - float: left; - width: 25%; - height: 100px; - } - em { - margin: 0 auto; - } -} +.right { float: right !important; } +.left { float: left !important; } -/* 8.`sprites -============================================== */ - -.icon, -.sprite, -.sprite-school { - text-indent : -9999px; - line-height : 0; - font-size : 0; - overflow : hidden; - display : block; -} - -.sprite { background-image : url('../img/finalsclub-sprite-images.png'); } -.icon { background-image : url('../img/finalsclub-sprite-icons.png'); } -.sprite-school { background-image : url("../img/finalsclub-sprite-schools.gif"); } - -.paperclip { - background-position: 0 0; - width: 22px; - height: 20px; -} - -.paperclip-active { - @extend .paperclip; - background-position: -24px 0; -} - -.align-lines { - background-position: 0 -25px; - width: 24px; - height: 17px; -} - -.align-lines-active { - @extend align-lines; - background-position: -27px -25px; -} - -.book { - background-position: 0 -46px; - width: 19px; - height: 26px; -} - -.book-active { - @extend .book; - background-position: -24px -46px; -} - -.brown { - background-position: 0 0; - width: 61px; - height: 72px; -} -.columbia { - background-position: -62px 0; - width: 81px; - height: 61px; -} -.cornell { - background-position: -144px 0; - width: 71px; - height: 72px; -} -.dartmouth { - background-position: -216px 0; - width: 56px; - height: 71px; -} -.shield { - background-position: -273px 0; - width: 59px; - height: 60px; -} -.mit { - background-position: -333px 0; - width: 79px; - height: 41px; -} -.lock_haven { - background-position: -413px 0; - width: 61px; - height: 68px; -} -.cal { - background-position: -475px 0; - width: 91px; - height: 72px; -} -.texas { - background-position: -567px 0; - width: 54px; - height:68px; -} -.yale { - background-position: -622px 0; - width: 51px; - height: 50px; -} -.penn { - background-position: -674px 0; - width: 115px; - height:65px; -} -.harvard { - background-position: -790px 0; - width: 67px; - height: 65px; -} -/* media queries */ - -@import "partials/media"; - -/* *.`user defined -============================================== */ - -.right { float: right !important;} -.no-top-margin { margin-top: 0; } .spacer { padding-top: 16px; padding-bottom: 32px; } + .half-width { width: 50%; } .centered { text-align: center;} .centered-rt-parent { margin: 0 auto;} + + +@import "partials/sprites"; // A +@import "partials/pages"; // B +@import "partials/modules"; // C +@import "partials/media"; // D diff --git a/public/assets/css/sprite-schools-example.css b/public/assets/css/sprite-schools-example.css new file mode 100644 index 0000000..c777e8c --- /dev/null +++ b/public/assets/css/sprite-schools-example.css @@ -0,0 +1,72 @@ +.logo-brown { + display: block; + background: url(../img/sprite-schools.png) no-repeat -117px -78px; + width: 32px; + height: 37px; +} +.logo-california { + display: block; + background: url(../img/sprite-schools.png) no-repeat -53px -78px; + width: 46px; + height: 37px; +} +.logo-columbia { + display: block; + background: url(../img/sprite-schools.png) no-repeat 0px -78px; + width: 51px; + height: 37px; +} +.logo-cornell { + display: block; + background: url(../img/sprite-schools.png) no-repeat -117px 0px; + width: 38px; + height: 37px; +} +.logo-dartmouth { + display: block; + background: url(../img/sprite-schools.png) no-repeat 0px -117px; + width: 30px; + height: 37px; +} +.logo-harvard { + display: block; + background: url(../img/sprite-schools.png) no-repeat -72px -39px; + width: 39px; + height: 37px; +} +.logo-lock_haven { + display: block; + background: url(../img/sprite-schools.png) no-repeat -32px -117px; + width: 33px; + height: 37px; +} +.logo-mit { + display: block; + background: url(../img/sprite-schools.png) no-repeat 0px -39px; + width: 70px; + height: 37px; +} +.logo-penn { + display: block; + background: url(../img/sprite-schools.png) no-repeat 0px 0px; + width: 115px; + height: 37px; +} +.logo-shield { + display: block; + background: url(../img/sprite-schools.png) no-repeat -67px -117px; + width: 36px; + height: 37px; +} +.logo-texas { + display: block; + background: url(../img/sprite-schools.png) no-repeat -105px -117px; + width: 29px; + height: 37px; +} +.logo-yale { + display: block; + background: url(../img/sprite-schools.png) no-repeat -117px -39px; + width: 38px; + height: 37px; +} diff --git a/public/assets/img/bg-dark.gif b/public/assets/img/bg-dark.gif new file mode 100644 index 0000000..bd592e9 Binary files /dev/null and b/public/assets/img/bg-dark.gif differ diff --git a/public/assets/img/bg-light.gif b/public/assets/img/bg-light.gif new file mode 100644 index 0000000..2431956 Binary files /dev/null and b/public/assets/img/bg-light.gif differ diff --git a/public/assets/img/bg.gif b/public/assets/img/bg.gif deleted file mode 100644 index b788bfe..0000000 Binary files a/public/assets/img/bg.gif and /dev/null differ diff --git a/public/assets/img/logo.png b/public/assets/img/logo.png index 9dabd82..e520485 100644 Binary files a/public/assets/img/logo.png and b/public/assets/img/logo.png differ diff --git a/public/assets/img/sprite-schools.png b/public/assets/img/sprite-schools.png new file mode 100644 index 0000000..3bf75e5 Binary files /dev/null and b/public/assets/img/sprite-schools.png differ diff --git a/public/index.html b/public/index.html index ed28d47..2e43829 100644 --- a/public/index.html +++ b/public/index.html @@ -5,8 +5,8 @@ - - + + @@ -14,46 +14,76 @@ + -
+
- + +
+ + - + +
__msg__
-
+
@@ -64,56 +94,54 @@ or Firefox. + -
-
-
-

Welcome to FinalsClub! Collaborate. Learn. Share.

-
+ +
+
+
+

Welcome to FinalsClub.

+

Collaborate. Learn. Share.

+
-
-
-

- Welcome to FinalsClub.org. We provide tools to help college students collaborate in realtime on class notes and hold live scholarly discussions with their peers and instructors. -

-

+

+
+
+

Our Mission

+

+ To provide tools that help college students collaborate on during and after class, with peers and with instructers. and lecture, and to ask questions to their professors, when they have them. +

+

A single user can begin lecture notes on FinalsClub, but the best results occur when everyone contributes to common knowledge. Working together we can transform higher education, one classroom at a time. -

-
-
- -
-
- - -
-
- -
+

+ Sign Up + Learn Something + -
-

Check out our Screencasts

-
-
-
-
-

We currently support the following schools

-
+
+

Who we support

    -
  • Brown Logo
    • -
  • Columbia Logo
    • -
  • Cornell Logo
    • -
  • Dartmouth Logo
    • -
  • School Logo
    • -
  • MIT Logo
    • -
  • Lock Haven Logo
    • -
  • Cal Tech Logo
    • -
  • University of Texas Logo
    • -
  • Yale Logo
    • -
  • Penn Logo
    • -
  • Harvad Logo
    • +
  • Brown Logo
    • +
  • Columbia Logo
    • +
  • Cornell Logo
    • +
  • Dartmouth Logo
    • +
  • School Logo
    • +
  • MIT Logo
    • +
  • Lock Haven Logo
    • +
  • Cal Tech Logo
    • +
  • University of Texas Logo
    • +
  • Yale Logo
    • +
  • Penn Logo
    • +
  • Harvad Logo
-
+ + +
+

Check out our Screencasts

+
+ +
+
@@ -593,7 +621,6 @@
-

Code of Conduct

@@ -645,32 +672,32 @@ Sorry, there is no content for this page.
-
-
-
- -

Finals Club is a 501\(c\)(3) non-profit organization.

-
-
- - Creative Commons License - -
-
-
- This site is licensed under a - Creative Commons Attribution 3.0 Unported License. -
-
+ +