schnitzelstyle 0.1.1 → 0.1.2

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

@@ -4,6 +4,11 @@
   -moz-#{$name}: $value;
 }
 
+@mixin box-model($model) {
+  @include vendorize(box-sizing, $model !important);
+  * { @include vendorize(box-sizing, $model !important); }
+}
+
 @mixin justified {
   text-align: justify;
   text-justify: newspaper;
@@ -19,10 +24,8 @@
 }
 
 @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 {
+    @include box-model(border-box);
     color: $color-text;
     background-color: $color-background;
     font: $font-default;
@@ -43,6 +46,7 @@
   }
 
   hr {
+    margin: 1.5em 0;
     border: none;
     color: rgba($color-text, 0.1);
     background-color: rgba($color-text, 0.1);

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

@@ -57,8 +57,6 @@
       li { margin-left: 1.5em; }
     }
 
-
-
     // headings
     h1, h2, h3, h4, h5, h6 {
       margin-top: 1.5em;
@@ -66,13 +64,18 @@
       font-weight: bold;
     }
 
+    hr+h1, hr+h2, hr+h3, hr+h4, hr+h5, hr+h6 {
+      margin-top: 0;
+    }
+
     h1, h2 {
       @include floaty-title($color-heading-text, $color-heading-background);
     }
 
     h1 {
-      font-size: 150%;
+      font-size: 140%;
       text-transform: uppercase;
+      letter-spacing: -0.07em;
     }
 
     // quotes
@@ -94,12 +97,13 @@
     // code
     pre, code {
       font: $font-monospaced;
-      background-color: rgba($color-text, 0.2);
+      background-color: rgba($color-text, 0.08);
       color: rgba($color-text, 0.9);
+      border-radius: 3px;
     }
 
     code {
-      padding: 3px
+      padding: 2px 5px
     }
 
     pre {
@@ -109,16 +113,26 @@
     }
 
     // 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;
+      $width: $container-width + 300px;
+      width: $width;
+      margin-left: -($width - $container-width) / 2;
       overflow: hidden;
 
+      &.soundcloud {
+        height: 165px !important;
+      }
+
+      &.video {
+        &.vimeo {
+          height: ($width / 16) * 9;
+        }
+        &.youtube {
+          height: ($width / 16) * 9.5;
+        }
+      }
+
       iframe, object, embed {
         position: absolute;
         top: 0;

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

@@ -5,11 +5,11 @@
 
 @mixin floaty-title($fg, $bg) {
   display: inline-block;
-  padding: 5px 40px 5px 10px;
+  padding: 5px 10px 4px 10px;
 
   color: $fg;
   background-color: $bg;
-  border-left: 5px solid rgba($fg, 0.2);
+  border-bottom: 1px solid mix($color-text, $bg, 30%);
 
   a {
     color: $fg;
@@ -66,7 +66,7 @@
 
 @mixin schnitzel-eyecandy {
   .button { @include button }
-  .button.red { @include button(#c66) }
-  .button.green { @include button(#6c6) }
-  .button.blue  { @include button(#66c) }
+  .button.red, button.red     { @include button(#c66) }
+  .button.green, button.green { @include button(#6c6) }
+  .button.blue, button.blue   { @include button(#66c) }
 }

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

@@ -69,10 +69,13 @@
     div.buttons {
       margin-top: 2em !important;
 
-      input {
-        @include button;
+      input { @include button; }
+
+      input, button {
+        display: inline-block;
         font-size: 100%;
-        padding: 4px 10px;
+        padding: 4px 10px !important;
+        cursor: pointer;
       }
     }
   }

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

@@ -1,4 +1,24 @@
 @mixin schnitzel-responsive {
+  @media only screen and (max-width: 940px) {
+    article, section {
+      .embedded {
+        width: 100%;
+        margin-left: 0;
+
+        &.video {
+          height: 0 !important;
+          padding-top: 30px;
+          &.youtube {
+            padding-bottom: 56.25%;
+          }
+          &.vimeo {
+            padding-bottom: 52%;
+          }
+        }
+      }
+    }
+  }
+
   @media only screen and (max-width: 640px) {
     body {
       padding-bottom: 10px;

data/lib/schnitzelstyle/version.rb

@@ -1,3 +1,3 @@
 module Schnitzelstyle
-  VERSION = "0.1.1"
+  VERSION = "0.1.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: schnitzelstyle
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-03-03 00:00:00.000000000 Z
+date: 2012-03-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &70350446182080 !ruby/object:Gem::Requirement
+  requirement: &70119516222600 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70350446182080
+  version_requirements: *70119516222600
 description: A simple, light-weight CSS framework to kickstart your web app.
 email:
 - hendrik@mans.de