From 8a7d30becd1eae5f107f25259117ef274831f667 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Wed, 6 Aug 2014 10:50:36 -0700
Subject: [PATCH] Make styleguide mobile first

Optimise for various screen sizes, defaulting to mobile view
This stops the example from jumping underneath the code

Change-Id: I3b163568f4626f411c88ab4c1133b2ed1bed9cf2
---
 docs/kss/styleguide-template/public/kss.less | 57 +++++++++++++++-----
 1 file changed, 45 insertions(+), 12 deletions(-)

diff --git a/docs/kss/styleguide-template/public/kss.less b/docs/kss/styleguide-template/public/kss.less
index 9e850a3c34..f5ddff1253 100644
--- a/docs/kss/styleguide-template/public/kss.less
+++ b/docs/kss/styleguide-template/public/kss.less
@@ -1,3 +1,20 @@
+
+.container {
+	width: 100%;
+}
+
+nav {
+	display: none;
+}
+
+article {
+	.example {
+		blockquote {
+			margin-top: 20px;
+		}
+	}
+}
+
 body {
 	margin: 0;
 	padding: 0;
@@ -13,7 +30,6 @@ body {
 }
 
 .container {
-	width: 960px;
 	margin: 0 auto;
 	display: -webkit-flex;
 	display: flex;
@@ -76,7 +92,6 @@ nav {
 article {
 	-webkit-flex: 1;
 	flex: 1;
-	margin-left: 30px;
 
 	h1, h2, h3, h4, h5, h6, p {
 		margin-left: 20px;
@@ -101,7 +116,6 @@ article {
 			background: #f8f8f8;
 			padding: 20px;
 			color: #999;
-			width: 338px;
 			word-wrap: break-word;
 			// word-wrap in pre not affecting Firefox, so add white-space.
 			white-space: pre-wrap;
@@ -116,25 +130,44 @@ article {
 			display: block;
 			margin: 0;
 			margin-left: 20px;
-			min-width: 360px;
 		}
 	}
 }
 
-@media (max-width: 960px) {
-	.container {
-		width: 100%;
+@media (min-width: 768px) {
+	nav {
+		display: block;
+		width: 100px;
 	}
 
+	@columnWidth: (768px - 100px ) / 2;
+	.example {
+		pre,
+		blockquote {
+			width: @columnWidth;
+		}
+	}
+}
+
+@media (min-width: 980px) {
 	nav {
-		display: none;
+		width: auto;
 	}
 
 	article {
-		.example {
-			blockquote {
-				margin-top: 20px;
-			}
+		margin-left: 30px;
+	}
+
+	.container {
+		width: 980px;
+	}
+
+	.example {
+		pre {
+			width: 338px;
+		}
+		blockquote {
+			width: auto;
 		}
 	}
 }
-- 
2.20.1