Merge pull request linkedin#25 from sethkinast/dustjs.com

Quick CSS polish
sethkinast · Mar 3, 2015 · be68bda · be68bda
2 parents 60de2a6 + be58043
commit be68bda
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 61 deletions.
diff --git a/_includes/nav.md b/_includes/nav.md
@@ -1,8 +1,8 @@
 
 <nav>
   <header>
-    <h1><a href="/">DustJS</a></h1>
-    <h2 class="tagline">Asynchronous templates for the browser and nodejs</h2>
+    <h1><a href="/">Dust.js</a></h1>
+    <h2 class="tagline">Asynchronous templates for the browser and Node.js</h2>
   </header>
   <ul class="main-nav">
     <li><a href="/">About</a></li>
@@ -14,7 +14,7 @@
       <li><a href="/guides/dust-helpers">Dust Helpers</a></li>
       <li><a href="/guides/using-filters">Using Filters</a></li>
       <li><a href="/guides/partials">Partials</a></li>
-      <li><a href="/guides/base-and-override-templates">Base and override templates</a></li>
+      <li><a href="/guides/base-and-override-templates">Blocks and Inline Partials</a></li>
       <li><a href="/guides/tips-and-tricks">Tips and Tricks</a></li>
       <li><a href="/guides/advanced-topics">Advanced Topics</a></li>
     </ul>

diff --git a/scss/components/_content.scss b/scss/components/_content.scss
@@ -55,7 +55,7 @@
 
   pre {
     @include interior-shadow($light-shadow, $shadow-small-size);
-    overflow-x: scroll;
+    overflow-x: auto;
     background: $brand-neutral;
     color: $brand-blue;
     padding: $pre-padding;
@@ -96,4 +96,4 @@
     }
   }
 
