diff --git a/source/assets/stylesheets/components/_lists.scss.erb b/source/assets/stylesheets/components/_lists.scss.erb index c36d0d4..f733423 100644 --- a/source/assets/stylesheets/components/_lists.scss.erb +++ b/source/assets/stylesheets/components/_lists.scss.erb @@ -35,9 +35,9 @@ @extend %reset-list; margin: 0 auto; - @include breakpoint($screen-small) { - @extend %clear-fix-screen-small; - margin: 0 #{-$gutter-width / 2}; + @include breakpoint($tablet-large) { + @extend %clear-fix-tablet-large; + margin: 0 #{-$gutter-width}; max-width: none; li { diff --git a/source/assets/stylesheets/components/_type.scss b/source/assets/stylesheets/components/_type.scss index 37cfb45..9446b08 100644 --- a/source/assets/stylesheets/components/_type.scss +++ b/source/assets/stylesheets/components/_type.scss @@ -6,6 +6,6 @@ @include breakpoint($tablet-large) { @include font-size-large; - .main & { text-align: left; } + .content-primary & { text-align: left; } } } diff --git a/source/assets/stylesheets/dependencies/_layout.scss.erb b/source/assets/stylesheets/dependencies/_layout.scss.erb index 7eab806..062dac9 100644 --- a/source/assets/stylesheets/dependencies/_layout.scss.erb +++ b/source/assets/stylesheets/dependencies/_layout.scss.erb @@ -1,5 +1,5 @@ // Susy Settings -$container: 80%; +$container: 90%; $gutter-width: <%= data.layout.susy.gutter_width %>; $column-width: <%= data.layout.susy.column_width %>; @@ -11,8 +11,9 @@ $gutter-placement: inside; // Breakpoint Settings $breakpoint-to-ems: true; -<% data.layout.resolutions.each do |resolution| %> +<% data.layout.resolutions.each_with_index do |resolution, index| %> $<%= resolution.target %>: <%= resolution.width %>px; +$<%= resolution.target %>-grid: "(<%= index %> * 2) ($column-width $gutter-width) inside fluid"; <% end %> diff --git a/source/assets/stylesheets/foundation/_forms.scss b/source/assets/stylesheets/foundation/_forms.scss index a0d58a9..7fa7a83 100644 --- a/source/assets/stylesheets/foundation/_forms.scss +++ b/source/assets/stylesheets/foundation/_forms.scss @@ -30,7 +30,7 @@ input, input[type="text"], %button { - @include rhythm-borders(1px, .44); + @include rhythm-borders(1px, .5); display: block; border: { color: $color-border; @@ -44,8 +44,6 @@ input[type="text"], vertical-align: middle; @include breakpoint($mobile-large) { - @include padding-leader(.15); - @include padding-trailer(.125); display: inline-block; width: auto; } @@ -84,6 +82,7 @@ input { @include box-shadow(0 2px 1px $color-shadow); white-space: nowrap; background: $color-background-shade; + vertical-align: middle; cursor: pointer; text-align: center; diff --git a/source/assets/stylesheets/helpers/_grid.scss.erb b/source/assets/stylesheets/helpers/_grid.scss.erb index 6b63167..26e73f1 100644 --- a/source/assets/stylesheets/helpers/_grid.scss.erb +++ b/source/assets/stylesheets/helpers/_grid.scss.erb @@ -5,6 +5,7 @@ <% data.layout.resolutions.each do |resolution| %> @include breakpoint($<%= resolution.target %>) { + @include set-grid($<%= resolution.target %>-grid); @include container; &.toolkit-grid { @include background-grid; } @@ -12,8 +13,6 @@ <% end %> } - - .row { @extend %clear-fix; @include bleed($gutter-width); diff --git a/source/assets/stylesheets/regions/_banner.scss b/source/assets/stylesheets/regions/_banner.scss index c3aeeee..6b7e49a 100644 --- a/source/assets/stylesheets/regions/_banner.scss +++ b/source/assets/stylesheets/regions/_banner.scss @@ -23,9 +23,7 @@ } @include breakpoint($tablet-large) { - display: table-cell; - text-align: left; - vertical-align: middle; + @include span(3); img { height: rhythm(4); } } diff --git a/source/assets/stylesheets/regions/_contentinfo.scss b/source/assets/stylesheets/regions/_contentinfo.scss index 92ddf5d..0e4ee71 100644 --- a/source/assets/stylesheets/regions/_contentinfo.scss +++ b/source/assets/stylesheets/regions/_contentinfo.scss @@ -1,6 +1,6 @@ .contentinfo { - @include padding-leader(2); - @include padding-trailer(2); + @include padding-leader; + @include padding-trailer; color: $color-text-weak; .container { diff --git a/source/assets/stylesheets/regions/_navigation.scss b/source/assets/stylesheets/regions/_navigation.scss index d28b489..6790c08 100644 --- a/source/assets/stylesheets/regions/_navigation.scss +++ b/source/assets/stylesheets/regions/_navigation.scss @@ -13,8 +13,8 @@ @include padding-trailer(.5); display: block; padding: { - right: $gutter-width; - left: $gutter-width; + right: $gutter-width * 2; + left: $gutter-width * 2; } background: mix($color-background, $color-background-shade); @@ -31,46 +31,40 @@ ul { @extend %clear-fix-tablet-small; } li { - float: left; - width: 50%; + @include span(6); - &:nth-child(odd) { - clear: both; - padding-right: $gutter-width / 2; - } - - &:nth-child(even) { padding-left: $gutter-width / 2; } + &:nth-child(odd) { @include omega; } } } @include breakpoint($tablet-large) { - @extend %table-layout-cell-tablet-large; - margin: 0; - padding: 0; - text-align: right; + @include span(9 omega); background: none; - &.collapse { display: table-cell !important; } + &.collapse { display: block !important; } ul { - display: inline-block; - margin: 0 #{-$gutter-width} 0 $gutter-width; + margin: 0; + max-width: none; + white-space: nowrap; + text-align: right; } li { + float: none; + display: inline-block; margin: { - right: $gutter-width; + right: 0; + left: $gutter-width * 2; bottom: 0; } width: auto; &:nth-child(odd) { - clear: none; - padding-right: 0; + float: none; + margin-right: 0; } - &:nth-child(even) { padding-left: 0; } - &:last-child { margin-right: 0; } } diff --git a/source/assets/stylesheets/regions/_section-bottom.scss b/source/assets/stylesheets/regions/_section-bottom.scss index 16ee9d6..2faa5b8 100644 --- a/source/assets/stylesheets/regions/_section-bottom.scss +++ b/source/assets/stylesheets/regions/_section-bottom.scss @@ -1,5 +1,5 @@ .section-bottom { @include padding-leader; - @include padding-trailer(2); + @include padding-trailer; @include background(linear-gradient(mix($color-background-shade, $color-background), transparent)); } diff --git a/source/index.html.haml b/source/index.html.haml index 02e109c..fda99da 100644 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -5,7 +5,6 @@ layout: layout_1_column --- %p.introduction - = link_to "Heya", "#", class: "button primary" Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. @@ -14,24 +13,32 @@ layout: layout_1_column %li %h3 CSS Compatible %p - Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. + Sass is completely compatible with all versions of CSS. We take this + compatibility seriously, so that you can seamlessly use any available + CSS libraries. %li %h3 Feature Rich %p - Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has worked endlessly to not only keep up, but stay ahead. + Sass boasts more features and abilities than any other CSS extension + language out there. The Sass Core Team has worked endlessly to not + only keep up, but stay ahead. %li %h3 Mature %p Sass has been actively supported for = time_ago_in_words DateTime.parse("Tue Nov 28 19:43:58 2006 +0000") - by its loving Core Team. + by its loving Core Team. %li %h3 Industry Approved %p - Over and over again, the industry is choosing Sass as the premier CSS extension languages. It's so true that we feel a little bad for the upstarts. + Over and over again, the industry is choosing Sass as the premier CSS + extension languages. It's so true that we feel a little bad for + the upstarts. %li %h3 Large Community - %p Sass is actively supported and developed by a consortium of several tech companies and hundreds of developers. + %p + Sass is actively supported and developed by a consortium of several + tech companies and hundreds of developers. %li %h3 Frameworks %p @@ -42,11 +49,12 @@ layout: layout_1_column = link_to "Bourbon", "http://bourbon.io/" and = link_to "Susy", "http://susy.oddbird.net/" - just to name a few. + just to name a few. %li %h3 Training %p - There is a huge amount of training and support available for Sass. No HTML/CSS education is complete without learning Sass. + There is a huge amount of training and support available for Sass. No + HTML/CSS education is complete without learning Sass. - content_for :complementary do .get-started @@ -55,30 +63,3 @@ layout: layout_1_column %li= link_to "Install Sass", "install" %li= link_to "Learn Sass", "guide" %li= link_to "Get Involved", "community" - - - - - - -- content_for :section_2 do - .message.current-release - .container - %dl - %dt Current Release: - %dd Media Mark (3.2.1) - :markdown - * [Release Notes](#) - * [Fork Sass on Github](#) - -- content_for :section_2 do - .message.current-release - .container - %dl - %dt Current Release: - %dd Media Mark (3.2.1) - :markdown - * [Release Notes](#) - * [Fork Sass on Github](#) - - diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml index 79b04dc..7d5b479 100644 --- a/source/layouts/layout.haml +++ b/source/layouts/layout.haml @@ -25,7 +25,7 @@ .container :markdown * Current Release: - Media Mark (3.2.1) + Maptastic Maple (3.3.0) * [Release Notes](http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html) * [Fork Sass on Github](https://github.com/nex3/sass) diff --git a/source/layouts/regions/_contentinfo.haml b/source/layouts/regions/_contentinfo.haml index 2419d59..1a63bd1 100644 --- a/source/layouts/regions/_contentinfo.haml +++ b/source/layouts/regions/_contentinfo.haml @@ -6,7 +6,7 @@ :markdown Sass © 2006–2013 [Hampton Catlin](#), [Nathan Weizenbaum](#), - [Chris Eppstein](http://chriseppstein.github.io/), + [Chris Eppstein](http://chriseppstein.github.io/), and numerous contributors. It is available for use and modification under the