Move nav onto second header row. Improve colour contrast on colour scheme picker
All checks were successful
Build and copy to prod / build-and-copy (push) Successful in 2m15s

This commit is contained in:
Lewis Dale 2024-05-23 07:43:21 +01:00
parent 13f3109078
commit e2c4e40a98
5 changed files with 30 additions and 11 deletions

View File

@ -43,16 +43,7 @@
<body> <body>
<header class="wrapper-lg row space-between"> <header class="wrapper-lg row space-between">
<a href="/" class="site-title">LD</a> <a href="/" class="site-title">LD</a>
<nav>
<ul class="row" role='list'>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/blogroll">Blogroll</a></li>
<li><a href="/events/2024">Events</a></li>
<li><a href="/links">Links</a></li>
</ul>
</nav>
<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>
@ -71,6 +62,16 @@
System System
</label> </label>
</fieldset> </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="/blogroll">Blogroll</a></li>
<li><a href="/events/2024">Events</a></li>
<li><a href="/links">Links</a></li>
</ul>
</nav>
</header> </header>
{{ content | safe }} {{ content | safe }}
<footer> <footer>

View File

@ -0,0 +1,10 @@
.main-nav {
width: 100%;
flex-grow: 1;
.row {
width: fit-content;
max-width: 100%;
margin: 0 auto;
}
}

View File

@ -4,6 +4,7 @@
line-height: 1; line-height: 1;
text-decoration: none; text-decoration: none;
place-self: start; place-self: start;
flex-grow: 1;
&:hover, &:focus, &:focus-visible { &:hover, &:focus, &:focus-visible {
outline: 0px transparent; outline: 0px transparent;

View File

@ -156,6 +156,7 @@ header {
flex-wrap: wrap; flex-wrap: wrap;
padding-top: var(--space-size-s); padding-top: var(--space-size-s);
padding-bottom: var(--space-size-s); padding-bottom: var(--space-size-s);
align-items: center;
} }
p { p {

View File

@ -14,7 +14,13 @@ module.exports = {
'2xl': '1536px', '2xl': '1536px',
'3xl': '1920px', '3xl': '1920px',
}, },
colors: colors, colors: {
...colors,
neutral: {
...colors.neutral,
400: '#b1b1b1'
}
},
backgroundColor: ({theme}) => theme('colors'), backgroundColor: ({theme}) => theme('colors'),
textColor: ({theme}) => theme('colors'), textColor: ({theme}) => theme('colors'),
spacing: { spacing: {