susy 1.0.9 → 2.0.0.alpha.1

data/docs/source/stylesheets/_general/_icons.scss

@@ -0,0 +1,86 @@
+@include font-face (
+  'susy',
+  font-files(
+    'susy.svg#susy', svg,
+    'susy.woff', woff,
+    'susy.ttf', truetype
+  ),
+  'susy.eot',
+  normal,
+  normal
+);
+
+/* Use the following CSS code if you want to have a class per icon */
+%icon-content {
+  font-family: 'susy';
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+}
+
+%icon:before {
+  @extend %icon-content;
+  margin-right: .4em;
+}
+
+%icon-after::after {
+  @extend %icon-content;
+  margin-left: .4em;
+}
+
+%icon-replace {
+  @extend %icon;
+  position: relative;
+  min-width: 1em;
+  text-indent: -9999px;
+  &:before{
+    position: absolute;
+    top: 0;
+    left: 0;
+    text-indent: 0;
+    margin-right: 0;
+  }
+}
+
+/* Use the following CSS code if you want to use data attributes for inserting your icons */
+[data-icon]:before {
+  @extend %icon-content;
+  content: attr(data-icon);
+}
+
+%icon-switch:before {
+  content: "\e000";
+}
+%icon-list:before {
+  content: "\e001";
+}
+%icon-cog:before {
+  content: "\e002";
+}
+%icon-twitter:before {
+  content: "\e005";
+}
+%icon-pin:before {
+  content: "\e007";
+}
+%icon-bookmark:before {
+  content: "\e008";
+}
+%icon-out:after {
+  content: "\e009";
+}
+%icon-list-2:before {
+  content: "\e00a";
+}
+%icon-arrow-left:before {
+  content: "\e00b";
+}
+%icon-pictures:before {
+  content: "\e00c";
+}
+%icon-comment:before {
+  content: "\e003";
+}
+%icon-github:before {
+  content: "\e004";
+}

data/docs/source/stylesheets/_general/_root.scss

@@ -0,0 +1,79 @@
+//-----------------------------------------------------------------------------
+// Imports
+
+@import "compass/reset";
+@import "../_vendor/pygments/solarized";
+
+@import "fonts";
+@import "icons";
+
+//-----------------------------------------------------------------------------
+// Variables
+
+$link   : '&:link, &:visited';
+$focus  : '&:hover, &:focus, &:active';
+
+//-----------------------------------------------------------------------------
+// Root
+
+@include establish-baseline;
+@include border-box-sizing;
+
+html {
+  @include text-shadow(rgba(white,.5) 0 1px 0);
+  color: $susy-bodycopy;
+  background: $susy-background;
+  font-family: $font-stack;
+}
+
+b, i { font-weight: normal; font-style: normal; }
+.amp { font-family: $amp-stack; }
+.caps { @include caps; }
+
+a {
+  #{$link} {
+    color: $susy-highlight;
+    text-decoration: none;
+  }
+  #{$focus} {
+    color: $susy-highlight-dark-20;
+  }
+}
+
+//-----------------------------------------------------------------------------
+// Code Blocks
+
+.highlight {
+  @include trailer();
+  background: transparent;
+  border: 0;
+}
+
+code, pre {
+  font-family: $mono-stack;
+}
+
+code {
+  @include adjust-font-size-to($small-normpx);
+}
+
+pre {
+  @include adjust-font-size-to($smallpx);
+  @include rhythm-borders(1px,.5,$smallpx);
+  background-color: $susy-background-dark-5;
+  border-color: $susy-background-dark-10;
+  overflow: auto;
+}
+
+//-----------------------------------------------------------------------------
+// Simple Pages
+
+%simple {
+  [role="main"] {
+    @extend %type;
+    @include at-breakpoint($break) {
+      @include pad(1,1);
+    }
+  }
+}
+

data/docs/source/stylesheets/_general/_type.scss

@@ -0,0 +1,114 @@
+// ---------------------------------------------------------------------------
+// Basic Typography
+
+%type {
+  @include sans;
+
+  // -------------------------------------------------------------------------
+  // Headings
+
+  h2 {
+    @extend .caps;
+    @include adjust-font-size-to($largepx);
+    @include trailing-border(3px,.125,$largepx);
+    @include trailer(.875,$largepx);
+    border-color: $base2;
+    font-weight: bold;
+    ~ h2 { @include leader(2,$largepx) }
+
+    @include at-breakpoint($break) {
+      @include adjust-font-size-to($xlargepx);
+      @include trailing-border(3px,.125,$xlargepx);
+      @include trailer(.875,$xlargepx);
+      ~ h2 { @include leader(2,$xlargepx) }
+    }
+  }
+  h3 {
+    @include adjust-font-size-to($largepx);
+    @include leader(1,$largepx);
+    @include trailer(1,$largepx);
+    font-weight: bold;
+    + h4 { @include leader(0); }
+    @include at-breakpoint($break) {
+      @include leader(2,$largepx);
+    }
+  }
+  h4 {
+    @extend .caps;
+    @include leader(2);
+  }
+  h5 {
+    font-style: italic;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    a {
+      #{$link} {
+        @extend %icon;
+        @extend %icon-bookmark;
+        position: relative;
+        display: inline-block;
+        &::before {
+          @include transition(all 300ms);
+          @include opacity(0);
+          position: absolute;
+          display: block;
+          right: 100%;
+          top: 0;
+          margin-right: $xxxsmallpx;
+          line-height: inherit;
+        }
+      }
+      #{$focus} {
+        &::before { @include opacity(1); }
+      }
+    }
+  }
+
+  h1, h2, h3 {
+    a {
+      #{$link} {
+        color: $susy-bodycopy-dark-20;
+      }
+    }
+  }
+
+  h4, h5, h6 {
+    a {
+      #{$link} {
+        color: $susy-highlight-dark-20;
+        &::before { @include opacity(.75); }
+      }
+      #{$focus} {
+        &::before { @include opacity(1); }
+      }
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Block
+
+  ul, ol, p { @include trailer; }
+  li { @include trailer(.5); }
+  ul {
+    list-style: circle;
+  }
+  ol {
+    list-style: decimal;
+  }
+
+  // -------------------------------------------------------------------------
+  // Inline
+
+  strong, code {
+    font-weight: bold;
+    color: $susy-bodycopy-dark-5;
+  }
+  em { font-style: italic; }
+
+  a[href^="http"] {
+    @extend %icon-after;
+    @extend %icon-out;
+    &::after { font-size: .75em; }
+  }
+}

