Add styles

1 files changed, 90 insertions, 6 deletions

diff --git a/static/default.css b/static/default.css
index 78898dd..8fd486a 100644
--- a/static/default.css
+++ b/static/default.css
@@ -6,9 +6,10 @@ html {
 }
 body {
 	background-color: #fffaf7;
+	color: #37879c;
 	display: flex;
 	flex-direction: column;
-	font-family: Liberation Sans, Arial, sans-serif;
+	font-family: sans-serif;
 	line-height: 1.5;
 	min-height: 100vh;
 	margin: 0;
@@ -19,20 +20,38 @@ ul {
 }
 .page {
 	display: flex;
-	display: flex;
 	flex-direction: column;
 	outline: 1px solid red;
 }
 .sidebar {
+	background-color: #2A3F54;
 	flex: 0 0 13em;
 	order: -1;
-	outline: 1px solid red;
+	outline: 1px solid green;
+}
+
+.navbar {
+	background: #ededed;
+	border-bottom: 1px solid #d9dee4;
+	height: 2.5em;
+}
+
+.sitenav {
+}
+.sitenav__link {
+	color: #e7e7e7;
+	display: block;
+	font-weight: 500;
+	text-decoration: none;
+	padding: 13px 15px 12px;
 }
 main {
 	background-color: #f7f7f7;
 	flex: 1;
 	outline: 1px solid red;
 	padding-left: 1em;
+	padding-right: 1em;
+	position: relative;
 }
 
 @media (min-width: 768px) {
@@ -49,8 +68,66 @@ main {
 	}
 }
 
-header.site {
-	height: 50px;
+.site__header {
+	margin-bottom: 1em;
+}
+.site__title {
+	margin-bottom: 0;
+}
+
+.site__summary {
+	display: inline-block;
+}
+.summary {
+	float: left;
+	overflow: hidden;
+	padding-bottom: 0px;
+	padding: 0 10px 0 20px;
+	position: relative;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.summary__title {
+	font-size: 13px;
+}
+.summary__count {
+	display: block;
+	font-size: 40px;
+	font-weight: 600;
+	line-height: 1.25;
+}
+.summary__comparison {
+	font-size: 13px;
+}
+.summary:before {
+	border-left: 2px solid #adb2b5;
+	content: "";
+	height: 65px;
+	left: 0;
+	margin-top: 10px;
+	position: absolute;
+}
+.summary:first-child::before {
+	border-left: 0;
+}
+
+.panel {
+	background-color: #fff;
+	border: 1px solid #e6e9ed;
+	margin-bottom: .5em;
+	margin-top: .5em;
+	padding: .5em;
+}
+.panel__header {
+	border-bottom: 2px solid #e6e9ed;
+	font-size: 1.75em;
+	margin-bottom: 10px;
+}
+.panel__title {
+	font-size: 18px;
+	font-weight: 400;
+	margin: 0;
+	padding: .25em;
 }
 
 .flash {
@@ -67,8 +144,15 @@ header.site {
 	transition: opacity 3s ease-in-out;
 }
 
+.timerange {
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+
 .chart {
 	align-items: stretch;
+	/*box-shadow: inset 0 1px 2px rgba(0,0,0,.1);*/
 	display: flex;
 	margin: 0;
 	width: 100%;
@@ -109,7 +193,7 @@ header.site {
 	background: #f5f5f5;
 }
 .chart .bar {
-	background: #4c92ff;
+	background-color: #1abb9c;
 	bottom: 0;
 	left: 0;
 	margin: 0;