yummy.cricket/base.css

@import url(fonts/muller/muller.css);
@import url(fonts/noto/noto.css);

:root {
  /*
  --gradient:
    linear-gradient(135deg,
        hsl(42deg,  92%,  70%),
        hsl(348deg, 92%,  70%),
        hsl(334deg, 100%, 80%),
        hsl(234deg, 100%, 76%),
        hsl(195deg, 100%, 67%),
        hsl(155deg, 70%,  62%)
      );
  */

  --gradient:
    linear-gradient(135deg,
        oklch(93% 0.16 86),
        oklch(84% 0.17 15),
        oklch(78% 0.18 304),
        oklch(78% 0.18 233),
        oklch(78% 0.18 162)
      );
  --size: 15pt;
  --weight: 600;
  --link-color: hsl(196deg, 100%, 85%);
  --hover-color: hsl(50deg, 100%, 82%);

  background:
    image-set(url(media/bg.png)    1x,
              url(media/bg_2x.png) 2x)
      top center fixed,
    var(--gradient) fixed;
  background-blend-mode: overlay;

  font-family: 'Muller';
  font-size: var(--size);
  font-weight: var(--weight);
  color: white;
  text-shadow:
    1px 1px 0 black,
    -1px 1px 0 black,
    1px -1px 0 black,
    -1px -1px 0 black,
    4px 4px 4px hsla(0, 0%, 0%, 70%);
  text-align: center;
  margin: 2em 1em 0.5em;
}

main {
  --default-bg: hsla(316deg, 100%, 95%, 45%);
  background: var(--default-bg);
  border-radius: 2em;
  --glow-col: hsla(318deg, 100%, 98%, 100%);
  border: 1px solid var(--glow-col);
  box-shadow: 0 0 25px var(--glow-col) inset;

  padding: 1em;
  margin: 0 auto 1em;
}

header p, h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin-top: 0;
}

h1 {
  font-size: 200%;
}

h2, header p {
  font-size: 150%;
}

b {
  font-weight: 800;
}

hr {
  height: 4px;
  width: 75%;
  background-color: hsla(0, 0%, 100%, 85%);
  box-shadow: 0 0 3px hsl(0, 0%, 100%, 50%);
  border: none;
  text-shadow: none;
  margin: 20px auto;
}

.ipa {
  font-family: NotoSans;
  font-weight: 900;
  font-size: 90%;
}

a[href] {
  color: var(--link-color);
  font-weight: 800;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
a[href]:where(:hover,:focus) {
  color: var(--hover-color);
}


dl {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-row-gap: 6px;
  grid-column-gap: 1em;
  justify-content: center;
}

dt {
  text-align: right;
  margin: 0;
}
dd {
  font-weight: 700;
  text-align: left;
  margin: 0;
}


:is(rt, h1, h2)::before, :is(rt, h1, h2)::after {
  padding: 0 0.25em;
  vertical-align: middle;
  display: inline-block;
  height: 1em; width: 1em;
  mix-blend-mode: overlay;
  content: var(--around-image);
}

rt::before { margin-left: -1.25em; }
rt::after  { margin-right: -1.25em; }

/* hacky fix for firefox mobile 68 freaking out at blend modes ☹ */
@media (-moz-touch-enabled) {
  :root {
    background: var(--gradient) fixed;
    background-blend-mode: initial;
  }
}

.emojo {
  vertical-align: middle;
  height: 1.2em; width: 1.2em;
}

.pixel {
  /* firefox doesn't support "pixelated" but does treat "crisp-edges"
   * to mean that */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}


/******************************/
/* actual accessibility stuff */
/******************************/

@media (prefers-reduced-motion: reduce) {
  /* see also the alternate source in #mlem > picture */
  .mlem-text {
    display: none;
  }
}


@media (prefers-contrast: high), (prefers-color-scheme: dark) {
  :root {
    /*
    --gradient:
      linear-gradient(135deg,
          hsl(42deg,  56%, 55%),
          hsl(348deg, 56%, 55%),
          hsl(334deg, 60%, 43%),
          hsl(234deg, 60%, 40%),
          hsl(195deg, 60%, 44%),
          hsl(155deg, 60%, 55%)
        );
    */

    --gradient:
      linear-gradient(135deg,
          /* oklch(33% 0.16 86), */
          oklch(30% 0.17 15),
          oklch(30% 0.18 304),
          oklch(30% 0.18 233),
          oklch(30% 0.18 162)
        );

    background:
      image-set(url(media/bg_dim.png)    1x,
                url(media/bg_2x_dim.png) 2x)
        top center fixed,
      var(--gradient) fixed;
    background-blend-mode: multiply;
  }

  main {
    --default-bg: hsla(0, 0%, 0%, 60%);
    --glow-col: hsla(0, 0%, 0%, 60%);
  }

  :is(#links ul, rt, h1, h2)::before, :is(#links ul, rt, h1, h2)::after {
    mix-blend-mode: screen;
  }

  hr {
    background: white;
  }
}

@media (prefers-reduced-transparency) {
  :root {
    background: var(--gradient) fixed;
    background-blend-mode: initial;
  }

  :is(#links ul, rt, h1, h2)::before, :is(#links ul, rt, h1, h2)::after {
    mix-blend-mode: initial;
  }
}