header footer

This commit is contained in:
2026-06-17 09:57:52 -07:00
parent 8b746f5968
commit 6f520699c6
2 changed files with 68 additions and 2 deletions

View File

@ -24,6 +24,10 @@
margin: 0; /* 2. Remove default margins */
}
html {
height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords; /* 3. Enable keyword animations */
@ -36,6 +40,11 @@ body {
font-family: sans-serif;
color: var(--color-text);
background-color: var(--color-bg);
font-family: "Atkinson Hyperlegible Next";
height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100%;
}
#content {
@ -88,6 +97,61 @@ h1 {
p {
text-wrap: pretty; /* 9. Improve line wrapping */
margin-block: 1.25em;
}
a {
color: var(--color-accent);
text-decoration-thickness: .15rem;
}
a:visited {
color: var(--color-text);
text-decoration-color: var(--color-accent);
}
*:focus-visible {
outline-offset: .1rem;
outline: .1rem solid var(--color-accent);
}
/* Header/nav/footer */
header {
height: 20vh;
padding: 1rem;
background-color: var(--color-accent);
}
.logo {
height: 100%;
width: auto;
}
@media (prefers-color-scheme: light) {
.dark {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.light {
display: none;
}
}
footer {
background-color: var(--color-accent);
color: var(--color-bg);
}
footer p {
text-align: center;
}
footer a,
footer a:visited {
color: var(--color-bg);
text-decoration-color: var(--color-bg);
}
#hero {