mock a sidebar

1 files changed, 41 insertions, 17 deletions

diff --git a/assets/style.css b/assets/style.css
index 66c4167..4a6cb51 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -23,12 +23,6 @@ h1, h2, h3, h4, h5, h6 {
 	font-family: 'Roboto Condensed', sans-serif;
 	color: #444;
 	border-bottom: 1pt solid #eee;
-	/* this might need rethinking but looks good for navigation
-	border-left: 1rem solid;
-	border-color: #aaa;
-	margin-left: -2rem;
-	padding-left: 1rem;
-	*/
 }
 
 h1 {
@@ -61,21 +55,40 @@ h6 {
 	font-weight: 300;
 }
 
-.layout-topbar {
+header {
 	height: 8rem;
 	margin-bottom: 3rem;
 	background: linear-gradient(to bottom, #fafafa, #fafafa 66%, #eeeeee);
 	display: flex;
 }
 
-.topbar-borderbottom {
-	border-bottom: 1pt solid #777;
+main {
+	display: flex;
+	width: 100%;
+}
+
+.width-content {
+	width: 900px;
+}
+
+.width-sidebar {
+	width: 300px;
+}
+
+.flex-fill {
+	flex-grow: 1;
 }
 
-.bar-fill {
+.flex-sidefill {
 	flex-grow: 1;
 }
 
+/* header bar */
+
+.topbar-borderbottom {
+	border-bottom: 1pt solid #777;
+}
+
 .same-height {
 	height: inherit;
 	display: flex;
@@ -137,12 +150,27 @@ h6 {
 	background-repeat: no-repeat;
 }
 
+/* contents bar */
 
-.width-content {
-	width: 980px;
+.sidebar-box {
+	align-self: flex-start;
+	font-size: 80%;
+	color: #777;
+	padding-left: 2em;
 }
 
-.layout-footer {
+.sidebar-header {
+	font-weight: bold;
+}
+
+.sidebar-values {
+	padding-left: 1em;
+	margin-bottom: 1em;
+}
+
+/* footer */
+
+.content-footer {
 	height: 10rem;
 	margin-top: 5rem;
 	background-color: #aaa;
@@ -180,7 +208,3 @@ h6 {
 	font-size: 80%;
 	color: #777;
 }
-
-.margin-center {
-	margin: 0 auto;
-}