schnitzelstyle 0.0.7 → 0.0.8

data/lib/assets/stylesheets/schnitzelstyle.scss

@@ -1,15 +1,18 @@
 @import 'schnitzelstyle/configuration';
 @import 'schnitzelstyle/reset';
 @import 'schnitzelstyle/basics';
+@import 'schnitzelstyle/content';
 @import 'schnitzelstyle/eyecandy';
 @import 'schnitzelstyle/flashes';
 @import 'schnitzelstyle/forms';
 @import 'schnitzelstyle/grid';
 @import 'schnitzelstyle/export';
+@import 'schnitzelstyle/responsive';
 
 @mixin schnitzel-complete {
   @include schnitzel-reset;
   @include schnitzel-basics;
+  @include schnitzel-content;
   @include schnitzel-flashes;
   @include schnitzel-forms;
   @include schnitzel-eyecandy;

data/lib/assets/stylesheets/schnitzelstyle/_basics.scss

@@ -1,25 +1,29 @@
-@mixin floaty-title($fg, $bg) {
-  background-color: $bg;
-  color: $fg;
-  display: inline-block;
-  padding: 0.3em 0.6em;
+@mixin justified {
+  text-align: justify;
+  text-justify: newspaper;
+}
 
-  a {
-    color: $fg;
-    border: none;
-    text-decoration: none;
-    &:hover { color: $fg }
-  }
+@mixin small-type {
+  font: $font-footer;
+  font-size: 80%;
+}
+
+@mixin large-type {
+  font-size: 130%;
 }
 
 @mixin schnitzel-basics {
+  // we like the border-box sizing model. http://paulirish.com/2012/box-sizing-border-box-ftw/
+  * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+
   body {
     background-color: $color-page-background;
     color: $color-text;
     font: $font-default;
+    padding-bottom: 20px;
   }
 
-  /* set body class to 'loading' to switch the curser to a 'loading' cursor. */
+  // set body class to 'loading' to switch the curser to a 'loading' cursor.
   html.loading, html.loading * {
     cursor: wait !important;
   }
@@ -32,8 +36,12 @@
     font-weight: bold;
   }
 
+  // make sure each first and last child element has no leading margin.
+  *:first-child { margin-top: 0 !important }
+  *:last-child { margin-bottom: 0 !important }
+
   .container>header {
-    margin: 2em 0;
+    margin-top: 20px !important;
 
     color: $color-header;
     font: $font-header;
@@ -47,16 +55,9 @@
       font-size: 200%;
       font-weight: bold;
       @include floaty-title($color-page-background, $color-header);
-
-      @media only screen and (max-width: 640px) {
-        font-size: 100%;
-      }
-    }
-
-    @media only screen and (max-width: 640px) {
-      font-size: 100%;
     }
   }
+
   .container>footer {
     font: $font-footer;
     font-size: 75%;
@@ -65,101 +66,6 @@
     text-align: right;
     a { color: $color-footer; }
   }
-
-  *:first-child { margin-top: 0 !important }
-  *:last-child { margin-bottom: 0 !important }
-
-  article, section {
-    margin: 4em 0;
-
-    header {
-      margin-bottom: 1em;
-
-      h2 {
-        @include floaty-title($color-page-background, $color-text);
-        text-transform: uppercase;
-        letter-spacing: 0.15em;
-      }
-    }
-
-    p, dl, ol, ul, li, div.input {
-      margin: 0.8em 0;
-      line-height: 24px;
-    }
-
-    // tweet integration
-    .twp-container {
-      margin: 1.5em auto;
-    }
-
-    a {
-      color: $color-link;
-      text-decoration: none;
-      border-bottom: 2px solid $color-link-underline;
-
-      &:hover {
-        color: $color-link-hover;
-      }
-    }
-
-    ul {
-      list-style-type: square;
-    }
-
-    ol {
-      list-style-type: lower-roman;
-    }
-
-    em {
-      font-style: italic;
-      color: #666;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-      font: $font-header;
-      margin-top: 1em;
-      @include floaty-title($color-text, darken($color-page-background, 5%));
-    }
-
-    h1 {
-      font-size: 150%;
-      text-transform: uppercase;
-    }
-
-    img {
-      max-width: 100%;
-    }
-
-    pre, code {
-      font: $font-monospaced;
-      background-color: #eee;
-      color: #666;
-    }
-
-    code { padding: 0.1em 0.5em; }
-
-    pre {
-      display: block;
-      padding: 0.5em;
-      overflow: scroll;
-
-      code { padding: 0; }
-    }
-
-    blockquote {
-      color: #777;
-      padding-left: 1em;
-      font-style: italic;
-      border-left: 5px solid #eee;
-    }
-  }
-
-  @media only screen and (max-width: 640px) {
-    .container>article, .container>section {
-      margin: 0;
-    }
-  }
-
 }
 
 /* http://nicolasgallagher.com/micro-clearfix-hack/ */

