diff options
-rw-r--r-- | static/Makefile | 2 | ||||
-rw-r--r-- | static/_small-calendar.scss | 51 | ||||
-rw-r--r-- | static/style.scss | 55 |
3 files changed, 56 insertions, 52 deletions
diff --git a/static/Makefile b/static/Makefile index f848b784..a5c42396 100644 --- a/static/Makefile +++ b/static/Makefile @@ -8,4 +8,4 @@ clean: rm $(TARGETS) %.css: %.scss - scss $< $@ + scss -I. $< $@ diff --git a/static/_small-calendar.scss b/static/_small-calendar.scss new file mode 100644 index 00000000..c4814285 --- /dev/null +++ b/static/_small-calendar.scss @@ -0,0 +1,51 @@ +.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: $gray; + } + + .today { + border: 1px solid black; + } +} diff --git a/static/style.scss b/static/style.scss index 86aca464..1a59173f 100644 --- a/static/style.scss +++ b/static/style.scss @@ -222,58 +222,11 @@ Each event within the eventlist font-weight: bold; } +/* Sass greatly discourages @import in favour of @use. @use however doesn't work + for me. +*/ +@import 'small-calendar'; -.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: $gray; - } - - .today { - border: 1px solid black; - } -} /* Sliders ---------------------------------------- |