~stick/stma.is

6fbf92c0e710327c086bdfc36f225c071e9a9d34 — Stick 5 months ago 61d5dbe
fix frontpage colors
1 files changed, 26 insertions(+), 37 deletions(-)

M assets/css/style.css
M assets/css/style.css => assets/css/style.css +26 -37
@@ 1,65 1,54 @@
/* COLORS ------------------------------------------------------------------ */
:root {
  /* Emma's favorite color, sky magenta */
  --emmaHue: 320;
  --emmaSat: 49%;

  /* Stick's favorite color, #993300 */
  --stickHue: 20;
  --stickSat: 100%;

  /* Old Glory Red */
  --redHue: 353;
  --redSat: 69%;
/* Color the links nice (printing and light theme) */
.emma a {
  /* #CF71AF */
  color: #7d2b62;
}
.emma a:active,
.emma a:focus,
.emma a:hover {
  color: #7d2b62aa;
}
.stick a {
  /* #993300 */
  color: #852c00;
}
.stick a:active,
.stick a:focus,
.stick a:hover {
  color: #852c00aa;
}

/* Color the links nice (default dark theme) */
@media screen and (prefers-color-scheme: dark) {
  .emma a {
    color: hsl(var(--emmaHue), var(--emmaSat), 70%);
    color: #dea1c1;
  }
  .emma a:active,
  .emma a:focus,
  .emma a:hover {
    color: hsl(var(--emmaHue), var(--emmaSat), 85%);
    color: #dea1c1aa;
  }
  .stick a {
    color: hsl(var(--stickHue), var(--stickSat), 70%);
    color: #f96;
  }
  .stick a:active,
  .stick a:focus,
  .stick a:hover {
    color: hsl(var(--stickHue), var(--stickSat), 85%);
    color: #ff9966aa;
  }
}

/* Color the links nice (printing and light theme) */
.emma a {
  color: hsl(var(--emmaHue), var(--emmaSat), 30%);
}
.emma a:active,
.emma a:focus,
.emma a:hover {
  color: hsl(var(--emmaHue), var(--emmaSat), 45%);
}
.stick a {
  color: hsl(var(--stickHue), var(--stickSat), 30%);
}
.stick a:active,
.stick a:focus,
.stick a:hover {
  color: hsl(var(--stickHue), var(--stickSat), 45%);
}

/* Use for the words of Jesus - red letters. */
.red {
  color: hsl(var(--redHue), var(--redSat), 60%);
  /* Old glory red: #b22234 */
  color: #a72030;
}

/* Red letters (printing and light theme) */
@media print, screen and (prefers-color-scheme: light) {
  .red {
    color: hsl(var(--redHue), var(--redSat), 40%);
    /* Red is difficult against a dark background */
    color: #ff9191;
  }
}