generated from inherentlee/11ty
header footer
This commit is contained in:
64
css/main.css
64
css/main.css
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user