leilukin-site/_site/assets/css/general.css

144 lines
2.3 KiB
CSS

/* GENERAL STYLES */
html {
scroll-behavior: smooth;
}
body {
display: flex;
align-items: center;
flex-direction: column;
font-family: var(--ff-primary), system-ui, sans-serif;
color: var(--clr-body-txt);
background-color: var(--clr-body-bg);
}
h1 {
color: var(--clr-main-heading);
font-size: var(--sz-h1);
border-bottom: 0.18rem solid var(--clr-title-border);
padding-bottom: 0.3em;
margin-bottom: 0.5em;
}
h2, h3, h4, h5, h6 {
color: var(--clr-sub-heading);
}
h1, h2, h3 {
line-height: 1.2;
}
h2, .h2 {
font-size: var(--sz-h2);
}
h3, .h3 {
font-size: var(--sz-h3);
}
h2:has(+ *[class]:not(.heading-anchor)), .h2:has(+ *[class]),
h3:has(+ *[class]:not(.heading-anchor)), .h3:has(+ *[class]) {
margin-bottom: 0.5em;
}
hr {
border: 0.05rem solid var(--clr-title-border);
}
strong {
color: var(--clr-bold-txt);
}
:focus {
outline: 0.15em solid var(--clr-body-txt);
}
a {
font-weight: 700;
color: var(--clr-link);
}
a:hover {
color: var(--clr-link-hover);
}
a:not([class]):focus {
outline: 0.15rem solid var(--clr-link);
}
a:focus img {
outline: 0.2em solid var(--clr-body-txt);
}
:not(.c-blockquote) > blockquote,
.c-blockquote {
padding: 1em 1.4em 1.4em;
border-inline-start: 0.1em solid var(--clr-main-heading);
background-color: var(--clr-quote-bg);
margin-bottom: 1em;
}
blockquote > * + :not([class]),
* + blockquote,
* + .c-blockquote,
.c-blockquote__attribution {
margin-top: var(--sz-paragraph-margin);
}
button:hover {
cursor: pointer;
}
button:focus,
details:focus {
outline-offset: 0.2em;
}
figure {
margin-bottom: var(--sz-paragraph-margin);
display: grid;
place-content: center;
justify-items: center;
}
figcaption {
text-align: center;
font-size: 0.9em;
margin-top: 0.2em;
}
:not(pre) > code {
color: var(--clr-bold-txt);
padding: 0 0.15em;
}
pre {
border: 0.07em solid var(--clr-code-border);
background: var(--clr-code-bg);
max-width: 90vw;
overflow: auto;
padding: 1rem;
}
pre > code {
white-space: pre;
}
summary {
cursor: pointer;
}
dl {
display: grid;
gap: 1em;
grid-template-columns: auto auto;
}
dt {
font-weight: bold;
}
dd {
grid-column-start: 2;
}