yummy.cricket/style/base.css

@layer outer, face-menu, cube, face-base, faces;

@import url(../fonts/muller/muller.css) layer(outer);
@import url(properties.css);

/*
@import url(../fonts/muller/muller.css) layer(outer)
  (not (prefers-reduced-data: reduce));

if a browser doesn't understand the media query it DOESN'T do
the import. so this doesn't work until prefers-reduced-data
actually exists
*/


@layer outer {
  * { box-sizing: border-box; }

  :root, body {
    min-height: 100vh;
    min-height: 100lvh;
    margin: 0;
    scrollbar-gutter: stable;

    cursor: url("../media/tail.png") 34 1, auto;
    --pointer: url("../media/hand.png") 31 1, auto;
  }

  a { cursor: var(--pointer); }

  :root {
    font-size: large;

    color-scheme: light dark;
    color: black;
    --gradient:
      linear-gradient(120deg in oklch,
        oklch(93% 27.1% 96deg),
        oklch(84.03% 22% 15deg),
        oklch(80% 29.3% 303deg),
        oklch(84% 23% 233deg),
        oklch(89% 25% 161deg));
    --menu-bg-hsl: 60deg 100% 96%;

    @media (prefers-color-scheme: dark) {
      color: #ffd;
      --gradient:
        linear-gradient(20deg,
          hsl(300deg 30% 20%),
          hsl(220deg 30% 20%),
          hsl(150deg 30% 20%),
          hsl(30deg  30% 20%),
          hsl(350deg 30% 20%));
      --menu-bg-hsl: 260deg 100% 8%;
    }

    --shadow-hsl: 330deg 40% 40%;
    --base-background: url(../media/church.png), var(--gradient) fixed;
    background: var(--base-background);

    font-family: Muller, sans-serif;
    font-weight: 500;

    @media (prefers-reduced-data: reduce) {
      --base-background: var(--gradient) fixed;
      font-family: sans-serif;
      font-weight: normal;
    }
  }
}


@layer face-menu {
  #face-menu {
    align-self: center;
    margin: 10px;

    font-size:   125%;

    menu {
      display:       flex;
      place-content: center;
      place-items:   center;
      margin:        auto;
      padding:       0;

      flex-wrap: wrap;
      justify-content: center;

      background: hsl(var(--menu-bg-hsl) / 65%);
      border:     2px solid hsl(var(--menu-bg-hsl));
      box-shadow: 0 0 10px 5px hsl(var(--menu-bg-hsl) / 30%);
      border-radius: 10px;

      @media (prefers-reduced-transparency: reduce) {
        background: hsl(var(--menu-bg-hsl));
      }
    }

    input, label { cursor: var(--pointer); }

    input {
      appearance: none;
      width:   0;
      margin:  0;
      padding: 0;
    }

    label {
      padding: .25em 1.25em;
      flex: 1 0 auto;
      text-align: center;
    }

    li {
      display: flex;
      list-style: none;
      flex: 1 0 4em;
    }
  }
}


@layer face-base {
  #cube > section {
    --base-background:
      repeating-linear-gradient(var(--bg-angle),
        transparent, transparent 0.8em,
        #fff8 0.8em, #fff8 1em),
      url(../media/little-pluses.png),
      linear-gradient(150deg,
        hsl(var(--hue) 86% 92%),
        hsl(var(--hue) 66% 80%)
      );
    background: var(--base-background);

    --border-thickness: 10px;
    border: var(--border-thickness) solid white;
    padding: 2em;

    border-radius: 30px;

    color: hsl(var(--hue) 40% 10%);
    --text-shadow-color: white;
    text-shadow:
       1px  1px 1px var(--text-shadow-color),
      -1px  1px 1px var(--text-shadow-color),
      -1px -1px 1px var(--text-shadow-color),
       1px -1px 1px var(--text-shadow-color);

    @media (prefers-color-scheme: dark) {
      --base-background:
        repeating-linear-gradient(var(--bg-angle),
          transparent, transparent 0.8em,
          #0014 0.8em, #0014 1em),
        linear-gradient(150deg,
          hsl(var(--hue) 40% 30%),
          hsl(var(--hue) 40% 15%)
        );

      border-color: hsl(var(--hue) 40% 10%);

      color: hsl(var(--hue) 40% 90%);
      --text-shadow-color: black;
    }

    scrollbar-color:
      hsl(calc(var(--hue) + 180deg) 90% 60%)
      hsl(var(--hue) 50% 95%);

    ::selection {
      color: white;
      background: hsl(calc(var(--hue) + 180deg), 50%, 30%);
      text-shadow: none;
    }
  }

  #cube a {
    color: hsl(calc(var(--hue) + 180deg) 90% 20%);
    font-weight: 600;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-decoration-style: dotted;
      text-decoration-color: currentcolor;
      text-decoration-thickness: 2px;
    }

    @media (prefers-color-scheme: dark) {
      color: hsl(calc(var(--hue) + 180deg) 100% 85%);
    }
  }

  h2 { margin-top: 0; }

  h3 {
    text-align: center;
    margin-bottom: 0.25em;
  }

  h2 + section h3 { margin-top: 0; }

  strong { font-weight: 700; }

  .artcredit {
    position: absolute;
    bottom: 0;
    left: 1em;
    font-size: smaller;
    font-style: italic;
    background: hsl(var(--menu-bg-hsl) / 75%);
    padding: .1em .5em;
  }

  ul { padding-left: 0; }
  #cube :is(:not(.boxy) > li, .bullety dd) {
    list-style: none;
    &::before {
      content: url(../media/point_right.svg);
      vertical-align: -20%;
      height: 1em;
      padding-right: 0.5ex;
    }
  }
}


