gallery/style/shiny/base.css

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

:root {
  /* old slightly-muted gradient */
  /*
  --gradient:
    linear-gradient(135deg,
        hsl(42deg,  67%, 70%),
        hsl(348deg, 67%, 70%),
        hsl(334deg, 77%, 80%),
        hsl(234deg, 77%, 76%),
        hsl(195deg, 67%, 67%),
        hsl(155deg, 57%, 62%)
      );
  */

  /* bright colours from yummy.cricket bg */
  --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)
      );

  --text-col: white;
  --text-shadow-col: hsl(0, 0%, 0%, 75%);
  --text-shadow: 2px 2px 3px var(--text-shadow-col);

  --focus-box: 0 0 5px hsl(55deg, 60%, 90%, 80%);
  --focus-text: hsl(334deg, 87%, 90%);

  --border-col: var(--text-col);
  --border: 3px solid var(--border-col);
  --border-radius: 1.5em;
  --background: hsla(0, 0%, 0%, 60%);

  --button-bg: hsla(0deg, 0%, 0%, 20%);
  --button-bg-selected: hsla(0deg, 0%, 100%, 20%);
  --button-border: 1px solid hsla(0deg, 0%, 0%, 40%);
  --button-border-selected: 1px solid hsla(0deg, 0%, 100%, 30%);
  --button-pad: 0.15em 0.8em;
  --button-radius: 1000px;

  font-family: Muller;
  font-weight: 600;

  background: var(--gradient) fixed;
  margin: 0;
}

body { margin: 0; }

header {
  text-align: center;
}

h1 { font-weight: 300; }
h2, h3, h4 { font-weight: 400; }
h1 { font-size: 300%; }
h2 { font-size: 125%; }
h3 { font-size: 110%; }

.page {
  background: var(--background);
  position: relative;

  padding: 2em 4em;
  margin: 0 auto;

  color: var(--text-col);
  text-shadow: var(--text-shadow);
}

header h1 {
  margin: 0; padding: 0;
}

a {
  color: inherit;
  text-decoration: dotted underline;
}


a:focus {
  outline: none;
  color: var(--focus-text);
  text-decoration-style: double;
}

b {
  font-weight: 700;
}


footer {
  font-weight: 500;
}


figure > img {
  display: block;
}


.corner {
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 1em;

  font-size: 100%;
  font-weight: 500;
}

.corner.left {
  left: 2em;
  text-align: left;
}
.corner.right {
  right: 2em;
  text-align: right;
}

.emoji {
  max-height: 1.2em;
  vertical-align: -0.2em;
}


.buttonbar {
  padding: 0;
  display: flex;
  align-items: flex-start;
  flex-flow: row wrap;
  margin-top: 0;
  margin-bottom: -0.5em;
}

.buttonbar li {
  list-style: none;
  margin-bottom: 0.5em;
}

.buttonbar a {
  text-decoration: none;
}

.bb-choice {
  justify-content: center;
}

.buttonbar input {
  display: inline;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  width: 0;
}

.buttonbar label, .bb-links li {
  margin-right: 0.5em;
  padding: var(--button-pad);
  background: var(--button-bg);
  border: var(--button-border);
  border-radius: var(--button-radius);
}

.buttonbar :focus ~ label, .bb-links li:focus-within {
  box-shadow: var(--focus-box);
}

.buttonbar :checked ~ label {
  background: var(--button-bg-selected);
  border-color: var(--button-border-selected);
}


summary, summary h2 {
  cursor: pointer;
  display: inline;
}

summary:focus-within {
  outline: none;
}

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

summary::after {
  display: inline-block;
  margin-left: 1.5em;
  padding: var(--button-pad);
  background: var(--button-bg);
  border: var(--button-border);
  border-radius: var(--button-radius);
}

       summary::after { content: 'show'; }
[open] summary::after { content: 'hide'; }


dt {
  font-size: 120%;
}
dd {
  margin-left: 0;
}
dd + dt {
  margin-top: 0.5em;
}

.btw {
  font-size: 80%;
  font-weight: 700;
}

dt .btw {
  margin-left: 1em;
}


p {
  text-align: justify;
  -ms-hyphens: auto;
  hyphens: auto;
}

del {
  text-decoration: line-through wavy;
  text-decoration-thickness: 2px;
}


.threecol {
  columns: 3;
  grid-column-gap: 2em;
}

.threecol dd {
  break-before: avoid;
}

*[title] {
  text-decoration: underline dotted;
}


@media (prefers-color-scheme: dark) {
  :root {
    --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)
        );
    --text-col: hsl(55deg, 60%, 90%);

    --button-bg-selected: hsla(55deg, 40%, 95%, 20%);
    --button-border-selected: 1px solid hsl(55deg, 60%, 90%, 40%);
    --button-bg: hsla(0deg, 0%, 0%, 50%);
    --button-border: 1px solid hsla(0deg, 0%, 100%, 40%);
    --border-col: black;
  }

  @media (prefers-contrast: more) {
    :root {
      --text-col: white;
      background: black;
    }

    body {
      border: unset;
      box-shadow: unset;
      background: unset;
    }
  }
}

hr {
  height: 2px;
  width: 75%;
  border: none;
  background: var(--text-col);
  margin: 1em auto;
}


@media (pointer: coarse) {
  .buttonbar {
    font-size: 200%;
  }
}