From 7b9029485ddf2f7963cf5c75ff01818ca324450b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@hornquist.se>
Date: Thu, 25 Apr 2019 13:39:52 +0200
Subject: Update HTML output, and CSS.

Updated CSS to scroll fancier, and display better.
But since I don't really know how to do stuff properly in CSS (as if
anyone does) it's a bit of a mess.
---
 static/style.css | 67 ++++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 48 insertions(+), 19 deletions(-)

(limited to 'static')

diff --git a/static/style.css b/static/style.css
index 8ac46785..4509dc95 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,19 +1,33 @@
-/*
- * TODO
- * the positioning of the meta information for each day is
- * quite badly done, and mostly a hack.
- */
-
-body {
-	/* This is for the day meta information */
-	padding-top: 50px;
-}
-
 .calendar {
-	height: calc(90vh - 50px);
+	height: 100%;
+	display: flex;
+}
 
+.clockbar {
 	/* This is relative for the .clock */
 	position: relative;
+	height: calc(100% - 50px - 10px);
+	width: 2.5em;
+}
+
+.sideclock {
+	/* border-right: 2px solid gray; */
+	z-index: 1;
+	height: 100%;
+	padding: 0;
+}
+
+.sideclock .meta {
+	border-bottom: 2px solid transparent;
+}
+
+.sideclock .day {
+	border: 1px transparent;
+	min-width: 0;
+}
+
+.days .meta {
+	border-bottom: 2px solid gray;
 }
 
 .days {
@@ -21,6 +35,14 @@ body {
 	width: 100%;
 	height: 100%;
 	padding: 0;
+	overflow-x: scroll;
+	scroll-snap-type: x mandatory;
+}
+
+.events {
+	position: relative;
+	width: 100%;
+	height: calc(100% - 50px);
 }
 
 /*
@@ -37,29 +59,36 @@ body {
 .clock {
 	color: gray;
 	border-top: 1px dotted gray;
-	width: 100000; /* calc(100% + 5ex); */
 }
 
-.days > :first-child {
-	margin-left: 6ex;
+.sideclock .clock {
+	border: none;
+}
+
+.clocktext {
+	z-index: 1;
+	text-align: right;
 }
 
 .day {
 	position: relative;
 
-	height: 100%;
+	height: 99%;
 	width: 100%;
 	min-width: 300px;
 
 	margin-left: 0.5em;
 	border: 1px solid black;
+
+	scroll-snap-align: start;
+}
+
+.day .clock {
+	width: calc(100% + 0.5em);
 }
 
 .meta {
-	position: absolute;
 	height: 50px;
-	top: -50px;
-
 	width: 100%;
 
 }
-- 
cgit v1.2.3