D7460N Template Themes

d7460n-template-themes.markdown

D7460N Template Themes

A Pen by D7460N on CodePen.

License.

style.css

@charset "UTF-8";

/* -----------------------------
   THEMES
   ----------------------------- */
:root {
  color-scheme: light dark;
  --fg: light-dark(rgb(0 0 0), rgb(255 255 255));
  --bg: light-dark(rgb(255 255 255), rgb(0 0 0));

  --font-family: "Oxanium", sans-serif;
  --font-size: clamp(1rem, 1.3cqi, 1.3rem);
  --font-weight: 100;
  --line-height: 1.5;
  --letter-spacing: 0.05rem;
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
}

/* -----------------------------
   LAYOUT
   ----------------------------- */
h1 {
  color: rgb(var(--fg) / 1);
}

p {
  padding-inline: 1rem;
  /* https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container/ */
  width: clamp(min(93.75vw, 50ch), 70vw, 75ch);
}

[role="button"] {
  input {
    display: none;
  }

  &:hover {
    color: rgb(var(--fg) / 0.85);
  }

  &:focus-visible {
    color: rgb(var(--fg) / 0.9);
  }

  &:has(input:checked) {
    color: rgb(var(--fg) / 1);
  }
}