joeac/joeac.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Tweaks styling

Browse Source
This commit is contained in:
Joe Carstairs
2024-05-12 09:20:30 +01:00
parent 0f75bf3443
commit a086d765e4
2 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
website/public/css/base.css
View File

@@ -84,11 +84,18 @@ body {
} }
@media (min-width: 36rem) { @media (min-width: 36rem) {
:is(main, article) { body {
display: grid; display: grid;
grid-template-columns: [media-start] 6rem [content-start] 1fr [content-end]; grid-template-columns: [media-start] 6rem [content-start] 1fr [content-end];
margin-inline-end: 6rem; margin-inline-end: 6rem;
column-gap: var(--spacing-block-sm); column-gap: var(--spacing-block-sm);
max-width: calc(6rem + var(--spacing-block-sm) + 30rem);
:is(main, article, nav) {
display: grid;
grid-column: media-start / content-end;
grid-template-columns: subgrid;
}
:is(section, header, aside) { :is(section, header, aside) {
grid-column: content-start / content-end; grid-column: content-start / content-end;
@@ -136,7 +143,8 @@ a:is(:link, :visited) {
nav { nav {
margin-block: var(--spacing-block-sm); margin-block: var(--spacing-block-sm);
li { ul {
grid-column: media-start / content-end;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: var(--spacing-inline-md); gap: var(--spacing-inline-md);
@@ -144,6 +152,17 @@ nav {
} }
} }
@media (min-width: 36rem) {
nav {
display: grid;
grid-template-columns: subgrid;
ul {
justify-content: end;
}
}
}
/** Blog feed */ /** Blog feed */
.h-feed { .h-feed {

12
website/src/components/Navbar.astro
View File

@@ -2,12 +2,12 @@
--- ---
<nav> <nav>
<li> <ul>
<ul> <li>
<a href="/">Home</a> <a href="/">Home</a>
</ul> </li>
<ul> <li>
<a href="/blog">Blog</a> <a href="/blog">Blog</a>
</ul> </li>
</li> </ul>
</nav> </nav>