CSS fixes from Ruby Slate v1.4.0

buildstyle

@@ -0,0 +1,3 @@
+#!/bin/sh
+./sass source/stylesheets/print.css.scss > pub/css/print.css
+./sass source/stylesheets/screen.css.scss > pub/css/screen.css

buildstyleCompressed

@@ -0,0 +1,3 @@
+#!/bin/sh
+./sass --output-style compressed source/stylesheets/print.css.scss > pub/css/print.css
+./sass --output-style compressed source/stylesheets/screen.css.scss > pub/css/screen.css

package.json

@@ -35,6 +35,6 @@
   },
   "devDependencies": {
     "ejs-lint": "^0.2.0",
-    "node-sass": "^3.10.1"
+    "node-sass": "^3.14.0-0"
   }
 }

pub/css/screen.css

@@ -488,7 +488,7 @@ html, body {
       top: 17px;
       left: 15px;
       color: #fff; }
-  .tocify-wrapper img + .tocify {
+  .tocify-wrapper img + .tocify, .tocify-wrapper .lang-selector + .tocify {
     margin-top: 20px; }
   .tocify-wrapper .search-results {
     margin-top: 0;

source/stylesheets/_variables.scss

@@ -23,46 +23,46 @@ under the License.
 
 // BACKGROUND COLORS
 ////////////////////
-$nav-bg: #393939;
-$examples-bg: #393939;
-$code-bg: #292929;
-$code-annotation-bg: #1c1c1c;
-$nav-subitem-bg: #262626;
-$nav-active-bg: #2467af;
-$lang-select-border: #000;
-$lang-select-bg: #222;
-$lang-select-active-bg: $examples-bg; // feel free to change this to blue or something
-$lang-select-pressed-bg: #111; // color of language tab bg when mouse is pressed
-$main-bg: #eaf2f6;
-$aside-notice-bg: #8fbcd4;
-$aside-warning-bg: #c97a7e;
-$aside-success-bg: #6ac174;
-$search-notice-bg: #c97a7e;
+$nav-bg: #393939 !default;
+$examples-bg: #393939 !default;
+$code-bg: #292929 !default;
+$code-annotation-bg: #1c1c1c !default;
+$nav-subitem-bg: #262626 !default;
+$nav-active-bg: #2467af !default;
+$lang-select-border: #000 !default;
+$lang-select-bg: #222 !default;
+$lang-select-active-bg: $examples-bg !default; // feel free to change this to blue or something
+$lang-select-pressed-bg: #111 !default; // color of language tab bg when mouse is pressed
+$main-bg: #eaf2f6 !default;
+$aside-notice-bg: #8fbcd4 !default;
+$aside-warning-bg: #c97a7e !default;
+$aside-success-bg: #6ac174 !default;
+$search-notice-bg: #c97a7e !default;
 
 
 // TEXT COLORS
 ////////////////////
-$main-text: #333; // main content text color
-$nav-text: #fff;
-$nav-active-text: #fff;
-$lang-select-text: #fff; // color of unselected language tab text
-$lang-select-active-text: #fff; // color of selected language tab text
-$lang-select-pressed-text: #fff; // color of language tab text when mouse is pressed
+$main-text: #333 !default; // main content text color
+$nav-text: #fff !default;
+$nav-active-text: #fff !default;
+$lang-select-text: #fff !default; // color of unselected language tab text
+$lang-select-active-text: #fff !default; // color of selected language tab text
+$lang-select-pressed-text: #fff !default; // color of language tab text when mouse is pressed
 
 
 // SIZES
 ////////////////////
-$nav-width: 230px; // width of the navbar
-$examples-width: 50%; // portion of the screen taken up by code examples
-$logo-margin: 20px; // margin between nav items and logo, ignored if search is active
-$main-padding: 28px; // padding to left and right of content & examples
-$nav-padding: 15px; // padding to left and right of navbar
-$nav-v-padding: 10px; // padding used vertically around search boxes and results
-$nav-indent: 10px; // extra padding for ToC subitems
-$code-annotation-padding: 13px; // padding inside code annotations
-$h1-margin-bottom: 21px; // padding under the largest header tags
-$tablet-width: 930px; // min width before reverting to tablet size
-$phone-width: $tablet-width - $nav-width; // min width before reverting to mobile size
+$nav-width: 230px !default; // width of the navbar
+$examples-width: 50% !default; // portion of the screen taken up by code examples
+$logo-margin: 20px !default; // margin between nav items and logo, ignored if search is active
+$main-padding: 28px !default; // padding to left and right of content & examples
+$nav-padding: 15px !default; // padding to left and right of navbar
+$nav-v-padding: 10px !default; // padding used vertically around search boxes and results
+$nav-indent: 10px !default; // extra padding for ToC subitems
+$code-annotation-padding: 13px !default; // padding inside code annotations
+$h1-margin-bottom: 21px !default; // padding under the largest header tags
+$tablet-width: 930px !default; // min width before reverting to tablet size
+$phone-width: $tablet-width - $nav-width !default; // min width before reverting to mobile size
 
 
 // FONTS
@@ -86,12 +86,12 @@ $phone-width: $tablet-width - $nav-width; // min width before reverting to mobil
 
 // OTHER
 ////////////////////
-$nav-active-shadow: #000;
-$nav-footer-border-color: #666;
-$nav-embossed-border-top: #000;
-$nav-embossed-border-bottom: #939393;
-$main-embossed-text-shadow: 0px 1px 0px #fff;
-$search-box-border-color: #666;
+$nav-active-shadow: #000 !default;
+$nav-footer-border-color: #666 !default;
+$nav-embossed-border-top: #000 !default;
+$nav-embossed-border-bottom: #939393 !default;
+$main-embossed-text-shadow: 0px 1px 0px #fff !default;
+$search-box-border-color: #666 !default;
 
 
 ////////////////////////////////////////////////////////////////////////////////

source/stylesheets/screen.css.scss

@@ -110,7 +110,7 @@ html, body {
     }
   }
 
-  img+.tocify {
+  img+.tocify, .lang-selector+.tocify {
     margin-top: $logo-margin;
   }
 
@@ -624,4 +624,4 @@ html, body {
 
 .highlight, .highlight .w {
   background-color: $code-bg;
-}
+}

updateFromSlate

@@ -0,0 +1,11 @@
+#!/bin/sh
+# This script assumes you have Ruby Slate checkout by the side of shins
+cp ../slate/source/fonts source/fonts
+cp ../slate/source/images source/images
+cp ../slate/source/includes source/includes
+cp ../slate/source/javascripts source/javascripts
+cp ../slate/source/javascripts/app source/javascripts/app
+cp ../slate/source/javascripts/lib source/javascripts/lib
+cp ../slate/source/layouts source/layouts
+cp ../slate/source/stylesheets source/stylesheets
+echo Please run ./buildstyle to rebuild the .css files