From 8d9f6f7523f3c6773c48c8e8433793eba6e0e5b4 Mon Sep 17 00:00:00 2001 From: jordan Date: Mon, 16 Jan 2012 16:14:37 -0500 Subject: [PATCH] simplified footer and school listing on home, corrected pathing of courses link on schools page --- public/assets/css/screen.css | 60 +- public/assets/css/scss/partials/_modules.scss | 5 +- public/assets/css/scss/partials/_pages.scss | 24 +- public/assets/css/scss/partials/_type.scss | 10 +- public/assets/css/scss/screen.scss | 16 +- public/index.html | 1018 ++++++++--------- public/javascripts/main.js | 1 + 7 files changed, 586 insertions(+), 548 deletions(-) diff --git a/public/assets/css/screen.css b/public/assets/css/screen.css index adfc494..2a82b44 100755 --- a/public/assets/css/screen.css +++ b/public/assets/css/screen.css @@ -54,21 +54,21 @@ Please have a look around, I hope you enjoy your stay. margin-left: 1.705%; margin-right: 1.705%; } -.grid-3 { +.grid-3, #g-logo { float: left; width: 34.091%; padding: 0; margin-left: 1.705%; margin-right: 1.705%; } -.grid-4, #g-logo, #nav-main, #intro-text, #intro-video { +.grid-4, #intro-video, #intro-text { float: left; width: 46.591%; padding: 0; margin-left: 1.705%; margin-right: 1.705%; } -.grid-5 { +.grid-5, #nav-main { float: left; width: 59.091%; padding: 0; @@ -96,7 +96,7 @@ Please have a look around, I hope you enjoy your stay. margin-left: 1.705%; margin-right: 1.705%; } -.futura, .futura-oblique, .futura-light, .subheader h2, .futura-bold, h1, h2, h3, h4, h5, h6, p, #g-masthead { +.futura, .futura-oblique, .futura-light, .subheader h2, .futura-bold, .link-bar a, 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; } @@ -107,7 +107,7 @@ Please have a look around, I hope you enjoy your stay. .futura-light, .subheader h2 { font-weight: 300; } -.futura-bold { +.futura-bold, .link-bar a { font-weight: 700; } .minion, .minion-italic { @@ -126,12 +126,17 @@ body { font-size: 1em; line-height: 1.5em; } -.tiny, #g-nav-footer li, #g-footer-copyright, #intro-schools li { - /* 14px / 18px */ - font-size: 0.75em; +.tiny, #g-footer-copyright { + /* 11px / 12px */ + font-size: 0.688em; line-height: 1.091em; } -.small, #nav-user, .link-bar a { +.mini, #g-nav-footer li { + /* 12px / 12px */ + font-size: 0.75em; + line-height: 1em; } + +.small, #nav-user, #intro-schools li, .link-bar a { /* 14px / 18px */ font-size: 0.875em; line-height: 1.286em; } @@ -142,12 +147,12 @@ body { line-height: 1.5em; /* 24 */ } -.big, h4, p, #nav-main a { +.big, p, #nav-main a { /* 18px / 24px */ font-size: 1.125em; line-height: 1.333em; } -.large, h3 { +.large, h3, h4 { /* 26 / 36px */ font-size: 1.625em; line-height: 1.385em; } @@ -361,11 +366,12 @@ body { margin-bottom: 3em; } .page { + margin-bottom: 1.5em; + border-top: 3px solid #ffcd58; color: #333; } .subheader { padding: 3em 0; - border-top: 3px solid #ffcd58; text-align: center; } .subheader h1, .subheader h3 { display: inline; @@ -380,6 +386,7 @@ body { text-align: center; } #g-nav-footer { + margin-bottom: 0.75em; text-align: center; } #g-nav-footer li { display: inline; @@ -388,7 +395,8 @@ body { padding: 0 0.75em; } #g-footer-copyright img { - margin: 0 auto; } + margin: 0 auto; + margin-bottom: 0.75em; } .footer { color: #444; @@ -424,7 +432,7 @@ body { /* 7.`Extensible Classes ---------------------------------------------- */ -.group:after, .wrapper:after, #nav-main:after, .schools ul:after { +.group:after, .wrapper:after, #nav-main:after, .page:after, .schools ul:after { content: "."; display: block; height: 0; @@ -592,20 +600,32 @@ body { .section-home { margin-bottom: 1.5em; } -#intro-schools h4 { - padding-bottom: 0.75em; - border-bottom: 1px solid #e5e5e5; } #intro-schools li { - display: inline; - padding: 0.5em; } + display: inline-block; + *display: inline; + *zoom: 1; + vertical-align: middle; + position: relative; + padding: 0.375em 0; + padding-right: 0.75em; } + #intro-schools li:after { + content: ""; + position: absolute; + right: 3px; + top: 50%; + width: 3px; + height: 2px; + background-color: #999; } .link-bar { margin-left: -0.375em; } .link-bar li { - display: inline; } + display: block; + float: left; } .link-bar li.last a { border: 0; } .link-bar a { + display: block; padding: 0 0.375em; border-right: 1px solid #ffcd58; color: #e8a200; } diff --git a/public/assets/css/scss/partials/_modules.scss b/public/assets/css/scss/partials/_modules.scss index 93347fa..90d876b 100644 --- a/public/assets/css/scss/partials/_modules.scss +++ b/public/assets/css/scss/partials/_modules.scss @@ -2,7 +2,8 @@ margin-left: $base/-4; li { - display: inline; + display: block; + float: left; &.last { a { @@ -13,10 +14,12 @@ } a { + display: block; padding: 0 $base/4; border-right: 1px solid $gold; color: $mustard; @extend .small; + @extend .futura-bold; } } diff --git a/public/assets/css/scss/partials/_pages.scss b/public/assets/css/scss/partials/_pages.scss index 78f2c4b..2dbd30b 100644 --- a/public/assets/css/scss/partials/_pages.scss +++ b/public/assets/css/scss/partials/_pages.scss @@ -16,11 +16,11 @@ margin-bottom: $base; } -#intro-text { +#intro-video { @extend .grid-4; } -#intro-video { +#intro-text { @extend .grid-4; } @@ -28,13 +28,23 @@ @extend .grid-8; h4 { - padding-bottom: $base/2; - border-bottom: 1px solid #e5e5e5; } li { - display: inline; - padding: $base/3; - @extend .tiny; + @include inline-block; + position: relative; + padding: $base/4 0; + padding-right: $base/2; + @extend .small; + + &:after { + content: ""; + position: absolute; + right: 3px; + top: 50%; + width: 3px; + height: 2px; + background-color: #999; + } } } diff --git a/public/assets/css/scss/partials/_type.scss b/public/assets/css/scss/partials/_type.scss index f41ac2c..4d252ae 100755 --- a/public/assets/css/scss/partials/_type.scss +++ b/public/assets/css/scss/partials/_type.scss @@ -47,11 +47,17 @@ body { } .tiny { - /* 14px / 18px */ - font-size: #{($font-size*0.75) / $em}em; + /* 11px / 12px */ + font-size: #{($font-size*0.6875) / $em}em; line-height: ($line*0.5) / ($font-size*0.6875) * 1em; } +.mini { + /* 12px / 12px */ + font-size: #{($font-size*0.75) / $em}em; + line-height: ($line*0.5) / ($font-size*0.75) * 1em; +} + .small { /* 14px / 18px */ font-size: #{($font-size*0.875) / $em}em; diff --git a/public/assets/css/scss/screen.scss b/public/assets/css/scss/screen.scss index 14b5e67..ae1a08f 100755 --- a/public/assets/css/scss/screen.scss +++ b/public/assets/css/scss/screen.scss @@ -36,7 +36,7 @@ Please have a look around, I hope you enjoy your stay. s: state ---------------------------------------------------------------- */ -// hello + $blue: #0ca6ff; $dark: #1f1e1c; $gold: #ffcd58; @@ -69,7 +69,7 @@ h3 { } h4 { - @extend .big; + @extend .large; } a { @@ -138,7 +138,7 @@ body { } #g-logo { - @extend .grid-4; + @extend .grid-3; a { display: block; @@ -170,7 +170,7 @@ body { } #nav-main { - @extend .grid-4; + @extend .grid-5; @extend .group; ul { @@ -245,13 +245,15 @@ body { } .page { + @extend .group; + margin-bottom: $base; + border-top: 3px solid $gold; color: #333; } .subheader { @extend .grid-8; padding: $base*2 0; - border-top: 3px solid $gold; text-align: center; h1, h3 { @@ -281,12 +283,13 @@ body { } #g-nav-footer { + margin-bottom: $base/2; text-align: center; li { display: inline; text-align: center; - @extend .tiny; + @extend .mini; } a { @@ -299,6 +302,7 @@ body { img { margin: 0 auto; + margin-bottom: $base/2; } } diff --git a/public/index.html b/public/index.html index 765e9de..446edf8 100644 --- a/public/index.html +++ b/public/index.html @@ -85,30 +85,27 @@
__msg__
+
+ - - - + - + -
-
+

Welcome to FinalsClub.

Collaborate. Learn. Share.

-
-
@@ -153,538 +150,534 @@
-
- - -
-

Universities

-
- - +
+

Universities

+
+ + - -
-

Courses for

-
- -