yummy.cricket/base.css

@import url(fonts/muller/muller.css) (prefers-reduced-data: no-preference);


/* OUTER */

* { box-sizing: border-box; }

html, body {
  min-height: 100vh;
  min-height: 100lvh;
  scrollbar-gutter: stable;
}

html {
  font-size:   large;
  font-family: Muller, sans-serif;
  font-weight: 500;

  background: var(--gradient) fixed;
  color: black;

  --gradient:
    linear-gradient(120deg, #fae58f, #fab6ba, #d1aeff, #89d6ff, #43f3ae);
  --shadow-hsl: 330deg 40% 40%;
}

@media (prefers-reduced-data: reduce) {
  html {
    font-family: sans-serif;
    font-weight: normal;
  }
}

html, body { margin: 0; }

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


/* TOP MENU */

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

.menu input, .menu label {
  cursor: pointer;
}

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

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

  font-size:   125%;

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

  --menu-bg-hsl: 60deg 100% 96%;
}

@media (prefers-color-scheme: dark) {
  .menu { --menu-bg-hsl: 260deg 100% 8%; }
}

.hide-boxes input {
  appearance: none;
  width:   0;
  margin:  0;
  padding: 0;
}
.menu li {
  display: flex;
  list-style: none;
  flex: 1 0 4em;
}
.menu label {
  padding: .25em 1.25em;
  flex: 1 0 auto;
  text-align: center;
}


/* BASE FACE STYLES */

#cube > section {
  --base-background:
    repeating-linear-gradient(var(--bg-angle),
      transparent, transparent 0.8em,
      #fff8 0.8em, #fff8 1em),
    linear-gradient(150deg,
      hsl(var(--hue) 86% 94%),
      hsl(var(--hue) 66% 82%)
    );
  background: var(--base-background);

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

  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);

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

#cube a {
  color: hsl(calc(var(--hue) + 180deg) 90% 20%);
  font-weight: 600;
  text-decoration: none;
}
#cube a:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentcolor;
  text-decoration-thickness: 2px;
}

h2 { margin-top: 0; }

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

strong { font-weight: 700; }

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

@media (prefers-color-scheme: dark) {
  #cube > section {
    --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;
  }

  #cube a {
    color: hsl(calc(var(--hue) + 180deg) 100% 85%);
  }
}



/* SPECIFIC FACE STYLES */

/* the separate "#whatever ::selection" selector is because in
 * chrome, ::selection doesn't inherit variables */
#hello, #hello ::selection {
  --hue: 310deg;
  --bg-angle: 135deg;
}

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

/* extra #cube selector for specificity */
#cube #hello {
  --bg-image: url(media/wave.png);
  background:
    var(--bg-image) bottom right / auto 60% no-repeat,
    var(--base-background);
}

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

#id, #id ::selection, #flags img {
  --hue: 10deg;
  --bg-angle: 45deg;
}

#id dl {
  display: grid;
  grid-template-columns: min-content auto;
  gap: 1em 2em;
}
#id dt { font-weight: 600; }
#id dd { margin: 0; }
#id dd a { font-weight: 700; }

#id dl ul {
  padding-left: 1em;
  list-style: '❧ ';
}

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

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


#activities, #activities ::selection {
  --hue: 70deg;
  --bg-angle: -60deg;
}

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

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

#links, #links ::selection {
  --hue: 130deg;
  --bg-angle: 210deg;
}

#links ul {
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
#links li {
  flex: 1 0 10em;
  list-style: none;
  --icon-bg: var(--fg);
}

#links 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) calc(1.5em - 16px) center / 32px auto no-repeat,
    var(--icon-bg);

  color: var(--fg);
  text-shadow: none;
}

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

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

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

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

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

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

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

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

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

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

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

#links #cohost {
  --icon: url(media/icons/cohost.svg);
  --bg: #ffab5c;
  --icon-bg: #83254f;
  --fg: black;
}

#links #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: */

  #links #gallery {
    --icon-bg: hsl(280deg 42% 30%);
    --bg:      hsl(280deg 38% 43%);
    --fg:      hsl(100deg 99% 81%);
  }

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

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

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


#friends, #friends ::selection {
  --hue: 190deg;
  --bg-angle: 300deg;
}

#cube #friends {
  display: grid;
  grid: "hdr"     min-content
        "links1"  auto
        "links2"  auto
        "buttons" auto;
}

#friends img { image-rendering: pixelated; }

#friendlinks, #otherlinks { align-self: start; }

#friendlinks ul, #otherlinks ul {
  list-style: none;
  padding: 0;

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

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

#friendlinks img, #otherlinks img {
  width: 88px;
  height: 31px;
  object-fit: none;
}

#friends .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;
}

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

#friends #khr    a { background: #ffab71; color: #71153e; }
#friends #dusty  a { background: #fbd265; color: #805c2d; }
#friends #ionchy a { background: #feca2f; color: #1b1505; }
#friends #tenna  a { background: #6095da; color: #243224; }
#friends #river  a { background: #98d8e7; color: #d67d28; }
#friends #spiral a { background: #ef4d5a; color: #1f1f1f; }
#friends #codl   a { background: #87261f; color: #edb970; }
#friends #violet a { background: #8c2bd8; color: #dddddd; }
#friends #abyss  a { background: #1e2e5f; color: #f8e1c2; }

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

#nissbuttons p {
  text-align: right;
  text-wrap: balance;
}
#nissbuttons * { margin: 0; }

#six, #six ::selection {
  --hue: 250deg;
  --bg-angle: 130deg;
}

#cube #six {
  --bg-image: url(media/kesi.png);
  background:
    var(--bg-image) bottom right / 100% auto no-repeat,
    var(--base-background);
}

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