Events calendar for 2024 cycling

src/blogroll.html

@@ -25,7 +25,6 @@ layout: base.njk
             </ul>
         </div>
     </article>
-	
 </main>
 
 

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 {

src/events/2024.11tydata.json

@@ -0,0 +1,27 @@
+{ "events": [
+    {
+        "date": "2024-05-11",
+        "name": "Macclesfield Bikeathon",
+        "location": "Macclesfield, UK",
+        "distance": "96km"
+    },
+    {
+        "date": "2024-05-12",
+        "name": "Helping Kids with Cancer Sportive 2024",
+        "location": "Bolton, UK",
+        "distance": "105km"
+    },
+    {
+        "date": "2024-07-14",
+        "name": "Manchester - Blackpool Bike Ride",
+        "location": "Manchester, UK",
+        "distance": "215km"
+    },
+    {
+        "date": "2024-09-01",
+        "name": "Manchester 100",
+        "location": "Manchester, UK",
+        "distance": "160km"
+    }
+]
+}

src/events/2024.html

@@ -0,0 +1,27 @@
+---
+title: 2024 cycling events calendar
+layout: base.njk
+---
+
+<main class="wrapper-lg events">
+    <article class="stack-lg">
+        <h1 class="text-center">{{ title }}</h1>
+        <div class="stack-lg">     
+            <p>This year I'm raising money for <a href="https://www.cyclistsfc.org.uk/">Cyclists Fighting Cancer</a>, a brilliant charity that donate bikes to children and young people who are dealing with cancer.</p>
+
+            <p>If you'd like to donate to the fundraiser, you can do so on the <a href="https://www.justgiving.com/page/lewis-dale-bikes">JustGiving page</a>.</a></p>
+            
+            <h2>The events</h2>
+            
+            <ul class="grid eventlist" role="list" data-cols="3">
+            {% for event in events %}
+                <li class="event stack-2xs">
+                    <h3>{{ event.name }}</h3>
+                    <time datetime="{{ event.date }}">{{ event.date | dateDisplay }}</time>
+                    <p>Distance: {{ event.distance }}</p>
+                </li>
+            {% endfor %}
+            </ul>
+        </div>
+    </article>
+</main>

src/index.html

@@ -7,11 +7,20 @@ layout: base.njk
 	<section class="stack-md row h-card">
     <h1><a href="https://{{ metadata.site.domain }}" rel="me" class="u-url">Hi, I'm <span class="p-given-name">Lewis</span></a></h1>
 
+		<aside class="callout stack-2xs">
+			<p>I'm raising money for Cyclists Fighting Cancer this summer.</p>
+
+			<p>
+				Check out the <a href="/events/2024">events calendar</a>, or if you would like to donate you can do so on the <a href="https://justgiving.co.uk/page/lewis-dale-bikes">Just Giving page</a>
+			</p>
+		</aside>
+
+		{% image metadata.author.avatar, "My face", "box circle u-photo", "300px", [300] %}
+
 		<p class="inline-block max-w-[45ch] p-note">
 			I'm a software engineer who loves building things for the web. I consider myself a generalist, but on a given day I'll probably be working with Typescript, HTML and CSS, and on occasion a touch of .NET. I work for <a href="https://triptease.com" target="_blank" rel="noreferrer" class="p-org">Triptease</a> as a Senior Software Engineer, and on the side I'm learning Rust by building a <a href="/post/creating-a-sinclair-basic-interpreter/">Sinclair BASIC Interpreter</a/>.
 		</p>
 
-		{% image metadata.author.avatar, "My face", "box circle u-photo", "300px", [300] %}
 	
     <p class="p-note">
 			When I'm not working I love cycling, reading fiction (mostly sci-fi and ghost stories), and spending time with my family & our border collie.