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

Some updates to layout for heading
Some checks failed
Build and copy to prod / build-and-copy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Lewis Dale 2024-04-10 12:36:28 +01:00
parent 707283da51
commit 4f0e396df3
6 changed files with 35 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/_includes/base.njk
View File

@ -41,9 +41,9 @@
{% ogImage "./src/_includes/components/ogImage.njk", { title: pageTitle or title, subTitle: description } %} {% ogImage "./src/_includes/components/ogImage.njk", { title: pageTitle or title, subTitle: description } %}
</head> </head>
<body> <body>
<header class="wrapper-lg row space-between"> <header>
<a href="/" class="site-title">LD</a> <a href="/" class="site-title">LD</a>
<div class="nav-container wrapper-lg row space-between w-full">
<nav> <nav>
<ul class="row" role='list'> <ul class="row" role='list'>
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
@ -57,7 +57,7 @@
<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>
</div>
<fieldset class="color-scheme"> <fieldset class="color-scheme">
<legend>Change your colour scheme</legend> <legend>Change your colour scheme</legend>
<label> <label>

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

@ -1,15 +1,13 @@
header > * {
flex-grow: 1;
}
.color-scheme { .color-scheme {
border: 0; border: 0;
padding: 0; padding: 0;
display: flex; display: flex;
gap: var(--space-size-xs); gap: var(--space-size-xs);
flex-grow: 1; grid-column: auto/span 2;
justify-content: center; justify-content: end;
justify-self: flex-end; width: 100%;
--grid-item-size: 20rem;
legend { legend {
position:absolute; position:absolute;

4
src/css/exceptions/nav-container.css Normal file
View File

@ -0,0 +1,4 @@
.nav-container {
--grid-item-size: clamp(30rem, 70vw, var(--screen-lg));
grid-column: auto / span 4;
}

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

@ -3,6 +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;
&:hover, &:focus, &:focus-visible { &:hover, &:focus, &:focus-visible {
outline: 0px transparent; outline: 0px transparent;

13
src/css/globals.css
View File

@ -153,12 +153,13 @@ nav {
} }
header { header {
align-items: center; display: grid;
display: flex; grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-size, 10rem), 1fr));
flex-direction: row; grid-gap: 10px;
justify-content: space-between; padding: var(--space-size-m);
padding-top: var(--space-size-s); place-items: center;
padding-bottom: var(--space-size-s); justify-content: center;
width: 100%;
} }
p { p {

4
src/css/utilities/flex.css
View File

@ -1,3 +1,7 @@
.space-between { .space-between {
justify-content: space-between; justify-content: space-between;
} }
.space-around {
justify-content: space-around;
}