From 4939b6388c5c365029ead800ecdbf9e70ce3db3d Mon Sep 17 00:00:00 2001 From: Eric Meyer Date: Sun, 12 Jan 2014 23:27:33 -0700 Subject: [PATCH] Add versions and structured data --- content/config.yml | 78 +++++++++++--- content/index.rst | 65 ++--------- content/sites-using-susy.rst | 37 ++----- content/static/css/demos/grid-types.css | 11 +- content/static/css/screen.css | 138 ++++++++++++++++++------ output | 2 +- requirements.txt | 16 +-- sass/_cells.scss | 1 + sass/atoms/_headings.scss | 7 +- sass/cells/_main.scss | 2 - sass/cells/_release.scss | 63 +++++++++++ sass/cells/_section.scss | 4 +- sass/molecules/_screenshots.scss | 21 +++- templates/modules/_intro.html | 9 ++ templates/modules/_release.html | 23 ++++ templates/modules/_screenshots.html | 17 +++ templates/rst_display.html | 8 ++ 17 files changed, 341 insertions(+), 161 deletions(-) create mode 100644 sass/cells/_release.scss create mode 100644 templates/modules/_intro.html create mode 100644 templates/modules/_release.html create mode 100644 templates/modules/_screenshots.html diff --git a/content/config.yml b/content/config.yml index 5d6dc94..3e41e91 100644 --- a/content/config.yml +++ b/content/config.yml @@ -1,21 +1,22 @@ --- -active_modules: [pygments_simple, tags, blog, wrap, typogrify] -author: Eric A. Meyer -canonical_url: http://susy.oddbird.com/ -output_folder: ../output -template_path: ../templates -rst_writer: html5writer -modules: - pygments: - style: borland - blog: - index_url: /blog/ - # Banner banner_title: Susy banner_url: '/' banner_tagline: 'your layout | our math' + +# Version +versions: + - title: Current Release + number: 1.0.9 + notes: 'https://github.com/ericam/susy/blob/master/CHANGELOG.mkdn' + code: 'https://github.com/ericam/susy/' + - title: Upcoming Release + gem: 'https://rubygems.org/gems/susy/versions/2.0.0.beta.3' + number: 2.0.0.beta.3 + notes: 'http://susydocs.oddbird.net/en/latest/changelog/' + + # Navigation nav: - name: Documentation @@ -27,9 +28,56 @@ nav: - name: Support url: 'http://stackoverflow.com/questions/tagged/susy-compass' icon: stackoverflow - - name: Source - url: 'http://github.com/ericam/susy/' - icon: github - name: Twitter url: 'http://twitter.com/sasssusy/' icon: twitter + + +# Intro +intro: + - title: 'No Opinions' + id: no-opinions + text: 'In a world of agile development + and super-tablet-multi-magic-laptop-phones, + the best layouts can’t be contained + in a single framework or technique. + CSS Libraries are a bloated mess of opinions + about how to do your job. + Why is should table-saw tell you where to put the kitchen?' + tagline: 'Your markup, your design, your opinions | our math.' + + +# Screenshots +screenshots: + - image: /static/screenshots/sasslang.jpg + alt: Sass + target: http://sass-lang.com/ + - image: /static/screenshots/smithsonian.jpg + alt: Smithsonian + target: http://smithsonian.com/ + - image: /static/screenshots/squaremarket.jpg + alt: Square Market + target: http://squareup.com/market + - image: /static/screenshots/slickbag.jpg + alt: Slickbag + target: http://slickbag.se/ + - image: /static/screenshots/viggle.jpg + alt: Viggle + target: http://viggle.com/ + - image: /static/screenshots/avoidpaydayloans.jpg + alt: Avoid Payday Loans + target: http://avoidpaydayloans.com/ + + +# Settings +active_modules: [pygments_simple, tags, blog, wrap, typogrify] +author: Eric A. Meyer +canonical_url: http://susy.oddbird.com/ +output_folder: ../output +template_path: ../templates +rst_writer: html5writer +modules: + pygments: + style: borland + blog: + index_url: /blog/ diff --git a/content/index.rst b/content/index.rst index 92a64aa..95238be 100644 --- a/content/index.rst +++ b/content/index.rst @@ -1,67 +1,22 @@ public: yes meta_title: Susy +before: + - include: 'modules/_release.html' + - include: 'modules/_intro.html' + - include: 'modules/_screenshots.html' + title: In The Wild + id: in-the-wild + more: true Power tools for the web ======================= -No Opinions ------------ +Rapid Prototypes, Built to Scale +-------------------------------- -In a world of agile development -and super-tablet-multi-magic-laptop-phones, -the best layouts can't be contained -in a single framework or technique. -CSS Libraries are a bloated mess of opinions -about how to do your job. -Why is should table-saw tell you where to put the kitchen? - -Your markup, your design, your opinions | *our math*. - - -In The Wild ------------ - -.. wrap:: figure - :class: gallery screenshots - - .. image:: /static/screenshots/sasslang.jpg - :alt: Sass - :target: http://sass-lang.com/ - - .. image:: /static/screenshots/smithsonian.jpg - :alt: Smithsonian - :target: http://smithsonian.com/ - - .. image:: /static/screenshots/squaremarket.jpg - :alt: Square Market - :target: http://squareup.com/market - - .. image:: /static/screenshots/slickbag.jpg - :alt: Slickbag - :target: http://slickbag.se/ - - .. image:: /static/screenshots/viggle.jpg - :alt: Viggle - :target: http://viggle.com/ - - .. image:: /static/screenshots/avoidpaydayloans.jpg - :alt: Avoid Payday Loans - :target: http://avoidpaydayloans.com/ - - .. wrap:: figcaption - :class: gallery-caption - - See more `sites using Susy`_, - or `add your own`_ » - -.. _sites using Susy: /sites-using-susy/#everyone -.. _add your own: https://github.com/ericam/susysite/tree/master/content/sites-using-susy.rst - - -Rapid Prototypes, Enduring Production -------------------------------------- +*These instructions are for the upcoming Susy 2.0 release* We know that rapid prototypes are only the start to a long process diff --git a/content/sites-using-susy.rst b/content/sites-using-susy.rst index 2709037..8c4c852 100644 --- a/content/sites-using-susy.rst +++ b/content/sites-using-susy.rst @@ -1,39 +1,13 @@ public: yes +before: + - include: 'modules/_screenshots.html' + title: Featured Sites + id: featured-sites Sites Using Susy ================ -Featured Sites --------------- - -.. wrap:: figure - :class: gallery screenshots - - .. image:: /static/screenshots/sasslang.jpg - :alt: Sass - :target: http://sass-lang.com/ - - .. image:: /static/screenshots/smithsonian.jpg - :alt: Smithsonian - :target: http://smithsonian.com/ - - .. image:: /static/screenshots/squaremarket.jpg - :alt: Square Market - :target: http://squareup.com/market - - .. image:: /static/screenshots/slickbag.jpg - :alt: Slickbag - :target: http://slickbag.se/ - - .. image:: /static/screenshots/viggle.jpg - :alt: Viggle - :target: http://viggle.com/ - - .. image:: /static/screenshots/avoidpaydayloans.jpg - :alt: Avoid Payday Loans - :target: http://avoidpaydayloans.com/ - Everyone -------- @@ -79,6 +53,9 @@ Everyone - `Uncorked Studios `_ - `Vermont Brewers Association `_ +Contribute A Site +----------------- + Add your own site `on Github`_! .. _on Github: https://github.com/ericam/susysite/tree/master/content/sites-using-susy.rst diff --git a/content/static/css/demos/grid-types.css b/content/static/css/demos/grid-types.css index f846444..1fb6bcc 100644 --- a/content/static/css/demos/grid-types.css +++ b/content/static/css/demos/grid-types.css @@ -213,21 +213,14 @@ html { -o-transition: all 200ms; -webkit-transition: all 200ms; transition: all 200ms; - border-bottom-width: 0.05556rem; - border-bottom-style: solid; - padding-bottom: 1.33333rem; - margin-bottom: 1.38889rem; - border-color: #e5e5e5; + padding-bottom: 1.38889rem; text-align: center; } @media (min-width: 30em) { .content h1 { font-size: 2.44444rem; line-height: 2.77778rem; - border-bottom-width: 0.05556rem; - border-bottom-style: solid; - padding-bottom: 2.72222rem; - margin-bottom: 2.77778rem; + padding-bottom: 2.77778rem; } } diff --git a/content/static/css/screen.css b/content/static/css/screen.css index bb295ea..42edb58 100644 --- a/content/static/css/screen.css +++ b/content/static/css/screen.css @@ -198,7 +198,7 @@ html { content: "\e0ae"; } -.a11y-hidden, [id="toggle-nav"] { +.a11y-hidden, [id="toggle-nav"], .release-info h2 { position: absolute; height: 1px; width: 1px; @@ -213,21 +213,14 @@ html { -o-transition: all 200ms; -webkit-transition: all 200ms; transition: all 200ms; - border-bottom-width: 0.05556rem; - border-bottom-style: solid; - padding-bottom: 1.33333rem; - margin-bottom: 1.38889rem; - border-color: #e5e5e5; + padding-bottom: 1.38889rem; text-align: center; } @media (min-width: 30em) { [role="main"] h1 { font-size: 2.44444rem; line-height: 2.77778rem; - border-bottom-width: 0.05556rem; - border-bottom-style: solid; - padding-bottom: 2.72222rem; - margin-bottom: 2.77778rem; + padding-bottom: 2.77778rem; } } @@ -348,10 +341,10 @@ a:hover, a:focus, a:active { clear: both; padding-left: 0.52083rem; padding-right: 0.52083rem; - margin-top: 2.77778rem; - border-bottom-width: 0.05556rem; - border-bottom-style: solid; - padding-bottom: 1.33333rem; + border-top-width: 0.05556rem; + border-top-style: solid; + padding-top: 2.72222rem; + margin-bottom: 2.77778rem; border-color: #e5e5e5; } [role="main"] > section:after, .contents:after { @@ -614,9 +607,6 @@ a:hover, a:focus, a:active { display: block; clear: both; } -[role="main"] > section:last-child { - border-color: transparent; -} .foot { border-top-width: 0.5rem; @@ -722,6 +712,76 @@ a:hover, a:focus, a:active { display: inline-block; } +.release-info { + margin-bottom: 2.77778rem; +} +.release-info h2 { + margin: 0; +} +.release-info + .intro { + padding-top: 0rem; + border: 0; +} + +.version { + padding-top: 0.34722rem; + padding-bottom: 0.34722rem; + margin-bottom: 0.69444rem; + 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 { + 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; +} + +.version-title { + margin-right: 1.38889rem; +} + +.version-details { + display: inline-block; +} +[role='main'] .version-details { + margin: 0; + padding: 0; +} +.version-details li { + list-style: none; + display: inline-block; + margin-right: 1.38889rem; +} +.version-details a:link, .version-details a:visited { + color: white; + font-weight: bold; + text-decoration: none; +} +.version-details a:link[href^='http']:before, .version-details a:visited[href^='http']:before { + opacity: .5; + color: white; +} +.version-details a:hover, .version-details a:focus, .version-details a:active { + text-decoration: underline; +} +.version-details a:hover[href^='http']:before, .version-details a:focus[href^='http']:before, .version-details a:active[href^='http']:before { + opacity: 1; +} + .head { overflow: hidden; *zoom: 1; @@ -739,6 +799,10 @@ a:hover, a:focus, a:active { bottom: 0; left: 0; right: 0; + -moz-transition: all 100ms ease-in; + -o-transition: all 100ms ease-in; + -webkit-transition: all 100ms ease-in; + transition: all 100ms ease-in; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; @@ -756,10 +820,10 @@ a:hover, a:focus, a:active { bottom: -2px; left: 22.5%; right: -2px; - -moz-transition: all 150ms; - -o-transition: all 150ms; - -webkit-transition: all 150ms; - transition: all 150ms; + -moz-transition: all 150ms ease-out; + -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%); @@ -767,22 +831,17 @@ a:hover, a:focus, a:active { transform: translateX(102%); font-size: 0.77778rem; line-height: 1.38889rem; - content: attr(href); + content: attr(data-title); + overflow: hidden; opacity: 0; display: block; z-index: 2; padding-top: 26%; - background-color: rgba(25, 25, 25, 0.95); + background-color: rgba(255, 0, 128, 0.95); color: white; + text-transform: uppercase; text-align: center; } -.screenshots > a:hover, .screenshots > a:focus, .screenshots > a:active { - -moz-transform: scale(1, 1); - -ms-transform: scale(1, 1); - -o-transform: scale(1, 1); - -webkit-transform: scale(1, 1); - transform: scale(1, 1); -} .screenshots > a:hover img, .screenshots > a:focus img, .screenshots > a:active img { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); @@ -804,6 +863,25 @@ a:hover, a:focus, a:active { } } +@media (min-width: 35em) { + #everyone ul { + *zoom: 1; + margin: 0 -0.52083rem; + } + #everyone ul:after { + content: " "; + display: block; + clear: both; + } + #everyone ul li { + width: 50%; + float: left; + padding-left: 0.52083rem; + padding-right: 0.52083rem; + list-style: none; + } +} + .c { color: #bfbfbf; } diff --git a/output b/output index 3f13da9..63271a9 160000 --- a/output +++ b/output @@ -1 +1 @@ -Subproject commit 3f13da920abeec098e371887f09797925c223638 +Subproject commit 63271a9686d5a64bf023a05bb8ece59cc08ca0d3 diff --git a/requirements.txt b/requirements.txt index cd499c9..0c24643 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,11 +1,11 @@ ---extra-index-url http://chishop.oddbird.net/simple - -rstblog==1.0.obc2 -PyYAML==3.10 Babel==0.9.6 +Jinja2==2.7 +MarkupSafe==0.18 +PyYAML==3.10 +Pygments==1.5 +Werkzeug==0.8.3 blinker==1.2 docutils==0.9.1 -Jinja2==2.6 -Werkzeug==0.8.3 -Pygments==1.5 -smartypants==1.6.0.3 \ No newline at end of file +rstblog==1.0.obc2 +smartypants==1.6.0.3 +wsgiref==0.1.2 diff --git a/sass/_cells.scss b/sass/_cells.scss index a012693..cb75987 100644 --- a/sass/_cells.scss +++ b/sass/_cells.scss @@ -10,3 +10,4 @@ @import "cells/main"; @import "cells/contentinfo"; @import "cells/toc"; +@import "cells/release"; diff --git a/sass/atoms/_headings.scss b/sass/atoms/_headings.scss index d67474c..bbbad00 100644 --- a/sass/atoms/_headings.scss +++ b/sass/atoms/_headings.scss @@ -4,15 +4,12 @@ %h1 { @include font-size(medium); @include transition(all 200ms); - @include trailing-border(1px, 1); - @include trailer; - border-color: color(lightest); + @include padding-trailer(1); text-align: center; @include breakpoint(30em) { @include font-size(xlarge); - @include trailing-border(1px, 2); - @include trailer(2); + @include padding-trailer(2); } } diff --git a/sass/cells/_main.scss b/sass/cells/_main.scss index 2ad6833..03eeebe 100644 --- a/sass/cells/_main.scss +++ b/sass/cells/_main.scss @@ -6,7 +6,5 @@ @include container; > section { @extend %section; - - &:last-child { border-color: transparent; } } } diff --git a/sass/cells/_release.scss b/sass/cells/_release.scss new file mode 100644 index 0000000..16651b5 --- /dev/null +++ b/sass/cells/_release.scss @@ -0,0 +1,63 @@ +// Release Info +// ============ + +.release-info { + @include trailer(2); + + h2 { + @extend %a11y-hidden; + margin: 0; + } + + + .intro { + @include padding-leader(0); + border: 0; + } +} + +.version { + @include rhythm-padding(.25); + @include trailer(.5); + @include bleed-x(rhythm(4)); + border-radius: rhythm(.25); + background: $accent; + color: white; + text-shadow: 0 1px 0 color(darker $accent, .5); + + + .version { + @include bleed-x(rhythm(2)); + background: color(lighter $accent); + } +} + +.version-title { margin-right: rhythm(1); } + +.version-details { + display: inline-block; + [role='main'] & { + margin: 0; + padding: 0; + } + li { + list-style: none; + display: inline-block; + margin-right: rhythm(1); + } + a { + @include link { + color: white; + font-weight: bold; + text-decoration: none; + &[href^='http']:before { + opacity: .5; + color: white; + } + } + @include focus { + text-decoration: underline; + &[href^='http']:before { + opacity: 1; + } + } + } +} diff --git a/sass/cells/_section.scss b/sass/cells/_section.scss index 2dadc81..bcfacf0 100644 --- a/sass/cells/_section.scss +++ b/sass/cells/_section.scss @@ -5,7 +5,7 @@ @include susy-clearfix; @include break; @include gutters; - @include leader(2); - @include trailing-border(1px, 1); + @include leading-border(1px, 2); + @include trailer(2); border-color: color(lightest); } diff --git a/sass/molecules/_screenshots.scss b/sass/molecules/_screenshots.scss index 01ce94b..0240946 100644 --- a/sass/molecules/_screenshots.scss +++ b/sass/molecules/_screenshots.scss @@ -12,27 +12,29 @@ $screenshot-ratio: 598/1000; img { @include stretch; + @include transition(all 100ms ease-in); @include transform-origin(100%, 0); @include scale(1.3); } &:after { @include stretch(-2px, -2px, -2px, 22.5%); - @include transition(all 150ms); + @include transition(all 150ms ease-out); @include translateX(102%); @include font-size(xsmall); - content: attr(href); + content: attr(data-title); + overflow: hidden; opacity: 0; display: block; z-index: 2; padding-top: 26%; - background-color: color(darkest, .95); + background-color: color($alt, .95); color: white; + text-transform: uppercase; text-align: center; } @include focus { - @include scale(1); img { @include scale(1); } &:after { @include translateX(0); @@ -45,3 +47,14 @@ $screenshot-ratio: 598/1000; } } } + +#everyone ul { + @include breakpoint($gallery-break) { + @include susy-clearfix; + margin: 0 0 - gutters(); + li { + @include span(50%); + list-style: none; + } + } +} diff --git a/templates/modules/_intro.html b/templates/modules/_intro.html new file mode 100644 index 0000000..d136f08 --- /dev/null +++ b/templates/modules/_intro.html @@ -0,0 +1,9 @@ +{% for intro in config.intro %} +
+

