Change static.css to scss.

5 files changed, 998 insertions, 984 deletions

diff --git a/Makefile b/Makefile
index cc30e302..afa6ffd0 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,5 @@
-.PHONY: all clean test
+.PHONY: all clean test \
+	static
 
 GUILE_SITE_DIR=$(shell guile -c "(display (%site-dir))")
 GUILE_CCACHE_DIR=$(shell guile -c "(display (%site-ccache-dir))")
@@ -12,13 +13,17 @@ GUILE_C_FLAGS = -Lmodule \
 				-Wmacro-use-before-definition -Warity-mismatch \
 				-Wduplicate-case-datum -Wbad-case-datum
 
-all: $(GO_FILES) README
+all: $(GO_FILES) README static
+
+static:
+	$(MAKE) -C static
 
 obj/%.scm.go: %.scm
 	@mkdir -p obj
 	guild compile $(GUILE_C_FLAGS) -o $@ $<
 
 clean:
+	$(MAKE) -C static clean
 	-rm -r obj
 
 install:
diff --git a/static/.gitignore b/static/.gitignore
index b99de213..c90a6b1b 100644
--- a/static/.gitignore
+++ b/static/.gitignore
@@ -1,2 +1,3 @@
-tipped-4.7.0
-jquery-3.*
+style.css
+.*-cache
+*.map
diff --git a/static/Makefile b/static/Makefile
new file mode 100644
index 00000000..f848b784
--- /dev/null
+++ b/static/Makefile
@@ -0,0 +1,11 @@
+.PHONY: all clean
+
+TARGETS := style.css
+
+all: $(TARGETS)
+
+clean:
+	rm $(TARGETS)
+
+%.css: %.scss
+	scss $< $@
diff --git a/static/style.css b/static/style.css
deleted file mode 100644
index 79fd06ab..00000000
--- a/static/style.css
+++ /dev/null
@@ -1,980 +0,0 @@
-html {
-    height: 100%;
-}
-
-html, body {
-    height: 100%;
-    margin: 0;
-}
-
-.root {
-    display: grid;
-    margin: 0;
-    max-width: 100%;
-    height: 100%;
-
-    grid-template-columns: auto auto 20em;
-    grid-template-rows: auto;
-
-    grid-template-areas:
-        "main main nav"
-        "main main cal"
-            "main main details"
-            "main main events"
-            "footer footer events";
-}
-
-@media (max-aspect-ratio: 3/4) {
-    .root {
-        grid-template-areas:
-            "main main"
-                "nav events"
-                "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 */
-
-    /* apparently required if one wants to have multiple
-       items within main, without it overflowing
-    */
-    display: flex;
-    flex-direction: column;
-}
-
-/* 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;
-    }
-}
-
-.root footer span {
-    margin: 0 1em;
-    white-space: nowrap;
-}
-
-
-/* Change View
-----------------------------------------
-"Buttons" for changing between weekly and monthly layout
-*/
-
-.calnav {
-    display: flex;
-    flex-direction: column;
-    padding-left: 2em;
-    padding-right: 2em;
-}
-
-.change-view {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    padding-top: 1ex;
-    padding-bottom: 1ex;
-}
-
-#jump-to > form {
-    display: flex;
-}
-
-#jump-to input {
-    flex-grow: 2;
-    margin-right: 1em;
-}
-
-#jump-to button, #jump-to a {
-    /* Same as height, figure out way to force this */
-    width: 2.5em;
-}
-
-/* button
---------------------------------------------------
-*/
-
-.btn {
-    padding: 0;
-
-    /* if a */
-    text-decoration: none;
-
-    /* if button */
-    border: none;
-    background-color: inherit;
-}
-
-.btn > div {
-    padding: 0.5em;
-    background-color: #3399ff;
-    color: white;
-
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    /* shouldn't be needed, but otherwise wont align with a text input
-       inside a shared flex-container.
-       It however seems to make <a> and <button> tag refuse to be the same height?
-    */
-    height: 2.5em;
-
-    box-shadow: var(--btn-height) var(--btn-height) gray;
-}
-
-.btn:active > div {
-    transform: translate(var(--btn-height), var(--btn-height));
-    box-shadow: none;
-}
-
-/* Eventlist
-----------------------------------------
-The sidebar with all the events
-*/
-
-.eventlist {
-    min-height: 0;
-    overflow: auto;
-    border-top: 3px solid var(--gray);
-    /* mostly for long links */
-    word-break: break-word;
-}
-
-.eventlist article {
-    border-bottom: 1px solid black;
-    margin-top: 1em;
-    border-left-style: solid;
-    border-left-width: 6px;
-    padding-left: 2px;
-}
-
-/* Text day
-----------------------------------------
-Each event within the eventlist
-*/
-
-.text-day {
-    border-left: 2px solid black;
-    border-top: 2px solid black;
-    padding-left: 2px;
-    margin-top: 1em;
-}
-
-.text-day header h2 {
-    width: 100%;
-    text-align: center;
-    font-size: 14pt;
-}
-
-/* Small calendar
-----------------------------------------
-*/
-.smallcal {
-    display: flex;
-    justify-content: center;
-}
-
-.smallcall-head {
-    text-align: center;
-    font-weight: bold;
-}
-
-.smallcal .nav {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    font-size: 150%;
-}
-
-.small-calendar {
-    display: grid;
-    grid-template-rows: auto;
-    grid-template-columns: auto;
-
-    grid-auto-flow: dense;
-}
-
-.small-calendar > * {
-    text-align: center;
-}
-
-.small-calendar > *:not(.column-head) {
-    display: flex;
-    align-items: center; /* vertically center */
-    text-align: right;
-}
-
-.small-calendar > * > time {
-    width: 100%;
-    text-align: right;
-    /* padding place in <time> instead on parent block element
-       to allow a border radius without making the link area
-       smaller
-   */
-    padding: 5px;
-}
-
-.small-calendar a {
-    color: initial;
-    text-decoration: none;
-}
-
-.small-calendar .row-head {
-    grid-column: 1;
-    border-right: 1px solid black;
-
-    /* Sort of hack to get week numbers looking ok */
-    justify-content: right;
-    padding-right: 5px;
-}
-
-.small-calendar .column-head {
-    grid-row: 1;
-    border-bottom: 1px solid black;
-}
-
-.small-calendar .next,
-.small-calendar .prev {
-    color: var(--gray);
-}
-
-/* Sliders
-----------------------------------------
- */
-
-.sliders label {
-    padding-left: 1em;
-}
-
-.sliders input[type="range"] {
-    width: 100%;
-    margin: 0;
-}
-
-.sliders .input-group {
-    display: flex;
-}
-
-.sliders .input-group input {
-    min-width: 0;
-}
-
-/* Calendar List
-----------------------------------------
-The list of all the loaded calendars,
-along with their colors.
-*/
-
-.calendarlist li {
-    font-size: 8pt;
-    list-style-type: none;
-    border-left-width: 1em;
-    border-left-style: solid;
-    border-color: var(--color);
-    padding-left: 1ex;
-
-    /* force to single line */
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.small-calendar .today {
-    border: 1px solid black;
-}
-
-/* Caltable
-----------------------------------------
-*/
-
-.caltable {
-    flex-grow: 10;
-
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    /* grid template rows is generated
-       inline in the HTML */
-
-    max-height: 100%;
-    /* Apparently needed to ensure that parent
-       can contain all its children */
-    min-height: 0;
-}
-
-.caltable .thead {
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.caltable .thead,
-.caltable .cal-cell {
-    border: 1px solid var(--gray);
-}
-
-.caltable .cal-cell-time {
-    border-bottom: none;
-}
-
-.caltable .cal-cell-short {
-    border-top: none
-}
-
-.caltable .longevents .event {
-    margin: 0;
-    /* TODO use other border rules */
-    border: 1px solid black;
-}
-
-.caltable .longevents {
-    border-bottom: none;
-    border-top: none;
-    position: relative;
-}
-
-.caltable .longevents .event {
-    position: absolute;
-    box-sizing: border-box;
-    padding: 0;
-}
-
-.caltable .cal-cell {
-    overflow-y: auto;
-}
-
-
-.cal-cell .event {
-    font-size: 8pt;
-    border-radius: 5px;
-    padding: 2px;
-    margin: 2px;
-    font-family: arial;
-}
-
-
-.date-info .day-number {
-    padding: 2pt;
-}
-
-.date-info.current .day-number {
-    color: black;
-}
-
-.date-info {
-    color: var(--gray);
-}
-
-.table-head {
-    font-size: 200%;
-    text-align: center;
-}
-
-
-/* Weekly calendar
-----------------------------------------
-*/
-
-.calendar {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-grow: 2;
-}
-
-.sideclock {
-    padding: 0;
-    grid-row: 3;
-    position: relative;
-}
-.sideclock .day {
-    border: 1px transparent;
-    min-width: 0;
-}
-
-.days .meta {
-    border-bottom: 2px solid var(--gray);
-    grid-row: 1;
-}
-
-.days .events {
-    grid-row: 3;
-}
-
-.days .longevents {
-    grid-row: 2;
-    grid-column-start: 2;
-    position: relative;
-}
-
-.days {
-    display: grid;
-    grid-template-rows: 4em 4em auto;
-    grid-template-columns: 5ch auto;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    overflow-x: scroll;
-
-    /* allow for popup placement */
-    position: relative;
-}
-
-.events {
-    position: relative;
-    border: 1px solid var(--gray);
-}
-
-/*
- * This makes the borders of the object be part of the size.
- * Making placing it on the correct line much simpler.
- */
-.clock, .days .event, .eventlike {
-    position: absolute;
-    box-sizing: border-box;
-    margin: 0;
-    display: block;
-}
-
-.clock {
-    color: var(--gray);
-    border-top: 1px dotted var(--gray);
-    width: 100%;
-    pointer-events: none;
-}
-
-.sideclock .clock {
-    border-top: 1px dotted var(--gray);
-    grid-row: 3;
-}
-
-.clocktext {
-    z-index: 1;
-    text-align: right;
-}
-
-.meta {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-
-    padding-left: 1em;
-    padding-right: 1em;
-}
-
-.meta .dayname {
-    position: absolute;
-    left: 5px;
-    top: 2px;
-    color: var(--gray);
-}
-
-.meta .daydate {
-    white-space: nowrap;
-    font-size: 150%;
-}
-
-.event {
-    transition: 0.3s;
-    font-size: var(--event-font-size);
-    overflow: visible;
-    background-color: var(--color);
-    color: var(--complement);
-}
-
-.popup input {
-    white-space: initial;
-    border: 1px solid gray;
-    max-width: 100%;
-}
-
-.event-body {
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
-
-.days .event {
-    border: 1px solid black;
-}
-
-.events .event {
-    width: 100%;
-}
-
-.zero-width-events .event {
-    width: initial;
-    padding: 0.5em;
-    margin: 0.2em;
-    border-radius: 1ex;
-    position: relative;
-    float: left;
-}
-
-.events .event.continuing {
-    border-bottom: none;
-    background-image: linear-gradient(to top, #0007 0%,#FFF0 2em);
-}
-
-.events .event.continued {
-    border-top: none;
-    background-image: linear-gradient(to bottom, #FFF7 0%,#FFF0 3em);
-}
-
-.events .event.continued.continuing {
-    border-top: none;
-    border-bottom: none;
-    background-image:
-        linear-gradient(to bottom,
-            #FFF7  0%, #FFF0 10%,
-            #FFF0 90%, #0007 100%);
-}
-
-.event.tentative {
-    border: 3px dashed black;
-}
-
-.event .location {
-    display: block;
-    font-size: 80%;
-    font-style: italic;
-    white-space: pre;
-}
-
-.repeating {
-    color: red;
-}
-
-.event .repeating {
-    float: left;
-    font-size: 150%;
-}
-
-.eventtext {
-    white-space: pre-line;
-    font-size: 10pt;
-}
-
-.eventtext h3 {
-    font-size: 12pt;
-    border-bottom: 1px solid var(--gray);
-    margin-bottom: 0;
-    font-weight: 300;
-    margin-top: 0;
-}
-
-.eventtext .location {
-    display: inline-block;
-    vertical-align: text-top;
-}
-
-.eventtext .last-modified,
-.eventtext .rrule {
-    display: flex;
-    justify-content: right;
-    text-align: right;
-    font-size: 80%;
-    color: var(--gray);
-    padding-right: 1em;
-}
-
-.eventlist .eventtext {
-    border-color: var(--color);
-}
-
-.eventlist .eventtext.tentative {
-    border-left-style: dashed;
-}
-
-
-/* */
-
-.longevents .event {
-    border-radius: 1em;
-    padding-left: 1em;
-}
-
-.longevents .event.continuing {
-    border-right: none;
-    border-radius: 1em 0 0 1em;
-}
-
-.longevents .event.continued {
-    border-left: none;
-    border-radius: 0 1em 1em 0;
-}
-
-.longevents .event.continued.continuing {
-    border-radius: 0;
-}
-
-
-/*
- * All other CAL_ classes are generated by the backend.
- * NOTE Possibly move this there.
- */
-.CAL_Generated {
-    background-color: #55FF55;
-}
-
-.event.generated {
-    opacity: 40%;
-    transition: none;
-}
-
-.longevents .event.generated {
-    bottom: 0;
-    height: calc(100% * var(--editmode));
-}
-.events .event.generated {
-    width: calc(100% * var(--editmode));
-}
-
-.clock-0  { top: calc(100%/24 *  0); }
-.clock-2  { top: calc(100%/24 *  2); }
-.clock-4  { top: calc(100%/24 *  4); }
-.clock-6  { top: calc(100%/24 *  6); }
-.clock-8  { top: calc(100%/24 *  8); border-width: 2px; }
-.clock-10 { top: calc(100%/24 * 10); }
-.clock-12 { top: calc(100%/24 * 12); }
-.clock-14 { top: calc(100%/24 * 14); }
-.clock-16 { top: calc(100%/24 * 16); border-width: 2px; }
-.clock-18 { top: calc(100%/24 * 18); }
-.clock-20 { top: calc(100%/24 * 20); }
-.clock-22 { top: calc(100%/24 * 22); }
-.clock-24 { top: calc(100%/24 * 24); }
-
-
-/* Search page
-----------------------------------------
- */
-
-.paginator > * {
-    padding-left: 1em;
-    display: inline-block;
-}
-
-.summary-line {
-    display: inline-flex;
-}
-
-.summary-line > * {
-    display: inline-block;
-}
-
-.summary-line time {
-    font-family: monospace;
-    min-width: 18ch;
-}
-
-/* Popups
-----------------------------------------
-*/
-
-.popup-container {
-    display: none;
-    position: absolute;
-    z-index: 10;
-
-    left: 10px;
-    top: -50px;
-}
-
-.popup-container.visible {
-    display: block;
-}
-
-.popup {
-    display: flex;
-    background-color: #dedede;
-    color: black;
-    font-size: 80%;
-
-    /* overflow-y: auto; */
-    max-width: 60ch;
-    max-height: 60ch;
-    min-width: 40ch;
-    min-height: 20ch;
-}
-
-.popup article {
-    /* makes the text in the popup scroll, but not the sidebar */
-    overflow-y: auto;
-    padding: 1em;
-    word-break: break-word;
-}
-
-.popup .location {
-    font-style: initial;
-}
-
-.popup .popup-control {
-    display: flex;
-    flex-direction: column;
-
-    /* not needed, but the icons aren't text
-       and should therefor not be copied */
-    user-select: none;
-
-    cursor: grab;
-    background-color: var(--color);
-    /* Transition for background color 
-     * Matches that of '.event'.
-     * TODO break out to common place */
-    transition: 0.3s;
-}
-
-.popup-control .btn {
-    max-width: 2em;
-    max-height: 2em;
-    margin: 1em;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    font-size: 150%;
-}
-
-#bar {
-    width: calc(100% + 2em);
-    height: 4px;
-    background: blue;
-    border-color: blue;
-    left: -1em;
-}
-
-/* Tabs
-----------------------------------------
-*/
-
-.tabgroup {
-    position: relative;
-    width: 100%;
-    resize: both;
-}
-
-.tab label {
-    position: absolute;
-
-    left: 100%;
-    top: 0;
-    display: block;
-
-    max-height: 5ex;
-    min-height: 5ex;
-    min-width: 5ex;
-    max-width: 5ex;
-
-    border: 1px solid #ccc;
-    border-radius: 0 5px 5px 0;
-    background-color: #aeaeae;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.tab [type=radio] { display: none; }
-
-.tab .content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: #dedede;
-    right: 0;
-    bottom: 0;
-    overflow: auto;
-
-    min-width: 100%;
-    min-height: 100%;
-}
-
-.tab [type=radio]:checked ~ label {
-    z-index: 1;
-    /* to align all tab */
-    border-left: 3px solid transparent;
-    background-color: #dedede;
-}
-
-.tab [type=radio]:checked ~ label ~ .content {
-    z-index: 1;
-}
-
-/* Other
-----------------------------------------
-*/
-
-.template {
-    display: none;
-}
-
-
-.summary-line .square {
-    margin-right: 1em;
-}
-
-.square {
-    width: 1em;
-    height: 1em;
-	background-color: var(--color);
-}
-
-/* Icalendar
-----------------------------------------
-*/
-
-/* Below is for styling embedded xcalendar components in the xhtml
-   document. I can't find anything about if this is allowed
-   according to any standard, but it seems to work.
-   Firefox doesn't want to admit it, and shows nothing in the
-   inspector, but the document renders fine.
-   Vivaldi works fine in the inspector.
- */
-
-icalendar {
-    display: inline-block;
-    padding-left: 1ch;
-    font-family: monospace;
-    font-size: xx-small;
-    padding-left: 1ch;
-}
-
-icalendar properties > * {
-    display: block;
-}
-
-icalendar properties * {
-    padding-right: 1ch;
-}
-
-icalendar parameters {
-    color: gray;
-}
-
-/* All icalendar properties  */
-icalendar calscale::before { content: "calscale: "; }
-icalendar method::before { content: "method: "; }
-icalendar prodid::before { content: "prodid: "; }
-icalendar version::before { content: "version: "; }
-icalendar attach::before { content: "attach: "; }
-icalendar categories::before { content: "categories: "; }
-icalendar class::before { content: "class: "; }
-icalendar comment::before { content: "comment: "; }
-icalendar description::before { content: "description: "; }
-icalendar geo::before { content: "geo: "; }
-icalendar location::before { content: "location: "; }
-icalendar percent-complete::before { content: "percent-complete: "; }
-icalendar priority::before { content: "priority: "; }
-icalendar resources::before { content: "resources: "; }
-icalendar status::before { content: "status: "; }
-icalendar summary::before { content: "summary: "; }
-icalendar completed::before { content: "completed: "; }
-icalendar dtend::before { content: "dtend: "; }
-icalendar due::before { content: "due: "; }
-icalendar dtstart::before { content: "dtstart: "; }
-icalendar duration::before { content: "duration: "; }
-icalendar freebusy::before { content: "freebusy: "; }
-icalendar transp::before { content: "transp: "; }
-icalendar tzid::before { content: "tzid: "; }
-icalendar tzname::before { content: "tzname: "; }
-icalendar tzoffsetfrom::before { content: "tzoffsetfrom: "; }
-icalendar tzoffsetto::before { content: "tzoffsetto: "; }
-icalendar tzurl::before { content: "tzurl: "; }
-icalendar attendee::before { content: "attendee: "; }
-icalendar contact::before { content: "contact: "; }
-icalendar organizer::before { content: "organizer: "; }
-icalendar recurrence-id::before { content: "recurrence-id: "; }
-icalendar related-to::before { content: "related-to: "; }
-icalendar url::before { content: "url: "; }
-icalendar uid::before { content: "uid: "; }
-icalendar exdate::before { content: "exdate: "; }
-icalendar rdate::before { content: "rdate: "; }
-icalendar rrule::before { content: "rrule: "; }
-icalendar action::before { content: "action: "; }
-icalendar repeat::before { content: "repeat: "; }
-icalendar trigger::before { content: "trigger: "; }
-icalendar created::before { content: "created: "; }
-icalendar dtstamp::before { content: "dtstamp: "; }
-icalendar last-modified::before { content: "last-modified: "; }
-icalendar sequence::before { content: "sequence: "; }
-icalendar request-status::before { content: "request-status: "; }
-
-/* icalendar parameters */
-icalendar parameters altrep::before { content: "altrep:"; }
-icalendar parameters cn::before { content: "cn:"; }
-icalendar parameters cutype::before { content: "cutype:"; }
-icalendar parameters delegated-from::before { content: "delegated-from:"; }
-icalendar parameters delegated-to::before { content: "delegated-to:"; }
-icalendar parameters dir::before { content: "dir:"; }
-icalendar parameters encoding::before { content: "encoding:"; }
-icalendar parameters fmttype::before { content: "fmttype:"; }
-icalendar parameters fbtype::before { content: "fbtype:"; }
-icalendar parameters language::before { content: "language:"; }
-icalendar parameters member::before { content: "member:"; }
-icalendar parameters partstat::before { content: "partstat:"; }
-icalendar parameters range::before { content: "range:"; }
-icalendar parameters related::before { content: "related:"; }
-icalendar parameters reltype::before { content: "reltype:"; }
-icalendar parameters role::before { content: "role:"; }
-icalendar parameters rsvp::before { content: "rsvp:"; }
-icalendar parameters sent-by::before { content: "sent-by:"; }
-icalendar parameters tzid::before { content: "tzid:"; }
-
-/* special fields inside some properties */
-icalendar period start { content: "start:"; }
-icalendar period end { content: "end:"; }
-icalendar period duration { content: "duration:" }
-icalendar recur freq  { content: "freq:"; }
-icalendar recur until { content: "until:"; }
-icalendar recur count { content: "count:"; }
-icalendar recur bymonth    { content: "bymonth"; }
-icalendar recur byweekno   { content: "byweekno"; }
-icalendar recur byyearday  { content: "byyearday"; }
-icalendar recur bymonthday { content: "bymonthday"; }
-icalendar recur byday      { content: "byday"; }
-icalendar recur byhour     { content: "byhour"; }
-icalendar recur byminute   { content: "byminute"; }
-icalendar recur bysecond   { content: "bysecond"; }
-icalendar recur bysetpos   { content: "bysetpos"; }
-
-/* types */
-icalendar date-time, icalendar date, icalendar until {color: purple;}
-icalendar text { color: green; }
-icalendar integer { color: blue; }
-icalendar unknown { color: red; }
-
-/* vim:expandtab:softtabstop=4:shiftwidth=4:
- */
diff --git a/static/style.scss b/static/style.scss
new file mode 100644
index 00000000..fafea660
--- /dev/null
+++ b/static/style.scss
@@ -0,0 +1,977 @@
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
+.root {
+    display: grid;
+    margin: 0;
+    max-width: 100%;
+    height: 100%;
+
+    grid-template-columns: auto auto 20em;
+    grid-template-rows: auto;
+
+    grid-template-areas:
+        "main main nav"
+        "main main cal"
+            "main main details"
+            "main main events"
+            "footer footer events";
+
+    main {
+        min-width: 0;  /* for wide */
+        min-height: 0; /* for tall */
+
+        /* apparently required if one wants to have multiple
+       items within main, without it overflowing
+       */
+        display: flex;
+        flex-direction: column;
+    }
+
+
+    footer {
+        margin: 0.5em;
+        color: ray;
+        font-size: 8pt;
+
+        display: flex;
+        justify-content: space-between;
+
+        flex-direction: row;
+
+        span {
+            margin: 0 1em;
+            white-space: nowrap;
+        }
+    }
+}
+
+@media (max-aspect-ratio: 3/4) {
+    .root {
+        grid-template-areas:
+            "main main"
+                "nav events"
+                "cal events"
+                "details events"
+                ". events"
+                "footer events";
+        grid-template-rows: 70% auto;
+        grid-template-columns: 50% auto;
+
+        footer {
+            flex-direction: column;
+        }
+    }
+}
+
+.hidelink {
+    color: inherit;
+    text-decoration: none;
+}
+
+
+/* Change View
+----------------------------------------
+"Buttons" for changing between weekly and monthly layout
+*/
+
+.calnav {
+    display: flex;
+    flex-direction: column;
+    padding-left: 2em;
+    padding-right: 2em;
+}
+
+.change-view {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    padding-top: 1ex;
+    padding-bottom: 1ex;
+}
+
+#jump-to {
+    > form {
+        display: flex;
+    }
+
+    input {
+        flex-grow: 2;
+        margin-right: 1em;
+    }
+
+    button, a {
+        /* Same as height, figure out way to force this */
+        width: 2.5em;
+    }
+}
+
+/* button
+--------------------------------------------------
+*/
+
+.btn {
+    padding: 0;
+
+    /* if a */
+    text-decoration: none;
+
+    /* if button */
+    border: none;
+    background-color: inherit;
+
+    > div {
+        padding: 0.5em;
+        background-color: #3399ff;
+        color: white;
+
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        /* shouldn't be needed, but otherwise wont align with a text input
+       inside a shared flex-container.
+       It however seems to make <a> and <button> tag refuse to be the same height?
+       */
+        height: 2.5em;
+
+        box-shadow: var(--btn-height) var(--btn-height) gray;
+    }
+
+    &:active > div {
+        transform: translate(var(--btn-height), var(--btn-height));
+        box-shadow: none;
+    }
+}
+
+/* Eventlist
+----------------------------------------
+The sidebar with all the events
+*/
+
+.eventlist {
+    min-height: 0;
+    overflow: auto;
+    border-top: 3px solid var(--gray);
+    /* mostly for long links */
+    word-break: break-word;
+
+    article {
+        border-bottom: 1px solid black;
+        margin-top: 1em;
+        border-left-style: solid;
+        border-left-width: 6px;
+        padding-left: 2px;
+    }
+
+    .eventtext {
+        border-color: var(--color);
+
+        &.tentative {
+            border-left-style: dashed;
+        }
+    }
+}
+
+/* Text day
+----------------------------------------
+Each event within the eventlist
+*/
+
+.text-day {
+    border-left: 2px solid black;
+    border-top: 2px solid black;
+    padding-left: 2px;
+    margin-top: 1em;
+
+    header h2 {
+        width: 100%;
+        text-align: center;
+        font-size: 14pt;
+    }
+}
+
+/* Small calendar
+----------------------------------------
+*/
+
+.smallcal {
+    display: flex;
+    justify-content: center;
+
+    .nav {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 150%;
+    }
+}
+
+.smallcall-head {
+    text-align: center;
+    font-weight: bold;
+}
+
+
+.small-calendar {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: auto;
+
+    grid-auto-flow: dense;
+
+    > * {
+        text-align: center;
+        > time {
+            width: 100%;
+            text-align: right;
+            /* padding place in <time> instead on parent block element
+       to allow a border radius without making the link area
+       smaller
+           */
+            padding: 5px;
+        }
+    }
+    > *:not(.column-head) {
+        display: flex;
+        align-items: center; /* vertically center */
+        text-align: right;
+    }
+    a {
+        color: initial;
+        text-decoration: none;
+    }
+
+    .row-head {
+        grid-column: 1;
+        border-right: 1px solid black;
+
+        /* Sort of hack to get week numbers looking ok */
+        justify-content: right;
+        padding-right: 5px;
+    }
+
+    .column-head {
+        grid-row: 1;
+        border-bottom: 1px solid black;
+    }
+
+    .next, .prev {
+        color: var(--gray);
+    }
+
+    .today {
+        border: 1px solid black;
+    }
+}
+
+/* Sliders
+----------------------------------------
+ */
+
+.sliders {
+    label {
+        padding-left: 1em;
+    }
+
+    input[type="range"] {
+        width: 100%;
+        margin: 0;
+    }
+
+    .input-group {
+        display: flex;
+
+        input {
+            min-width: 0;
+        }
+    }
+}
+
+/* Calendar List
+----------------------------------------
+The list of all the loaded calendars,
+along with their colors.
+*/
+
+.calendarlist li {
+    font-size: 8pt;
+    list-style-type: none;
+    border-left-width: 1em;
+    border-left-style: solid;
+    border-color: var(--color);
+    padding-left: 1ex;
+
+    /* force to single line */
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+/* Caltable
+----------------------------------------
+*/
+
+.table-head {
+    font-size: 200%;
+    text-align: center;
+}
+
+.caltable {
+    flex-grow: 10;
+
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    /* grid template rows is generated
+       inline in the HTML */
+
+    max-height: 100%;
+    /* Apparently needed to ensure that parent
+       can contain all its children */
+    min-height: 0;
+
+    .thead {
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .thead, .cal-cell {
+        border: 1px solid var(--gray);
+    }
+
+    .cal-cell {
+        overflow-y: auto;
+
+        .event {
+            font-size: 8pt;
+            border-radius: 5px;
+            padding: 2px;
+            margin: 2px;
+            font-family: arial;
+        }
+    }
+
+    .cal-cell-time {
+        border-bottom: none;
+    }
+
+    .cal-cell-short {
+        border-top: none
+    }
+
+
+    .longevents {
+        border-bottom: none;
+        border-top: none;
+        position: relative;
+
+        .event {
+            margin: 0;
+            /* TODO use other border rules */
+            border: 1px solid black;
+
+            position: absolute;
+            box-sizing: border-box;
+            padding: 0;
+        }
+    }
+}
+
+
+.date-info {
+    color: var(--gray);
+    .day-number {
+        padding: 2pt;
+    }
+
+    &.current .day-number {
+        color: black;
+    }
+}
+
+
+/* Weekly calendar
+----------------------------------------
+*/
+
+.calendar {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-grow: 2;
+}
+
+.clock {
+    color: var(--gray);
+    border-top: 1px dotted var(--gray);
+    width: 100%;
+    pointer-events: none;
+}
+
+.sideclock {
+    padding: 0;
+    grid-row: 3;
+    position: relative;
+    .day {
+        border: 1px transparent;
+        min-width: 0;
+    }
+    .clock {
+        border-top: 1px dotted var(--gray);
+        grid-row: 3;
+    }
+}
+
+.days {
+    display: grid;
+    grid-template-rows: 4em 4em auto;
+    grid-template-columns: 5ch auto;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    overflow-x: scroll;
+
+    /* allow for popup placement */
+    position: relative;
+
+    .meta {
+        border-bottom: 2px solid var(--gray);
+        grid-row: 1;
+    }
+
+    .events {
+        grid-row: 3;
+    }
+
+    .event {
+        border: 1px solid black;
+    }
+
+    .longevents {
+        grid-row: 2;
+        grid-column-start: 2;
+        position: relative;
+    }
+}
+
+.events {
+    position: relative;
+    border: 1px solid var(--gray);
+
+    .event {
+        width: 100%;
+
+        &.generated {
+            width: calc(100% * var(--editmode));
+        }
+
+        &.continuing {
+            border-bottom: none;
+            background-image: linear-gradient(to top, #0007 0%,#FFF0 2em);
+        }
+
+        &.continued {
+            border-top: none;
+            background-image: linear-gradient(to bottom, #FFF7 0%,#FFF0 3em);
+        }
+
+        &.continued.continuing {
+            border-top: none;
+            border-bottom: none;
+            background-image:
+                linear-gradient(to bottom,
+                                #FFF7  0%, #FFF0 10%,
+                                #FFF0 90%, #0007 100%);
+        }
+
+    }
+
+}
+
+/*
+ * This makes the borders of the object be part of the size.
+ * Making placing it on the correct line much simpler.
+ */
+.clock, .days .event, .eventlike {
+    position: absolute;
+    box-sizing: border-box;
+    margin: 0;
+    display: block;
+}
+
+.clocktext {
+    z-index: 1;
+    text-align: right;
+}
+
+.meta {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    padding-left: 1em;
+    padding-right: 1em;
+    .dayname {
+        position: absolute;
+        left: 5px;
+        top: 2px;
+        color: var(--gray);
+    }
+
+    .daydate {
+        white-space: nowrap;
+        font-size: 150%;
+    }
+}
+
+.event {
+    transition: 0.3s;
+    font-size: var(--event-font-size);
+    overflow: visible;
+    background-color: var(--color);
+    color: var(--complement);
+
+    &.tentative {
+        border: 3px dashed black;
+    }
+
+    &.generated {
+        opacity: 40%;
+        transition: none;
+    }
+
+    &.repeating {
+        float: left;
+        font-size: 150%;
+    }
+
+    .location {
+        display: block;
+        font-size: 80%;
+        font-style: italic;
+        white-space: pre;
+    }
+}
+
+.event-body {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.zero-width-events .event {
+    width: initial;
+    padding: 0.5em;
+    margin: 0.2em;
+    border-radius: 1ex;
+    position: relative;
+    float: left;
+}
+
+
+.repeating {
+    color: red;
+}
+
+.eventtext {
+    white-space: pre-line;
+    font-size: 10pt;
+
+    h3 {
+        font-size: 12pt;
+        border-bottom: 1px solid var(--gray);
+        margin-bottom: 0;
+        font-weight: 300;
+        margin-top: 0;
+    }
+
+    .location {
+        display: inline-block;
+        vertical-align: text-top;
+    }
+
+    .last-modified, .rrule {
+        display: flex;
+        justify-content: right;
+        text-align: right;
+        font-size: 80%;
+        color: var(--gray);
+        padding-right: 1em;
+    }
+}
+
+/* */
+
+.longevents {
+    .event {
+        border-radius: 1em;
+        padding-left: 1em;
+        &.continuing {
+            border-right: none;
+            border-radius: 1em 0 0 1em;
+        }
+
+        &.continued {
+            border-left: none;
+            border-radius: 0 1em 1em 0;
+        }
+
+        &.continued.continuing {
+            border-radius: 0;
+        }
+
+    }
+}
+
+/*
+ * All other CAL_ classes are generated by the backend.
+ * NOTE Possibly move this there.
+ */
+.CAL_Generated {
+    background-color: #55FF55;
+}
+
+.clock-0  { top: calc(100%/24 *  0); }
+.clock-2  { top: calc(100%/24 *  2); }
+.clock-4  { top: calc(100%/24 *  4); }
+.clock-6  { top: calc(100%/24 *  6); }
+.clock-8  { top: calc(100%/24 *  8); border-width: 2px; }
+.clock-10 { top: calc(100%/24 * 10); }
+.clock-12 { top: calc(100%/24 * 12); }
+.clock-14 { top: calc(100%/24 * 14); }
+.clock-16 { top: calc(100%/24 * 16); border-width: 2px; }
+.clock-18 { top: calc(100%/24 * 18); }
+.clock-20 { top: calc(100%/24 * 20); }
+.clock-22 { top: calc(100%/24 * 22); }
+.clock-24 { top: calc(100%/24 * 24); }
+
+
+/* Search page
+----------------------------------------
+ */
+
+.paginator > * {
+    padding-left: 1em;
+    display: inline-block;
+}
+
+.summary-line {
+    display: inline-flex;
+
+    > * {
+        display: inline-block;
+    }
+
+    time {
+        font-family: monospace;
+        min-width: 18ch;
+    }
+}
+
+/* Popups
+----------------------------------------
+*/
+
+.popup-container {
+    display: none;
+    position: absolute;
+    z-index: 10;
+
+    left: 10px;
+    top: -50px;
+
+    &.visible {
+        display: block;
+    }
+}
+
+.popup {
+    display: flex;
+    background-color: #dedede;
+    color: black;
+    font-size: 80%;
+
+    /* overflow-y: auto; */
+    max-width: 60ch;
+    max-height: 60ch;
+    min-width: 40ch;
+    min-height: 20ch;
+
+    input {
+        white-space: initial;
+        border: 1px solid gray;
+        max-width: 100%;
+    }
+
+    article {
+        /* makes the text in the popup scroll, but not the sidebar */
+        overflow-y: auto;
+        padding: 1em;
+        word-break: break-word;
+    }
+
+    .location {
+        font-style: initial;
+    }
+
+    .popup-control {
+        display: flex;
+        flex-direction: column;
+
+        /* not needed, but the icons aren't text
+       and should therefor not be copied */
+        user-select: none;
+
+        cursor: grab;
+        background-color: var(--color);
+        /* Transition for background color 
+         * Matches that of '.event'.
+         * TODO break out to common place */
+        transition: 0.3s;
+
+        .btn {
+            max-width: 2em;
+            max-height: 2em;
+            margin: 1em;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            font-size: 150%;
+        }
+
+    }
+}
+
+
+#bar {
+    width: calc(100% + 2em);
+    height: 4px;
+    background: blue;
+    border-color: blue;
+    left: -1em;
+}
+
+/* Tabs
+----------------------------------------
+*/
+
+.tabgroup {
+    position: relative;
+    width: 100%;
+    resize: both;
+}
+
+.tab {
+    label {
+        position: absolute;
+
+        left: 100%;
+        top: 0;
+        display: block;
+
+        max-height: 5ex;
+        min-height: 5ex;
+        min-width: 5ex;
+        max-width: 5ex;
+
+        border: 1px solid #ccc;
+        border-radius: 0 5px 5px 0;
+        background-color: #aeaeae;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    [type=radio] {
+        display: none;
+        &:checked ~ label {
+            z-index: 1;
+            /* to align all tab */
+            border-left: 3px solid transparent;
+            background-color: #dedede;
+
+            ~ .content {
+                z-index: 1;
+            }
+        }
+    }
+
+    .content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: #dedede;
+        right: 0;
+        bottom: 0;
+        overflow: auto;
+
+        min-width: 100%;
+        min-height: 100%;
+    }
+}
+
+/* Other
+----------------------------------------
+*/
+
+.template {
+    display: none;
+}
+
+
+.summary-line .square {
+    margin-right: 1em;
+}
+
+.square {
+    width: 1em;
+    height: 1em;
+    background-color: var(--color);
+}
+
+/* Icalendar
+----------------------------------------
+*/
+
+/* Below is for styling embedded xcalendar components in the xhtml
+   document. I can't find anything about if this is allowed
+   according to any standard, but it seems to work.
+   Firefox doesn't want to admit it, and shows nothing in the
+   inspector, but the document renders fine.
+   Vivaldi works fine in the inspector.
+ */
+
+icalendar {
+    display: inline-block;
+    padding-left: 1ch;
+    font-family: monospace;
+    font-size: xx-small;
+    padding-left: 1ch;
+
+    properties > * {
+        display: block;
+    }
+
+    properties * {
+        padding-right: 1ch;
+    }
+
+
+    /* All icalendar properties  */
+    calscale::before { content: "calscale: "; }
+    method::before { content: "method: "; }
+    prodid::before { content: "prodid: "; }
+    version::before { content: "version: "; }
+    attach::before { content: "attach: "; }
+    categories::before { content: "categories: "; }
+    class::before { content: "class: "; }
+    comment::before { content: "comment: "; }
+    description::before { content: "description: "; }
+    geo::before { content: "geo: "; }
+    location::before { content: "location: "; }
+    percent-complete::before { content: "percent-complete: "; }
+    priority::before { content: "priority: "; }
+    resources::before { content: "resources: "; }
+    status::before { content: "status: "; }
+    summary::before { content: "summary: "; }
+    completed::before { content: "completed: "; }
+    dtend::before { content: "dtend: "; }
+    due::before { content: "due: "; }
+    dtstart::before { content: "dtstart: "; }
+    duration::before { content: "duration: "; }
+    freebusy::before { content: "freebusy: "; }
+    transp::before { content: "transp: "; }
+    tzid::before { content: "tzid: "; }
+    tzname::before { content: "tzname: "; }
+    tzoffsetfrom::before { content: "tzoffsetfrom: "; }
+    tzoffsetto::before { content: "tzoffsetto: "; }
+    tzurl::before { content: "tzurl: "; }
+    attendee::before { content: "attendee: "; }
+    contact::before { content: "contact: "; }
+    organizer::before { content: "organizer: "; }
+    recurrence-id::before { content: "recurrence-id: "; }
+    related-to::before { content: "related-to: "; }
+    url::before { content: "url: "; }
+    uid::before { content: "uid: "; }
+    exdate::before { content: "exdate: "; }
+    rdate::before { content: "rdate: "; }
+    rrule::before { content: "rrule: "; }
+    action::before { content: "action: "; }
+    repeat::before { content: "repeat: "; }
+    trigger::before { content: "trigger: "; }
+    created::before { content: "created: "; }
+    dtstamp::before { content: "dtstamp: "; }
+    last-modified::before { content: "last-modified: "; }
+    sequence::before { content: "sequence: "; }
+    request-status::before { content: "request-status: "; }
+
+    parameters {
+        color: gray;
+
+        /* icalendar parameters */
+        altrep::before { content: "altrep:"; }
+        cn::before { content: "cn:"; }
+        cutype::before { content: "cutype:"; }
+        delegated-from::before { content: "delegated-from:"; }
+        delegated-to::before { content: "delegated-to:"; }
+        dir::before { content: "dir:"; }
+        encoding::before { content: "encoding:"; }
+        fmttype::before { content: "fmttype:"; }
+        fbtype::before { content: "fbtype:"; }
+        language::before { content: "language:"; }
+        member::before { content: "member:"; }
+        partstat::before { content: "partstat:"; }
+        range::before { content: "range:"; }
+        related::before { content: "related:"; }
+        reltype::before { content: "reltype:"; }
+        role::before { content: "role:"; }
+        rsvp::before { content: "rsvp:"; }
+        sent-by::before { content: "sent-by:"; }
+        tzid::before { content: "tzid:"; }
+    }
+
+    /* special fields inside some properties */
+    period {
+        start { content: "start:"; }
+        end { content: "end:"; }
+        duration { content: "duration:" }
+    }
+
+    recur {
+        freq  { content: "freq:"; }
+        until { content: "until:"; }
+        count { content: "count:"; }
+        bymonth    { content: "bymonth"; }
+        byweekno   { content: "byweekno"; }
+        byyearday  { content: "byyearday"; }
+        bymonthday { content: "bymonthday"; }
+        byday      { content: "byday"; }
+        byhour     { content: "byhour"; }
+        byminute   { content: "byminute"; }
+        bysecond   { content: "bysecond"; }
+        bysetpos   { content: "bysetpos"; }
+    }
+
+    /* types */
+    date-time, date, until {color: purple;}
+    text { color: green; }
+    integer { color: blue; }
+    unknown { color: red; }
+}
+
+/* vim:expandtab:softtabstop=4:shiftwidth=4:
+ */