95 lines
1.4 KiB
CSS
95 lines
1.4 KiB
CSS
/* import fonts */
|
|
|
|
:root {
|
|
--color-foreground: black;
|
|
--color-foreground-dimmed: color-mix(in srgb, var(--color-foreground), transparent 40%);
|
|
/* --color-accent: #0692aa; */
|
|
--max-width: 900px;
|
|
--font-base-size: 16px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-foreground: white;
|
|
}
|
|
|
|
body {
|
|
background: #222;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: "JetBrains Mono";
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
min-height: 100svh;
|
|
max-width: var(--max-width);
|
|
width: 100%;
|
|
color: var(--color-foreground);
|
|
font-size: var(--font-base-size);
|
|
margin: 0 auto;
|
|
padding: 0 max(25px, 5vw);
|
|
}
|
|
|
|
header {
|
|
padding: 1em 0;
|
|
width: 100%;
|
|
}
|
|
|
|
header>nav {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
}
|
|
|
|
.nav-menu {
|
|
list-style-type: none;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 1em;
|
|
}
|
|
|
|
.nav-menu-item {
|
|
text-decoration: none;
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
.nav-menu-item:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#site-root {
|
|
}
|
|
|
|
#header-nav-current {
|
|
font-weight: bold;
|
|
}
|
|
|
|
main {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
/*
|
|
h1::before { content: "#"; }
|
|
h2::before { content: "##"; }
|
|
h3::before { content: "###"; }
|
|
|
|
h1::before, h2::before, h3::before {
|
|
font-variant-ligatures: none;
|
|
margin-right: 0.3em;
|
|
}
|
|
*/
|
|
|
|
footer {
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 1em;
|
|
font-size: smaller;
|
|
color: var(--color-foreground-dimmed);
|
|
}
|