Add responsivnes, major rework on css.

Primary page layout is now changed from being flexbox based to being
grid based. This allows a much simpler complete rearangement of the
elements to a tall view for narrow screens.

A few other minor changes might also have slipped in.

1 files changed, 155 insertions, 89 deletions

diff --git a/static/style.css b/static/style.css
index c9110a8c..e871d1fd 100644
--- a/static/style.css
+++ b/static/style.css
@@ -8,53 +8,136 @@ html, body {
 }
 
 .root {
-    display: flex;
+    display: grid;
     margin: 0;
     max-width: 100%;
     height: 100%;
 
-    flex-direction: row;
+    grid-template-columns: auto auto 20em;
+    grid-template-rows: auto;
+
+    grid-template-areas:
+        "main main cal"
+            "main main nav"
+            "main main details"
+            "main main events"
+            "footer footer events";
 }
 
 @media (max-aspect-ratio: 3/4) {
     .root {
+        grid-template-areas:
+            "main main"
+                "cal events"
+                "details events"
+                ". events"
+                "footer events";
+        grid-template-rows: 70% auto;
+        grid-template-columns: 50% auto;
+    }
+}
+
+.hidelink {
+    color: inherit;
+    text-decoration: none;
+}
+
+.root main {
+    min-width: 0;  /* for wide */
+    min-height: 0; /* for tall */
+}
+
+/* Page footer
+----------------------------------------
+*/
+.root footer {
+    margin: 0.5em;
+    color: ray;
+    font-size: 8pt;
+
+    display: flex;
+    justify-content: space-between;
+
+    flex-direction: row;
+}
+
+@media (max-aspect-ratio: 3/4) {
+    .root footer {
         flex-direction: column;
     }
 }
 
-.small-calendar {
-    text-align: right;
-    border-collapse: collapse;
+.root footer span {
+    margin: 0 1em;
+    white-space: nowrap;
 }
 
-.small-calendar thead {
-    border-bottom: 1px solid black;
+
+/* Change View
+----------------------------------------
+"Buttons" for changing between weekly and monthly layout
+*/
+
+
+.change-view {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
 }
 
-.small-calendar .prev,
-.small-calendar .next {
-    color: grey;
+.change-view a {
+    padding: 0.5em;
+    border: 1px solid black;
+    border-radius: 0.5em;
+    background-color: #ECECEC;
+    text-decoration: none;
+    color: black;
 }
 
-.small-calendar td {
-    padding: 5px;
+/* Eventlist
+----------------------------------------
+The sidebar with all the events
+*/
+
+.eventlist {
+    min-height: 0;
+    overflow: scroll;
 }
 
-.calendarlist li {
-    list-style-type: none;
-    border-left-width: 1em;
+.eventlist {
+    overflow: scroll;
+    border-top: 3px solid gray;
+}
+
+.eventlist article {
+    border-bottom: 1px solid black;
+    margin-top: 1em;
     border-left-style: solid;
-    padding-left: 1ex;
+    border-left-width: 6px;
+    padding-left: 2px;
+}
 
-    /* force to single line */
-    overflow: hidden;
-    white-space: nowrap;
+.eventlist {
+    white-space: pre-line;
+    font-size: 10pt;
 }
 
-.small-calendar .today {
-    border: 1px solid black;
+.eventlist h3 {
+    font-size: 12pt;
+    border-bottom: 1px solid gray;
+    margin-bottom: 0;
+    font-weight: 300;
+}
+
+.eventlist article.tentative {
+    border-left-style: dashed;
 }
 
+/* Text day
+----------------------------------------
+Each event within the eventlist
+*/
+
 .text-day {
     border-left: 2px solid black;
     border-top: 2px solid black;
@@ -68,83 +151,78 @@ html, body {
     font-size: 14pt;
 }
 
-.sideinfo {
-    display: flex;
+/* Small calendar
+----------------------------------------
+*/
 
-    width: 20em;
-    height: 100%;
-    flex-direction: column;
+.smallcal {
+    display: flex;
+    justify-content: center;
 }
 
-@media (max-aspect-ratio: 3/4) {
-    .sideinfo {
-        width: 100%;
-        height: 20em;
-        flex-direction: row;
-    }
+.smallcall-head {
+    text-align: center;
+    font-weight: bold;
 }
 
-.sideinfo .nav {
-    height: 100%;
+.smallcal .nav {
+    /* height: 100%; */
     display: flex;
     flex-direction: column;
     justify-content: center;
     font-size: 150%;
 }
 
-.sideinfo .about {
-    display: flex;
-    justify-content: center;
-
-	margin: 0 1em;
-	border-bottom: 2px solid gray;
-}
-
-.sideinfo .small-calendar {
+.smallcal .small-calendar {
     margin-left: 1em;
-        margin-right: 1em;
+    margin-right: 1em;
 }
 
-.sideinfo .eventlist {
-    overflow: scroll;
+.small-calendar {
+    text-align: right;
+    border-collapse: collapse;
 }
 
-.sideinfo .eventlist article {
+.small-calendar thead {
     border-bottom: 1px solid black;
-    margin-top: 1em;
-    border-left-style: solid;
-    border-left-width: 6px;
-    padding-left: 2px;
 }
 
-.sideinfo .eventlist {
-    white-space: pre-line;
-    font-size: 10pt;
+.small-calendar .prev,
+.small-calendar .next {
+    color: grey;
 }
 
-.sideinfo .eventlist h3 {
-    font-size: 12pt;
-    border-bottom: 1px solid gray;
-    margin-bottom: 0;
-    font-weight: 300;
+.small-calendar td {
+    padding: 5px;
 }
 
-.hidelink {
-    color: inherit;
-    text-decoration: none;
-}
+/* Calendar List
+----------------------------------------
+The list of all the loaded calendars,
+along with their colors.
+*/
 
-.root main {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+/* .calendarlist {} */
 
-    min-width: 0;  /* for wide */
-    min-height: 0; /* for tall */
+.calendarlist li {
+    font-size: 8pt;
+    list-style-type: none;
+    border-left-width: 1em;
+    border-left-style: solid;
+    padding-left: 1ex;
+
+    /* force to single line */
+    overflow: hidden;
+    white-space: nowrap;
 }
 
+.small-calendar .today {
+    border: 1px solid black;
+}
 
-/* ---------------------------------------- */
+/* Caltable
+----------------------------------------
+*/
 
 .caltable {
     flex-grow: 10;
@@ -203,7 +281,9 @@ html, body {
     color: gray;
 }
 
-/* ---------------------------------------- */
+/* Weekly calendar
+----------------------------------------
+*/
 
 .calendar {
     width: 100%;
@@ -309,20 +389,6 @@ html, body {
     font-size: 8pt;
 }
 
-.root footer {
-    font-family: monospace;
-    margin: 0.5em;
-
-    display: flex;
-    justify-content: space-between;
-}
-
-.root footer span {
-    margin: 0 1em;
-}
-
-/* */
-
 .events .event.continuing {
     border-bottom: none;
     background-image: linear-gradient(to top, #0007 0%,#FFF0 2em);
@@ -346,10 +412,6 @@ html, body {
     border: 3px dashed black;
 }
 
-.eventlist article.tentative {
-    border-left-style: dashed;
-}
-
 /* */
 
 .longevents .event {
@@ -404,6 +466,10 @@ html, body {
     height: 100%;
 }
 
+/* Popups
+----------------------------------------
+*/
+
 .event-inner .popup {
     visibility: hidden;
     position: absolute;