@layer faces.hello {
  #hello {
    --hue: 310deg;
    --bg-angle: 135deg;

    /* this one makes more sense to show if there is a paint before
     * the script runs */
    z-index: 1;

    /* the quick linx */
    h3 { text-align: left; }

    --bg-image: url(../media/wave.webp);
    background:
      var(--bg-image) bottom right / auto 60% no-repeat,
      var(--base-background);

    @media (prefers-color-scheme: dark) {
      --bg-image: url(../media/wave-neon.webp);
    }
    @media (prefers-reduced-data: reduce) {
      --bg-image: url(../media/wave.l.webp);
    }
    @media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
      --bg-image: url(../media/wave-neon.l.webp);
    }
  }
}

@layer faces.id {
  #id {
    --hue: 10deg;
    --bg-angle: 45deg;

    dl {
      display: grid;
      grid-template-columns: min-content auto;
      gap: 0 2em;
    }
    dt { font-weight: 600; }
    dd {
      margin: 0 0 0 1em;
      grid-column: 2 / 3;
      a { font-weight: 700; }
    }
    dt, dt + dd { margin-top: 1em; }
  }

  #flags {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    gap: 1em;
    margin-top: 3em;

    img {
      height: 2em;
      border: 2px solid hsl(var(--hue) 30% 5% / 60%);
      rotate: 8deg;
    }
  }
}

@layer faces.activities {
  #activities {
    --hue: 60deg;
    --bg-angle: -60deg;

    /* height of quobl.webp is 58% of width */
    --bg-image: url(../media/quobl.webp);
    background:
      var(--bg-image) bottom left 2ex / 50% auto no-repeat local,
      var(--base-background);
    padding-bottom: 29%;

    @media (prefers-color-scheme: dark) {
      --bg-image: url(../media/quobl-neon.webp);
    }
    @media (prefers-reduced-data: reduce) {
      --bg-image: url(../media/quobl.l.webp);
    }
    @media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
      --bg-image: url(../media/quobl-neon.webp);
    }
  }
}


