From dcf34b6578b584f607027b5cf96df88a379a4842 Mon Sep 17 00:00:00 2001
From: Mitchell Hashimoto <mitchell.hashimoto@gmail.com>
Date: Thu, 20 Jun 2013 22:19:49 -0700
Subject: [PATCH] website: lots of tweaking around code styling

---
 website/source/stylesheets/_components.scss |  51 +---
 website/source/stylesheets/_helpers.scss    |   4 +-
 website/source/stylesheets/_sidebar.scss    |  12 -
 website/source/stylesheets/_styles.scss     | 299 ++++++++++----------
 4 files changed, 167 insertions(+), 199 deletions(-)

diff --git a/website/source/stylesheets/_components.scss b/website/source/stylesheets/_components.scss
index d65b69224..f0ca4b057 100644
--- a/website/source/stylesheets/_components.scss
+++ b/website/source/stylesheets/_components.scss
@@ -1,10 +1,10 @@
 .hero {
     height: $hero-height;
-    background: #000000 url(/images/hero_image.jpg) no-repeat 35px -50px;
+    background: #000000 url(/images/hero_image.jpg) no-repeat 35px -40px;
     background-size: 960px 467px;
 
     h2 {
-        margin-top: 60px;
+        margin-top: 70px;
     }
 }
 
