1 files changed, 63 insertions, 7 deletions
diff --git a/public/default.css b/public/default.css
index f424a07..42f5b81 100644
--- a/public/default.css
+++ b/public/default.css
@@ -1,10 +1,53 @@
+body {
+	background-color: #fffaf7;
+	display: flex;
+	flex-direction: column;
+	font-family: Liberation Sans, Arial, sans-serif;
+	line-height: 1.5;
+	min-height: 100vh;
+	margin: 0;
+}
+ul {
+	list-style: none;
+	padding: 0;
+}
+.page {
+	display: flex;
+	display: flex;
+	flex-direction: column;
+	outline: 1px solid red;
+}
+.sidebar {
+	flex: 0 0 12em;
+	order: -1;
+	outline: 1px solid red;
+}
+main {
+	flex: 1;
+	outline: 1px solid red;
+}
+
+@media (min-width: 768px) {
+	.page {
+		flex-direction: row;
+		flex: 1;
+	}
+	main {
+		flex: 1;
+	}
+	.sidebar {
+		/* 12em is the width of the columns */
+		flex: 0 0 12em;
+	}
+}
+
 .chart {
 	align-items: stretch;
 	display: flex;
-	height: 200px;
-	list-style: none;
+	height: 100px;
 	margin: 0;
-	padding: 0;
+	padding-top: 2em;
+	padding-bottom: 2em;
 	width: 100%;
 }
 .chart .slot {
@@ -12,29 +55,42 @@
 	flex: 1 1;
 	position: relative;
 }
+.chart .slot.midnight {
+	border-left: 1px solid #ddd;
+}
+.chart .slot:hover {
+	background: #f5f5f5;
+}
 .chart .bar {
 	background: #4c92ff;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
 	bottom: 0;
 	left: 0;
 	position: absolute;
 	right: 0;
 }
+.chart .slot:hover .bar {
+	background: #88b6ff;
+}
 .chart .slot:before,
 .chart .slot:after {
 	bottom: 100%;
-	content: attr(data-date);
+	content: attr(data-count);
 	display: none;
+	font-size: .75em;
 	left: 50%;
 	margin-bottom: .5rem;
-	margin-left: -5rem;
+	margin-left: -2.5rem;
 	position: absolute;
 	text-align: center;
-	width: 10rem;
+	width: 5rem;
 }
+/* time */
 .chart .slot:after {
+	content: attr(data-date);
 	margin-top: .5rem;
 	top: 100%;
-	content: attr(data-count) " hits";
 }
 .chart .slot:hover:before,
 .chart .slot:hover:after {