data/docs/source/stylesheets/_layout.scss

@@ -0,0 +1,48 @@
+//-----------------------------------------------------------------------------
+// Layout
+
+.page {
+  @include container;
+  position: relative;
+
+  :target & { 
+    @include susy-grid-background(); 
+    .off a { display: block; }
+    .on a { display: none; }
+  }
+  
+  @include at-breakpoint($break) {
+    @include container;
+    :target & { @include susy-grid-background(); }
+  }
+}
+
+[role="main"] {
+  @include trailer(1);
+  @include at-breakpoint($break) {
+    @include trailer(2);
+  }
+}
+
+[role="contentinfo"] {
+  clear: both;
+}
+
+//Exceptions
+
+.guides, .tutorial {   
+  [role="main"] { @extend %type; }
+  .secondary { display: none; }
+
+  @include at-breakpoint($break) {
+    
+    .secondary {
+      @include span-columns(3);
+      display: block;
+    }
+  
+    [role="main"] {
+      @include span-columns(7 omega);
+    }
+  }
+}

data/docs/source/stylesheets/_modules/_ag-test.scss

@@ -0,0 +1,59 @@
+//-----------------------------------------------------------------------------
+// AG Test
+
+.ag-test {
+  @include cond;
+  @include clearfix;
+  @include trailer;
+  clear: both;
+  background: $susy-background-dark-5;
+
+  div { 
+    @include border-radius(.25em);
+    min-height: rhythm(4); 
+  }
+  figcaption p { 
+    font-size: 1em;
+    font-weight: bold; 
+  }
+  p {
+    @include adjust-font-size-to($smallpx);
+    display: block;
+    padding: rhythm(.5,$smallpx) rhythm(.25,$smallpx);
+    color: $susy-bodycopy-dark-20;
+    text-align: center;
+  }
+  strong {
+    display: block;
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+
+  // color blocks
+  .ag1, .ag3 { background: lighten($cyan,25); }
+  .ag2 { background: $susy-background-dark-10; }
+  .ag7 { background: $susy-background-dark-20; }
+  .ag4, .ag5, .ag8, .ag9 { background: lighten($red,25); }
+  .ag6 { background: lighten($orange,25); }
+  .ag10 { background: lighten($magenta,25); }
+
+  .ag1, .ag3 { min-height: rhythm(18); }
+  .ag6 { min-height: rhythm(11); }
+
+  .ag1 { @include span-columns(2,10); }
+  .ag2 { @include span-columns(6,10); }
+  .ag3 { @include span-columns(2 omega, 10); }
+  .ag4 { @include span-columns(3,6); }
+  .ag5 { @include span-columns(3 omega,6); }
+  .ag6 { @include span-columns(2,6); }
+  .ag7 { @include span-columns(4 omega,6); }
+  .ag8 { @include span-columns(2,4); }
+  .ag9 { @include span-columns(2 omega,4); }
+  .ag10 { clear: both; }
+
+  + .highlight {
+    @include at-breakpoint(50em 10) { 
+      @include span-columns(5,10); 
+    }
+  }
+}

data/docs/source/stylesheets/_modules/_banner.scss

@@ -0,0 +1,61 @@
+//-----------------------------------------------------------------------------
+// Site Banner
+
+[role="banner"] {
+  @include leading-border(3px,.5);
+  border-color: $susy-highlight;
+  text-align: center;
+  
+  h1 {
+    @include adjust-font-size-to($xxlargepx);
+    @include at-breakpoint($break) { 
+      @include adjust-font-size-to($xxxlargepx); 
+    }
+
+    span { display: none; }
+
+    a {
+      &:before { content: "\2039"; }
+      &:after { content: "\203A"; }
+      &:before, &:after {
+        font-size: .875em;
+        position: relative;
+        top: -.16em; 
+        letter-spacing: -.025em;
+      }
+      #{$focus} { 
+        b, span { letter-spacing: 0; }
+        span { opacity: 1; }
+        color: $susy-highlight;
+      }
+    }
+
+    @include at-breakpoint($break) {
+      .fontface & {
+        b, span {
+          @include transition(all 300ms);
+          display: inline-block;
+          text-transform: uppercase;
+          letter-spacing: -.44em;
+        }
+        span { opacity: 0; }
+      }
+    }
+  }
+
+  h2 {
+    @include adjust-font-size-to($medpx);
+    @include leader(-1,$medpx);
+    @include trailer(.5,$medpx);
+    display: block;
+    position: relative;
+    z-index: 2;
+    
+    @include at-breakpoint($break) { 
+      @include adjust-font-size-to($largepx); 
+      @include leader(-1,$largepx);
+      @include trailer(1,$largepx);
+    }
+  }
+
+}