@@ -125,10 +125,6 @@
 
 .docs-wrapper {
     clear: right;
-    @include respond-to(mobile) {
-        margin-right: -20px;
-        margin-left: -20px;
-    }
 
     .docs-body {
         float: left;
@@ -136,25 +132,27 @@
         max-width: 760px;
         display: block;
         @extend .white-background;
-        @include respond-to(mobile) {
-            width: 100%;
-        }
 
         .docs-content {
-            max-width: 600px;
             padding: $docs-top-margin 80px;
             display: block;
-            @include respond-to(mobile) {
-                padding: 0;
-                width: 91%;
-                margin-left: 5%;
+
+            pre {
+                margin-left: -80px;
+                margin-right: -80px;
+                padding-top: 40px;
+                padding-bottom: 40px;
+                padding-left: 80px;
+                padding-right: 80px;
+                border-radius: 0;
             }
         }
 
         .docs-background {
             @extend .white-background;
             height: 100%;
-            width: 760px;
+            width: 70%;
+            max-width: 760px;
             position: fixed;
             top: 0;
             left: $sidebar-width;
@@ -165,17 +163,6 @@
             margin-top: $docs-top-margin;
         }
 
-        h1,
-        h2,
-        h3,
-        p {
-            @include respond-to(mobile) {
-                -webkit-hyphens: auto;
-                -moz-hyphens: auto;
-                hyphens: auto;
-            }
-        }
-
         h1 {
             font-size: 40px;
             line-height: (25/20);
@@ -192,18 +179,6 @@
             text-transform: capitalize;
         }
     }
-
-    pre {
-        @include respond-to(mobile) {
-            margin: $baseline 0 $baseline 0;
-            padding: $baseline 0 0 $baseline;
-            width: 80%;
-            background-color: transparent;
-            border: none;
-            color: $black;
-        }
-    }
-
 }
 
 .pagination {
diff --git a/website/source/stylesheets/_helpers.scss b/website/source/stylesheets/_helpers.scss
index f68c27a38..004194b8f 100644
--- a/website/source/stylesheets/_helpers.scss
+++ b/website/source/stylesheets/_helpers.scss
@@ -33,14 +33,14 @@ $button-height: 60px;
 
 // components
 $nav-height: 100px;
-$hero-height: 440px;
+$hero-height: 460px;
 $docs-top-margin: 60px;
 $sidebar-background-color: $dark-background;
 $sidebar-width: 250px;
 
 
 //typography
-$serif: 'tk-ff-tisa-web-pro', 'ff-tisa-web-pro-1', 'ff-tisa-web-pro-2', 'tisa ot', helvetica, Georgia, serif;
+$serif: 'prenton', helvetica, Georgia, serif;
 $sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $mono: 'Inconsolata', 'courier new', courier, mono-space;
 
diff --git a/website/source/stylesheets/_sidebar.scss b/website/source/stylesheets/_sidebar.scss
index cac8999e6..ea822aa3b 100644
--- a/website/source/stylesheets/_sidebar.scss
+++ b/website/source/stylesheets/_sidebar.scss
@@ -7,18 +7,11 @@
     float: left;
     background-color: $sidebar-background-color;
     height: 100%;
-    @include respond-to(mobile) {
-        width: 100%;
-    }
-
 
     h2 {
         color: $green;
         text-transform: uppercase;
         padding: $docs-top-margin 20px 0;
-        @include respond-to(mobile) {
-            padding: $baseline;
-        }
     }
 
     h4 {
@@ -28,7 +21,6 @@
     }
 
     ul {
-
         @extend .padded-sm;
 
         li {
@@ -43,9 +35,6 @@
             display: block;
             width: 100%;
         }
-
-
-
     }
 
     .sidebar-background {
@@ -57,5 +46,4 @@
         left: 0;
         z-index: -9999;
     }
-
 }
diff --git a/website/source/stylesheets/_styles.scss b/website/source/stylesheets/_styles.scss
index 08a138be9..5396344c5 100644
--- a/website/source/stylesheets/_styles.scss
+++ b/website/source/stylesheets/_styles.scss
@@ -1,24 +1,24 @@
 * {
-margin: 0;
+    margin: 0;
 }
 
 html,
 body {
-margin: 0;
-height: 100%;
+    margin: 0;
+    height: 100%;
 }
 
 html {
-	-webkit-tap-highlight-color: transparent;
-	-webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
 }
 
 body {
-background-color: $background;
-font-family: $sans;
-letter-spacing: 1px;
-font-size: $base-font-size;
-line-height: $base-line-height;
+    background-color: $background;
+    font-family: $sans;
+    letter-spacing: 1px;
+    font-size: $base-font-size;
+    line-height: $base-line-height;
 }
 
 h1,
@@ -27,122 +27,122 @@ h3,
 h4,
 h5,
 h6 {
-letter-spacing: 2px;
-font-weight: normal;
+    letter-spacing: 2px;
+    font-weight: normal;
 }
 
 h1 {
-font-family: $sans;
-font-size: 70px;
-line-height: (80/70);
-	@include respond-to(mobile) {
-	font-size: 50px;
-	line-height: (50/45);
-	}
+    font-family: $sans;
+    font-size: 70px;
+    line-height: (80/70);
+    @include respond-to(mobile) {
+        font-size: 50px;
+        line-height: (50/45);
+    }
 }
 
 h2 {
-font-family: $sans;
-font-size: 40px;
-line-height: (50/40);
+    font-family: $sans;
+    font-size: 40px;
+    line-height: (50/40);
 
-	&.has-dividers {
-	//overflow: auto !important;
-	display: table-cell;
-	text-align: center;
-	vertical-align: middle;
-	@include respond-to(mobile) {
-	display: block;
-	}
-	}
+    &.has-dividers {
+        //overflow: auto !important;
+        display: table-cell;
+        text-align: center;
+        vertical-align: middle;
+        @include respond-to(mobile) {
+            display: block;
+        }
+    }
 }
 
 h3 {
-font-family: $sans;
-font-size: 20px;
-line-height: (30/20);
+    font-family: $sans;
+    font-size: 20px;
+    line-height: (30/20);
 }
 
 h4 {
-font-family: $mono;
-font-size: 20px;
-line-height: (30/20);
+    font-family: $mono;
+    font-size: 20px;
+    line-height: (30/20);
 }
 
 h5 {
-font-family: $sans;
-font-size: 16px;
-line-height: (22/16);
+    font-family: $sans;
+    font-size: 16px;
+    line-height: (22/16);
 }
 
 h6 {
-font-family: $mono;
-font-size: 16px;
-line-height: (22/16);
+    font-family: $mono;
+    font-size: 16px;
+    line-height: (22/16);
 }
 
 p {
-font-family: $serif;
-font-size: 17px;
-line-height: (30/17);
-letter-spacing: 1px;
+    font-family: $serif;
+    font-size: 17px;
+    line-height: (30/17);
+    letter-spacing: 1px;
 
-	&.large-text {
-	font-size: 20px;
-	line-height: (35/20);
-	}
-	
-	a {
-	color: $green;
-		&:hover {
-		color: darken($green, 30%);
-		}
-		&:active {
-		color: darken($green, 50%);
-		}
-	}
+    &.large-text {
+        font-size: 20px;
+        line-height: (35/20);
+    }
+
+    a {
+        color: $green;
+        &:hover {
+            color: darken($green, 30%);
+        }
+        &:active {
+            color: darken($green, 50%);
+        }
+    }
 }
 
 a {
-color: inherit;
-text-decoration: none;
+    color: inherit;
+    text-decoration: none;
 
-	&:hover {
-	color: inherit;
-	text-decoration: none;
-	}
+    &:hover {
+        color: inherit;
+        text-decoration: none;
+    }
 
-	&:visited {
+    &:visited {
 
-	}
+    }
 
-	&:active {
+    &:active {
 
-	}
+    }
 
 }
 
 ul,
 ol {
-margin: 0;
-padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 ul {
-list-style-type: none;
+    list-style-type: none;
 }
 
 ol {
-list-style-type: circle;
-list-style-position: inside;
-margin-top: $baseline * 2;
+    list-style-type: circle;
+    list-style-position: inside;
+    margin-top: $baseline * 2;
 
-	li {
-	font-family: $serif;
-	font-size: 17px;
-	line-height: (30/17) !important;
-	margin-bottom: $baseline;
-	}
+    li {
+        font-family: $serif;
+        font-size: 17px;
+        line-height: (30/17) !important;
+        margin-bottom: $baseline;
+    }
 }
 
 li {
@@ -154,48 +154,53 @@ blockquote {
 }
 
 em {
-font-style: italic;
+    font-style: italic;
 }
 
 strong {
-font-weight: bold;
+    font-weight: bold;
 }
 
 small,
 .small {
-font-size: 13px;
+    font-size: 13px;
 }
 
 hr {
-margin: ($baseline * 2) 0;
-border-color: $gray-mid;
-border-bottom: 0;
+    margin: ($baseline * 2) 0;
+    border-color: $gray-mid;
+    border-bottom: 0;
 }
 
 pre {
-background-color: $black;
-color: $white;
-margin: ($baseline * 2) 0;
-padding-top: $baseline;
-padding-bottom: 0;
+    background-color: $black;
+    color: $white;
+    margin: ($baseline * 2) 0;
+    margin-left: -80px;
+    margin-right: -80px;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    padding-left: 80px;
+    padding-right: 80px;
+    border-radius: 0;
 }
 
 table {
-font-family: $mono;
-margin: ($baseline * 2) 0;
-color: $gray-dark;
+    font-family: $mono;
+    margin: ($baseline * 2) 0;
+    color: $gray-dark;
 
-	th {
-	color: $black;
-	font-weight: normal !important;
-	}
+    th {
+        color: $black;
+        font-weight: normal !important;
+    }
 }
 
 ::selection {
-	background: #ffff00; /* Safari */
-	}
+    background: #ffff00; /* Safari */
+}
 ::-moz-selection {
-	background: #ffff00; /* Firefox */
+    background: #ffff00; /* Firefox */
 }
 
 input {
@@ -203,47 +208,47 @@ input {
 }
 
 button {
-height: $button-height;
-background-color: transparent;
-border-width: 2px;
-border-style: solid;
-padding: 0 30px;
-text-transform: uppercase;
-letter-spacing: 3px;
-@include rounded(5px);
+    height: $button-height;
+    background-color: transparent;
+    border-width: 2px;
+    border-style: solid;
+    padding: 0 30px;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    @include rounded(5px);
 
-	&.primary {
-	color: $green;
-	border-color: $green;
-	
-		&:hover {
-		background-color: transparentize($green, .7);
-		}
-		
-		&:active {
-		background-color: transparentize($green, .5);
-		}
-	}
-	
-	&.secondary {
-	color: $black;
-	border-color: $black;
-	
-		&:hover {
-		background-color: transparentize($black, .9);
-		}
-		
-		&:active {
-		background-color: transparentize($black, .7);
-		}
-	}
-	
-	&.inline {
-	margin: auto $baseline;
-	@include respond-to(mobile) {
-	display: block;
-	width: 100%;
-	margin: $baseline 0;
-	}
-	}
-}
\ No newline at end of file
+    &.primary {
+        color: $green;
+        border-color: $green;
+
+        &:hover {
+            background-color: transparentize($green, .7);
+        }
+
+        &:active {
+            background-color: transparentize($green, .5);
+        }
+    }
+
+    &.secondary {
+        color: $black;
+        border-color: $black;
+
+        &:hover {
+            background-color: transparentize($black, .9);
+        }
+
+        &:active {
+            background-color: transparentize($black, .7);
+        }
+    }
+
+    &.inline {
+        margin: auto $baseline;
+        @include respond-to(mobile) {
+            display: block;
+            width: 100%;
+            margin: $baseline 0;
+        }
+    }
+}