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

52
src/_includes/base.njk
View File

@ -49,40 +49,44 @@
{% endif %}
</head>
<body>
<header class="wrapper-lg row space-between">
<a href="/" class="site-title">LD</a>
<a href="/feed/" class="rss" aria-label="RSS feed">
<i class="fa-solid fa-rss"></i>
</a>
<fieldset class="color-scheme">
<legend>Change your colour scheme</legend>
<label>
<input type="radio" name="color-scheme" value="dark">
Dark
</label>
<label>
<input type="radio" name="color-scheme" value="light">
Light
</label>
<label>
<input type="radio" name="color-scheme" value="system">
System
</label>
</fieldset>
<header>
<div class="switcher-lg">
<nav class="main-nav">
<ul class="row" role='list'>
<ul 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>
<li>
<a href="/feed/" class="rss" aria-label="RSS feed">
<i class="fa-solid fa-rss"></i>
</a>
</li>
</ul>
</nav>
<fieldset class="color-scheme">
<legend>Change your colour scheme</legend>
<div class="switcher-sm">
<label>
<input type="radio" name="color-scheme" value="dark">
Dark
</label>
<label>
<input type="radio" name="color-scheme" value="light">
Light
</label>
<label>
<input type="radio" name="color-scheme" value="system">
System
</label>
</div>
</fieldset>
</div>
</header>
<div class="content">
{{ content | safe }}
</div>
<footer>
<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
includePrism: true
---
<main class="wrapper-lg stack-lg">
<main class="stack-lg">
<article class="stack-md h-entry">
<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>

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;
padding: 0;
display: flex;
gap: var(--space-size-xs);
justify-content: flex-end;
gap: var(--space-size-3xs);
flex-direction: column;
max-width: 25rem;
margin-left: auto;
text-align: right;
legend {
position:absolute;
@ -64,4 +67,13 @@
text-shadow: var(--color-decoration) 1px 0 10px;
}
}
}
@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);
} */
h1 {
text-align: left;
width: 100%;
}
h1, h2, h3 {
&::before {
content: "\203A";

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

@ -1,10 +1,24 @@
.main-nav {
width: 100%;
flex-grow: 1;
text-align: right;
}
.row {
width: fit-content;
max-width: 100%;
margin: 0 auto;
@media only screen and (max-width: 1280px) {
.main-nav {
flex-basis: 100%;
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 {
flex-grow: initial;
font-size: var(--text-size-s);
padding: 0 var(--space-size-2xs);
height: auto;
width: fit-content;
&:hover {
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);
line-height: 1;
text-decoration: none;
place-self: start;
flex-grow: 1;
width: fit-content;
&:hover, &:focus, &:focus-visible {
outline: 0px transparent;

23
src/css/globals.css
View File

@ -41,6 +41,16 @@ body {
font-family: var(--font-family-mono);
font-size: var(--text-size-s);
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);
}
header {
flex-wrap: wrap;
padding-top: var(--space-size-s);
padding-bottom: var(--space-size-s);
align-items: center;
}
p {
line-height: 1.6;
@ -155,4 +159,11 @@ img, picture {
max-width: 100%;
height: auto;
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
---
<main class="home wrapper-lg stack-2xl">
<main class="home stack-2xl">
<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>
<p class="inline-block max-w-[45ch] p-note">