@knadh/oat/css/00-base.css

Ultra-lightweight, zero dependency, semantic HTML/CSS/JS UI library

@layer theme, base, components, animations, utilities;

@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  * {
    margin: 0;
  }

  html {
    tab-size: 4;
  }

  /* Top-layer elements don't inherit from body. Set explicitly. */
  body, dialog, [popover] {
    font-family: var(--font-sans);
    font-size: var(--text-regular);
    line-height: var(--leading-normal);
    color: var(--foreground);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
  }

  main {
    padding-block-start: var(--space-8);
  }

  img, picture, video, canvas, svg {
    max-width: 100%;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-semibold);
    line-height: 1.25;

    &:first-child {
      margin-block-start: 0;
    }
  }

  h1 {
    font-size: var(--text-1);
    margin: var(--space-10) 0 var(--space-6);
  }

  h2 {
    font-size: var(--text-2);
    margin: var(--space-8) 0 var(--space-5);
  }

  h3 {
    font-size: var(--text-3);
    margin: var(--space-6) 0 var(--space-4);
  }

  h4 {
    font-size: var(--text-4);
    margin: var(--space-5) 0 var(--space-3);
  }

  h5 {
    font-size: var(--text-5);
    margin: var(--space-4) 0 var(--space-2);
  }

  h6 {
    font-size: var(--text-regular);
    margin: var(--space-4) 0 var(--space-2);
  }

  p {
    margin-block-end: var(--space-4);

    &:last-child {
      margin-block-end: 0;
    }
  }

  a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);

    &:hover {
      color: rgb(from var(--primary) r g b / 0.8);
    }
  }

  strong, b {
    font-weight: var(--font-semibold);
  }

  em, i {
    font-style: italic;
  }

  small {
    font-size: var(--text-7);
  }

  code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: calc(var(--space-1) / 2) var(--space-1);
    background-color: var(--faint);
    border-radius: var(--radius-small);
  }

  pre {
    font-family: var(--font-mono);
    padding: var(--space-4);
    background-color: var(--faint);
    border-radius: var(--radius-medium);
    overflow-x: auto;
    margin-block-end: var(--space-4);

    code {
      padding: 0;
      background: none;
      border-radius: 0;
    }
  }

  blockquote {
    border-inline-start: 4px solid var(--border);
    padding-inline-start: var(--space-4);
    margin: var(--space-4) 0;
    color: var(--muted-foreground);
    font-style: italic;
  }

  hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-8) 0;
  }

  ul, ol {
    padding-inline-start: var(--space-6);
    margin-block-end: var(--space-4);
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  li {
    margin-block-end: var(--space-1);
  }

  mark {
    background-color: rgb(from var(--warning) r g b / 0.3);
    padding: calc(var(--space-1) / 2) var(--space-1);
    border-radius: var(--radius-small);
  }

  [hidden] {
    display: none;
  }

  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  :disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}