-}
+}
diff --git a/scss/components/_header.scss b/scss/components/_header.scss
@@ -3,8 +3,8 @@ header {
     @include Dosis-light();
     font-size: 48px;
     line-height: 50px;
-    margin: $header-margin-bottom 0px $header-margin-bottom 0px;
-    padding: 0px ($nav-indent - $brand-button-padding * 2);
+    margin: $header-margin-bottom 0px;
+    padding: 0;
     a, a:visited {
       color: #FFF;
       text-decoration: none;
@@ -18,6 +18,7 @@ header {
     top: $tagline-position-top;
     left: $tagline-position-left;
     font-size: $tagline-font-size;
+    line-height: $tagline-font-size * 1.5;
     color: $brand-graphite;
   }
-}
+}
diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss
@@ -4,47 +4,51 @@ nav {
   height: 100%;
   background: $brand-graphite;
   position: fixed;
+  padding: 0 $nav-indent;
 
-  ul.main-nav > li {
-    padding: 10px 0px 0px $nav-indent;
-    color: white;
+  ul.main-nav {
+    > li {
+      line-height: 26px;
+      padding: 0;
+      color: white;
 
-    a {
-      @include styleguide(medium muted headline in a module, link in a module);
-      color: #FFF;
-    }
+      a {
+        @include styleguide(medium muted headline in a module, link in a module);
+        color: #FFF;
+      }
 
-    & > ul > li {
-      padding-left: $nav-sub-indent;
-    }
+      li {
+        padding-left: $nav-sub-indent;
+      }
 
-    label {
-      color: tint($brand-light-graphite, 30%);
-      cursor: pointer;
+      label {
+        color: tint($brand-light-graphite, 30%);
+        cursor: pointer;
 
-      &:hover {
-        text-decoration: underline;
+        &:hover {
+          text-decoration: underline;
 
+        }
       }
-    }
 
-    &.sub {
+      &.sub {
 
-      input {
-        @include hide-element();
+        input {
+          @include hide-element();
 
-        &:checked ~ ul {
-          display: block;
+          &:checked ~ ul {
+            display: block;
 
-          li {
-            padding-left: $nav-sub-indent;
+            li {
+              padding-left: $nav-sub-indent;
+            }
           }
         }
-      }
 
-      ul {
-        display: none;
+        ul {
+          display: none;
+        }
       }
     }
   }
-}
+}
diff --git a/scss/partials/_layout.scss b/scss/partials/_layout.scss
@@ -7,27 +7,27 @@ $content-columns: 18;
 ///////////
 //Widths //
 ///////////
-$nav-width: 253px;;
+$nav-width: 205px;
 
 ////////////
 //Indents //
 ////////////
-$nav-indent: 72px;
+$nav-indent: 24px;
 $nav-sub-indent: 10px;
 $content-indent: 65px;
 
 ////////////
 //Margins //
 ////////////
 $header-margin-bottom: 34px;
-$content-margin-top: 142px;
+$content-margin-top: 122px;
 $content-h1-margin-bottom: 32px;
 $nested-api-list-margin-top: 15px;
 
 //////////////
 //Positions //
 //////////////
-$tagline-position-top: 74px;
+$tagline-position-top: 36px;
 $tagline-position-left: 300px;
 
 /////////////

diff --git a/styles/main.css b/styles/main.css
@@ -8,17 +8,19 @@ nav {
   -moz-box-shadow: #343434 0 0 5px;
   -webkit-box-shadow: #343434 0 0 5px;
   box-shadow: #343434 0 0 5px;
-  width: 253px;
+  width: 205px;
   height: 100%;
   background: #323232;
   position: fixed;
+  padding: 0 24px;
 }
-/* line 8, ../scss/components/_nav.scss */
+/* line 10, ../scss/components/_nav.scss */
 nav ul.main-nav > li {
-  padding: 10px 0px 0px 72px;
+  line-height: 26px;
+  padding: 0;
   color: white;
 }
-/* line 12, ../scss/components/_nav.scss */
+/* line 15, ../scss/components/_nav.scss */
 nav ul.main-nav > li a {
   /* [archetype:styleguide:begin] --- `medium muted headline in a module, link in a module` --- */
   font-size: 16px;
@@ -29,29 +31,29 @@ nav ul.main-nav > li a {
   /* [archetype:styleguide:end] --- `medium muted headline in a module, link in a module` --- */
   color: #FFF;
 }
-/* line 193, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/archetype-1.0.0.alpha.4/stylesheets/archetype/util/_targeting.scss */
+/* line 193, ../../../../../Library/Ruby/Gems/2.0.0/gems/archetype-1.0.0.alpha.5/stylesheets/archetype/util/_targeting.scss */
 nav ul.main-nav > li a {
   /* [archetype:target-os:begin] --- default --- */
   /* [archetype:target-os:end]   --- default --- */
 }
-/* line 263, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/archetype-1.0.0.alpha.4/stylesheets/archetype/util/_styles.scss */
+/* line 263, ../../../../../Library/Ruby/Gems/2.0.0/gems/archetype-1.0.0.alpha.5/stylesheets/archetype/util/_styles.scss */
 nav ul.main-nav > li a.hover, nav ul.main-nav > li a:hover, nav ul.main-nav > li a.focus, nav ul.main-nav > li a:focus {
   text-decoration: underline;
 }
-/* line 17, ../scss/components/_nav.scss */
-nav ul.main-nav > li > ul > li {
+/* line 20, ../scss/components/_nav.scss */
+nav ul.main-nav > li li {
   padding-left: 10px;
 }
-/* line 21, ../scss/components/_nav.scss */
+/* line 24, ../scss/components/_nav.scss */
 nav ul.main-nav > li label {
   color: #a5a5a5;
   cursor: pointer;
 }
-/* line 25, ../scss/components/_nav.scss */
+/* line 28, ../scss/components/_nav.scss */
 nav ul.main-nav > li label:hover {
   text-decoration: underline;
 }
-/* line 33, ../scss/components/_nav.scss */
+/* line 36, ../scss/components/_nav.scss */
 nav ul.main-nav > li.sub input {
   position: absolute !important;
   height: 1px;
@@ -62,20 +64,20 @@ nav ul.main-nav > li.sub input {
   /* [archetype:target:browser:end]   --- ie lte 7 --- */
   clip: rect(1px, 1px, 1px, 1px);
 }
-/* line 157, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/archetype-1.0.0.alpha.4/stylesheets/archetype/util/_targeting.scss */
+/* line 157, ../../../../../Library/Ruby/Gems/2.0.0/gems/archetype-1.0.0.alpha.5/stylesheets/archetype/util/_targeting.scss */
 .ie.lte7 nav ul.main-nav > li.sub input {
   /* [archetype:target:browser:begin] --- ie lte 7 --- */
   /* [archetype:target:browser:end]   --- ie lte 7 --- */
 }
-/* line 36, ../scss/components/_nav.scss */
+/* line 39, ../scss/components/_nav.scss */
 nav ul.main-nav > li.sub input:checked ~ ul {
   display: block;
 }
-/* line 39, ../scss/components/_nav.scss */
+/* line 42, ../scss/components/_nav.scss */
 nav ul.main-nav > li.sub input:checked ~ ul li {
   padding-left: 10px;
 }
-/* line 45, ../scss/components/_nav.scss */
+/* line 48, ../scss/components/_nav.scss */
 nav ul.main-nav > li.sub ul {
   display: none;
 }
@@ -85,8 +87,8 @@ header h1 {
   font-family: "Dosis Light";
   font-size: 48px;
   line-height: 50px;
-  margin: 34px 0px 34px 0px;
-  padding: 0px 32px;
+  margin: 34px 0px;
+  padding: 0;
 }
 /* line 8, ../scss/components/_header.scss */
 header h1 a, header h1 a:visited {
@@ -98,9 +100,10 @@ header h2.tagline {
   font-family: "Dosis Light";
   position: absolute;
   width: 796px;
-  top: 74px;
+  top: 36px;
   left: 300px;
   font-size: 32px;
+  line-height: 48px;
   color: #323232;
 }
 
@@ -118,7 +121,7 @@ header h2.tagline {
   box-shadow: #939393 0 0 3px;
   background: #FFF;
   padding: 34px;
-  margin-top: 142px;
+  margin-top: 122px;
 }
 /* line 9, ../scss/components/_content.scss */
 #content h1, #content h2, #content p, #content pre {
@@ -138,7 +141,7 @@ header h2.tagline {
   /* [archetype:styleguide:end] --- `xlarge headline` --- */
   font-size: 28px;
 }
-/* line 193, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/archetype-1.0.0.alpha.4/stylesheets/archetype/util/_targeting.scss */
+/* line 193, ../../../../../Library/Ruby/Gems/2.0.0/gems/archetype-1.0.0.alpha.5/stylesheets/archetype/util/_targeting.scss */
 #content h1 {
   /* [archetype:target-os:begin] --- default --- */
   /* [archetype:target-os:end]   --- default --- */
@@ -153,7 +156,7 @@ header h2.tagline {
   /* [archetype:styleguide:end] --- `large headline` --- */
   font-size: 20px;
 }
-/* line 193, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/archetype-1.0.0.alpha.4/stylesheets/archetype/util/_targeting.scss */
+/* line 193, ../../../../../Library/Ruby/Gems/2.0.0/gems/archetype-1.0.0.alpha.5/stylesheets/archetype/util/_targeting.scss */
 #content h2 {
   /* [archetype:target-os:begin] --- default --- */
   /* [archetype:target-os:end]   --- default --- */
@@ -194,7 +197,7 @@ header h2.tagline {
   -moz-box-shadow: inset 0 0 3px #939393;
   -webkit-box-shadow: inset 0 0 3px #939393;
   box-shadow: inset 0 0 3px #939393;
-  overflow-x: scroll;
+  overflow-x: auto;
   background: #dddddd;
   color: #00698c;
   padding: 15px;