Refactor SCSS for better organization, readability, and customizability.

source/stylesheets/syntax.css.scss.erb

@@ -13,8 +13,8 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations
 under the License.
 */
+
 <%= Rouge::Themes::Base16::Monokai.render(:scope => '.highlight') %>
-@import 'variables';
 
 .highlight .c, .highlight .cm, .highlight .c1, .highlight .cs {
   color: #909090;

source/stylesheets/variables.scss

@@ -14,70 +14,82 @@ License for the specific language governing permissions and limitations
 under the License.
 */
 
-// width of the navbar
-$nav-width: 230px;
 
-// default padding of the navbar
-$nav-padding: 15px;
+////////////////////////////////////////////////////////////////////////////////
+// CUSTOMIZE SLATE
+////////////////////////////////////////////////////////////////////////////////
+// Use these settings to help adjust the appearance of Slate
 
-// background colors
+
+// BACKGROUND COLORS
+////////////////////
 $nav-bg: #393939;
 $examples-bg: #393939;
 $code-bg: #292929;
 $code-annotation-bg: #1c1c1c;
 $nav-subitem-bg: #262626;
-$nav-select-bg: #2467af;
+$nav-active-bg: #2467af;
 $lang-select-border: #000;
-$lang-select-bg: #222222;
+$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;
 
-// border colors
-// $lang-select-border: #113a6f;
-
-// text colors
-// $nav-bg: #393939;
-// $examples-bg: #393939;
-// $code-bg: #262626;
-// $nav-subitem-bg: #262626;
-$lang-select-text: #fff;
-
-$examples-width: 50%;
-
-$code-annotation-padding: 13px;
-
-// indentation amount for sub-items
-$nav-indent: 10px;
-
-// padding to the left of the main content, to the right of the navbar
-$main-padding: 28px;
-
-// primary text color
-$main-text-color: #333;
 
-// currently just the color of table borders
-$line-color: #cfcfcf;
-
-// margin between nav items and logo
-$logo-margin: 20px;
-
-
-// these are for the code blocks on the right, and the
-// subheader navbar thing that swoops in
-@mixin fancy-inset-border-top {
-  border-top: 1px solid #000;
+// 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
+
+
+// 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
+$main-padding: 28px; // padding to left and right of content & examples
+$nav-padding: 15px; // padding to left and right of navbar
+$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
+
+
+// FONTS
+////////////////////
+%default-font {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
 }
 
-@mixin fancy-inset-border-bottom {
-  border-bottom: 1px solid #404040;
-  box-shadow: none;
+%header-font {
+  @extend %default-font;
+  font-weight: bold;
 }
 
-@mixin embedded-text($opacity: 1) {
-  @include text-shadow(0px 1px 0px rgba(#fff,$opacity));
+%code-font {
+  font-family: Monaco, "Courier New", monospace;
+  font-size: 12px;
 }
 
-@mixin break-words {
 
+// OTHER
+////////////////////
+$nav-active-shadow: #000;
+$nav-embossed-border-top: 1px solid #000;
+$nav-embossed-border-bottom: 1px solid #404040;
+$main-embossed-text-shadow: 0px 1px 0px #fff;
+
+
+////////////////////////////////////////////////////////////////////////////////
+// INTERNAL
+////////////////////////////////////////////////////////////////////////////////
+// These settings are probably best left alone.
+
+%break-words {
  -ms-word-break: break-all;
      word-break: break-all;
 
@@ -87,4 +99,4 @@ $logo-margin: 20px;
 -webkit-hyphens: auto;
    -moz-hyphens: auto;
         hyphens: auto;
-}
\ No newline at end of file
+}