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 %}
+
+ 
+
+ {% 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 %}