From f8406d7ce422345ca6df44ca2d812402c27a27a5 Mon Sep 17 00:00:00 2001
From: Joel Kuzmarski <leoj3n@gmail.com>
Date: Sat, 15 Apr 2017 20:34:25 -0500
Subject: [PATCH] Use flexbox for styling

---
 site/default/static/static.js             | 12 +---
 site/default/static/styles/styles.less    | 67 +++++++++++++++++------
 site/default/static/styles/variables.less |  5 ++
 site/default/templates/content.mustache   | 36 ++++++------
 4 files changed, 76 insertions(+), 44 deletions(-)

diff --git a/site/default/static/static.js b/site/default/static/static.js
index 68cd9c5..07f6977 100644
--- a/site/default/static/static.js
+++ b/site/default/static/static.js
@@ -1,13 +1,3 @@
 var packages = require("./packages");
 require("./styles/styles.less!");
-window.PACKAGES = packages;
-
-// sets sidebar height to window height
-function setSidebarHeightOnResize() {
-	var windowHeight = window.innerHeight;
-	document.getElementsByClassName("sidebar")[0].style.height = windowHeight + "px";
-}
-setSidebarHeightOnResize();
-window.onresize = function() {
-	setSidebarHeightOnResize();
-};
+window.PACKAGES = packages;
\ No newline at end of file
diff --git a/site/default/static/styles/styles.less b/site/default/static/styles/styles.less
index 8461abf..2ee3d5c 100644
--- a/site/default/static/styles/styles.less
+++ b/site/default/static/styles/styles.less
@@ -1,25 +1,60 @@
 @import "locate://bit-docs-site/styles/variables.less";
 
-@sidebar-width: 250px;
+.flex-mixin {
+	display: -webkit-box;
+	display: -moz-box;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+}
+
+html {
+	height: 100%;
+	box-sizing: border-box;
+}
+
+*, *:before, *:after {
+	box-sizing: inherit; // https://css-tricks.com/box-sizing/
+}
 
 body {
+	.flex-mixin;
+	width: 100%;
+	height: 100vh;
+	margin: auto;
+	flex-direction: column;
+	justify-content: space-between;
 	font-family: @defaultFontFamily;
-	margin-left: (@sidebar-width + 25);
 }
-.sidebar {
-	float: left;
-	margin: 0;
-	margin-top: -19px;
-	max-width: @sidebar-width;
-	overflow: auto;
-	position: fixed;
-	left: 0;
-
-	ul {
-		white-space: nowrap;
+
+header, footer {
+	width: 100%;
+	flex-shrink: 0; // retain height
+}
+
+.content {
+	flex-grow: 1; // fill space vertical
+	flex-shrink: 1; // IE10 sets flex-shrink to 0
+
+	@media @desktops {
+		.flex-mixin;
+		overflow: auto; // scroll .content when .main overflows
+	}
+
+	.sidebar {
+		overflow: auto; // scroll .sidebar when <ul> overflows
+		flex-shrink: 0; // retain width
+
+		.current>a {
+			font-weight: bold;
+		}
 	}
 
-	.current>a {
-		font-weight: bold;
+	.main {
+		flex-grow: 1; // fill space horizontal
+		flex-shrink: 1;
+		padding-left: 25px;
+		padding-right: 25px;
+		overflow-x: hidden; // hide <pre> code overflow
 	}
-}
+}
\ No newline at end of file
diff --git a/site/default/static/styles/variables.less b/site/default/static/styles/variables.less
index f0f4b61..d605842 100644
--- a/site/default/static/styles/variables.less
+++ b/site/default/static/styles/variables.less
@@ -92,3 +92,8 @@
 @logo: "../img/logo.svg";
 @logoFooter: "../img/logo-grey.svg";
 @logoWidth: 170px;
+
+// Breakpoints for use with @media
+
+@smartphones: ~"only screen and (max-width: 767px)";
+@desktops: ~"only screen and (min-width: 767px)";
\ No newline at end of file
diff --git a/site/default/templates/content.mustache b/site/default/templates/content.mustache
index ef70021..1fcfcf5 100644
--- a/site/default/templates/content.mustache
+++ b/site/default/templates/content.mustache
@@ -1,20 +1,22 @@
-{{#unless hideSidebar}}
-	{{> sidebar.mustache}}
-{{/unless}}
-<article>
-	{{#unless hideTitle}}
-		{{> title.mustache}}
+<div class="content">
+	{{#unless hideSidebar}}
+		{{> sidebar.mustache}}
 	{{/unless}}
+	<article class="main">
+		{{#unless hideTitle}}
+			{{> title.mustache}}
+		{{/unless}}
 
-	{{#unless hideDescription}}
-		{{#if description}}
-			{{> description.mustache}}
-		{{/if}}
-	{{/unless}}
+		{{#unless hideDescription}}
+			{{#if description}}
+				{{> description.mustache}}
+			{{/if}}
+		{{/unless}}
 
-	{{#unless hideBody}}
-		{{#if body}}
-			{{> body.mustache}}
-		{{/if}}
-	{{/unless}}
-</article>
+		{{#unless hideBody}}
+			{{#if body}}
+				{{> body.mustache}}
+			{{/if}}
+		{{/unless}}
+	</article>
+</div>
\ No newline at end of file