Use flexbox for styling

Author: leoj3n

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;

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
 	}
-}
+}

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)";

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>