diff options
-rw-r--r-- | module/html/html.scm | 2 | ||||
-rw-r--r-- | static/style.css | 103 |
2 files changed, 104 insertions, 1 deletions
diff --git a/module/html/html.scm b/module/html/html.scm index 5ad98b0a..51de18aa 100644 --- a/module/html/html.scm +++ b/module/html/html.scm @@ -36,7 +36,7 @@ (if (null? ev-list) #f (let* ((pred? (lambda (next) - (time<=? (attr next 'DTSTART) + (time<? (attr next 'DTSTART) (attr (car ev-list) 'DTEND)))) (overlapping (take-while pred? ev-list)) (rest (drop-while pred? ev-list))) diff --git a/static/style.css b/static/style.css new file mode 100644 index 00000000..728423a3 --- /dev/null +++ b/static/style.css @@ -0,0 +1,103 @@ +/* + * 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); + + /* This is relative for the .clock */ + position: relative; +} + +.days { + display: flex; + width: 100%; + height: 100%; + padding: 0; +} + +/* + * This makes the borders of the object be part of the size. + * Making placing it on the correct line much simpler. + */ +.clock, .event { + position: absolute; + box-sizing: border-box; + margin: 0; + display: block; +} + +.clock { + color: gray; + border-top: 1px dotted gray; + width: 100000; /* calc(100% + 5ex); */ +} + +.days > :first-child { + margin-left: 6ex; +} + +.day { + position: relative; + + height: 100%; + width: 100%; + min-width: 300px; + + margin-left: 0.5em; + border: 1px solid black; +} + +.meta { + position: absolute; + height: 50px; + top: -50px; + + width: 100%; + +} + +.meta .dayname { + font-size: 2em; +} + +.event { + width: 100%; + + border-style: solid; + border-width: 2px; + + overflow: hidden; + + z-index: 0; +} + +.selected { + width: 100% !important; + left: 0 !important; + z-index: 1 !important; + + margin-top: 3mm; + margin-left: 3mm; +} + +#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); } +#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); } +#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); } |