Mini redesign
All checks were successful
Build and copy to prod / build-and-copy (push) Successful in 1m31s
All checks were successful
Build and copy to prod / build-and-copy (push) Successful in 1m31s
This commit is contained in:
Lewis Dale
parent
481658aea0
commit
b0e9634302
@ -49,14 +49,25 @@
|
||||
{% endif %}
|
||||
</head>
|
||||
<body>
|
||||
<header class="wrapper-lg row space-between">
|
||||
<a href="/" class="site-title">LD</a>
|
||||
|
||||
<header>
|
||||
<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">
|
||||
<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
|
||||
@ -69,20 +80,13 @@
|
||||
<input type="radio" name="color-scheme" value="system">
|
||||
System
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</header>
|
||||
<div class="content">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
<footer>
|
||||
<div class="wrapper-lg">Copyright © {{ today.year }} {{ metadata.author.name }}</div>
|
||||
|
||||
|
||||
@ -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
21
src/css/compositions/switcher.css
Normal 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);
|
||||
}
|
||||
@ -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;
|
||||
@ -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
17
src/css/exceptions/header.css
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -11,6 +11,10 @@
|
||||
font-size: var(--text-size-2xl);
|
||||
} */
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
&::before {
|
||||
content: "\203A";
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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,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;
|
||||
|
||||
@ -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;
|
||||
@ -156,3 +160,10 @@ img, picture {
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: var(--screen-lg);
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
padding: 0 var(--space-size-m);
|
||||
}
|
||||
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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.
|
||||
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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).
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user