1146 lines
No EOL
25 KiB
Text
1146 lines
No EOL
25 KiB
Text
:root {
|
|
--color-brand: #333333;
|
|
--color-brand-alt: #999999;
|
|
--color-brand-light: #cccccc;
|
|
--color-brand-dark: #666666;
|
|
--color-text: #000;
|
|
--color-text-bg: #fff;
|
|
--color-text-meta: #666666;
|
|
--color-link: #333333;
|
|
--color-link-visited: #333333;
|
|
--color-link-hover: #999999;
|
|
--color-link-active: #c00;
|
|
--color-link-inverted: #fff;
|
|
--color-link-visited-inverted: #fff;
|
|
--color-link-hover-inverted: #fff;
|
|
--color-link-active-inverted: #c00;
|
|
--color-border: #333333;
|
|
--color-border-light: #cccccc;
|
|
--color-border-dark: #666666;
|
|
--color-autocomplete: #000;
|
|
--color-autocomplete-bg: #fff;
|
|
--color-autocomplete-select: #fff;
|
|
--color-autocomplete-select-bg: #0072b9;
|
|
--color-body-bg: #fff;
|
|
--color-header-bg: #fff;
|
|
--color-footer-bg: #fff;
|
|
--color-backdrop: #eeeeee;
|
|
--color-mobile-menu: #333333;
|
|
--color-mobile-menu-cover: rgba(0, 0, 0, 0.2);
|
|
--color-button: #333333;
|
|
--color-button-hover: #999999;
|
|
--color-button-text: #fff;
|
|
--color-button-text-hover: #fff;
|
|
--color-button-disabled: #999999;
|
|
--color-mark-highlight: #c00;
|
|
--color-mark-bg: #fd0;
|
|
--color-menu-active: #000;
|
|
--color-preview-bg: #fffadb;
|
|
--color-row-header: transparent;
|
|
--color-row-odd: #f7f7f7;
|
|
--color-row-even: transparent;
|
|
--color-status: #43a808;
|
|
--color-status-bg: #f4feee;
|
|
--color-warning: #000;
|
|
--color-warning-bg: #fffce6;
|
|
--color-warning-border: #fd0;
|
|
--color-error: #c00;
|
|
--color-error-bg: #fff0f0;
|
|
--color-watermark: #eeeeee;
|
|
--color-headings: #333333;
|
|
--color-code: #333333;
|
|
--color-highlight: #999999;
|
|
--fs-xxxxl: 3rem;
|
|
--fs-xxxl: 2.5rem;
|
|
--fs-xxl: 2rem;
|
|
--fs-xl: 1.5rem;
|
|
--fs-l: 1.25rem;
|
|
--fs-m: 1rem;
|
|
--fs-s: 0.889rem;
|
|
--fs-xs: 0.778rem;
|
|
--fw-headings: 700;
|
|
--fw-bolder: 900;
|
|
--fw-bold: 700;
|
|
--fw-medium: 500;
|
|
--fw-normal: 400;
|
|
--fw-light: 300;
|
|
--fw-lighter: 200;
|
|
--ff-body: ui-serif, Charter, Bitstream Charter, Sitka Text, Cambria, serif;
|
|
--ff-headings: ui-sans-serif, system-ui, sans-serif;
|
|
--ff-alt: system-ui, sans-serif;
|
|
--ff-monospace: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
|
|
--radius-xl: 1rem;
|
|
--radius-l: 0.75rem;
|
|
--radius-m: 0.5rem;
|
|
--radius-s: 0.3rem;
|
|
--radius-xs: 0.125rem;
|
|
--breakout: calc(5px + 1.5625vw);
|
|
--gutters-reverse: calc(0px - (5px + 1.5625vw));
|
|
--gutters: calc(5px + 1.5625vw);
|
|
--heading-line-height: 1.3;
|
|
--indent-amount: 2rem;
|
|
--max-content-width: 1111px;
|
|
--max-line-width: 70ch;
|
|
--max-page-width: 1111px; }
|
|
|
|
html {
|
|
-webkit-text-size-adjust: none;
|
|
text-size-adjust: none;
|
|
min-height: 100%;
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: inherit; }
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
img,
|
|
svg,
|
|
picture,
|
|
audio,
|
|
video,
|
|
canvas,
|
|
iframe,
|
|
embed,
|
|
object {
|
|
display: block; }
|
|
|
|
img,
|
|
svg,
|
|
video {
|
|
max-width: 100%;
|
|
height: auto; }
|
|
|
|
figure {
|
|
margin-inline: 0; }
|
|
|
|
input,
|
|
button,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
letter-spacing: inherit;
|
|
word-spacing: inherit; }
|
|
|
|
@media (min-width: 666px) {
|
|
[type='search'] {
|
|
-webkit-appearance: textfield; } }
|
|
|
|
code,
|
|
kbd,
|
|
samp {
|
|
font-family: var(--ff-monospace); }
|
|
|
|
html {
|
|
font-family: var(--ff-body);
|
|
font-size: calc(18 / 16 * 100%);
|
|
line-height: 1.5;
|
|
color: var(--color-text); }
|
|
|
|
form {
|
|
margin-block: 0 1.5rem; }
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
margin-block: 0 1.5rem; }
|
|
|
|
label {
|
|
display: block;
|
|
font-weight: var(--fw-bold); }
|
|
label:has(+ :required)::after {
|
|
content: '*';
|
|
color: var(--color-mark-highlight); }
|
|
|
|
input,
|
|
label,
|
|
textarea,
|
|
select {
|
|
max-width: var(--max-line-width); }
|
|
|
|
fieldset {
|
|
border: 1px solid var(--color-border); }
|
|
|
|
input {
|
|
width: Min(20em, 100%); }
|
|
|
|
[type='text'],
|
|
textarea {
|
|
width: Min(30em, 100%); }
|
|
|
|
input:not(:only-of-type) + [type='submit'],
|
|
textarea + [type='submit'] {
|
|
display: block; }
|
|
|
|
@media (min-width: 666px) {
|
|
input:only-of-type:has(+ [type='submit']) {
|
|
margin-right: .5rem; } }
|
|
|
|
blockquote {
|
|
margin-block: 0 1.5rem;
|
|
margin-inline: var(--indent-amount); }
|
|
|
|
dl,
|
|
ol,
|
|
ul,
|
|
menu {
|
|
margin-block: 0 1.5rem; }
|
|
|
|
dd {
|
|
margin: 0;
|
|
margin-inline-start: var(--indent-amount); }
|
|
|
|
ol,
|
|
ul,
|
|
menu {
|
|
padding: 0;
|
|
padding-inline-start: var(--indent-amount); }
|
|
ol ol,
|
|
ol ul,
|
|
ol menu,
|
|
ul ol,
|
|
ul ul,
|
|
ul menu,
|
|
menu ol,
|
|
menu ul,
|
|
menu menu {
|
|
margin: 0; }
|
|
|
|
.main li {
|
|
max-width: var(--max-line-width); }
|
|
|
|
header {
|
|
margin-block: 0 0.495rem; }
|
|
|
|
hr {
|
|
height: 0; }
|
|
|
|
p {
|
|
margin-block: 0 1.5rem;
|
|
text-wrap: pretty; }
|
|
.main p {
|
|
max-width: var(--max-line-width); }
|
|
|
|
pre {
|
|
margin-block: 0 1.5rem;
|
|
font-family: var(--ff-monospace); }
|
|
|
|
code:not([data-lang]),
|
|
kbd,
|
|
samp {
|
|
color: var(--color-code); }
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-block: 1.5em 0.495em;
|
|
color: var(--color-headings);
|
|
font-family: var(--ff-headings);
|
|
font-weight: var(--fw-headings);
|
|
line-height: var(--heading-line-height);
|
|
text-wrap: balance; }
|
|
h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6,
|
|
h2 + h1,
|
|
h2 + h2,
|
|
h2 + h3,
|
|
h2 + h4,
|
|
h2 + h5,
|
|
h2 + h6,
|
|
h3 + h1,
|
|
h3 + h2,
|
|
h3 + h3,
|
|
h3 + h4,
|
|
h3 + h5,
|
|
h3 + h6,
|
|
h4 + h1,
|
|
h4 + h2,
|
|
h4 + h3,
|
|
h4 + h4,
|
|
h4 + h5,
|
|
h4 + h6,
|
|
h5 + h1,
|
|
h5 + h2,
|
|
h5 + h3,
|
|
h5 + h4,
|
|
h5 + h5,
|
|
h5 + h6,
|
|
h6 + h1,
|
|
h6 + h2,
|
|
h6 + h3,
|
|
h6 + h4,
|
|
h6 + h5,
|
|
h6 + h6 {
|
|
margin-block-start: 0.75em; }
|
|
.main h1, .main h2, .main h3, .main h4, .main h5, .main h6 {
|
|
max-width: var(--max-line-width); }
|
|
|
|
h1 {
|
|
margin-block: 1.5rem 0.75rem;
|
|
font-size: var(--fs-xxl);
|
|
letter-spacing: -.01em; }
|
|
|
|
h2 {
|
|
font-size: var(--fs-xl);
|
|
letter-spacing: -.01em; }
|
|
|
|
h3 {
|
|
font-size: var(--fs-l);
|
|
letter-spacing: -.01em; }
|
|
|
|
h4 {
|
|
font-size: var(--fs-m); }
|
|
|
|
h5 {
|
|
font-size: var(--fs-s); }
|
|
|
|
h6 {
|
|
font-size: var(--fs-xs); }
|
|
|
|
figure.image,
|
|
img.image {
|
|
--image-padding: .75rem; }
|
|
@media (min-width: 666px) {
|
|
figure.image.center,
|
|
img.image.center {
|
|
margin-inline: auto; }
|
|
figure.image.left,
|
|
img.image.left {
|
|
padding-inline-end: var(--image-padding);
|
|
padding-block-end: var(--image-padding);
|
|
margin: 0;
|
|
float: left;
|
|
clear: both; }
|
|
figure.image.right,
|
|
img.image.right {
|
|
padding-inline-start: var(--image-padding);
|
|
padding-block-end: var(--image-padding);
|
|
margin: 0;
|
|
float: right;
|
|
clear: both; } }
|
|
figure {
|
|
margin-block: 0 1.5rem; }
|
|
figure.image figcaption {
|
|
padding-block-start: var(--image-padding); }
|
|
@media (min-width: 666px) {
|
|
figure.image figcaption {
|
|
display: table-caption;
|
|
caption-side: bottom;
|
|
padding-block-start: 0; } }
|
|
figure.image figcaption p {
|
|
margin: 0; }
|
|
@media (min-width: 666px) {
|
|
figure.image {
|
|
display: table; }
|
|
figure.image.left figcaption {
|
|
padding-inline-end: var(--image-padding);
|
|
padding-block-end: var(--image-padding); }
|
|
figure.image.right figcaption {
|
|
padding-inline-start: var(--image-padding);
|
|
padding-block-end: var(--image-padding); } }
|
|
figure.podcast audio {
|
|
width: 95%; }
|
|
|
|
img.image {
|
|
margin-block: 0 1.5rem; }
|
|
|
|
a {
|
|
color: var(--color-link); }
|
|
|
|
:visited {
|
|
color: var(--color-link-visited); }
|
|
|
|
a:hover,
|
|
a:focus {
|
|
color: var(--color-link-hover); }
|
|
|
|
a:active {
|
|
color: var(--color-link-active); }
|
|
|
|
[aria-current] {
|
|
text-decoration: none; }
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
:has(:target) {
|
|
scroll-behavior: smooth;
|
|
scroll-padding-block-start: var(--gutters); } }
|
|
|
|
.link-nav a,
|
|
.pagination a,
|
|
.pager a {
|
|
text-decoration: none; }
|
|
.link-nav a:hover, .link-nav a:focus,
|
|
.pagination a:hover,
|
|
.pager a:hover,
|
|
.pagination a:focus,
|
|
.pager a:focus {
|
|
text-decoration: underline; }
|
|
|
|
.link-inverted a,
|
|
.card--inverted a,
|
|
.box--inverted a {
|
|
color: var(--color-link-inverted); }
|
|
.link-inverted a:visited,
|
|
.card--inverted a:visited,
|
|
.box--inverted a:visited {
|
|
color: var(--color-link-visited-inverted); }
|
|
.link-inverted a:hover, .link-inverted a:focus,
|
|
.card--inverted a:hover,
|
|
.box--inverted a:hover,
|
|
.card--inverted a:focus,
|
|
.box--inverted a:focus {
|
|
color: var(--color-link-hover-inverted); }
|
|
.link-inverted a:active,
|
|
.card--inverted a:active,
|
|
.box--inverted a:active {
|
|
color: var(--color-link-active-inverted); }
|
|
|
|
table {
|
|
margin-block: 0 1.5rem;
|
|
border-collapse: collapse;
|
|
width: 100%; }
|
|
|
|
td,
|
|
th {
|
|
padding: 0;
|
|
vertical-align: text-top; }
|
|
|
|
th {
|
|
vertical-align: bottom; }
|
|
|
|
caption,
|
|
th {
|
|
text-align: start; }
|
|
|
|
.layout__page {
|
|
max-width: var(--max-page-width); }
|
|
@media (min-width: 666px) {
|
|
.layout__page {
|
|
margin-inline: auto;
|
|
min-height: 100vh;
|
|
min-height: 100svh; } }
|
|
.layout__header, .layout__footer, .layout__main, .layout__navigation, .layout__first-sidebar, .layout__second-sidebar, .layout__page-top, .layout__page-bottom, .layout__cookieconsent {
|
|
padding-inline: var(--gutters);
|
|
min-width: 0; }
|
|
|
|
.layout__page {
|
|
display: grid;
|
|
grid-template-areas: 'head' 'nav' 'top' 'main' 'side1' 'side2' 'bottom' 'foot' 'notice';
|
|
grid-template-rows: auto auto auto 1fr auto auto auto auto auto;
|
|
grid-template-columns: 1fr; }
|
|
|
|
@media (min-width: 999px) {
|
|
.layout__page {
|
|
grid-template-rows: auto auto auto 1fr auto auto auto; }
|
|
.layout__sidebar-first {
|
|
grid-template-areas: 'head head' 'nav nav' 'side1 top' 'side1 main' 'side1 bottom' 'foot foot' 'notice notice';
|
|
grid-template-columns: 1fr 2fr; }
|
|
.layout__sidebar-second {
|
|
grid-template-areas: 'head head' 'nav nav' 'top side2' 'main side2' 'bottom side2' 'foot foot' 'notice notice';
|
|
grid-template-columns: 2fr 1fr; }
|
|
.layout__sidebar-two {
|
|
grid-template-areas: 'head head head' 'nav nav nav' 'side1 top side2' 'side1 main side2' 'side1 bottom side2' 'foot foot foot' 'notice notice notice';
|
|
grid-template-columns: 1fr 2fr 1fr; } }
|
|
|
|
.layout__header {
|
|
grid-area: head; }
|
|
|
|
.layout__navigation {
|
|
grid-area: nav; }
|
|
|
|
.layout__page-top {
|
|
grid-area: top; }
|
|
|
|
.layout__main {
|
|
grid-area: main; }
|
|
|
|
.layout__first-sidebar {
|
|
grid-area: side1; }
|
|
|
|
.layout__second-sidebar {
|
|
grid-area: side2; }
|
|
|
|
.layout__page-bottom {
|
|
grid-area: bottom; }
|
|
|
|
.layout__footer {
|
|
grid-area: foot; }
|
|
|
|
.layout__cookieconsent {
|
|
grid-area: notice; }
|
|
|
|
.box {
|
|
margin-block: 1.5rem;
|
|
padding: 0.75rem;
|
|
border: 5px solid var(--color-border); }
|
|
.box__title,
|
|
.box .title {
|
|
margin-top: 0; }
|
|
.box--highlight {
|
|
border-color: var(--color-highlight); }
|
|
.box--fit {
|
|
width: fit-content; }
|
|
.box--gutter {
|
|
padding-inline: var(--gutters); }
|
|
.box--inverted {
|
|
background: var(--color-border);
|
|
color: var(--color-text-bg); }
|
|
.box--inverted * {
|
|
color: var(--color-text-bg); }
|
|
.box > *:first-child {
|
|
margin-top: 0; }
|
|
.box > *:last-child {
|
|
margin-bottom: 0; }
|
|
|
|
.button,
|
|
button,
|
|
[type='button'],
|
|
[type='reset'],
|
|
[type='submit'] {
|
|
display: inline-block;
|
|
font-family: var(--ff-headings);
|
|
text-decoration: none;
|
|
text-align: center;
|
|
width: fit-content;
|
|
margin-right: 1rem;
|
|
margin-bottom: 1rem;
|
|
padding: .2rem 1rem;
|
|
cursor: pointer;
|
|
color: var(--color-button-text);
|
|
background-color: var(--color-button);
|
|
border: 1px solid var(--color-button);
|
|
border-radius: var(--radius-s); }
|
|
.button:hover, .button:focus-visible, .button:active,
|
|
button:hover,
|
|
button:focus-visible,
|
|
button:active,
|
|
[type='button']:hover,
|
|
[type='button']:focus-visible,
|
|
[type='button']:active,
|
|
[type='reset']:hover,
|
|
[type='reset']:focus-visible,
|
|
[type='reset']:active,
|
|
[type='submit']:hover,
|
|
[type='submit']:focus-visible,
|
|
[type='submit']:active {
|
|
text-decoration: none;
|
|
color: var(--color-button-text-hover);
|
|
background-color: var(--color-button-hover); }
|
|
|
|
.button--small {
|
|
font-size: var(--fs-xs);
|
|
margin-right: .5rem;
|
|
margin-bottom: .5rem;
|
|
padding: .2rem .75rem; }
|
|
|
|
.button--alt {
|
|
color: var(--color-button-text-hover);
|
|
background-color: var(--color-button-hover); }
|
|
.button--alt:hover, .button--alt:focus-visible, .button--alt:active {
|
|
color: var(--color-button-text);
|
|
background-color: var(--color-button); }
|
|
|
|
.button--outline {
|
|
color: var(--color-button);
|
|
background-color: var(--color-button-text);
|
|
border-color: var(--color-button); }
|
|
.button--outline:hover, .button--outline:focus-visible, .button--outline:active {
|
|
color: var(--color-button-text);
|
|
background-color: var(--color-button); }
|
|
|
|
.button--shadow:hover,
|
|
main button:hover {
|
|
box-shadow: 2px 2px 5px 1px var(--color-button-hover); }
|
|
|
|
.button--shadow:active,
|
|
main button:active {
|
|
box-shadow: inset 2px 2px 5px 1px var(--color-button); }
|
|
|
|
[disabled].button,
|
|
button[disabled],
|
|
[disabled][type='button'],
|
|
[disabled][type='reset'],
|
|
[disabled][type='submit'] {
|
|
background-color: var(--color-grey-extra-light);
|
|
border: 1px solid var(--color-button-disabled);
|
|
background-image: none;
|
|
text-shadow: none; }
|
|
|
|
.cards {
|
|
margin-block: 1.5rem; }
|
|
|
|
.card {
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--color-border); }
|
|
.card--highlight {
|
|
border-color: var(--color-highlight); }
|
|
.card--featured {
|
|
grid-row: span 2;
|
|
grid-column: span 2; }
|
|
.card--gutter {
|
|
padding-inline: var(--gutters); }
|
|
.card--inverted {
|
|
background: var(--color-border);
|
|
color: var(--color-text-bg); }
|
|
.card > *:first-child {
|
|
margin-top: 0; }
|
|
.card > *:last-child {
|
|
margin-bottom: 0; }
|
|
|
|
.grid-center {
|
|
display: grid;
|
|
place-items: center; }
|
|
|
|
.text-center {
|
|
text-align: center; }
|
|
|
|
.margin-center {
|
|
margin-inline: auto; }
|
|
|
|
.clearfix::before {
|
|
content: '';
|
|
display: table; }
|
|
|
|
.clearfix::after {
|
|
content: '';
|
|
display: table;
|
|
clear: both; }
|
|
|
|
.cookieconsent {
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
justify-content: center;
|
|
gap: .5rem;
|
|
position: sticky;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding-block-start: .5rem;
|
|
color: var(--color-warning);
|
|
background-color: var(--color-warning-bg);
|
|
border-top: 4px solid var(--color-warning-border);
|
|
font-size: var(--fs-s);
|
|
transform: translateY(100vh);
|
|
transition: all 130ms ease-out;
|
|
z-index: 99; }
|
|
|
|
.button--accept {
|
|
border-color: var(--color-status); }
|
|
|
|
.button--decline {
|
|
border-color: var(--color-warning-border); }
|
|
|
|
.js-cookieconsent-open {
|
|
transform: translateY(0); }
|
|
|
|
.divider,
|
|
hr {
|
|
margin-block: 1.5rem;
|
|
border: 0;
|
|
border-top: 1px solid var(--color-border); }
|
|
.divider > :first-child,
|
|
hr > :first-child {
|
|
margin-top: 1.5rem; }
|
|
|
|
.disabled,
|
|
.pagination .disabled .page-link,
|
|
.pager .disabled .page-link,
|
|
[disabled].button,
|
|
button[disabled],
|
|
[disabled][type='button'],
|
|
[disabled][type='reset'],
|
|
[disabled][type='submit'] {
|
|
cursor: default;
|
|
color: var(--color-button-disabled); }
|
|
.disabled:hover, .disabled:focus, .disabled:active,
|
|
.pagination .disabled .page-link:hover,
|
|
.pager .disabled .page-link:hover,
|
|
[disabled].button:hover,
|
|
button[disabled]:hover,
|
|
[disabled][type='button']:hover,
|
|
[disabled][type='reset']:hover,
|
|
[disabled][type='submit']:hover,
|
|
.pagination .disabled .page-link:focus,
|
|
.pager .disabled .page-link:focus,
|
|
[disabled].button:focus,
|
|
button[disabled]:focus,
|
|
[disabled][type='button']:focus,
|
|
[disabled][type='reset']:focus,
|
|
[disabled][type='submit']:focus,
|
|
.pagination .disabled .page-link:active,
|
|
.pager .disabled .page-link:active,
|
|
[disabled].button:active,
|
|
button[disabled]:active,
|
|
[disabled][type='button']:active,
|
|
[disabled][type='reset']:active,
|
|
[disabled][type='submit']:active {
|
|
color: var(--color-button-disabled);
|
|
text-decoration: none; }
|
|
|
|
.flex-group {
|
|
gap: 1.5rem;
|
|
display: flex;
|
|
flex-wrap: wrap; }
|
|
.flex-group > * {
|
|
flex: 1;
|
|
flex-basis: 100%;
|
|
flex-grow: 0; }
|
|
.flex-group--grow {
|
|
flex-grow: 1; }
|
|
@media (min-width: 666px) {
|
|
.flex-group--2 > * {
|
|
flex-basis: calc(100% / 2 - 1.5rem); }
|
|
.flex-group--3 > * {
|
|
flex-basis: calc(100% / 3 - 1.5rem); }
|
|
.flex-group--4 > * {
|
|
flex-basis: calc(100% / 4 - 1.5rem); }
|
|
.flex-group--5 > * {
|
|
flex-basis: calc(100% / 5 - 1.5rem); }
|
|
.flex-group--6 > * {
|
|
flex-basis: calc(100% / 6 - 1.5rem); } }
|
|
.flex-inline,
|
|
.pagination,
|
|
.pager,
|
|
.navbar,
|
|
.tags ul {
|
|
--gap: .5rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--gap);
|
|
padding: 0;
|
|
text-align: start; }
|
|
.flex-inline__item,
|
|
.flex-inline li,
|
|
.pagination li,
|
|
.pager li,
|
|
.navbar li,
|
|
.tags ul li {
|
|
list-style: none; }
|
|
.flex-inline--inline,
|
|
.tags ul {
|
|
display: inline-flex; }
|
|
|
|
.footer {
|
|
padding-block: var(--gutters);
|
|
background-color: var(--color-footer-bg);
|
|
text-align: center; }
|
|
.footer p {
|
|
margin: 0; }
|
|
|
|
.grid-group,
|
|
.cards {
|
|
--column-min: 200px;
|
|
--gap: 1.5rem;
|
|
display: grid;
|
|
gap: var(--gap);
|
|
grid-template-columns: repeat(auto-fit, minmax(Min(var(--column-min), 100%), 1fr)); }
|
|
.grid-group--fill {
|
|
grid-template-columns: repeat(auto-fill, minmax(Min(var(--column-min), 100%), 1fr)); }
|
|
.grid-group--100 {
|
|
--column-min: 100px; }
|
|
.grid-group--150 {
|
|
--column-min: 150px; }
|
|
.grid-group--200 {
|
|
--column-min: 200px; }
|
|
.grid-group--250 {
|
|
--column-min: 250px; }
|
|
.grid-group--300 {
|
|
--column-min: 300px; }
|
|
.grid-group--350 {
|
|
--column-min: 350px; }
|
|
.grid-group--400 {
|
|
--column-min: 400px; }
|
|
.grid-group--500 {
|
|
--column-min: 500px; }
|
|
.grid-group--600 {
|
|
--column-min: 600px; }
|
|
|
|
.grid-stack {
|
|
display: grid; }
|
|
.grid-stack > * {
|
|
grid-column: 1 / 2;
|
|
grid-row: 1 / 2; }
|
|
|
|
.header {
|
|
padding-block: var(--gutters);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--gutters);
|
|
background-color: var(--color-header-bg); }
|
|
@media (min-width: 666px) {
|
|
.header {
|
|
flex-direction: row; } }
|
|
.header__logo {
|
|
width: fit-content; }
|
|
.header__logo-image {
|
|
vertical-align: bottom; }
|
|
.header__site-name {
|
|
margin: 0;
|
|
line-height: 1; }
|
|
.header__site-link:link, .header__site-link:visited {
|
|
color: var(--color-text);
|
|
text-decoration: none; }
|
|
.header__site-link:hover, .header__site-link:focus {
|
|
text-decoration: underline; }
|
|
@media (min-width: 666px) {
|
|
.header__region {
|
|
margin-inline-start: auto; } }
|
|
.hidden,
|
|
html.nojs .nojs-hidden,
|
|
html.js .js-hidden {
|
|
display: none; }
|
|
|
|
.icon-inline .icon-link {
|
|
opacity: 0;
|
|
transition: all 130ms ease-in;
|
|
text-decoration: none; }
|
|
|
|
.icon-inline:focus-visible .icon-link, .icon-inline:hover .icon-link {
|
|
opacity: .3; }
|
|
.icon-inline:focus-visible .icon-link:focus-visible, .icon-inline:focus-visible .icon-link:hover, .icon-inline:hover .icon-link:focus-visible, .icon-inline:hover .icon-link:hover {
|
|
opacity: 1; }
|
|
|
|
.icon-inline svg {
|
|
display: inline;
|
|
vertical-align: middle; }
|
|
|
|
.language-selector {
|
|
display: flex; }
|
|
|
|
.language-icon {
|
|
margin-inline-end: 0.75rem;
|
|
fill: var(--color-text); }
|
|
|
|
.ul-straight-left,
|
|
article > ul,
|
|
aside > ul {
|
|
display: table;
|
|
list-style: none;
|
|
padding: 0; }
|
|
.ul-straight-left > li,
|
|
article > ul > li,
|
|
aside > ul > li {
|
|
display: table-row; }
|
|
.ul-straight-left > li::before,
|
|
article > ul > li::before,
|
|
aside > ul > li::before {
|
|
padding-inline-end: 0.75rem;
|
|
display: table-cell;
|
|
content: '\2981';
|
|
font-size: var(--fs-s); }
|
|
|
|
.ol-straight-left,
|
|
article > ol,
|
|
aside > ol {
|
|
display: table;
|
|
list-style: none;
|
|
padding: 0; }
|
|
.ol-straight-left > li,
|
|
article > ol > li,
|
|
aside > ol > li {
|
|
display: table-row;
|
|
counter-increment: table-ol; }
|
|
.ol-straight-left > li::before,
|
|
article > ol > li::before,
|
|
aside > ol > li::before {
|
|
padding-inline-end: 0.75rem;
|
|
display: table-cell;
|
|
content: counter(table-ol) ".";
|
|
font-size: var(--fs-s);
|
|
text-align: end; }
|
|
|
|
.ul-straight-left--off {
|
|
display: block;
|
|
list-style: inherit; }
|
|
.ul-straight-left--off > li {
|
|
display: list-item; }
|
|
.ul-straight-left--off > li::before {
|
|
content: '';
|
|
display: inline;
|
|
padding: inherit; }
|
|
|
|
.message {
|
|
padding: .5rem;
|
|
outline-width: 2px;
|
|
outline-style: solid;
|
|
width: 95%; }
|
|
.message.status {
|
|
background-color: var(--color-status-bg);
|
|
color: var(--color-status);
|
|
outline-color: var(--color-status); }
|
|
.message.warning {
|
|
background-color: var(--color-warning-bg);
|
|
color: var(--color-warning);
|
|
outline-color: var(--color-warning-border); }
|
|
.message.error {
|
|
background-color: var(--color-error-bg);
|
|
color: var(--color-error);
|
|
outline-color: var(--color-error); }
|
|
.message--highlight {
|
|
animation: 2s linear infinite outline-highlight; }
|
|
|
|
@keyframes outline-highlight {
|
|
50% {
|
|
outline-width: .3rem; } }
|
|
|
|
.meta {
|
|
font-family: var(--ff-headings);
|
|
font-size: var(--fs-xs);
|
|
color: var(--color-text-meta); }
|
|
|
|
.responsive-video {
|
|
--aspect-ratio: 9 / 16;
|
|
position: relative;
|
|
padding-bottom: calc(var(--aspect-ratio) * 100%);
|
|
padding-top: 25px;
|
|
height: 0; }
|
|
.responsive-video__embed,
|
|
.responsive-video iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%; }
|
|
.responsive-video--4-3 {
|
|
--aspect-ratio: 3 / 4; }
|
|
|
|
.mt--xxl {
|
|
margin-block-start: 4.5rem; }
|
|
|
|
.mb--xxl {
|
|
margin-block-end: 4.5rem; }
|
|
|
|
.mtb--xxl {
|
|
margin-block: 4.5rem; }
|
|
|
|
.mt--xl {
|
|
margin-block-start: 3rem; }
|
|
|
|
.mb--xl {
|
|
margin-block-end: 3rem; }
|
|
|
|
.mtb--xl {
|
|
margin-block: 3rem; }
|
|
|
|
.mt--l {
|
|
margin-block-start: 2.25rem; }
|
|
|
|
.mb--l {
|
|
margin-block-end: 2.25rem; }
|
|
|
|
.mtb--l {
|
|
margin-block: 2.25rem; }
|
|
|
|
.mt--m {
|
|
margin-block-start: 1.5rem; }
|
|
|
|
.mb--m {
|
|
margin-block-end: 1.5rem; }
|
|
|
|
.mtb--m {
|
|
margin-block: 1.5rem; }
|
|
|
|
.mt--s {
|
|
margin-block-start: 1.125rem; }
|
|
|
|
.mb--s {
|
|
margin-block-end: 1.125rem; }
|
|
|
|
.mtb--s {
|
|
margin-block: 1.125rem; }
|
|
|
|
.mt--xs {
|
|
margin-block-start: 0.75rem; }
|
|
|
|
.mb--xs {
|
|
margin-block-end: 0.75rem; }
|
|
|
|
.mtb--xs {
|
|
margin-block: 0.75rem; }
|
|
|
|
.mt--xxs {
|
|
margin-block-start: 0.45rem; }
|
|
|
|
.mb--xxs {
|
|
margin-block-end: 0.45rem; }
|
|
|
|
.mtb--xxs {
|
|
margin-block: 0.45rem; }
|
|
|
|
.mt--0 {
|
|
margin-block-start: 0; }
|
|
|
|
.mb--0 {
|
|
margin-block-end: 0; }
|
|
|
|
.mtb--0 {
|
|
margin-block: 0; }
|
|
|
|
.zebra-table {
|
|
--cell-padding: .5rem; }
|
|
@media (max-width: 666px) {
|
|
.zebra-table {
|
|
--cell-padding: .3rem; } }
|
|
.zebra-table th,
|
|
.zebra-table td {
|
|
padding: var(--cell-padding); }
|
|
.zebra-table thead tr {
|
|
background-color: var(--color-row-header); }
|
|
.zebra-table tbody tr:nth-child(odd) {
|
|
background-color: var(--color-row-odd); }
|
|
.zebra-table tbody tr:nth-child(even) {
|
|
background-color: var(--color-row-even); }
|
|
|
|
.responsive-table {
|
|
--gap: .5rem; }
|
|
@media (max-width: 666px) {
|
|
.responsive-table th {
|
|
display: none; }
|
|
.responsive-table td {
|
|
display: grid;
|
|
gap: var(--gap);
|
|
grid-template-columns: 12ch auto; }
|
|
.responsive-table td::before {
|
|
content: attr(aria-label) ":";
|
|
font-weight: var(--fw-bold); }
|
|
.responsive-table td:first-of-type {
|
|
padding-block-start: var(--gap); }
|
|
.responsive-table td:last-of-type {
|
|
padding-block-end: var(--gap); } }
|
|
.tags ul {
|
|
margin-block: 0; }
|
|
|
|
.visually-hidden:not(:focus, :active) {
|
|
position: absolute;
|
|
clip: rect(0 0 0 0);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
width: 1px;
|
|
overflow: hidden;
|
|
white-space: nowrap; }
|
|
|
|
.navbar {
|
|
margin-block: 0; }
|
|
|
|
.pagination,
|
|
.pager {
|
|
margin-block: 1.5rem;
|
|
justify-content: center; }
|
|
.pagination__item,
|
|
.pagination .page-link,
|
|
.pager__item,
|
|
.pager .page-link {
|
|
padding-inline: 2px; }
|
|
.pagination .active,
|
|
.pager .active {
|
|
font-weight: var(--fw-bold); }
|
|
|
|
body {
|
|
background-color: var(--color-backdrop); }
|
|
|
|
.page {
|
|
background-color: var(--color-body-bg); }
|
|
|
|
.footer {
|
|
border-top: 2px solid var(--color-border); }
|
|
|
|
th,
|
|
label,
|
|
legend,
|
|
figcaption {
|
|
font-size: var(--fs-s); }
|
|
|
|
.language-selector,
|
|
.footer {
|
|
font-size: var(--fs-xs); }
|
|
|
|
th,
|
|
label,
|
|
legend,
|
|
.main-menu,
|
|
.header,
|
|
.footer {
|
|
color: var(--color-headings);
|
|
font-family: var(--ff-headings); }
|
|
|
|
th,
|
|
label {
|
|
font-weight: var(--fw-headings); }
|
|
|
|
@media (min-width: 666px) {
|
|
article .submitted,
|
|
article .tags {
|
|
display: inline-block;
|
|
padding-inline-end: 1rem; } }
|
|
|
|
article code {
|
|
font-size: var(--fs-xs);
|
|
overflow-wrap: break-word; }
|
|
|
|
article pre {
|
|
border-radius: var(--radius-xs);
|
|
padding: 5px;
|
|
border: 1px solid var(--color-border-light);
|
|
background-color: var(--color-text-bg);
|
|
overflow: auto;
|
|
max-height: 300px;
|
|
max-width: 90vw; }
|
|
article pre.chroma {
|
|
max-height: initial;
|
|
overflow-x: scroll; }
|
|
article pre > code {
|
|
display: inline-block;
|
|
white-space: pre; }
|
|
|
|
.content-dates {
|
|
text-align: end; }
|
|
|
|
.main-menu {
|
|
margin-top: .75rem;
|
|
outline: 0; }
|
|
.main-menu li {
|
|
margin-bottom: .75rem;
|
|
padding: 0; }
|
|
.main-menu a {
|
|
display: block;
|
|
background-color: var(--color-button);
|
|
color: var(--color-text-bg);
|
|
padding: 2px 8px;
|
|
text-decoration: none; }
|
|
.main-menu a:hover, .main-menu a:focus {
|
|
background-color: var(--color-button-hover); }
|
|
.main-menu a:active, .main-menu a[aria-current] {
|
|
background-color: var(--color-button);
|
|
text-decoration: underline; }
|
|
|
|
.search-text {
|
|
font-size: var(--fs-l); }
|
|
|
|
main input:not(:placeholder-shown):valid,
|
|
main textarea:not(:placeholder-shown):valid {
|
|
background-color: var(--color-status-bg); }
|
|
|
|
main input:not(:placeholder-shown):invalid,
|
|
main textarea:not(:placeholder-shown):invalid {
|
|
background-color: var(--color-error-bg); }
|
|
|
|
main input:focus:invalid,
|
|
main textarea:focus:invalid {
|
|
background-color: var(--color-warning-bg); }
|
|
|
|
.js-submitted input:valid,
|
|
.js-submitted textarea:valid {
|
|
background-color: var(--color-status-bg); }
|
|
|
|
.js-submitted input:invalid,
|
|
.js-submitted textarea:invalid {
|
|
background-color: var(--color-error-bg); }
|
|
|
|
/*# sourceMappingURL=styles.css.map */ |