From 7ed50fe0a0affbc358a4c6d2de262dca1f03ba4d Mon Sep 17 00:00:00 2001 From: Eric Meyer Date: Sat, 8 Feb 2014 17:43:18 -0700 Subject: [PATCH] Update everything --- Gemfile | 8 +- Gemfile.lock | 30 ++--- config.rb | 2 +- content/config.yml | 66 +++++++-- content/static/css/demos/demos.css | 119 ++++++++--------- content/static/css/demos/grid-types.css | 43 +++--- content/static/css/screen.css | 169 +++++++++++------------- output | 2 +- sass/_requirements.scss | 2 +- sass/_toolkit.scss | 11 -- sass/base/_links.scss | 2 +- sass/base/_root.scss | 3 +- sass/base/_type.scss | 4 + sass/demos/demos.scss | 2 +- sass/demos/grid-types.scss | 3 +- sass/modules/_division.scss | 17 +-- sass/modules/_nav.scss | 5 + sass/modules/_release.scss | 2 +- sass/modules/_screenshots.scss | 6 +- sass/settings/_fonts.scss | 57 +++++--- sass/toolkit/_a11y.scss | 14 -- sass/toolkit/_arrow.scss | 41 ------ sass/toolkit/_color.scss | 67 ---------- sass/toolkit/_fontface.scss | 111 ---------------- sass/toolkit/_icons.scss | 40 ------ sass/toolkit/_maps.scss | 88 ------------ sass/toolkit/_scale.scss | 64 --------- sass/toolkit/_settings.scss | 17 --- sass/toolkit/_toggle.scss | 7 - templates/_atoms.html | 2 +- templates/layout/_contentinfo.html | 34 ++--- 31 files changed, 304 insertions(+), 734 deletions(-) delete mode 100644 sass/_toolkit.scss delete mode 100644 sass/toolkit/_a11y.scss delete mode 100644 sass/toolkit/_arrow.scss delete mode 100644 sass/toolkit/_color.scss delete mode 100644 sass/toolkit/_fontface.scss delete mode 100644 sass/toolkit/_icons.scss delete mode 100644 sass/toolkit/_maps.scss delete mode 100644 sass/toolkit/_scale.scss delete mode 100644 sass/toolkit/_settings.scss delete mode 100644 sass/toolkit/_toggle.scss diff --git a/Gemfile b/Gemfile index b747896..7531b7a 100644 --- a/Gemfile +++ b/Gemfile @@ -1,7 +1,7 @@ source "http://rubygems.org" -gem "sass", "~> 3.3.0.rc.2" -gem "compass", "~> 1.0.0.alpha.17" -gem "susy", "~> 2.0.0.beta.3" +gem "sass", "~> 3.3.0.rc.3" +gem "compass", "~> 1.0.0.alpha.18" +gem "susy", "~> 2.0.0.rc.1" +gem "accoutrement", "~> 0.1.5" gem "breakpoint", "~> 2.4.1" -gem "true", "~> 0.2.0.rc.4" diff --git a/Gemfile.lock b/Gemfile.lock index 8568a36..c531a6d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,21 +1,24 @@ GEM remote: http://rubygems.org/ specs: + accoutrement (0.1.5) + compass (~> 1.0.0.alpha.17) + sass (~> 3.3.0.rc.1) breakpoint (2.4.1) compass (~> 1.0.0.alpha.13) sass (~> 3.3.0.rc.2) sassy-maps (< 1.0.0) chunky_png (1.2.9) - compass (1.0.0.alpha.17) + compass (1.0.0.alpha.18) chunky_png (~> 1.2) - compass-core (~> 1.0.0.alpha.16) - compass-import-once (~> 1.0.1) + compass-core (~> 1.0.0.alpha.17) + compass-import-once (~> 1.0.2) json listen (~> 1.1.0) - sass (~> 3.3.0.rc.1) - compass-core (1.0.0.alpha.16) + sass (~> 3.3.0.rc.3) + compass-core (1.0.0.alpha.17) multi_json (~> 1.0) - sass (>= 3.3.rc.1) + sass (>= 3.3.rc.3) compass-import-once (1.0.2) ffi (1.9.3) json (1.8.1) @@ -29,22 +32,19 @@ GEM ffi (>= 0.5.0) rb-kqueue (0.2.0) ffi (>= 0.5.0) - sass (3.3.0.rc.2) - listen (~> 1.1.0) + sass (3.3.0.rc.3) sassy-maps (0.3.1) compass (~> 1.0.0.alpha.13) sass (~> 3.3.0.rc.2) - susy (2.0.0.beta.3) - sass (~> 3.3.0.rc.1) - true (0.2.0.rc.4) + susy (2.0.0.rc.1) sass (~> 3.3.0.rc.1) PLATFORMS ruby DEPENDENCIES + accoutrement (~> 0.1.5) breakpoint (~> 2.4.1) - compass (~> 1.0.0.alpha.17) - sass (~> 3.3.0.rc.2) - susy (~> 2.0.0.beta.3) - true (~> 0.2.0.rc.4) + compass (~> 1.0.0.alpha.18) + sass (~> 3.3.0.rc.3) + susy (~> 2.0.0.rc.1) diff --git a/config.rb b/config.rb index 84e4989..b855013 100644 --- a/config.rb +++ b/config.rb @@ -2,7 +2,7 @@ require "susy" require "breakpoint" -require "true" +require "accoutrement" project_type = :stand_alone # Set this to the root of your project when deployed: diff --git a/content/config.yml b/content/config.yml index 51e0f87..14c523f 100644 --- a/content/config.yml +++ b/content/config.yml @@ -12,8 +12,8 @@ versions: notes: 'https://github.com/ericam/susy/blob/master/CHANGELOG.mkdn' code: 'https://github.com/ericam/susy/' - title: Beta Release - gem: 'https://rubygems.org/gems/susy/versions/2.0.0.beta.3' - number: 2.0.0.beta.3 + gem: 'https://rubygems.org/gems/susy/versions/2.0.0.rc.1' + number: 2.0.0.rc.1 notes: 'http://susydocs.oddbird.net/en/latest/changelog/' @@ -50,25 +50,75 @@ intro: # Screenshots screenshots: - image: /static/screenshots/sasslang.jpg - alt: Sass + alt: 'Sass' target: http://sass-lang.com/ - image: /static/screenshots/smithsonian.jpg - alt: Smithsonian + alt: 'Smithsonian' target: http://smithsonian.com/ - image: /static/screenshots/squaremarket.jpg - alt: Square Market + alt: 'Square Market' target: http://squareup.com/market - image: /static/screenshots/slickbag.jpg - alt: Slickbag + alt: 'Slickbag' target: http://slickbag.se/ - image: /static/screenshots/viggle.jpg - alt: Viggle + alt: 'Viggle' target: http://viggle.com/ - image: /static/screenshots/avoidpaydayloans.jpg - alt: Avoid Payday Loans + alt: 'Avoid Payday Loans' target: http://avoidpaydayloans.com/ +# Credits +credit: + - name: 'Tsachi Schlidor' + url: http://twitter.com/shlidor + - name: 'Aaron Gray' + url: http://twitter.com/mragray + - name: 'Jina Bolton' + url: http://twitter.com/jina + - name: 'Danny Palmer' + url: http://twitter.com/dannyprose + - name: 'Rachel Nabors' + url: http://twitter.com/rachelnabors + - name: 'Sam Richard' + url: http://twitter.com/snugug + - name: 'Scott Kellum' + url: http://twitter.com/scottkellum + - name: 'Mason Wendell' + url: http://twitter.com/codingdesigner + - name: 'many others' + url: https://github.com/ericam/susy/graphs/contributors + + +# Colophon +colophon: + - name: 'GitHub' + url: https://github.com/ericam/susysite + - name: 'rstBlog' + url: http://github.com/mitsuhiko/rstblog/ + - name: 'Python' + url: http://www.python.org/ + - name: 'Jinja' + url: http://jinja.pocoo.org/ + - name: 'Compass' + url: http://compass-style.org/ + - name: 'Sass' + url: http://sass-lang.com + - name: 'Susy' + url: http://susy.oddbird.net + - name: 'Breakpoint' + url: http://breakpoint-sass.com + - name: 'Pygments' + url: http://pygments.org/ + - name: 'IcoMoon' + url: http://icomoon.io + - name: 'Source Sans Pro' + url: https://github.com/adobe/source-sans-pro + - name: 'Source Code Pro' + url: https://github.com/adobe/source-code-pro + + # Settings active_modules: [pygments_simple, tags, blog, wrap, typogrify] author: Eric A. Meyer diff --git a/content/static/css/demos/demos.css b/content/static/css/demos/demos.css index b260b9e..18d95ff 100644 --- a/content/static/css/demos/demos.css +++ b/content/static/css/demos/demos.css @@ -1,19 +1,5 @@ @charset "UTF-8"; -[data-icon] { - font-family: 'susy'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - text-decoration: none; - line-height: 1; - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.a11y-hidden, [id="toggle-nav"] { +.is-hidden, [id="toggle-nav"] { position: absolute; height: 1px; width: 1px; @@ -21,6 +7,15 @@ clip: rect(1px, 1px, 1px, 1px); } +.content::after, .content::before, .foot::after, .foot::before { + content: " "; + position: absolute; + height: 0; + width: 0; + border: solid transparent; + pointer-events: none; +} + @font-face { font-family: "SourceSansPro"; src: url('../../fonts/sans/sourcesanspro-regular-webfont.woff?1386694649') format("woff"), url('../../fonts/sans/sourcesanspro-regular-webfont.ttf?1386694649') format("truetype"); @@ -94,22 +89,35 @@ html { line-height: 1.38889em; } -*, *:before, *:after { +*, *::before, *::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } +[data-icon] { + font-family: susy; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + text-decoration: none; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +[data-icon]::before { + content: attr(data-icon); +} + html { padding-top: 0.69444rem; background: white; color: #666666; } -[data-icon]:before { - content: attr(data-icon); -} - [data-icon='github']:before { content: "\e600"; } @@ -303,9 +311,6 @@ a:hover, a:focus, a:active { [data-nav]:link, [data-nav]:visited { text-decoration: none; } -[data-nav][href^='http://']:hover [data-icon]:before, [data-nav][href^='http://']:focus [data-icon]:before, [data-nav][href^='http://']:active [data-icon]:before { - content: "\e319"; -} @media (min-width: 36em) { [data-nav] { display: inline-block; @@ -316,40 +321,32 @@ a:hover, a:focus, a:active { clear: both; border-top-width: 0.5rem; border-top-style: solid; - padding-top: 4.36111rem; + padding-top: 3.66667rem; position: relative; border-color: #ff0080; background: white; } -.content:before { - position: absolute; - content: ' '; - height: 0; - width: 0; - border: 2.08333rem solid transparent; - border-bottom-width: 0; - border-top-color: #ff0080; - margin-left: -2.08333rem; +.content::after { + border-top: 1.38889rem solid white; + border-left-width: 1.38889rem; + border-right-width: 1.38889rem; + margin-top: -9px; } -.content:after { - position: absolute; - content: ' '; - height: 0; - width: 0; - border: 1.38889rem solid transparent; - border-bottom-width: 0; - border-top-color: white; - margin-left: -1.38889rem; +.content::before { + border-top: 1.38889rem solid #ff0080; + border-left-width: 1.38889rem; + border-right-width: 1.38889rem; } -.content:before, .content:after { +.content::before, .content::after { + top: 0; left: 50%; - top: -9px; + margin-left: -1.38889rem; } .foot { border-top-width: 0.5rem; border-top-style: solid; - padding-top: 4.36111rem; + padding-top: 3.66667rem; position: relative; border-color: deepskyblue; border-bottom-width: 0.5rem; @@ -359,29 +356,21 @@ a:hover, a:focus, a:active { padding-bottom: 0.69444rem; background-color: #ccf2ff; } -.foot:before { - position: absolute; - content: ' '; - height: 0; - width: 0; - border: 2.08333rem solid transparent; - border-bottom-width: 0; - border-top-color: deepskyblue; - margin-left: -2.08333rem; +.foot::after { + border-top: 1.38889rem solid white; + border-left-width: 1.38889rem; + border-right-width: 1.38889rem; + margin-top: -9px; } -.foot:after { - position: absolute; - content: ' '; - height: 0; - width: 0; - border: 1.38889rem solid transparent; - border-bottom-width: 0; - border-top-color: white; - margin-left: -1.38889rem; +.foot::before { + border-top: 1.38889rem solid deepskyblue; + border-left-width: 1.38889rem; + border-right-width: 1.38889rem; } -.foot:before, .foot:after { +.foot::before, .foot::after { + top: 0; left: 50%; - top: -9px; + margin-left: -1.38889rem; } [role="contentinfo"] { diff --git a/content/static/css/demos/grid-types.css b/content/static/css/demos/grid-types.css index fad0211..44a91af 100644 --- a/content/static/css/demos/grid-types.css +++ b/content/static/css/demos/grid-types.css @@ -55,21 +55,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, display: block; } -[data-icon], .content [href^="http"]:link:before, .content [href^="http"]:visited:before { - font-family: 'susy'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - text-decoration: none; - line-height: 1; - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.a11y-hidden { +.is-hidden { position: absolute; height: 1px; width: 1px; @@ -160,16 +146,29 @@ html { box-sizing: border-box; } +[data-icon], .content [href^="http"]:link::before, .content [href^="http"]:visited::before { + font-family: susy; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + text-decoration: none; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +[data-icon]::before { + content: attr(data-icon); +} + html { padding-top: 0.69444rem; background: white; color: #666666; } -[data-icon]:before { - content: attr(data-icon); -} - [data-icon='github']:before { content: "\e600"; } @@ -262,7 +261,7 @@ a:hover, a:focus, a:active { .content [href^="http"]:link, .content [href^="http"]:visited { white-space: nowrap; } -.content [href^="http"]:link:before, .content [href^="http"]:visited:before { +.content [href^="http"]:link::before, .content [href^="http"]:visited::before { content: "\e319"; font-size: 0.66667rem; line-height: 1.38889rem; @@ -439,8 +438,8 @@ a:hover, a:focus, a:active { #the-fluid-grid { *zoom: 1; width: 80%; - padding-left: 10px; - padding-right: 10px; + padding-left: 0.55556rem; + padding-right: 0.55556rem; margin-left: auto; margin-right: auto; } diff --git a/content/static/css/screen.css b/content/static/css/screen.css index e9b8d0c..7c6ec79 100644 --- a/content/static/css/screen.css +++ b/content/static/css/screen.css @@ -55,21 +55,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, display: block; } -[data-icon], [role="main"] [href^="http"]:link:before, [role="main"] [href^="http"]:visited:before { - font-family: 'susy'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - text-decoration: none; - line-height: 1; - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.a11y-hidden, [id="toggle-nav"], .release-info h2 { +.is-hidden, [id="toggle-nav"], .release-info h2 { position: absolute; height: 1px; width: 1px; @@ -77,6 +63,15 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, clip: rect(1px, 1px, 1px, 1px); } +.content::after, .content::before, .foot::after, .foot::before { + content: " "; + position: absolute; + height: 0; + width: 0; + border: solid transparent; + pointer-events: none; +} + @font-face { font-family: "SourceSansPro"; src: url('../fonts/sans/sourcesanspro-regular-webfont.woff?1386694649') format("woff"), url('../fonts/sans/sourcesanspro-regular-webfont.ttf?1386694649') format("truetype"); @@ -154,22 +149,35 @@ html { line-height: 1.38889em; } -*, *:before, *:after { +*, *::before, *::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } +[data-icon], [role="main"] [href^="http"]:link::before, [role="main"] [href^="http"]:visited::before { + font-family: susy; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + text-decoration: none; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +[data-icon]::before { + content: attr(data-icon); +} + html { padding-top: 0.69444rem; background: white; color: #666666; } -[data-icon]:before { - content: attr(data-icon); -} - [data-icon='github']:before { content: "\e600"; } @@ -262,7 +270,7 @@ a:hover, a:focus, a:active { [role="main"] [href^="http"]:link, [role="main"] [href^="http"]:visited { white-space: nowrap; } -[role="main"] [href^="http"]:link:before, [role="main"] [href^="http"]:visited:before { +[role="main"] [href^="http"]:link::before, [role="main"] [href^="http"]:visited::before { content: "\e319"; font-size: 0.66667rem; line-height: 1.38889rem; @@ -337,7 +345,6 @@ a:hover, a:focus, a:active { } [role="main"] > section, .contents { - *zoom: 1; clear: both; padding-left: 0.52083rem; padding-right: 0.52083rem; @@ -347,17 +354,16 @@ a:hover, a:focus, a:active { margin-bottom: 2.77778rem; border-color: #e5e5e5; } -[role="main"] > section:after, .contents:after { +[role="main"] > section::after, .contents::after { content: " "; display: block; clear: both; } .gallery { - *zoom: 1; margin-bottom: 1.38889rem; } -.gallery:after { +.gallery::after { content: " "; display: block; clear: both; @@ -553,9 +559,6 @@ a:hover, a:focus, a:active { [data-nav]:link, [data-nav]:visited { text-decoration: none; } -[data-nav][href^='http://']:hover [data-icon]:before, [data-nav][href^='http://']:focus [data-icon]:before, [data-nav][href^='http://']:active [data-icon]:before { - content: "\e319"; -} @media (min-width: 36em) { [data-nav] { display: inline-block; @@ -566,43 +569,34 @@ a:hover, a:focus, a:active { clear: both; border-top-width: 0.5rem; border-top-style: solid; - padding-top: 4.36111rem; + padding-top: 3.66667rem; position: relative; border-color: #ff0080; background: white; } -.content:before { - position: absolute; - content: ' '; - height: 0; - width: 0; - border: 2.08333rem solid transparent; - border-bottom-width: 0; - border-top-color: #ff0080; - margin-left: -2.08333rem; +.content::after { + border-top: 1.38889rem solid white; + border-left-width: 1.38889rem; + border-right-width: 1.38889rem; + margin-top: -9px; } -.content:after { - position: absolute; - content: ' '; - height: 0; - width: 0; - border: 1.38889rem solid transparent; - border-bottom-width: 0; - border-top-color: white; - margin-left: -1.38889rem; +.content::before { + border-top: 1.38889rem solid #ff0080; + border-left-width: 1.38889rem; + border-right-width: 1.38889rem; } -.content:before, .content:after { +.content::before, .content::after { + top: 0; left: 50%; - top: -9px; + margin-left: -1.38889rem; } [role="main"] { - *zoom: 1; max-width: 40em; margin-left: auto; margin-right: auto; } -[role="main"]:after { +[role="main"]::after { content: " "; display: block; clear: both; @@ -611,7 +605,7 @@ a:hover, a:focus, a:active { .foot { border-top-width: 0.5rem; border-top-style: solid; - padding-top: 4.36111rem; + padding-top: 3.66667rem; position: relative; border-color: deepskyblue; border-bottom-width: 0.5rem; @@ -621,29 +615,21 @@ a:hover, a:focus, a:active { padding-bottom: 0.69444rem; background-color: #ccf2ff; } -.foot:before { - position: absolute; - content: ' '; - height: 0; - width: 0; - border: 2.08333rem solid transparent; - border-bottom-width: 0; - border-top-color: deepskyblue; - margin-left: -2.08333rem; +.foot::after { + border-top: 1.38889rem solid white; + border-left-width: 1.38889rem; + border-right-width: 1.38889rem; + margin-top: -9px; } -.foot:after { - position: absolute; - content: ' '; - height: 0; - width: 0; - border: 1.38889rem solid transparent; - border-bottom-width: 0; - border-top-color: white; - margin-left: -1.38889rem; +.foot::before { + border-top: 1.38889rem solid deepskyblue; + border-left-width: 1.38889rem; + border-right-width: 1.38889rem; } -.foot:before, .foot:after { +.foot::before, .foot::after { + top: 0; left: 50%; - top: -9px; + margin-left: -1.38889rem; } [role="contentinfo"] { @@ -727,26 +713,26 @@ a:hover, a:focus, a:active { padding-top: 0.34722rem; padding-bottom: 0.34722rem; margin-bottom: 0.69444rem; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; margin-right: -5.55556rem; margin-left: -5.55556rem; padding-right: 6.07639rem; padding-left: 6.07639rem; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; border-radius: 0.34722rem; background: deepskyblue; color: white; text-shadow: 0 1px 0 rgba(0, 95, 127, 0.5); } .version + .version { + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; margin-right: -2.77778rem; margin-left: -2.77778rem; padding-right: 3.29861rem; padding-left: 3.29861rem; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; background: #7fdfff; } @@ -808,11 +794,9 @@ a:hover, a:focus, a:active { -o-transform-origin: 100% 0; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; - -moz-transform: scale(1.3, 1.3); - -ms-transform: scale(1.3, 1.3); - -o-transform: scale(1.3, 1.3); - -webkit-transform: scale(1.3, 1.3); - transform: scale(1.3, 1.3); + -moz-transform: scale3d(1.3, 1.3, 0); + -webkit-transform: scale3d(1.3, 1.3, 0); + transform: scale3d(1.3, 1.3, 0); } .screenshots > a:after { position: absolute; @@ -824,11 +808,9 @@ a:hover, a:focus, a:active { -o-transition: all 150ms ease-out; -webkit-transition: all 150ms ease-out; transition: all 150ms ease-out; - -moz-transform: translateX(102%); - -ms-transform: translateX(102%); - -o-transform: translateX(102%); - -webkit-transform: translateX(102%); - transform: translateX(102%); + -moz-transform: translate3d(102%, 0, 0); + -webkit-transform: translate3d(102%, 0, 0); + transform: translate3d(102%, 0, 0); font-size: 0.77778rem; line-height: 1.38889rem; content: attr(data-title); @@ -850,11 +832,9 @@ a:hover, a:focus, a:active { transform: scale(1, 1); } .screenshots > a:hover:after, .screenshots > a:focus:after, .screenshots > a:active:after { - -moz-transform: translateX(0); - -ms-transform: translateX(0); - -o-transform: translateX(0); - -webkit-transform: translateX(0); - transform: translateX(0); + -moz-transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; } @media (min-width: 35em) { @@ -865,10 +845,9 @@ a:hover, a:focus, a:active { @media (min-width: 35em) { #everyone ul { - *zoom: 1; margin: 0 -0.52083rem; } - #everyone ul:after { + #everyone ul::after { content: " "; display: block; clear: both; diff --git a/output b/output index 89815df..0d5fc09 160000 --- a/output +++ b/output @@ -1 +1 @@ -Subproject commit 89815df1f33abf7b1168d7848baa890fc68c0ab8 +Subproject commit 0d5fc091940479381065f9a16054b9566458f324 diff --git a/sass/_requirements.scss b/sass/_requirements.scss index 919f01f..17609ea 100644 --- a/sass/_requirements.scss +++ b/sass/_requirements.scss @@ -4,5 +4,5 @@ @import "compass"; @import "compass/layout"; @import "susy"; +@import "accoutrement"; @import "breakpoint"; -@import "toolkit"; diff --git a/sass/_toolkit.scss b/sass/_toolkit.scss deleted file mode 100644 index 92f0e7f..0000000 --- a/sass/_toolkit.scss +++ /dev/null @@ -1,11 +0,0 @@ -// Toolkit -// ======= - -@import "toolkit/settings"; -@import "toolkit/color"; -@import "toolkit/fontface"; -@import "toolkit/scale"; -@import "toolkit/icons"; -@import "toolkit/a11y"; -@import "toolkit/toggle"; -@import "toolkit/arrow"; diff --git a/sass/base/_links.scss b/sass/base/_links.scss index 4f9e3ab..73b3659 100644 --- a/sass/base/_links.scss +++ b/sass/base/_links.scss @@ -9,7 +9,7 @@ @function link( $selector: link ) { - @return get(link-selectors $selector); + @return get(link-selectors, $selector); } @mixin link( diff --git a/sass/base/_root.scss b/sass/base/_root.scss index 6d0b798..17cc72c 100644 --- a/sass/base/_root.scss +++ b/sass/base/_root.scss @@ -6,6 +6,7 @@ $grid-background-baseline-color: rgba(black, .125); @include fonts; @include establish-baseline; @include border-box-sizing; +@include icon-placeholder(susy); html { @extend %sans; @@ -14,4 +15,4 @@ html { color: $text-color; } -@include icons; +@include data-icons; diff --git a/sass/base/_type.scss b/sass/base/_type.scss index 8bfcb08..ee1bcce 100644 --- a/sass/base/_type.scss +++ b/sass/base/_type.scss @@ -70,3 +70,7 @@ @extend %amp; font-style: normal !important; } + +.is-hidden { + @extend %is-hidden; +} diff --git a/sass/demos/demos.scss b/sass/demos/demos.scss index a92f89f..fa487a1 100644 --- a/sass/demos/demos.scss +++ b/sass/demos/demos.scss @@ -3,9 +3,9 @@ @import "compass"; @import "susy"; +@import "accoutrement"; @import "breakpoint"; -@import "toolkit"; @import "settings"; @import "base"; @import "modules/division"; diff --git a/sass/demos/grid-types.scss b/sass/demos/grid-types.scss index 355ba50..07606a4 100644 --- a/sass/demos/grid-types.scss +++ b/sass/demos/grid-types.scss @@ -5,10 +5,9 @@ @import "compass"; @import "susyone"; +@import "accoutrement"; @import "breakpoint"; -@import "toolkit/maps"; -@import "toolkit"; @import "settings"; @import "base"; diff --git a/sass/modules/_division.scss b/sass/modules/_division.scss index cb23d1b..409e426 100644 --- a/sass/modules/_division.scss +++ b/sass/modules/_division.scss @@ -2,28 +2,25 @@ // ======== $section-border: xxxsmall; -$section-arrow-size: 1.5; +$section-arrow-size: 1; @mixin section-arrow( $color, $size: $section-arrow-size, $border: $section-border ) { - $small: $size - .5; - @include leading-border(size($border), $size + 2); position: relative; border-color: $color; - @include arrow(before down rhythm($size) $color) { - margin-left: rhythm(- $size); - } - @include arrow(after down rhythm($small) $bg-color) { - margin-left: rhythm(- $small); + @include arrow(rhythm($size) down $bg-color, after, $root: null) { + margin-top: - size($border); } + @include arrow(rhythm($size) down $color, before, $root: null); - &:before, &:after { + &::before, &::after { + top: 0; left: 50%; - top: - size($border); + margin-left: rhythm(- ($size)); } } diff --git a/sass/modules/_nav.scss b/sass/modules/_nav.scss index 6627b15..7321ccb 100644 --- a/sass/modules/_nav.scss +++ b/sass/modules/_nav.scss @@ -3,6 +3,11 @@ $nav-medium: 36em; +@mixin toggle { + @extend %is-hidden; + &:checked { @content } +} + [role="navigation"] { @include padding-leader(.5); diff --git a/sass/modules/_release.scss b/sass/modules/_release.scss index 16651b5..6d89560 100644 --- a/sass/modules/_release.scss +++ b/sass/modules/_release.scss @@ -5,7 +5,7 @@ @include trailer(2); h2 { - @extend %a11y-hidden; + @extend %is-hidden; margin: 0; } diff --git a/sass/modules/_screenshots.scss b/sass/modules/_screenshots.scss index 0240946..f2a046e 100644 --- a/sass/modules/_screenshots.scss +++ b/sass/modules/_screenshots.scss @@ -14,13 +14,13 @@ $screenshot-ratio: 598/1000; @include stretch; @include transition(all 100ms ease-in); @include transform-origin(100%, 0); - @include scale(1.3); + @include scale3d(1.3, 1.3, 0); } &:after { @include stretch(-2px, -2px, -2px, 22.5%); @include transition(all 150ms ease-out); - @include translateX(102%); + @include translate3d(102%, 0, 0); @include font-size(xsmall); content: attr(data-title); overflow: hidden; @@ -37,7 +37,7 @@ $screenshot-ratio: 598/1000; @include focus { img { @include scale(1); } &:after { - @include translateX(0); + @include translate3d(0, 0, 0); opacity: 1; } } diff --git a/sass/settings/_fonts.scss b/sass/settings/_fonts.scss index 42666c9..279784d 100644 --- a/sass/settings/_fonts.scss +++ b/sass/settings/_fonts.scss @@ -1,21 +1,46 @@ // Font Settings // ============= + +@function sans-path($value) { @return 'sans/sourcesanspro-#{$value}-webfont'; } +@function code-path($value) { @return 'code/sourcecodepro-#{$value}-webfont'; } + +@function font-styles($group, $styles...) { + $_return: (); + $_value: null; + + @each $style in $styles { + @if length($style) == 2 { + $_value: nth($style, 1) + nth($style, 2); + } @else { + $_value: $style; + } + + @if $group == sans { + $_value: sans-path($_value); + } @else if $group == code { + $_value: code-path($_value); + } + + $_return: map-merge($_return, ($style: $_value)); + } + + @return $_return; +} + + +// Fonts +// ----- + $fonts: ( + sans: ( name: SourceSansPro, type: sans-serif, stack: ( "Helvetica Neue", Helvetica, Arial, ), - files: ( - normal: 'sans/sourcesanspro-regular-webfont', - bold: 'sans/sourcesanspro-bold-webfont', - light: 'sans/sourcesanspro-light-webfont', - italic: 'sans/sourcesanspro-italic-webfont', - bold italic: 'sans/sourcesanspro-bolditalic-webfont', - light italic: 'sans/sourcesanspro-lightitalic-webfont', - ), + files: font-styles(sans, regular, bold, light, italic, bold italic, light italic), ), code: ( @@ -25,10 +50,7 @@ $fonts: ( Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", ), - files: ( - normal: 'code/sourcecodepro-regular-webfont', - bold: 'code/sourcecodepro-bold-webfont', - ), + files: font-styles(code, regular, bold), ), amp: ( @@ -37,15 +59,14 @@ $fonts: ( stack: ( Baskerville, Palatino, Cambria, Georgia, ), - files: ( - normal: 'amp/Baskerville-amp-webfont', - ), + files: (regular: 'amp/Baskerville-amp-webfont'), ), susy: ( name: susy, - files: ( - normal: 'icons/susy', - ), + files: (regular: 'icons/susy'), ), + ); + +@include set(fonts, $fonts); diff --git a/sass/toolkit/_a11y.scss b/sass/toolkit/_a11y.scss deleted file mode 100644 index 58f4c49..0000000 --- a/sass/toolkit/_a11y.scss +++ /dev/null @@ -1,14 +0,0 @@ -// A11y -// ==== - -%a11y-hidden { - position: absolute; - height: 1px; - width: 1px; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); -} - -.a11y-hidden { - @extend %a11y-hidden; -} diff --git a/sass/toolkit/_arrow.scss b/sass/toolkit/_arrow.scss deleted file mode 100644 index 49e0f4e..0000000 --- a/sass/toolkit/_arrow.scss +++ /dev/null @@ -1,41 +0,0 @@ -// Arrow Toolkit -// ============= - -@mixin arrow( - $arrow -) { - $size: 1em; - $direction: down; - $color: black; - $position: before; - $border: null; - - @each $item in $arrow { - @if type-of($item) == number { - $size: $item; - } @else if type-of($item) == string { - $item: if($item == up, top, if($item == down, bottom, $item)); - - @if index(top right bottom left, $item) { - $direction: $item; - $border: opposite-position($item); - } @else if index(before after, $item) { - $position: $item; - } - } @else if type-of($item) == color { - $color: $item; - } - } - - &:#{$position} { - position: absolute; - content: ' '; - height: 0; - width: 0; - border: $size solid transparent; - border-#{$direction}-width: 0; - border-#{$border}-color: $color; - - @content; - } -} diff --git a/sass/toolkit/_color.scss b/sass/toolkit/_color.scss deleted file mode 100644 index 099c569..0000000 --- a/sass/toolkit/_color.scss +++ /dev/null @@ -1,67 +0,0 @@ -// Color Toolkit -// ============= - -@include set(color-keywords, ( - lightest: 80%, - lighter: 50%, - light: 20%, - dark: -20%, - darker: -50%, - darkest: -80%, -)); - -@function parse-color-args( - $args -) { - $color: hsl(0,0%,50%); - $lightness: 0; - $saturation: null; - $has-color: false; - - @each $arg in $args { - @if type-of($arg) == 'color' { - $color: $arg; - $has-color: true; - } - - @else if type-of($arg) == 'number' { - @if $has-color or length($args) == 1 { - $lightness: $arg; - } @else { - $saturation: $arg; - } - } - - @else if type-of($arg) == 'string' { - $lightness: get(color-keywords $arg); - } - } - - @return ( - color: $color, - lightness: $lightness, - saturation: $saturation, - ); -} - -@function color( - $args, - $alpha: 1 -) { - $args: parse-color-args($args); - $color: map-get($args, color); - $lightness: map-get($args, lightness); - $saturation: map-get($args, saturation); - - @if $lightness > 0 { - $color: tint($color, $lightness); - } @else if $lightness < 0 { - $color: shade($color, abs($lightness)); - } - - @if $saturation { - $color: scale-color($color, $saturation: $saturation); - } - - @return rgba($color, $alpha) -} diff --git a/sass/toolkit/_fontface.scss b/sass/toolkit/_fontface.scss deleted file mode 100644 index 635313d..0000000 --- a/sass/toolkit/_fontface.scss +++ /dev/null @@ -1,111 +0,0 @@ -// Fontface Tools -// ============== - - -// Fonts -// ----- -// Establish fonts -@mixin fonts( - $fonts: $fonts, - $formats: 'woff' 'ttf' -) { - @include import-fonts($fonts, $formats); - @include font-placeholders($fonts); -} - - -// Import Fonts -// ------------ -// Create font-face css -@mixin import-fonts( - $fonts: get(fonts), - $formats: get(fontface formats) -) { - @each $font, $info in $fonts { - $name: map-get($info, name) or $font; - - @each $styles, $path in map-get($info, files) { - $styles: parse-font-styles($styles); - $src: build-font-src($path, $formats); - - @font-face { - font-family: quote($name); - src: $src; - font-weight: map-get($styles, weight); - font-style: map-get($styles, style); - } - } - } -} - - -// Parse Font Styles -// ----------------- -// Return font weight and style based on shorthand syntax -@function parse-font-styles( - $face -) { - $styles: italic, oblique; - $weights: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder, lighter; - $return: ( - weight: normal, - style: normal, - ); - - @each $item in $face { - @if index($styles, $item) { - $return: map-merge($return, (style: $item)); - } @else if index($weights, $item) { - $return: map-merge($return, (weight: $item)); - } - } - - @return $return; -} - - -// Build Font SRC -// -------------- -// Return src attribute based on path and formats -@function build-font-src( - $path, - $formats: get(fontface formats) -) { - $options: ( - 'woff': 'woff', - 'ttf': 'truetype', - 'svg': 'svg', - ); - $return: (); - - @each $format in $formats { - $name: map-get($options, $format); - @if $name { - $src: font-url('#{$path}.#{$format}') format($name); - $return: append($return, $src, comma); - } - } - - @return $return; -} - - -// Font Placeholders -// ----------------- -// Create font-family placeholders -@mixin font-placeholders( - $fonts: $fonts -) { - @each $font, $info in $fonts { - $name: map-get($info, name) or $font; - $type: map-get($info, type); - $stack: append($name, map-get($info, stack), comma); - $stack: append($stack, $type, comma); - - @if $type == monospace { - $stack: append($stack, serif); - } - - %#{$font} { font-family: $stack; } - } -} diff --git a/sass/toolkit/_icons.scss b/sass/toolkit/_icons.scss deleted file mode 100644 index d1c32eb..0000000 --- a/sass/toolkit/_icons.scss +++ /dev/null @@ -1,40 +0,0 @@ -// Icon Toolkit -// ============ - -%icon { - font-family: 'susy'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - text-decoration: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -@mixin icons( - $icons: get(icons) -) { - [data-icon] { - @extend %icon; - &:before { content: attr(data-icon); } - } - @each $name, $value in $icons { - [data-icon='#{$name}']:before { content: $value; } - } -} - -@mixin icon( - $name, - $location: before -) { - &:#{$location} { - @extend %icon; - content: get(icons $name); - @content; - } -} diff --git a/sass/toolkit/_maps.scss b/sass/toolkit/_maps.scss deleted file mode 100644 index e130dd7..0000000 --- a/sass/toolkit/_maps.scss +++ /dev/null @@ -1,88 +0,0 @@ -// Maps -// ==== -// - These features are part of Susy Next, -// but not part of Susy One. - -// Truncate List -// ------------- -// - Return a list, truncated to a given length -@function truncate-list( - $list, - $length -) { - $return: (); - - @for $i from 1 through length($list) { - $return: if($i <= $length, append($return, nth($list, $i)), $return); - } - - @return $return; -} - -// Deep Get -// -------- -// - Return a value deep in nested maps -@function deep-get( - $map, - $keys... -) { - $return: $map; - - @each $key in $keys { - @if type-of($return) == map { - $return: map-get($return, $key); - } - } - - @return $return; -} - -// Deep Set -// -------- -// - Set a value deep in nested maps -@function deep-set( - $map, - $keys, - $value -) { - $length: length($keys); - $return: (); - - @for $i from 1 through $length { - $n: 0 - $i; - $level: truncate-list($keys, $length + $n); - $level: deep-get($map, $level...); - $merge: (nth($keys, $n): $value); - $value: if($level, map-merge($level, $merge), $merge); - $return: $value; - } - - @return $return; -} - -// Deep Has-Key -// ------------ -// - Return true if a deep key exists -@function deep-has-key( - $map, - $keys... -) { - $return: null; - $break: false; - - @each $key in $keys { - @if not $break { - $return: map-has-key($map, $key); - } - - @if $return { - $map: map-get($map, $key); - } @else { - $break: true; - } - } - - @return $return; -} - - diff --git a/sass/toolkit/_scale.scss b/sass/toolkit/_scale.scss deleted file mode 100644 index a8e652d..0000000 --- a/sass/toolkit/_scale.scss +++ /dev/null @@ -1,64 +0,0 @@ -// Scales -// ====== - -@include set(ratio-options, ( - octave : 2, - major-seventh : 15/8, - minor-seventh : 16/9, - major-sixth : 5/3, - minor-sixth : 8/5, - fifth : 3/2, - augmented-fourth : 45/32, - fourth : 4/3, - major-third : 5/4, - minor-third : 6/5, - major-second : 9/8, - minor-second : 16/15, -)); - -@include set(scale, ( - xxxlarge : 4, - xxlarge : 3, - xlarge : 2, - large : 1, - normal : 0, - small : -1, - xsmall : -2, - xxsmall : -3, - xxxsmall : -4, -)); - -@include set(ratio, fourth); - -@function size( - $multiplier: normal, - $root: $base-font-size, - $ratio: get(ratio) -) { - @if type-of($multiplier) == string { - $multiplier: get(scale $multiplier); - } - - @if type-of($ratio) == string { - $ratio: get(ratio-options $ratio); - } - - @return round($root * pow($ratio, $multiplier)); -} - -@mixin font-size( - $size: normal, - $lines: false -){ - $output: if($lines, (lines: $lines), ()); - - @if type-of($size) == string { - $size: size(get(scale $size)); - } @else if type-of($size) == number and unitless($size) { - $size: size($size) - } - - $output: map-merge($output, (to_size: $size)); - - @include adjust-font-size-to($output...); -} diff --git a/sass/toolkit/_settings.scss b/sass/toolkit/_settings.scss deleted file mode 100644 index 5d593ec..0000000 --- a/sass/toolkit/_settings.scss +++ /dev/null @@ -1,17 +0,0 @@ -// Settings Toolkit -// ================ - -$settings: (); - -@mixin set( - $key, - $value -) { - $settings: map-merge($settings, ($key: $value)) !global; -} - -@function get( - $keys -) { - @return deep-get($settings, $keys...); -} diff --git a/sass/toolkit/_toggle.scss b/sass/toolkit/_toggle.scss deleted file mode 100644 index 551c157..0000000 --- a/sass/toolkit/_toggle.scss +++ /dev/null @@ -1,7 +0,0 @@ -// Toggle Toolkit -// ============== - -@mixin toggle { - @extend %a11y-hidden; - &:checked { @content; } -} diff --git a/templates/_atoms.html b/templates/_atoms.html index f22dcd8..308b8e8 100644 --- a/templates/_atoms.html +++ b/templates/_atoms.html @@ -1,4 +1,4 @@ {% macro icon(icon, alt_text) %} -{% if alt_text %}{{ alt_text }}{% endif %} +{% if alt_text %}{% endif %} {% endmacro %} diff --git a/templates/layout/_contentinfo.html b/templates/layout/_contentinfo.html index 29290a3..0c943e7 100644 --- a/templates/layout/_contentinfo.html +++ b/templates/layout/_contentinfo.html @@ -6,32 +6,18 @@ with major contributions from - Tsachi Schlidor, - Aaron Gray, - Sam Richard, - Scott Kellum, - Rachel Nabors, - Jina Bolton, - Danny Palmer, - Mason Wendell, - and - many others. + {% for contrib in config.credit %} + {% if loop.last %}and{% endif %} + {{ contrib.name|safe }}{% if loop.last %}.{% else %},{% endif %} + {% endfor %}

+

Built with HTML5 and CSS3, - with - GitHub, - rstBlog, - Python, - Jinja, - Compass, - Sass, - Susy, - Breakpoint, - Pygments, - IcoMoon, - Source Sans Pro, - and - Source Code Pro. + using + {% for dep in config.colophon %} + {% if loop.last %}and{% endif %} + {{ dep.name|safe }}{% if loop.last %}.{% else %},{% endif %} + {% endfor %}