From 285fab249a5b4f5fd07a3379c2e5ba8e6efab216 Mon Sep 17 00:00:00 2001
From: captainill <jonthomas0@gmail.com>
Date: Tue, 10 Nov 2015 02:02:08 -0800
Subject: [PATCH] flexbox for fluid layout

---
 .../source/assets/stylesheets/_columns.scss   | 90 +++++++++----------
 .../assets/stylesheets/_components.scss       |  3 +-
 website/source/assets/stylesheets/_nav.scss   |  1 +
 .../source/assets/stylesheets/_sidebar.scss   |  4 +-
 .../source/assets/stylesheets/_styles.scss    |  4 +-
 .../hashicorp-shared/_project-utility.scss    |  2 +-
 website/source/layouts/inner.erb              |  4 +-
 website/source/layouts/layout.erb             |  4 +-
 8 files changed, 53 insertions(+), 59 deletions(-)

diff --git a/website/source/assets/stylesheets/_columns.scss b/website/source/assets/stylesheets/_columns.scss
index 17b9ce69e..e6f8bb847 100644
--- a/website/source/assets/stylesheets/_columns.scss
+++ b/website/source/assets/stylesheets/_columns.scss
@@ -1,50 +1,40 @@
-// .container-xs-height {
-//   display:table;
-//   padding-left:0px;
-//   padding-right:0px;
-// }
-//
-//
-// .col-xs-height {
-//   display:table-cell;
-//   float:none;
-// }
-//
-// @media (min-width: 768px) {
-//   .container-sm-height {
-//     display:table;
-//     padding-left:0px;
-//     padding-right:0px;
-//   }
-//
-//   .col-sm-height {
-//     display:table-cell;
-//     float:none;
-//   }
-// }
-//
-// @media (min-width: 992px) {
-//   .container-md-height {
-//     display:table;
-//     padding-left:0px;
-//     padding-right:0px;
-//   }
-//
-//   .col-md-height {
-//     display:table-cell;
-//     float:none;
-//   }
-// }
-//
-// @media (min-width: 1200px) {
-//   .container-lg-height {
-//     display:table;
-//     padding-left:0px;
-//     padding-right:0px;
-//   }
-//
-//   .col-lg-height {
-//     display:table-cell;
-//     float:none;
-//   }
-// }
+#main-content{
+  display: flex;
+  flex: 1;
+
+  #sidebar,
+  .docs-body{
+    flex: 1;
+  }
+}
+
+@media (max-width: 992px) {
+  #main-content{
+    #sidebar{
+      max-width: 280px;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  #main-content{
+    flex-direction: column;
+
+    #sidebar,
+    .docs-body{
+      width: 100%;
+      max-width: none;
+    }
+
+    #sidebar{
+      li {
+        &:last-child{
+          border-bottom: none;
+        }
+        > *{
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}
diff --git a/website/source/assets/stylesheets/_components.scss b/website/source/assets/stylesheets/_components.scss
index f7cf9945d..1b5924d19 100644
--- a/website/source/assets/stylesheets/_components.scss
+++ b/website/source/assets/stylesheets/_components.scss
@@ -171,6 +171,7 @@ header .header {
     @extend .white-background;
 
     .docs-content {
+      flex-direction: column;
       padding: $docs-top-margin 80px;
       display: block;
 
@@ -270,7 +271,7 @@ header .header {
   height: $nav-height;
   border-top: $border;
   font-size: 20px;
-  margin: 0 -15px -40px -15px;
+  margin: 0 -15px 0 -15px;
   display: block;
 
   h4 {
diff --git a/website/source/assets/stylesheets/_nav.scss b/website/source/assets/stylesheets/_nav.scss
index 733a6c1ce..1857e0c46 100644
--- a/website/source/assets/stylesheets/_nav.scss
+++ b/website/source/assets/stylesheets/_nav.scss
@@ -5,6 +5,7 @@
 // --------------------------------------------------
 
 #header {
+  flex-direction: row;
   background-color: $black;
   .navbar-brand {
     .logo{
diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss
index 95af1c7f1..235ac2dce 100644
--- a/website/source/assets/stylesheets/_sidebar.scss
+++ b/website/source/assets/stylesheets/_sidebar.scss
@@ -1,10 +1,12 @@
 #sidebar {
+  min-height: 100%;
+  max-width: 480px;
   $border: 1px solid $gray-dark;
   font-size: 16px;
   font-family: $mono;
   color: $gray-light;
   background-color: $sidebar-background-color;
-  min-height: 100%;
+
 
   h2 {
     color: $green;
diff --git a/website/source/assets/stylesheets/_styles.scss b/website/source/assets/stylesheets/_styles.scss
index 2acea83c7..9f2b78d94 100644
--- a/website/source/assets/stylesheets/_styles.scss
+++ b/website/source/assets/stylesheets/_styles.scss
@@ -5,7 +5,9 @@
 html,
 body {
   margin: 0;
-  height: 100%;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
 }
 
 html {
diff --git a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
index 114a3da24..12d1bf91d 100755
--- a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
@@ -11,7 +11,7 @@ $project-logo-pad-left: 8px;
 // Mixins
 @mixin project-a-style{
   color: $white;
-  font-weight: 300;
+  font-weight: 400;
   opacity: .75;
 
   &:hover{
diff --git a/website/source/layouts/inner.erb b/website/source/layouts/inner.erb
index e45fe3cea..ccf56ae96 100644
--- a/website/source/layouts/inner.erb
+++ b/website/source/layouts/inner.erb
@@ -1,6 +1,5 @@
 <% wrap_layout :layout do %>
-  <div class="docs-wrapper container-fluid">
-    <div class="row">
+  <div id="main-content" class="docs-wrapper">
       <div id="sidebar" class="col-sm-3 col-md-3">
         <%= yield_content :sidebar %>
       </div>
@@ -24,6 +23,5 @@
           </div>
         <% end %>
       </div>
-    </div>
   </div>
 <% end %>
diff --git a/website/source/layouts/layout.erb b/website/source/layouts/layout.erb
index 3e69631bf..b5e2a6da6 100644
--- a/website/source/layouts/layout.erb
+++ b/website/source/layouts/layout.erb
@@ -20,7 +20,7 @@
       } catch (e) {}
     </script>
   </head>
-  <body>
+  <body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
     <div id="header" class="navigation white <%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
     	<div class="container-fluid">
 				<div class="navbar-header">
@@ -57,7 +57,7 @@
 
     <%= yield %>
     <div class="clearfix"></div>
-    <footer class="dark-background">
+    <footer id="footer" class="dark-background">
       <div class="container-fluid">
         <div class="row">
           <div class="col-md-12">