data/lib/assets/stylesheets/schnitzelstyle/_configuration.scss

@@ -1,13 +1,16 @@
 $container-width: 600px;
 
-$font-default:    15px "Georgia" !default;
-$font-header:     14px "Lucida Grande" !default;
+$font-1: 16px "Georgia" !default;
+$font-2: 14px "Lucida Grande" !default;
+
+$font-default:    $font-1;
+$font-header:     $font-2;
 $font-footer:     $font-header !default;
 $font-monospaced: 13px Menlo,Monaco,Courier !default;
 
 // define some colors
 $color-0: white !default;
-$color-1: #555 !default;
+$color-1: #666 !default;
 $color-2: #999 !default;
 $color-3: #4ea4ec !default;
 $color-4: complement($color-3);

data/lib/assets/stylesheets/schnitzelstyle/_content.scss

@@ -0,0 +1,135 @@
+@mixin schnitzel-content {
+  article, section {
+    margin: 4em 0;
+
+    // header
+    &>header {
+      margin-bottom: 1em;
+    }
+
+    // footer
+    &>footer {
+      @include small-type;
+      color: lighten($color-text, 30%);  // FIXME
+      a {
+        color: lighten($color-text, 30%);  // FIXME
+        text-decoration: none;
+        border-bottom: none;
+        &:hover {
+          color: lighten($color-text, 30%);  // FIXME
+          text-decoration: underline;
+        }
+      }
+    }
+
+    // basic styles
+    p, dl, ol, ul, li, div.input {
+      margin: 0.8em 0;
+      line-height: 24px;
+    }
+
+    p, li {
+      @include justified;
+    }
+
+    em {
+      font-style: italic;
+      color: #666;
+    }
+
+    // links
+    a {
+      color: $color-link;
+      text-decoration: none;
+      border-bottom: 2px solid $color-link-underline;
+
+      &:hover {
+        color: $color-link-hover;
+      }
+    }
+
+    // lists
+    ul {
+      list-style-type: square;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    li {
+      margin-left: 1em;
+    }
+
+    // headings
+    h1, h2, h3, h4, h5, h6 {
+      @include floaty-title($color-text, darken($color-page-background, 5%));
+      font: $font-header;
+      margin-top: 1.5em;
+      font-weight: bold;
+    }
+
+    h1 {
+      font-size: 150%;
+      text-transform: uppercase;
+    }
+
+    // quotes
+    blockquote {
+      @include justified;
+      color: #777; // FIXME
+      padding: 0 20px;
+      font-style: italic;
+      border-left: 5px solid #eee;
+    }
+
+    // images
+    img {
+      max-width: 100%;
+      display: block;
+      margin: 0 auto;
+    }
+
+    // code
+    pre, code {
+      font: $font-monospaced;
+      background-color: #eee;
+      color: #666;
+    }
+
+    code {
+      padding: 3px
+    }
+
+    pre {
+      display: block;
+      padding: 5px;
+      overflow: scroll;
+    }
+
+    // media embeds
+    //
+    // Prepare embedded media for proper responsiveness.
+    // Source: http://webdesignerwall.com/tutorials/css-elastic-videos
+    .embedded {
+      position: relative;
+      padding-bottom: 56.25%;
+      padding-top: 30px;
+      height: 0;
+      overflow: hidden;
+
+      iframe, object, embed {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    // embedded tweets
+    .twp-container {
+      margin: 1.5em auto;
+    }
+  }
+}

data/lib/assets/stylesheets/schnitzelstyle/_eyecandy.scss

@@ -1,3 +1,25 @@
+@mixin floaty-title($fg, $bg) {
+  display: inline-block;
+  padding: 5px 10px;
+
+  color: $fg;
+  background-color: $bg;
+  border-left: 5px solid darken($bg, 10%);
+
+  a {
+    color: $fg;
+    border: none;
+    text-decoration: none;
+    &:hover { color: $fg }
+  }
+}
+
+@mixin animated($time: 200ms, $method: ease-in-out, $properties: all) {
+  -webkit-transition-duration: $time;
+  -webkit-transition-timing-function: $method;
+  -webkit-transition-property: $properties;
+}
+
 @mixin box-shadow($x: 0, $y: 1px, $r: 2px, $color: rgba(0,0,0,.2)) {
   -webkit-box-shadow: $x $y $r $color;
   -moz-box-shadow: $x $y $r $color;

data/lib/assets/stylesheets/schnitzelstyle/_forms.scss

@@ -6,17 +6,24 @@
       margin: 0.5em 0;
 
       label {
-        display: block;
-        color: $color-header;
-        font: $font-footer;
-        font-size: 80%;
+        display: inline-block;
+        @include small-type;
         font-weight: bold;
+        padding-left: 5px;
+        color: $color-header;
       }
 
-      input {
-        font: $font-default;
-        padding: 2px 4px;
-        width: 600px;
+      input, textarea {
+        margin: 0;
+        width: 100%;
+        padding: 5px;
+        border: none;
+        font: $font-monospaced;
+        background-color: #f4f4f4; // FIXME
+        color: #999;  // FIXME
+
+        @include animated(100ms);
+        &:hover, &:focus { color: #333; }  // FIXME
       }
 
       select, option {
@@ -24,10 +31,8 @@
         padding: 2px 4px;
       }
 
-      textarea {
-        font: $font-default;
-        padding: 2px 4px;
-        width: 600px;
+      select {
+        display: block;
       }
 
       .error {
@@ -38,10 +43,10 @@
       }
 
       .hint {
+        padding: 0px 5px;
         display: block;
         color: $color-2;
-        font: $font-footer;
-        font-size: 80%;
+        @include small-type;
       }
     }
 
@@ -50,6 +55,8 @@
     }
 
     div.buttons {
+      margin-top: 2em !important;
+
       input {
         @include button;
         font-size: 100%;

data/lib/assets/stylesheets/schnitzelstyle/_grid.scss

@@ -1,13 +1,6 @@
-@mixin container($width: $container-width) {
-  width: $width;
+@mixin container {
+  width: 600px;
   margin: 0 auto;
-  padding: 2em 0 5em 0;
-
-  @media only screen and (max-width: 640px) {
-    width: auto;
-    margin: 0 0.6em;
-    padding: 0.6em 0;
-  }
 }
 
 @mixin row {

data/lib/assets/stylesheets/schnitzelstyle/_responsive.scss

@@ -0,0 +1,46 @@
+@mixin schnitzel-responsive {
+  @media only screen and (max-width: 640px) {
+    // for debugging
+    // body { background-color: #fee }
+
+    body {
+      padding-bottom: 10px;
+    }
+
+    // container overrides
+    .container {
+      width: auto;
+      padding: 0 10px;
+
+      &>header {
+        margin-top: 0 !important;
+        font-size: 100%;
+
+        .site-title {
+          font-size: 100%;
+
+          display: block;
+          margin-left: -10px;
+          margin-right: -10px;
+        }
+      }
+    }
+
+    // content overrides
+    article, section {
+      margin-top: 10px;
+
+      h1, h2, h3, h4, h5, h6 {
+        display: block;
+        margin-left: -10px;
+        margin-right: -10px;
+      }
+    }
+
+    // grid overrides
+    .column, .columns {
+      width: 100% !important;
+      float: none !important;
+    }
+  }
+}

data/lib/assets/stylesheets/schnitzelstyle/complete.scss

@@ -4,3 +4,4 @@
 
 @include schnitzel-complete;
 @include schnitzel-export;
+@include schnitzel-responsive;

data/lib/schnitzelstyle/version.rb

@@ -1,3 +1,3 @@
 module Schnitzelstyle
-  VERSION = "0.0.7"
+  VERSION = "0.0.8"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: schnitzelstyle
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-02-21 00:00:00.000000000 Z
+date: 2012-02-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &70331843353520 !ruby/object:Gem::Requirement
+  requirement: &70103334050860 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70331843353520
+  version_requirements: *70103334050860
 description: A simple, light-weight CSS framework to kickstart your web app.
 email:
 - hendrik@mans.de
@@ -40,12 +40,14 @@ files:
 - lib/assets/stylesheets/schnitzelstyle/_basics.scss
 - lib/assets/stylesheets/schnitzelstyle/_coderay.scss
 - lib/assets/stylesheets/schnitzelstyle/_configuration.scss
+- lib/assets/stylesheets/schnitzelstyle/_content.scss
 - lib/assets/stylesheets/schnitzelstyle/_export.scss
 - lib/assets/stylesheets/schnitzelstyle/_eyecandy.scss
 - lib/assets/stylesheets/schnitzelstyle/_flashes.scss
 - lib/assets/stylesheets/schnitzelstyle/_forms.scss
 - lib/assets/stylesheets/schnitzelstyle/_grid.scss
 - lib/assets/stylesheets/schnitzelstyle/_reset.scss
+- lib/assets/stylesheets/schnitzelstyle/_responsive.scss
 - lib/assets/stylesheets/schnitzelstyle/complete.scss
 - lib/schnitzelstyle.rb
 - lib/schnitzelstyle/rails.rb