Update sidebar layout styles to reflect new design

Also modifies the existing nav_class helper to become a broader layout_class helper, so it can be used on the body as well as the nav. Signed-off-by: Maggie Walker <[email protected]> Pull request: #642 Approved by: cwebberOps
habitat-sh · Jun 3, 2016 · f47a817 · f47a817
1 parent a3ed814
commit f47a817
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 19 deletions.
diff --git a/www/config.rb b/www/config.rb
@@ -36,7 +36,7 @@
 helpers SidebarHelpers
 
 helpers do
-  def nav_class
+  def layout_class
     layout = current_page.options.fetch(:layout, nil)
     layout == :sidebar ? 'has-sidebar' : ''
   end

diff --git a/www/source/about/index.html.slim b/www/source/about/index.html.slim
@@ -37,12 +37,8 @@ p
     Networks grep rsync diff. chmod cron sideband demultiplexer rbash push
     preview environment SQL Varnish pub key
 hr
-p
-  small Continue to the next topic
-  br
-  a href="#" Who should use habitat?
-hr
-p
-  small
-    | Copyright: This work is licensed under xxxxx <br/>
-      Provide feedback on habitat documentation.
+ul.main-content--link-nav
+  li Continue to the next article
+  li
+    a href="/docs/package-contents" Package contents
+
diff --git a/www/source/images/graphics/article-watermark.png b/www/source/images/graphics/article-watermark.png
diff --git a/www/source/images/graphics/article-watermark.svg b/www/source/images/graphics/article-watermark.svg
diff --git a/www/source/layouts/_nav.slim b/www/source/layouts/_nav.slim
@@ -1,4 +1,4 @@
-#main-nav class="#{nav_class}"
+#main-nav class="#{layout_class}"
   .main-nav--container.clearfix
     .main-nav--logo
       a href="/"

diff --git a/www/source/layouts/layout.slim b/www/source/layouts/layout.slim
@@ -9,7 +9,7 @@ html
 
     == stylesheet_link_tag :site
 
-  body class="#{current_page.data.classes}"
+  body class="#{current_page.data.classes} #{layout_class}"
     = partial "layouts/gtm"
 
     = partial "layouts/nav"

diff --git a/www/source/stylesheets/_global.scss b/www/source/stylesheets/_global.scss
@@ -88,9 +88,15 @@
   margin: 0;
 
   li:first-child {
-    color: $hab-gray;
+    color: lighten($body-font-color, 25%);
+    font-size: rem-calc(12);
+    margin: rem-calc(30) 0 rem-calc(10);
+  }
+
+  a {
+    color: $body-font-color;
     font-size: rem-calc(14);
-    margin: rem-calc(40) 0 rem-calc(10);
+    text-decoration: underline;
   }
 }
 

diff --git a/www/source/stylesheets/_layout.scss b/www/source/stylesheets/_layout.scss
@@ -1,5 +1,13 @@
 $sidebar-breakpoint: 720px;
 
+body.has-sidebar {
+  background: $hab-off-white;
+
+  #content-outer {
+    margin-bottom: rem-calc(90);
+  }
+}
+
 #content-outer {
   @include small-nav {
     padding-top: $header-height-mobile;
@@ -21,6 +29,10 @@ $sidebar-breakpoint: 720px;
   margin: 0 auto;
   min-height: 675px;
   max-height: auto;
+
+  hr {
+    border-bottom-color: lighten($hab-gray, 20%);
+  }
 }
 
 .main-sidebar {
@@ -34,6 +46,35 @@ $sidebar-breakpoint: 720px;
     bottom: 0;
     width: 300px;
   }
+
+  a {
+    display: block;
+    position: relative;
+    color: $body-font-color;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $hab-primary;
+    }
+  }
+
+  .is-active > a {
+    font-weight: bold;
+    color: $hab-primary;
+
+    &:before {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: rem-calc(12);
+      height: rem-calc(12);
+      background: url('/images/icons/sidebar-active.png') no-repeat;
+      background-size: 100% auto;
+    }
+  }
 }
 
 .main-sidebar--search {
@@ -52,15 +93,13 @@ $sidebar-breakpoint: 720px;
     display: block;
     line-height: rem-calc(32);
     padding-left: 0;
-
-  &.is-active > a {
-    font-weight: bold;
-  }
 }
 
 .main-content__has-sidebar {
   background-color: $hab-white;
-  padding: rem-calc(40) rem-calc(20);
+  background: url("/images/graphics/article-watermark.png") no-repeat right bottom $hab-white;
+  background: url("/images/graphics/article-watermark.svg") no-repeat right bottom $hab-white;
+  padding: rem-calc(40) rem-calc(20) rem-calc(120);
 
   @media (min-width: $sidebar-breakpoint) {
     margin-left: 300px;