From 59c7d4567380d1a9c80e96eb958fdbdd512ce006 Mon Sep 17 00:00:00 2001 From: Alexander Neonxp Kiryukhin Date: Sun, 3 Nov 2024 20:08:36 +0300 Subject: новая жизнь блога MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...s.scss_f3a5364e991a57c56f5dcd8d7251924a.content | 1146 ++++++++++++++++++++ 1 file changed, 1146 insertions(+) create mode 100644 resources/_gen/assets/sass/styles.scss_f3a5364e991a57c56f5dcd8d7251924a.content (limited to 'resources/_gen/assets/sass/styles.scss_f3a5364e991a57c56f5dcd8d7251924a.content') diff --git a/resources/_gen/assets/sass/styles.scss_f3a5364e991a57c56f5dcd8d7251924a.content b/resources/_gen/assets/sass/styles.scss_f3a5364e991a57c56f5dcd8d7251924a.content new file mode 100644 index 0000000..8ba08c3 --- /dev/null +++ b/resources/_gen/assets/sass/styles.scss_f3a5364e991a57c56f5dcd8d7251924a.content @@ -0,0 +1,1146 @@ +: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 */ \ No newline at end of file -- cgit v1.2.3