From 942b79da92ab418897ec5268adb49acee3de1dec Mon Sep 17 00:00:00 2001 From: Jina Bolton Date: Wed, 28 Nov 2012 04:46:51 -0800 Subject: [PATCH] mobile styling first, will add layout stuff back in later --- .../stylesheets/components/_messages.scss | 5 ++-- .../components/_release-information.scss | 16 ++---------- .../components/_sticky_footer.scss | 26 ++++++++++--------- .../dependencies/_measurements.scss | 25 +++++++----------- .../stylesheets/dependencies/_themes.scss | 1 + .../stylesheets/dependencies/_typography.scss | 18 ++++++++----- .../assets/stylesheets/foundation/_code.scss | 6 +++++ .../stylesheets/foundation/_headings.scss | 2 +- .../assets/stylesheets/foundation/_lists.scss | 5 +++- .../assets/stylesheets/foundation/_site.scss | 1 + source/assets/stylesheets/layout/_grid.scss | 13 +++++++--- .../assets/stylesheets/regions/_banner.scss | 10 +++---- .../stylesheets/regions/_navigation.scss | 5 ++-- source/assets/stylesheets/sass.css.scss | 1 + source/index.html.haml | 12 +++++---- source/layouts/shared/_banner.haml | 6 +++-- 16 files changed, 80 insertions(+), 72 deletions(-) create mode 100644 source/assets/stylesheets/foundation/_code.scss diff --git a/source/assets/stylesheets/components/_messages.scss b/source/assets/stylesheets/components/_messages.scss index 866e0ce..45228c2 100644 --- a/source/assets/stylesheets/components/_messages.scss +++ b/source/assets/stylesheets/components/_messages.scss @@ -8,7 +8,8 @@ @extend %callout-theme; padding: .66666666666667em; @include font-size($font-size-large); - text-align: center; + + .container { margin: 0; } p, ul { @@ -19,5 +20,5 @@ } a, - strong { @extend %chaparral-pro-bold; } + strong { @extend %chaparral-pro-semibold; } } \ No newline at end of file diff --git a/source/assets/stylesheets/components/_release-information.scss b/source/assets/stylesheets/components/_release-information.scss index 9de9245..223aaa5 100644 --- a/source/assets/stylesheets/components/_release-information.scss +++ b/source/assets/stylesheets/components/_release-information.scss @@ -4,18 +4,6 @@ .release-information { - @include float-right; - margin-top: .875em; - width: 19.3333333333333em; - text-align: left; - - p, - ul { padding: 0; } - - ul { @extend %horizontal-list; } - - li:last-child { - float: right; - text-align: right; - } + padding: 1em; + @include font-size($font-size, $line-height-alt); } \ No newline at end of file diff --git a/source/assets/stylesheets/components/_sticky_footer.scss b/source/assets/stylesheets/components/_sticky_footer.scss index 9107da4..da07f1c 100644 --- a/source/assets/stylesheets/components/_sticky_footer.scss +++ b/source/assets/stylesheets/components/_sticky_footer.scss @@ -5,18 +5,20 @@ $footer-height: 10.5em; -html, -body { height: 100%; } +@include at-breakpoint(60em) { + html, + body { height: 100%; } -.page { - margin-bottom: -$footer-height; - min-height: 100%; - height: auto !important; - height: 100%; -} + .page { + margin-bottom: -$footer-height; + min-height: 100%; + height: auto !important; + height: 100%; + } -.footer-shim, -.contentinfo { - clear: both; - height: $footer-height; + .footer-shim, + .contentinfo { + clear: both; + height: $footer-height; + } } \ No newline at end of file diff --git a/source/assets/stylesheets/dependencies/_measurements.scss b/source/assets/stylesheets/dependencies/_measurements.scss index 8402061..aff80e4 100644 --- a/source/assets/stylesheets/dependencies/_measurements.scss +++ b/source/assets/stylesheets/dependencies/_measurements.scss @@ -3,14 +3,15 @@ -$base-unit: 4; - -$font-size: 16; -$font-size-large: $font-size * 1.5; -$font-size-larger: $font-size * 3; +$base-unit: 4; -$line-height: 1.5; -$line-height-alt: 1.25; +$font-size: 16; +$font-size-large: $font-size * 1.5; +$font-size-larger: $font-size * 3; + +$line-height: 1.5; +$line-height-alt: 1.25; +$line-height-heading: 1; $baseline: #{$font-size * $line-height}px; @@ -31,13 +32,7 @@ $z-index-modal: 1050 !default; size: #{$size-setting}px; size: #{$size-setting / 10}rem; } - - @if $size-setting == ($font-size-large or $font-size-larger) { - $lead-setting: $line-height-alt; - line-height: $lead-setting; - } - - @else { line-height: $lead-setting; } + line-height: $lead-setting; } @@ -49,5 +44,5 @@ $z-index-modal: 1050 !default; %heading-text { margin: 0; - padding: 1em 0 0; + padding: .75em 0 .25em; } \ No newline at end of file diff --git a/source/assets/stylesheets/dependencies/_themes.scss b/source/assets/stylesheets/dependencies/_themes.scss index d3d851b..b9cb8da 100644 --- a/source/assets/stylesheets/dependencies/_themes.scss +++ b/source/assets/stylesheets/dependencies/_themes.scss @@ -23,6 +23,7 @@ %navigation-theme { background: $navigation-background-color; + color: $navigation-text-color; text-shadow: 0 -1px 1px rgba($black, .5); a { @include link(lighten($navigation-text-color, 5%), lighten($navigation-text-color, 15%), lighten($navigation-text-color, 25%)); } diff --git a/source/assets/stylesheets/dependencies/_typography.scss b/source/assets/stylesheets/dependencies/_typography.scss index 9c2db4a..f655f9e 100644 --- a/source/assets/stylesheets/dependencies/_typography.scss +++ b/source/assets/stylesheets/dependencies/_typography.scss @@ -12,11 +12,13 @@ $serif: Georgia, "Times New Roman", Times, serif !default; +$source-code-pro-regular: "source-code-pro-n4", "source-code-pro", $monospace !default; + $source-sans-pro-regular: "source-sans-pro-n4", "source-sans-pro", $sans-serif !default; $source-sans-pro-bold: "source-sans-pro-n7", "source-sans-pro", $sans-serif !default; - + $chaparral-pro-regular: "chaparral-pro-n4", "chaparral-pro", $serif !default; -$chaparral-pro-bold: "chaparral-pro-n7", "chaparral-pro", $serif !default; +$chaparral-pro-semibold: "chaparral-pro-n6", "chaparral-pro", $serif !default; @@ -36,8 +38,10 @@ $chaparral-pro-bold: "chaparral-pro-n7", "chaparral-pro", $serif ! // --------------------------------------------------------------------------- // FONT PLACEHOLDER SELECTORS FOR @EXTEND'ING -%source-sans-pro-regular { @include font-face($source-sans-pro-regular); } -%source-sans-pro-bold { @include font-face($source-sans-pro-bold, 700); } - -%chaparral-pro-regular { @include font-face($chaparral-pro-regular); } -%chaparral-pro-bold { @include font-face($chaparral-pro-bold, 700); } \ No newline at end of file +%source-code-pro-regular { @include font-face($source-code-pro-regular); } + +%source-sans-pro-regular { @include font-face($source-sans-pro-regular); } +%source-sans-pro-bold { @include font-face($source-sans-pro-bold, 600); } + +%chaparral-pro-regular { @include font-face($chaparral-pro-regular); } +%chaparral-pro-semibold { @include font-face($chaparral-pro-semibold, 600); } \ No newline at end of file diff --git a/source/assets/stylesheets/foundation/_code.scss b/source/assets/stylesheets/foundation/_code.scss new file mode 100644 index 0000000..ef5316b --- /dev/null +++ b/source/assets/stylesheets/foundation/_code.scss @@ -0,0 +1,6 @@ +// =========================================================================== +// CODE + + + +code { @extend %source-code-pro-regular; } \ No newline at end of file diff --git a/source/assets/stylesheets/foundation/_headings.scss b/source/assets/stylesheets/foundation/_headings.scss index ad5ddbf..59e5dda 100644 --- a/source/assets/stylesheets/foundation/_headings.scss +++ b/source/assets/stylesheets/foundation/_headings.scss @@ -10,7 +10,7 @@ h3 { @extend %heading-text; } h1, h3 { @extend %chaparral-pro-regular; - @include font-size($font-size-larger); + @include font-size($font-size-larger, $line-height-heading); letter-spacing: -0.05em; color: $heading-1-text-color; } diff --git a/source/assets/stylesheets/foundation/_lists.scss b/source/assets/stylesheets/foundation/_lists.scss index 4275e38..8fb1877 100644 --- a/source/assets/stylesheets/foundation/_lists.scss +++ b/source/assets/stylesheets/foundation/_lists.scss @@ -17,4 +17,7 @@ -ul { @extend %block-text; } \ No newline at end of file +ul { + @extend %block-text; + list-style-position: inside; +} \ No newline at end of file diff --git a/source/assets/stylesheets/foundation/_site.scss b/source/assets/stylesheets/foundation/_site.scss index f276429..fc938ec 100644 --- a/source/assets/stylesheets/foundation/_site.scss +++ b/source/assets/stylesheets/foundation/_site.scss @@ -14,6 +14,7 @@ html { body { @extend %source-sans-pro-regular; @include font-size; + text-align: center; background-color: transparent; } diff --git a/source/assets/stylesheets/layout/_grid.scss b/source/assets/stylesheets/layout/_grid.scss index db80719..7c8c0e4 100644 --- a/source/assets/stylesheets/layout/_grid.scss +++ b/source/assets/stylesheets/layout/_grid.scss @@ -3,8 +3,15 @@ +// Initial set up is just one column for small phones + +$total-columns: 1; +$column-width: 2.75em; +$gutter-width: 1em; +$grid-padding: $gutter-width; + + + .container { - @extend %clearfix; - margin: 0 auto; - width: 62em; + margin: 0 1em; } \ No newline at end of file diff --git a/source/assets/stylesheets/regions/_banner.scss b/source/assets/stylesheets/regions/_banner.scss index 3375bdb..06716fe 100644 --- a/source/assets/stylesheets/regions/_banner.scss +++ b/source/assets/stylesheets/regions/_banner.scss @@ -5,11 +5,7 @@ .banner { position: relative; - padding: { - top: 1em; - bottom: 1em; - } background: $background-color; -} - -.site-title { @include font-size; } \ No newline at end of file + + h1 { padding: 1em 0; } +} \ No newline at end of file diff --git a/source/assets/stylesheets/regions/_navigation.scss b/source/assets/stylesheets/regions/_navigation.scss index 90f26d4..2e9d739 100644 --- a/source/assets/stylesheets/regions/_navigation.scss +++ b/source/assets/stylesheets/regions/_navigation.scss @@ -5,11 +5,10 @@ .navigation { @extend %navigation-theme; + padding: 1em 0; line-height: $line-height-alt; letter-spacing: .05em; text-transform: uppercase; - - a { @extend %source-sans-pro-bold; } - ul { @extend %horizontal-list; } + a { @extend %source-sans-pro-bold; } } \ No newline at end of file diff --git a/source/assets/stylesheets/sass.css.scss b/source/assets/stylesheets/sass.css.scss index 248707a..59cb74f 100755 --- a/source/assets/stylesheets/sass.css.scss +++ b/source/assets/stylesheets/sass.css.scss @@ -41,6 +41,7 @@ @import "foundation/text"; @import "foundation/lists"; @import "foundation/media"; +@import "foundation/code"; @import "foundation/forms"; diff --git a/source/index.html.haml b/source/index.html.haml index 4562d52..6742c9c 100644 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -10,11 +10,13 @@ title: Sass | Syntactically Awesome Style Sheets %h2 Get up and running quickly with: -.command-line - %h3 Command Line - %p Feel comfortable using a terminal, Ruby & Gems? - = link_to "Command Line Quickstart", '#', :class => 'button' - %span gem install sass +%ul + %li + %h3 Command Line + %p Feel comfortable using a terminal, Ruby & Gems? + %p= link_to "Command Line Quickstart", '#', :class => 'button' + %p + %code gem install sass .gui %h3 GUI Application diff --git a/source/layouts/shared/_banner.haml b/source/layouts/shared/_banner.haml index 101f46f..2d1dee5 100644 --- a/source/layouts/shared/_banner.haml +++ b/source/layouts/shared/_banner.haml @@ -1,12 +1,14 @@ %header.banner(role="banner") - .container - .message.release-information + .message.release-information + .container %p Current Release: %strong Media Mark (3.2.1) %ul %li= link_to "Release Notes", "#" %li= link_to "Fork Sass on Github", "#" + + .container %h1.site-title= link_to image_tag("logo.png", :width => "160", :height => "120", :alt => "Sass"), "/" %nav.navigation(role="navigation")