Fix HTML wide alignment.

2 files changed, 14 insertions, 31 deletions

diff --git a/module/output/html.scm b/module/output/html.scm
index 4079d3ce..d3edf08f 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -248,23 +248,22 @@
    event-groups))
 
 (define (time-marker-div)
-  `(div (@ (class "sideclock"))
-        (div (@ (class "day"))
-             (div (@ (class "meta")) "")
-             (div (@ (class "wholeday")) "")
-             (div (@ (class "events clockbar"))
-                  ,@(map (lambda (time)
-                           `(div (@ (class "clock clock-" ,time))
-                                 (span (@ (class "clocktext"))
-                                       ,time ":00")))
-                         (iota 12 0 2))))))
+  ;; 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"))
+         ,@(map (lambda (time)
+                  `(div (@ (class "clock clock-" ,time))
+                        (span (@ (class "clocktext"))
+                              ,time ":00")))
+                (iota 12 0 2)))))
 
 (define-public (render-calendar event-groups)
   `(div (@ (class "calendar"))
-        ;; ,(time-marker-div)
        (div (@ (class "days"))
+            ,@(time-marker-div)
             (div (@ (class "longevents")
-                    (style "grid-column-end:" ,(1+ (stream-length event-groups))))
+                    (style "grid-column-end: span " ,(stream-length event-groups)))
                  ""                     ; prevent self-closing
                  ,@(stream->list (lay-out-long-events event-groups)))
             ,@(concatenate (stream->list (stream-map lay-out-day event-groups))))))
diff --git a/static/style.css b/static/style.css
index 99c04921..58e189df 100644
--- a/static/style.css
+++ b/static/style.css
@@ -187,11 +187,6 @@ body {
 	height: 100%;
 	padding: 0;
 }
-
-.sideclock .meta {
-	border-bottom: 2px solid transparent;
-}
-
 .sideclock .day {
 	border: 1px transparent;
 	min-width: 0;
@@ -208,13 +203,14 @@ body {
 
 .days .longevents {
     grid-row: 2;
-    grid-column-start: 1;
+    grid-column-start: 2;
     position: relative;
 }
 
 .days {
 	display: grid;
         grid-template-rows: 4em 4em auto;
+        grid-template-columns: 5em auto;
 	width: 100%;
 	height: 100%;
 	padding: 0;
@@ -238,19 +234,6 @@ body {
 	width: 2.5em;
 }
 
-/* .wholeday { */
-/* 	position: relative; */
-/* 	width: 100%; */
-/* 	height: calc(3 * 1.5em); */
-/* 	padding-bottom: 2px; */
-/* 	border-bottom: 2px solid black; */
-/* } */
-
-.wholeday .event {
-	/* max-height: 1.5em; */
-	max-height: 33%;
-}
-
 /*
  * This makes the borders of the object be part of the size.
  * Making placing it on the correct line much simpler.
@@ -269,6 +252,7 @@ body {
 
 .sideclock .clock {
 	border: none;
+        grid-row: 3;
 }
 
 .clocktext {