Move small-calendar css to own file.

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
 ----------------------------------------