Events calendar for 2024 cycling

src/css/exceptions/callout.css

@@ -0,0 +1,9 @@
+.callout {
+    background-color: var(--color-callout-bg);
+    border: 5px solid var(--color-callout-border);
+    border-radius: 10px;
+    color: var(--color-primary);
+    height: fit-content;
+    max-width: 60ch;
+    padding: var(--space-size-xs);
+}

src/css/exceptions/events.css

@@ -0,0 +1,14 @@
+.events {
+    p {
+        margin-inline: auto;
+    }
+
+    h2 {
+        text-align: center;
+    }
+
+    .event {
+        border: 1px solid var(--color-primary);
+        padding: var(--space-size-xs);
+    }
+}

src/css/globals.css

@@ -5,6 +5,9 @@
     --color-subtle: var(--color-zinc-400);
     --color-disabled: var(--color-neutral-400);
     --color-accent: var(--color-zinc-600);
+
+    --color-callout-bg: var(--color-slate-800);
+    --color-callout-border: var(--color-coolGray-600);
 }
 
 .inverse {
@@ -14,6 +17,8 @@
     --color-subtle: var(--color-zinc-600);
     --color-disabled: var(--color-neutral-600);
     --color-accent: var(--color-zinc-400);
+    --color-callout-bg: var(--color-slate-300);
+    --color-callout-border: var(--color-coolGray-400);
 }
 
 @media (prefers-color-scheme: light) {
@@ -24,6 +29,8 @@
         --color-subtle: var(--color-zinc-600);
         --color-disabled: var(--color-neutral-600);
         --color-accent: var(--color-zinc-400);
+        --color-callout-bg: var(--color-slate-300);
+        --color-callout-border: var(--color-coolGray-400);
     }
 
     .inverse {
@@ -33,6 +40,8 @@
         --color-subtle: var(--color-zinc-400);
         --color-disabled: var(--color-neutral-400);
         --color-accent: var(--color-zinc-600);
+        --color-callout-bg: var(--color-slate-800);
+        --color-callout-border: var(--color-coolGray-600);
     }
 }
 
@@ -43,6 +52,8 @@
     --color-subtle: var(--color-zinc-600);
     --color-disabled: var(--color-neutral-600);
     --color-accent: var(--color-zinc-600);
+    --color-callout-bg: var(--color-slate-300);
+    --color-callout-border: var(--color-coolGray-400);
 }
 
 [data-color-scheme="light"] .inverse {
@@ -52,6 +63,8 @@
     --color-subtle: var(--color-zinc-400);
     --color-disabled: var(--color-neutral-400);
     --color-accent: var(--color-zinc-400);
+    --color-callout-bg: var(--color-slate-800);
+    --color-callout-border: var(--color-coolGray-600);
 }
 
 [data-color-scheme="dark"] {
@@ -61,6 +74,8 @@
     --color-subtle: var(--color-zinc-400);
     --color-disabled: var(--color-neutral-400);
     --color-accent: var(--color-zinc-600);
+    --color-callout-bg: var(--color-slate-800);
+    --color-callout-border: var(--color-coolGray-600);
 }
 
 body {