118 lines
2.5 KiB
CSS
118 lines
2.5 KiB
CSS
body {
|
|
font-family: 'GowunDodum', system-ui, sans-serif;
|
|
color: var(--text-color);
|
|
font-size: 1rem;
|
|
min-height: 100vh;
|
|
height: auto;
|
|
background: var(--body-bg-color) linear-gradient(to bottom,
|
|
var(--body-bg-color2) 0%,
|
|
var(--body-bg-color3) 50%,
|
|
var(--body-bg-color) 100%);
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: linear-gradient(var(--bg-white-02) 1px, var(--transparent) 1px),
|
|
linear-gradient(90deg, var(--bg-white-02) 1px, var(--transparent) 1px);
|
|
background-size: 2px 2px;
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
main {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
main>section:not(#hero) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
main>section:not(#hero)>h2 {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 1.6rem;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
main>section:not(#hero)>h2 a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
main>section:not(#hero)>h2 a:hover,
|
|
main>section:not(#hero)>h2 a:focus {
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
main>section:not(#hero)>nav[aria-label] {
|
|
margin: 0;
|
|
}
|
|
|
|
main>section:not(#hero)>nav[aria-label] ol {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 0.95rem;
|
|
color: var(--text-muted2);
|
|
}
|
|
|
|
main>section:not(#hero)>nav[aria-label] ol li {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
main>section:not(#hero)>nav[aria-label] ol li+li::before {
|
|
content: "/";
|
|
color: var(--text-muted2);
|
|
}
|
|
|
|
main>section:not(#hero)>nav[aria-label] a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
main>section:not(#hero)>nav[aria-label] a:hover,
|
|
main>section:not(#hero)>nav[aria-label] a:focus {
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
.external-link::after {
|
|
content: " ↗";
|
|
font-size: 0.85em;
|
|
display: inline-block;
|
|
margin-left: 0.2em;
|
|
vertical-align: baseline;
|
|
text-decoration: none;
|
|
}
|
|
|
|
hr {
|
|
all: unset;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 30em;
|
|
height: 1rem;
|
|
margin: auto;
|
|
position: relative;
|
|
background: radial-gradient(ellipse at center -20px,
|
|
var(--accent-blue-glow),
|
|
var(--transparent) 80%);
|
|
}
|
|
|
|
.hr-mirror {
|
|
background: radial-gradient(ellipse at center calc(100% + 20px),
|
|
var(--accent-blue-glow),
|
|
var(--transparent) 80%);
|
|
} |