lewis/lewisdale.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mini redesign
All checks were successful
Build and copy to prod / build-and-copy (push) Successful in 1m31s
Details

Browse Source
This commit is contained in:
Lewis Dale 2024-10-10 20:07:48 +01:00
parent 481658aea0
commit b0e9634302
15 changed files with 126 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/_includes/base.njk
View File

@ -49,14 +49,25 @@
{% endif %} {% endif %}
</head> </head>
<body> <body>
<header class="wrapper-lg row space-between"> <header>
<a href="/" class="site-title">LD</a> <div class="switcher-lg">
<nav class="main-nav">
<ul role='list'>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/blogroll">/Blogroll</a></li>
<li><a href="/uses">/Uses</a></li>
<li>
<a href="/feed/" class="rss" aria-label="RSS feed"> <a href="/feed/" class="rss" aria-label="RSS feed">
<i class="fa-solid fa-rss"></i> <i class="fa-solid fa-rss"></i>
</a> </a>
</li>
</ul>
</nav>
<fieldset class="color-scheme"> <fieldset class="color-scheme">
<legend>Change your colour scheme</legend> <legend>Change your colour scheme</legend>
<div class="switcher-sm">
<label> <label>
<input type="radio" name="color-scheme" value="dark"> <input type="radio" name="color-scheme" value="dark">
Dark Dark
@ -69,20 +80,13 @@
<input type="radio" name="color-scheme" value="system"> <input type="radio" name="color-scheme" value="system">
System System
</label> </label>
</div>
</fieldset> </fieldset>
</div>
<nav class="main-nav">
<ul class="row" role='list'>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/events/2024">Events</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/blogroll">/Blogroll</a></li>
<li><a href="/uses">/Uses</a></li>
</ul>
</nav>
</header> </header>
<div class="content">
{{ content | safe }} {{ content | safe }}
</div>
<footer> <footer>
<div class="wrapper-lg">Copyright &copy; {{ today.year }} {{ metadata.author.name }}</div> <div class="wrapper-lg">Copyright &copy; {{ today.year }} {{ metadata.author.name }}</div>

2
src/_includes/post.njk
View File

@ -2,7 +2,7 @@
layout: base.njk layout: base.njk
includePrism: true includePrism: true
--- ---
<main class="wrapper-lg stack-lg"> <main class="stack-lg">
<article class="stack-md h-entry"> <article class="stack-md h-entry">
<h1 class="p-name"><a href="{{ url }}" class="u-url">{{ title | safe }}</a></h1> <h1 class="p-name"><a href="{{ url }}" class="u-url">{{ title | safe }}</a></h1>
<p class="published">Published: <time class="dt-published" datetime="{{ page.date | dateToRfc3339 }}">{{ page.date | dateDisplay }}</time></p> <p class="published">Published: <time class="dt-published" datetime="{{ page.date | dateToRfc3339 }}">{{ page.date | dateDisplay }}</time></p>

21
src/css/compositions/switcher.css Normal file
View File

@ -0,0 +1,21 @@
[class*="switcher"] {
display: flex;
flex-wrap: wrap;
margin: calc(var(--switcher-space, 1rem) / 2 * -1);
> * {
flex-grow: 1;
flex-basis: calc((var(--switcher-threshold, 30rem) - (100% - var(--switcher-space, 1rem))) * 999);
margin: calc(var(--switcher-space, 1rem) / 2);
}
}
.switcher-sm {
--switcher-threshold: 20rem;
--switcher-space: var(--space-size-4xs);
}
.switcher-lg {
--switcher-threshold: 50rem;
--switcher-space: var(--space-size-3xs);
}

16
src/css/exceptions/color-scheme-picker.css
View File

@ -3,8 +3,11 @@
border: 0; border: 0;
padding: 0; padding: 0;
display: flex; display: flex;
gap: var(--space-size-xs); gap: var(--space-size-3xs);
justify-content: flex-end; flex-direction: column;
max-width: 25rem;
margin-left: auto;
text-align: right;
legend { legend {
position:absolute; position:absolute;
@ -65,3 +68,12 @@
} }
} }
} }
@media only screen and (max-width: 1280px) {
.color-scheme {
margin-right: 0;
margin-left: auto;
padding: 0 var(--space-size-l);
width: 100%;
}
}

17
src/css/exceptions/header.css Normal file
View File

@ -0,0 +1,17 @@
header {
flex-basis: 20rem;
flex-grow: 1;
padding: var(--space-size-m) var(--space-size-2xs);
> * {
margin-left: auto;
}
}
@media only screen and (max-width: 1280px) {
header {
.switcher-lg {
flex-direction: column-reverse;
}
}
}

4
src/css/exceptions/home.css
View File

