@@ -6,11 +6,14 @@ --font-scale: 1em;
   --background-color: #fff;
   --heading-color: #222;
   --text-color: #444;
+  --muted-color: #888;
   --link-color: #3273dc;
   --visited-color: #8b6fcb;
   --code-background-color: #f2f2f2;
+  --today-background-color: #f2f2f2;
   --code-color: #222;
   --blockquote-color: #222;
+  --border-color: #222;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -18,11 +21,14 @@ :root {
     --background-color: #01242e;
     --heading-color: #eee;
     --text-color: #ddd;
+    --muted-color: #ccc;
     --link-color: #8cc2dd;
     --visited-color: #8b6fcb;
     --code-background-color: #000;
+    --today-background-color: #000;
     --code-color: #ddd;
     --blockquote-color: #ccc;
+    --border-color: #ccc;
   }
 }
 
@@ -250,3 +256,46 @@ list-style-type: none;
   padding-left: unset;
   margin-block-start: 0.5rex;
 }
+
+time {
+  font-variant-numeric: tabular-nums;
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 0.5ch;
+}
+
+.day {
+  padding: 0.2ch 0.5ch 0.5ch;
+  min-height: 6rem;
+}
+
+.past {
+  opacity: 0.5;
+}
+
+.day h3 {
+  margin-block: 0 0.5ch;
+  font-size: 1.1rem;
+  font-weight: normal;
+}
+
+.day.today h3 {
+  font-weight: bold;
+}
+
+.event {
+  font-size: 0.9rem;
+}
+
+.today {
+  background-color: var(--today-background-color);
+}
+
+.calendar footer {
+  font-size: small;
+  color: var(--muted-color);
+}