161 lines
2.2 KiB
CSS
161 lines
2.2 KiB
CSS
/* GLOBAL */
|
|
|
|
html {
|
|
scrollbar-color: currentColor transparent;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-base);
|
|
font-size: var(--text-size-base);
|
|
line-height: var(--leading);
|
|
background: var(--color-global-bg);
|
|
color: var(--color-global-text);
|
|
accent-color: var(--color-black);
|
|
}
|
|
|
|
header,
|
|
section,
|
|
article,
|
|
footer {
|
|
position: relative;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
|
|
/* Headings */
|
|
|
|
h1 {
|
|
font-size: var(--text-size-heading-1);
|
|
}
|
|
h2 {
|
|
font-size: var(--text-size-heading-2);
|
|
}
|
|
h3 {
|
|
font-size: var(--text-size-heading-3);
|
|
}
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-family: var(--font-display);
|
|
letter-spacing: var(--kerning-tight);
|
|
line-height: var(--leading-fine);
|
|
}
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-size: var(--text-size-heading-4);
|
|
}
|
|
|
|
|
|
/* Links */
|
|
|
|
a {
|
|
color: currentColor;
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
/* Lists */
|
|
|
|
ul:is([role="list"], [class]) {
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
dl {
|
|
font-size: var(--text-size-meta);
|
|
}
|
|
dt {
|
|
font-weight: 700;
|
|
}
|
|
dd {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
|
|
/* Sections */
|
|
|
|
section header {
|
|
border-block: var(--border);
|
|
padding-block: var(--space-gutter);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
}
|
|
section header a {
|
|
font-size: var(--text-size-meta);
|
|
}
|
|
|
|
|
|
/* Details / Summary */
|
|
|
|
details {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
details > * {
|
|
padding: calc(var(--space-gutter)/2) var(--space-gutter);
|
|
font-size: var(--text-size-meta);
|
|
}
|
|
summary {
|
|
user-select: none;
|
|
}
|
|
summary::-webkit-details-marker,
|
|
summary::marker {
|
|
display: none;
|
|
content: "";
|
|
}
|
|
summary:after {
|
|
content: "";
|
|
display: inline-flex;
|
|
width: 1em;
|
|
height: 1em;
|
|
background-image: var(--icon-x);
|
|
background-size: contain;
|
|
position: absolute;
|
|
top: calc(var(--space-gutter)/1.5);
|
|
right: calc(var(--space-gutter)/1.5);
|
|
transform: rotate(45deg);
|
|
transform-origin: center;
|
|
transition: transform 0.1s ease-out;
|
|
}
|
|
details[open] summary:after {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
|
|
/* Images */
|
|
|
|
img {
|
|
object-fit: cover;
|
|
aspect-ratio: var(--aspect-ratio, auto);
|
|
}
|
|
|
|
|
|
/* Address */
|
|
|
|
address {
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
/* Selection */
|
|
|
|
::selection {
|
|
background: var(--color-dark);
|
|
color: var(--color-light);
|
|
}
|
|
|
|
/* Focus */
|
|
|
|
:focus-visible {
|
|
outline: var(--focus-ring);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
|