@ -11,6 +11,10 @@
font-size: var(--text-size-2xl); font-size: var(--text-size-2xl);
} */ } */
h1 {
text-align: left;
width: 100%;
}
h1, h2, h3 { h1, h2, h3 {
&::before { &::before {
content: "\203A"; content: "\203A";

26
src/css/exceptions/main-nav.css
View File

@ -1,10 +1,24 @@
.main-nav { .main-nav {
width: 100%; text-align: right;
flex-grow: 1; }
.row { @media only screen and (max-width: 1280px) {
width: fit-content; .main-nav {
max-width: 100%; flex-basis: 100%;
margin: 0 auto; flex-grow: 1;
align-content: center;
max-width: var(--screen-size-lg);
ul {
display: flex;
gap: var(--space-size-xs);
flex-grow: 1;
align-items: center;
align-content: center;
max-width: var(--screen-size-lg);
margin-left: 0;
margin-right: auto;
padding: 0 var(--space-size-l);
}
} }
} }

3
src/css/exceptions/rss.css
View File

@ -1,7 +1,8 @@
.rss { .rss {
flex-grow: initial;
font-size: var(--text-size-s); font-size: var(--text-size-s);
padding: 0 var(--space-size-2xs); padding: 0 var(--space-size-2xs);
height: auto;
width: fit-content;
&:hover { &:hover {
background-color: var(--color-primary); background-color: var(--color-primary);

3
src/css/exceptions/site-title.css
View File

@ -3,8 +3,7 @@
letter-spacing: clamp(-0.2rem,1vw,-0.5rem); letter-spacing: clamp(-0.2rem,1vw,-0.5rem);
line-height: 1; line-height: 1;
text-decoration: none; text-decoration: none;
place-self: start; width: fit-content;
flex-grow: 1;
&:hover, &:focus, &:focus-visible { &:hover, &:focus, &:focus-visible {
outline: 0px transparent; outline: 0px transparent;

23
src/css/globals.css
View File

@ -41,6 +41,16 @@ body {
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-size: var(--text-size-s); font-size: var(--text-size-s);
text-underline-offset: var(--space-size-4xs); text-underline-offset: var(--space-size-4xs);
display: flex;
flex-wrap: wrap;
> .content {
flex-basis: 0;
flex-grow: 999;
min-inline-size: 75%;
max-inline-size: var(--screen-lg);
padding: var(--space-size-s) var(--space-size-m);
}
} }
@ -111,12 +121,6 @@ nav {
font-size: var(--text-size-s); font-size: var(--text-size-s);
} }
header {
flex-wrap: wrap;
padding-top: var(--space-size-s);
padding-bottom: var(--space-size-s);
align-items: center;
}
p { p {
line-height: 1.6; line-height: 1.6;
@ -156,3 +160,10 @@ img, picture {
height: auto; height: auto;
object-fit: cover; object-fit: cover;
} }
main {
max-width: var(--screen-lg);
margin-left: 0;
margin-right: auto;
padding: 0 var(--space-size-m);
}

16
src/events/2023.11tydata.json
View File

@ -1,16 +0,0 @@
{
"events": [
{
"date": "2024-07-14",
"name": "Manchester - Blackpool Bike Ride",
"location": "Manchester, UK",
"distance": "215km"
},
{
"date": "2024-09-02",
"name": "Manchester 100",
"location": "Manchester, UK",
"distance": "173km"
}
]
}

8
src/events/2023.md
View File

@ -1,8 +0,0 @@
---
title: 2023 cycling events calendar
layout: eventcalendar.njk
---
For 2023, I cycled two events raising money for [The Christie](https://www.christie.nhs.uk/), and was able to raise an amazing £936!
Thanks so much to everyone who donated, I really appreciate it.

27
src/events/2024.11tydata.json
View File

@ -1,27 +0,0 @@
{ "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"
}
]
}

8
src/events/2024.md
View File

@ -1,8 +0,0 @@
---
title: 2024 cycling events calendar
layout: eventcalendar.njk
---
This year I'm raising money for [Cyclists Fighting Cancer](https://www.cyclistsfc.org.uk/), a brilliant charity that donate bikes to children and young people who are dealing with cancer.
If you'd like to donate to the fundraiser, you can do so on the [JustGiving page](https://www.justgiving.com/page/lewis-dale-bikes).

2
src/index.html
View File

@ -3,7 +3,7 @@ title: Home
layout: base.njk layout: base.njk
--- ---
<main class="home wrapper-lg stack-2xl"> <main class="home stack-2xl">
<section class="stack-md row h-card"> <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> <h1><a href="https://{{ metadata.site.domain }}" rel="me" class="u-url">Hi, I'm <span class="p-given-name">Lewis</span></a></h1>
<p class="inline-block max-w-[45ch] p-note"> <p class="inline-block max-w-[45ch] p-note">