Move small-calendar css to own file.

1 files changed, 51 insertions, 0 deletions

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;
+    }
+}