From e3a9c66b8caecda4f6475cb1ca18f22d2eaddd87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Fri, 20 Mar 2020 02:09:08 +0100
Subject: Reintroduce horizontal-time-markers.

---
 module/output/html.scm |  2 +-
 static/style.css       | 63 ++++++++++++++++++++------------------------------
 2 files changed, 26 insertions(+), 39 deletions(-)

diff --git a/module/output/html.scm b/module/output/html.scm
index d3edf08f..26cf4b86 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -251,7 +251,7 @@
   ;; element to make rest of grid align correct.
   ;; Could be extended to contain something fun.
   `((div (@ (style "grid-row: 1 / span 2")) "")
-    (div (@ (class "events sideclock"))
+    (div (@ (class "sideclock"))
          ,@(map (lambda (time)
                   `(div (@ (class "clock clock-" ,time))
                         (span (@ (class "clocktext"))
diff --git a/static/style.css b/static/style.css
index 58e189df..2545b9e9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -2,7 +2,7 @@ html {
 	height: 100%;
 }
 
-body {
+html, body {
 	height: 100%;
 	margin: 0;
 }
@@ -183,9 +183,10 @@ body {
 
 .sideclock {
 	/* border-right: 2px solid gray; */
-	z-index: 1;
-	height: 100%;
+	/* height: 100%; */
 	padding: 0;
+        grid-row: 3;
+        position: relative;
 }
 .sideclock .day {
 	border: 1px transparent;
@@ -220,19 +221,20 @@ body {
 
 .events {
 	position: relative;
-	width: 100%;
+	/* width: 100%; */
 	/* height: calc(100% - 50px); */
-	flex-grow: 1;
+	/* flex-grow: 1; */
         /* since day container no longer exists */
         border: 1px solid gray;
+	scroll-snap-align: start;
 }
 
 /* Clockbar is also .events */
-.clockbar {
-	/* Removing this draws timestamps on top of calendar instead of
-	 * besides it */
-	width: 2.5em;
-}
+/* .clockbar { */
+/* 	/\* Removing this draws timestamps on top of calendar instead of */
+/* 	 * besides it *\/ */
+/* 	width: 2.5em; */
+/* } */
 
 /*
  * This makes the borders of the object be part of the size.
@@ -248,10 +250,12 @@ body {
 .clock {
 	color: gray;
 	border-top: 1px dotted gray;
+        width: 100%;
 }
 
 .sideclock .clock {
-	border: none;
+	/* border: none; */
+        border-top: 1px dotted gray;
         grid-row: 3;
 }
 
@@ -260,26 +264,6 @@ body {
 	text-align: right;
 }
 
-.day {
-	position: relative;
-
-	height: 99%;
-	width: 100%;
-	min-width: 200px;
-
-	margin-left: 0.5em;
-	border: 1px solid black;
-
-	display: flex;
-	flex-direction: column;
-
-	scroll-snap-align: start;
-}
-
-.day .clock {
-	width: calc(100% + 0.5em);
-}
-
 .meta {
 	/* height: 50px; */
 	width: 100%;
@@ -287,6 +271,9 @@ body {
 	justify-content: center;
 	align-items: center;
 	position: relative;
+
+        margin-left: 1em;
+        margin-right: 1em;
 }
 
 .meta .dayname {
@@ -375,14 +362,14 @@ body {
 	background-color: #55FF5550;
 }
 
-.selected {
-	width: 100% !important;
-	left: 0 !important;
-	z-index: 1 !important;
+/* .selected { */
+/* 	width: 100% !important; */
+/* 	left: 0 !important; */
+/* 	z-index: 1 !important; */
 
-	margin-top: 3mm;
-	margin-left: 3mm;
-}
+/* 	margin-top: 3mm; */
+/* 	margin-left: 3mm; */
+/* } */
 
 .clock-0  { top: calc(100%/24 *  0); }
 .clock-2  { top: calc(100%/24 *  2); }
-- 
cgit v1.2.3