@layer faces.links {
  #links {
    --hue: 130deg;
    --bg-angle: 210deg;

    ul {
      font-size: 125%;
      padding: 0;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5ex;
    }
    li {
      flex: 1 0 40%;
      list-style: none;
    }

    a {
      height: 3em;
      padding-left: calc(3em + 1ex);
      display: flex;
      align-items: center;

      border: 2px solid black;
      background:
        linear-gradient(to right, transparent 3em, var(--bg) 3em),
        var(--icon) 0.5em center / 2em auto no-repeat,
        var(--icon-bg);
      border-radius: 10px;

      color: var(--fg);
      text-shadow: none;
      &:hover { text-decoration: none; }
    }
  }

  /* (overridable default) */
  @layer { #links li { --icon-bg: var(--fg); } }

  #gallery {
    --icon: url(../media/favicon.webp);
    --fg:   hsl(280deg 38% 43%);
    --bg:   hsl(100deg 99% 81%);
    image-rendering: pixelated;
  }

  #code {
    --icon: url(../media/icons/forgejo.svg);
    --fg: white;
    --icon-bg: #171e26;
    --bg: #c2410c;
  }

  #blog {
    --icon: url(../media/icons/blog.webp);
    --fg: #ffeebb;
    --bg: #332255;
    image-rendering: pixelated;
    a {
      background-position: center, left calc(1.5em - 51px) center, center;
      background-size: contain;
    }
  }

  #itaku {
    --icon: url(../media/icons/itaku.svg);
    --fg:   #ffeb3b;
    --bg:   #303030;
  }

  #weasyl {
    --icon: url(../media/icons/weasyl.svg);
    --fg:   white;
    --bg:   #970000;
  }

  #fa {
    --icon: url(../media/icons/furaffinity.webp);
    --icon-bg: #20242a;
    --bg:      #353b45;
    --fg:      white;
  }

  #da {
    --icon: url(../media/icons/deviantart.webp);
    --icon-bg: #000608;
    --bg: #314537;
    --fg: #e7ede4;
  }

  #kofi {
    --icon: url(../media/icons/ko-fi.webp);
    --icon-bg: #def3ff;
    --bg: white;
    --fg: #ff5966;
  }

  #artfight {
    --icon: url(../media/icons/artfight.webp);
    --icon-bg: #222222;
    --bg: #a65178;
    --fg: white;
  }

  #chitter {
    --icon: url(../media/icons/chitter.webp);
    --bg: #582c58;
    --icon-bg: #2c162c;
    --fg: white;
  }

  #bluesky {
    --icon: url(../media/icons/bluesky.svg);
    --bg: #161e27;
    --fg: white;
  }

  @media (prefers-color-scheme: dark) {
    /* most link colours are fine in both modes. except: */
    #gallery {
      --icon-bg: hsl(280deg 42% 30%);
      --bg:      hsl(280deg 38% 43%);
      --fg:      hsl(100deg 99% 81%);
    }

    #weasyl {
      --icon-bg: #252d32;
    }

    #kofi {
      --icon-bg: #2b3a44;
      --bg:      #192025;
      --fg:      #dce7eb;
    }

    #bluesky {
      --bg: #161e27;
      --icon-bg: #1e2936;
      --fg: white;
    }
  }
}

@layer faces.friends {
  #friends {
    --hue: 190deg;
    --bg-angle: 300deg;

    display: grid;
    grid: "hdr"     min-content
          "links1"  auto
          "links2"  auto
          "buttons" auto;

    img { image-rendering: pixelated; }

    > section {
      align-self: start;

      ul {
        list-style: none;
        padding: 0;

        display: flex;
        width: 80%;
        margin: 0 auto;

        align-items: start;
        gap: 0;
        justify-content: center;
        flex-wrap: wrap;
      }

      img {
        width: 88px;
        height: 31px;
        object-fit: none;
        display: block;
      }
    }

    .txt {
      display: inline-block;
      width: 88px;
      height: 31px;
      border: 3px outset currentcolor;
      text-align: center;
      line-height: 28px;

      font-size: 18px;
      font-weight: 600;
      text-shadow: none;
    }

    a:hover { text-decoration: none; }
  }

  #khr    a { background: #ffab71; color: #71153e; }
  #ionchy a { background: #feca2f; color: #1b1505; }
  #tenna  a { background: #6095da; color: #243224; }
  #river  a { background: #98d8e7; color: #d67d28; }
  #spiral a { background: #ef4d5a; color: #1f1f1f; }
  #codl   a { background: #87261f; color: #edb970; }
  #violet a { background: #8c2bd8; color: #dddddd; }
  #brin   a { background: #1e1e1e; color: #ff4400; }
  #konsti a { background: #060038; color: #ffcccc; }
  #lena   a { background: #e3ccf7; color: #000000; }
  #serena a { background: #e787ad; color: #204; }
  #deneb  a { background: #540f00; color: #ee6bfa; }

  #nissbuttons {
    margin: 2em auto 0;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;

    h3 {
      margin: 0;
      font-size: 1rem;
      font-weight: 500;
      text-align: right;
      text-wrap: balance;
    }
  }
}

@layer faces.six {
  #six {
    --hue: 250deg;
    --bg-angle: 130deg;

    --bg-image: url(../media/kesi.webp);
    background:
      var(--bg-image) bottom right / 100% auto no-repeat,
      var(--base-background);

    @media (prefers-color-scheme: dark) {
      --bg-image: url(../media/kesi-neon.webp);
    }
    @media (prefers-reduced-data: reduce) {
      --bg-image: url(../media/kesi.l.webp);
    }
    @media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
      --bg-image: url(../media/kesi-neon.l.webp);
    }
  }
}