#footer-nav a {
font-family: "museo-sans";
font-weight: 500;
-}
\ No newline at end of file
+}
/* Links\r
============================================== */\r
\r
-a { color: #4b8eda; cursor: pointer; text-decoration: none; }\r
+a { color: #0ca6ff; cursor: pointer; text-decoration: none; }\r
\r
a:link, a:visited { outline: none; }\r
\r
-/*
+/* ----------------------------------------------------------------
+
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; }
.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; }
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;
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; }
.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;
.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
+============================================== */
// 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;
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%;
+ }
}
-/* 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;
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;
--- /dev/null
+.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;
+ }
+}
--- /dev/null
+/*----------------------------------------------------------------
+
+[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;
+}
--- /dev/null
+
+/* 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;
+}
+
+
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;
}
.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 {
-/*
+/* ----------------------------------------------------------------
+
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 {
}
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;
}
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;
}
}
-/* 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
--- /dev/null
+.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;
+}
<link rel="stylesheet" href="/assets/css/include.css" type="text/css" media="screen" />
<script type="text/javascript" src="/assets/js/modernizr.custom.js"></script>
- <script type="text/javascript" src="http://use.typekit.com/cbx6gxx.js"></script>
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+ <!-- <script type="text/javascript" src="http://use.typekit.com/cbx6gxx.js"></script>-->
+ <!-- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>-->
<script type='text/javascript' src='/javascripts/jquery.min.js'></script>
<script type='text/javascript' src='/javascripts/jquery.tmpl.js'></script>
<!--<script type='text/javascript' src='/javascripts/jquery.min.js'></script> -->
<script type='text/javascript' src='/javascripts/es5-shim.min.js'></script>
<script type='text/javascript' src='/javascripts/protodiv.js'></script>
<script type='text/javascript' src='/javascripts/main.js'></script>
+ <script type="text/javascript">
+ TypekitConfig = {
+ kitId: 'cbx6gxx',
+ scriptTimeout: 3000
+ };
+ (function() {
+ var h = document.getElementsByTagName('html')[0];
+ h.className += ' wf-loading';
+ var t = setTimeout(function() {
+ h.className = h.className.replace(/(\s|^)wf-loading(\s|$)/g, '');
+ h.className += ' wf-inactive';
+ }, TypekitConfig.scriptTimeout);
+ var tk = document.createElement('script');
+ tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
+ tk.type = 'text/javascript';
+ tk.async = 'true';
+ tk.onload = tk.onreadystatechange = function() {
+ var rs = this.readyState;
+ if (rs && rs != 'complete' && rs != 'loaded') return;
+ clearTimeout(t);
+ try { Typekit.load(TypekitConfig); } catch (e) {}
+ };
+ var s = document.getElementsByTagName('script')[0];
+ s.parentNode.insertBefore(tk, s);
+ })();
+ </script>
</head>
<!--================================================================= -->
<body>
- <header id="masthead">
+ <header id="g-masthead">
<div class="wrapper">
- <div id="site-logo">
+
+ <nav id="nav-user">
+ <ul>
+ <li class="first"><a href="#" class="username"></a></li>
+ <li><a href="/register">Register</a></li>
+ <li class="last"><a href="/login">Login</a></li>
+ </ul>
+ </nav>
+ </div>
+
+ <div class="wrapper">
+
+ <div id="g-logo">
<a href="/">
<img src="/assets/img/logo.png" alt="FinalsClub - social notetaking" />
</a>
</div>
- <div id="nav-masthead">
- <nav id="nav-user">
- <ul>
- <li class="first"><a href="#" class="username"></a></li>
- <li><a href="/register">Register</a></li>
- <li class="last"><a href="/login">Login</a></li>
- </ul>
- </nav>
- <nav id="nav-main">
- <ul>
- <li><a href="/schools" id=school_link><span class="icon" alt="paperclip"></span>Courses</a></li>
- <li><a href="http://blog.finalsclub.org" id="blog_link"><span class="icon" alt="align-lines"></span>Blog</a></li>
- <li><a href="/archive" id=archive_link class="nav"><span class="icon" alt="book"></span>Library</a></li>
- <!--
- <li><a href="/press" id=press_link class="nav"><em class="icon"></em>Press</a></li>
- -->
- <li><a href="/profile" id=profile_link class="nav"><em class="icon"></em>Profile</a></li>
- <!-- li><a href="#" class="donate"><em class="icon"></em><em class="lc yellow">Donate</em></a></li -->
- </ul>
- </nav>
- </div>
+
+ <nav id="nav-main">
+ <ul>
+ <li><a href="/schools" id=school_link><span class="icon" alt="paperclip"></span>Courses</a></li>
+ <li><a href="http://blog.finalsclub.org" id="blog_link"><span class="icon" alt="align-lines"></span>Blog</a></li>
+ <li><a href="/archive" id=archive_link class="nav"><span class="icon" alt="book"></span>Library</a></li>
+ <!--
+ <li><a href="/press" id=press_link class="nav"><em class="icon"></em>Press</a></li>
+ -->
+ <li><a href="/profile" id=profile_link class="nav"><em class="icon"></em>Profile</a></li>
+ <!-- li><a href="#" class="donate"><em class="icon"></em><em class="lc yellow">Donate</em></a></li -->
+ </ul>
+ </nav>
</div>
</header>
<div id="topofcontent"></div>
<div id="messages" class="page"><span id="PROTO_message" class="__type__">__msg__</span></div>
- <div class="content">
+ <div id="g-page">
<style>
- /* The is here is because it's related less to "styling" and more to UI "behavior" */
+ /* This related less to "styling" and more to UI "behavior" */
.page { display: none; }
</style>
or
<a href="http://firefox.com">Firefox</a>.
</noscript>
+
<!--================================================================= -->
- <div class=page id=pg_home>
- <div class="grid-12">
- <div class="padded-loose">
- <h1 class="large-huge spaced centered">Welcome to FinalsClub! <span class="small">Collaborate. Learn. Share.</span></h1>
- </div>
+
+ <div class="page" id="pg_home">
+ <div class="wrapper">
+ <header class="subheader">
+ <h1>Welcome to FinalsClub.</h1>
+ <h2>Collaborate. Learn. Share.</h2>
+ </header>
</div>
- <div class="grid-10 grid-centered">
- <div class="padded-loose">
- <p class="no-top-margin">
- 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.
- </p>
- <p>
+ <div class="wrapper">
+ <div id="intro">
+ <section class="section-home" id="intro-text">
+ <h3>Our Mission</h3>
+ <p>
+ 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.
+ </p>
+ <p>
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.
- </p>
- </div>
- </div>
- <!--================================================================= -->
- <div class="grid-12">
- <div class="button-set vertical half-width centered-rt-parent half-width-buttons">
- <button id="signup" class="green">Sign Up</button>
- <button id="learnsomething" class="blue">Learn Something</button>
- </div>
- </div>
- <!--================================================================= -->
- <div class="container-12 spacer">
+ </p>
+ <a href="#" class="button" id="signup">Sign Up</a>
+ <a href="#" class="button" id="learnsomething">Learn Something</a>
+ </section>
- <div class="grid-6">
- <h3 class="heading">Check out our Screencasts</h3>
- <div class="video-wrapper">
- <iframe src="http://player.vimeo.com/video/30647271?title=0&byline=0&portrait=0&color=367da9" width="460" height="259" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe> </div>
- </div>
- <div class="grid-6">
- <h3 class="heading">We currently support the following schools</h3>
- <div class="schools">
+ <section class="section-home" id="intro-schools">
+ <h3>Who we support</h3>
<ul>
- <li><em class="sprite-school brown">Brown Logo</em></li>
- <li><em class="sprite-school columbia">Columbia Logo</em></li>
- <li><em class="sprite-school cornell">Cornell Logo</em></li>
- <li><em class="sprite-school dartmouth">Dartmouth Logo</em></li>
- <li><em class="sprite-school shield">School Logo</em></li>
- <li><em class="sprite-school mit">MIT Logo</em></li>
- <li><em class="sprite-school lock_haven">Lock Haven Logo</em></li>
- <li><em class="sprite-school cal">Cal Tech Logo</em></li>
- <li><em class="sprite-school texas">University of Texas Logo</em></li>
- <li><em class="sprite-school yale">Yale Logo</em></li>
- <li><em class="sprite-school penn">Penn Logo</em></li>
- <li><em class="sprite-school harvard">Harvad Logo</em></li>
+ <li><div class="sprite logo-brown">Brown Logo</div></li>
+ <li><div class="sprite logo-columbia">Columbia Logo</div></li>
+ <li><div class="sprite logo-cornell">Cornell Logo</div></li>
+ <li><div class="sprite logo-dartmouth">Dartmouth Logo</div></li>
+ <li><div class="sprite logo-shield">School Logo</div></li>
+ <li><div class="sprite logo-mit">MIT Logo</div></li>
+ <li><div class="sprite logo-lock_haven">Lock Haven Logo</div></li>
+ <li><div class="sprite logo-california">Cal Tech Logo</div></li>
+ <li><div class="sprite logo-texas">University of Texas Logo</div></li>
+ <li><div class="sprite logo-yale">Yale Logo</div></li>
+ <li><div class="sprite logo-penn">Penn Logo</div></li>
+ <li><div class="sprite logo-harvard">Harvad Logo</div></li>
</ul>
- </div>
+ </section>
+
+ <section class="section-home" id="intro-video">
+ <h3 class="heading">Check out our Screencasts</h3>
+ <div class="video-wrapper">
+ <iframe src="http://player.vimeo.com/video/30647271?title=0&byline=0&portrait=0&color=367da9" width="460" height="259" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
+ </div>
+ </section>
</div>
</div>
</div>
</div>
</form>
</div>
-
<div class=page id=pg_conduct>
<div class="conduct">
<h1>Code of Conduct</h1>
Sorry, there is no content for this page.
</div>
</div>
- <div class="footer small">
- <div class="container-12">
- <div class="grid-12">
- <nav id="footer-nav">
-
<li><a href="/conduct">Conduct</a></li>
-
<li><a href="https://github.com/finalsclubdev/FinalsClub/">Code</a></li>
-
<li><a href="http://blog.finalsclub.org/about.html">About</a></li>
-
<li><a href="http://blog.finalsclub.org/contact.html">Contact</a></li>
-
<li><a href="http://blog.finalsclub.org/legal.html">Legal</a></li>
-
<li><a href="http://blog.finalsclub.org/team.html">Team</a></li>
- </ul>
- </nav>
- <p>Finals Club is a 501\(c\)(3) non-profit organization.</p>
- <div class="creative_commons">
- <div class="section">
- <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
- <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" />
- </a>
- <br />
- </div>
- <div class="section">
- This site is licensed under a
- <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.
- </div>
- </div>
+
+ <div id="g-footer">
+ <div class="wrapper">
+ <nav id="nav-footer">
+ <ul>
+ <li><a href="/conduct">Conduct</a></li>
+ <li><a href="https://github.com/finalsclubdev/FinalsClub/">Code</a></li>
+ <li><a href="http://blog.finalsclub.org/about.html">About</a></li>
+ <li><a href="http://blog.finalsclub.org/contact.html">Contact</a></li>
+ <li><a href="http://blog.finalsclub.org/legal.html">Legal</a></li>
+ <li><a href="http://blog.finalsclub.org/team.html">Team</a></li>
+ </ul>
+ </nav>
+ </div>
+
+ <p>Finals Club is a 501\(c\)(3) non-profit organization.</p>
+ <div class="creative_commons">
+ <div class="section">
+ <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
+ <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" />
+ </a>
+ <br />
+ </div>
+ <div class="section">
+ This site is licensed under a
+ <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.
</div>
</div>
</div>
projects / oweals / finalsclub.git / commitdiff
