header and heading spacing/size

This commit is contained in:
2026-08-21 16:25:18 -07:00
parent f0289728a9
commit 589445e99b
+23 -8
View File
@@ -108,8 +108,13 @@ h1 {
margin-block-end: .6em;
}
h2 { font-size: 2rem; }
h3 { font-size: 1.8rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.7rem; }
h4 { font-size: 1.4rem; }
@media (max-width: 650px) {
h1 { font-size: 2.6rem; }
}
p {
text-wrap: pretty; /* 9. Improve line wrapping */
@@ -143,17 +148,27 @@ ul p {
/* Header/nav/footer */
header {
height: 20vh;
padding: calc(20vh / 8);
--height-base: 20vh; /* Variable height for desktop vs mobile */
}
@media (max-width: 650px) {
header{
--height-base: 12vh; /* Variable height for desktop vs mobile */
}
}
header {
height: var(--height-base);
padding: calc(var(--height-base) / 8);
background-color: var(--color-accent);
}
.logo {
height: 100%;
width: auto;
padding: calc(20vh / 30);
border: calc(20vh / 50) solid var(--color-accent);
border-radius: calc(20vh / 3);
padding: calc(var(--height-base) / 30);
border: calc(var(--height-base) / 50) solid var(--color-accent);
border-radius: calc(var(--height-base) / 3);
}
header a:focus-visible {
@@ -162,7 +177,7 @@ header a:focus-visible {
header a:focus-visible .logo {
border-color: var(--color-text);
outline: calc(20vh / 30) solid var(--color-accent-flipped);
outline: calc(var(--height-base) / 30) solid var(--color-accent-flipped);
}
@media (prefers-color-scheme: light) {