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 } %}
</head>
<body>
<header class="wrapper-lg row space-between">
<header>
<a href="/" class="site-title">LD</a>
<div class="nav-container wrapper-lg row space-between w-full">
<nav>
<ul class="row" role='list'>
<li><a href="/">Home</a></li>
@ -57,7 +57,7 @@
<a href="/feed/" class="rss" aria-label="RSS feed">
<i class="fa-solid fa-rss"></i>
</a>
</div>
<fieldset class="color-scheme">
<legend>Change your colour scheme</legend>
<label>

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

@ -1,15 +1,13 @@
header > * {
flex-grow: 1;
}
.color-scheme {
border: 0;
padding: 0;
display: flex;
gap: var(--space-size-xs);
flex-grow: 1;
justify-content: center;
justify-self: flex-end;
grid-column: auto/span 2;
justify-content: end;
width: 100%;
--grid-item-size: 20rem;
legend {
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);
line-height: 1;
text-decoration: none;
place-self: start;
&:hover, &:focus, &:focus-visible {
outline: 0px transparent;

13
src/css/globals.css
View File

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

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

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