{{ intro.title }}

+

{{ intro.text|safe }}

+ {% if intro.tagline %} +

{{ intro.tagline|safe }}

+ {% endif %} +
+{% endfor %} diff --git a/templates/modules/_release.html b/templates/modules/_release.html new file mode 100644 index 0000000..5723381 --- /dev/null +++ b/templates/modules/_release.html @@ -0,0 +1,23 @@ + diff --git a/templates/modules/_screenshots.html b/templates/modules/_screenshots.html new file mode 100644 index 0000000..61a5e9f --- /dev/null +++ b/templates/modules/_screenshots.html @@ -0,0 +1,17 @@ +
+

{{ module.title|default('Sites Using Susy') }}

+
+ {% for shot in config.screenshots %} + + {{ shot.alt }} + + {% endfor %} + + {% if module.more %} +
+ See more sites using Susy, + or add your own » +
+ {% endif %} +
+
diff --git a/templates/rst_display.html b/templates/rst_display.html index 7fb6709..2db8f3d 100644 --- a/templates/rst_display.html +++ b/templates/rst_display.html @@ -18,6 +18,14 @@ {% include "_byline.html" %} + {% for module in config.before %} + {% include module.include %} + {% endfor %} + {{ rst.fragment }} + {% for module in config.after %} + {% include module.include %} + {% endfor %} + {% endblock %}