@fylgja/base/preflight-scoped.css

Base provides a streamlined starting point for any web project. It’s a collection of class-less solutions, allowing you to focus on building your site.

/**
 * Fylgja (https://fylgja.dev)
 * Licensed under MIT Open Source
 */
*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid;
}

:root {
  --root-bg: hsl(0, 0%, 100%);
  --root-fg: hsl(0, 0%, 8%);
  --family-system: system-ui, sans-serif;
  --family-mono: ui-monospace, Menlo, Consolas, monospace;
  --select-light-scheme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="hsl(0 0% 0%)"><path d="m6 9 6 6 6-6"/></svg>');
  --select-dark-scheme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="hsl(0 0% 100%)"><path d="m6 9 6 6 6-6"/></svg>');
  --outline-transition: outline-offset 150ms cubic-bezier(0.25, 0, 0.4, 1);
  --surface-color: color-mix(in srgb, var(--root-bg) 94%, var(--root-fg));
}

:where(:focus-visible) {
  outline: var(--outline-size, 2px) solid;
  outline-offset: var(--outline-offset, 2px);
}

:where(:active:focus-visible) {
  outline-offset: 0;
  transition: var(--outline-transition);
}

:target {
  scroll-margin-block: var(--anchor-offset, 6ex);
}

:where(html) {
  block-size: 100%;
  font-family: var(--family-system);
  tab-size: 4;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: no-preference) {
  :where(html):has(:target) {
    scroll-behavior: smooth;
  }
}

:where(body) {
  min-block-size: 100%;
  margin: 0;
  background-color: var(--root-bg);
  color: var(--root-fg);
  font-size: var(--font-size, 1rem);
  line-height: var(--line-height, 1.6);
}

:where(:any-link,
button,
input,
label[for],
select,
summary,
textarea,
[tabindex]:not([tabindex^="-"])) {
  touch-action: manipulation;
}

:where(:any-link,
button,
label[for],
label:has(input:is([type=radio], [type=checkbox]):enabled),
select:has(option:enabled),
summary) {
  cursor: pointer;
}

:where([type=button], [type=submit], [type=reset], button),
::file-selector-button {
  appearance: button;
}

:where(summary) {
  display: list-item;
}

:where(summary > *) {
  display: inline;
}

:disabled {
  cursor: not-allowed;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
  max-inline-size: 100%;
}

:where(img, svg, iframe) {
  block-size: auto;
}

:where(iframe) {
  aspect-ratio: var(--aspect-ratio, 16/9);
}

[hidden]:not([hidden=until-found]) {
  display: none;
}

.entry-content, .prose {
  --text-flow: 1em 1rem;
  --separator-flow: 2.5em;
  --list-flow: 0.5em;
  --h-size: 1.125rem;
  --h-weight: 700;
  --h-line: 1.1;
  --h1-size: 3rem;
  --h2-size: 2rem;
  --h3-size: 1.625rem;
  --h4-size: 1.375rem;
}

:where(h1, h2, h3, h4, h5, h6, p, dl, ul, ol, pre, hgroup) {
  margin-block: var(--text-flow);
}

:where(blockquote, figure, hr) {
  margin-block: var(--separator-flow);
  margin-inline: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  line-height: var(--h-line);
  text-wrap: balance;
}

:where(h1) {
  --h-size: var(--h1-size);
}

:where(h2) {
  --h-size: var(--h2-size);
}

:where(h3) {
  --h-size: var(--h3-size);
}

:where(h4) {
  --h-size: var(--h4-size);
}

:where(p, li, dd) {
  text-wrap: pretty;
}

:where(:any-link) {
  color: inherit;
}

:where(mark, :not(pre) > code) {
  padding: 0.0625em 0.25em;
}

:where(blockquote) {
  border-inline-start: 4px solid;
  padding-inline-start: 1.5em;
  padding-block: 0.25em;
}

:where(pre) {
  padding: 0.5em 1em;
  white-space: pre;
  overflow: auto;
}

:where(input, button, textarea, select, address),
::file-selector-button {
  font: inherit;
}

:where(:is(ul, ol)[role=list], nav :is(ul, ol)) {
  --list-flow: 0;
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
}

:where(hgroup > *),
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin-block: 0;
}

:where(dt) {
  font-weight: 500;
}

:where(li + li, dd + dt) {
  margin-block-start: var(--list-flow);
}

:where(dd) {
  margin-inline-start: 0;
}

:where(hr) {
  height: auto;
  border-block-end-width: 2px;
  color: inherit;
}

:where(sub, sup) {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

:where(sub) {
  bottom: -0.25em;
}

:where(sup) {
  top: -0.5em;
}

:where(code, pre, kbd, samp) {
  font-family: var(--family-mono);
}

:where(code, pre) {
  writing-mode: lr;
  direction: ltr;
}

:where(pre, :not(pre) > code) {
  border-radius: var(--code-radius, 0.3em);
  border: 1px solid var(--code-stroke, rgba(0, 0, 0, 0.2));
  background: var(--code-bg,  var(--surface-color));
  color: var(--code-color);
}

:where(table) {
  border-spacing: 0;
  border-color: var(--table-stroke, #777);
}

:where(thead, tbody, tfoot, tr, th, td) {
  border-color: inherit;
  text-align: inherit;
}

:where(th, td) {
  padding-block: var(--table-py, 0.875em);
  padding-inline: var(--table-px, 0.625em);
  background: var(--root-bg);
  color: var(--root-fg);
}

:where(tr + tr :is(th, td)) {
  border-block-start-width: 1px;
}

:where(thead tr:last-child :is(th, td)) {
  border-block-end-width: 2px;
}

:where(tfoot tr:first-child :is(th, td)) {
  border-block-start-width: 2px;
}

@media print {
  :root {
    --root-bg: white;
    --root-fg: black;
  }
  :is(h1, h2, h3, h4, h5, h6) {
    page-break-after: avoid;
  }
  :is(h2, h3, h4, h5, h6, p) {
    orphans: 3;
    widows: 3;
  }
  :is(tr, img, svg, pre, blockquote) {
    page-break-inside: avoid;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  a[href^="https://"]::after {
    content: " (" attr(href) ")";
  }
  thead {
    display: table-header-group;
  }
  :is(input, select, textarea, button, .btn) {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}