ips-lit/style/style.css

@import url(rec/rec.css);

* { box-sizing: border-box; }

:root {
  --body-font: RecSans;
  --mono-font: RecMono;

  --base-hue: 300deg;

  font-family: var(--body-font);

  background:
    url(dark-stripes.png) fixed,
    linear-gradient(to bottom,
      oklch(60% 23% var(--base-hue)),
      oklch(45% 18% var(--base-hue))) fixed;
  background-blend-mode: multiply;
}

body {
  background: url(kinda-jean.png), oklch(93% 10% var(--base-hue));
  background-blend-mode: multiply;
  padding: 2em 4em;
  width: min(95%, 54em);
  margin: 3em auto;
  border-radius: 1em;
  border: 3px solid oklch(20% 15% var(--base-hue));
  box-shadow: 1em 0.667em 2em oklch(30% 15% var(--base-hue) / 50%);
}

header {
  text-align: center;
  h1 {
    font-weight: 200;
    font-size: 250%;
    margin: 0 0 2rem;
    padding: 0 0 0.333rem;
    border-bottom: 2px dotted currentcolor;
  }
}

:root { --marker-color: oklch(40% 40% var(--base-hue)); }

:is(main, nav) :is(h2, h3, h4, summary) {
  font-weight: normal;
  font-style: italic;

  margin: 1.5em 0 0.25em -1.5rem;
}

:is(main, nav) :is(h2, h3, h4) {
  &::before {
    content: '♡';
    margin-right: 0.5em;
    color: var(--marker-color);
    font-size: 90%;
    display: inline-block;
    rotate: -23deg;
  }
}

h2 { font-size: 150%; }
h3 { font-size: 125%; }
h4 { font-size: 100%; }

code, .iname {
  font-family: var(--mono-font);
  font-size:   inherit;
}
pre { font-size: 85%; }

.idesc {
  font-variant: small-caps;
  font-weight: 500;
}

a {
  --link-hue: calc(var(--base-hue) + 150deg);
  --link-col: oklch(40% 60% var(--link-hue));
  --link-col-fade: oklch(35% 50% var(--link-hue));
  color: var(--link-col);
  text-decoration: 1px dotted underline;
  text-decoration-color: var(--link-col-fade);

  &[href^='#'] { --link-hue: var(--base-hue); }
  &:visited { color: var(--link-col-fade); }
}

code {
  .al {} /* Alert */
  .an {} /* Annotation */
  .at {} /* Attribute */
  .bn {} /* BaseN */
  .bu {} /* BuiltIn */
  .cf {} /* ControlFlow */
  .ch {} /* Char */
  .cn {} /* Constant */
  .co {
    /* Comment */
    color: oklch(30% 10% var(--base-hue));
    /* font-style: italic; */
    font-family: var(--body-font);
  }
  .do {} /* Documentation */
  .dt {} /* DataType */
  .dv {} /* DecVal */
  .er {} /* Error */
  .ex {} /* Extension */
  .fl {} /* Float */
  .fu {} /* Function */
  .im {} /* Import */
  .in {} /* Information */
  .kw { font-weight: 600; } /* Keyword */
  .op {} /* Operator */
  .pp {} /* Preprocessor */
  .sc {} /* SpecialChar */
  .ss {} /* SpecialString */
  .st {} /* String */
  .va {} /* Variable */
  .vs {} /* VerbatimString */
  .wa {} /* Warning */
}



@property --box-hue {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

pre,
div:is(.todo, .note),
aside:is(.left, .right) {
  --bg-texture: url(kinda-jean.png);
  /* --bg-color:   oklch(93% 17% var(--box-hue)); */
  --bg-gradient:
    linear-gradient(in oklch to right,
      oklch(91% 15% var(--box-hue)),
      oklch(87% 18% var(--box-hue)));
  --base-bg:  var(--bg-texture), var(--bg-gradient);
  background: var(--base-bg);
  background-blend-mode: multiply;

  border: 1px solid oklch(35% 35% var(--box-hue));
  border-radius: 0.5rem;
  box-shadow: 0.5rem 0.333rem 0.5rem oklch(45% 25% var(--box-hue) / 25%);

  margin: 1rem 2rem;
  padding: 0.5rem 1rem;

  & + & { margin-top: 0.5rem !important; }
}
pre          { --box-hue: 250deg; }
.literate    { --box-hue: var(--base-hue); }
.todo        { --box-hue: 350deg; }
.note, aside { --box-hue: 90deg; }
pre.haskell:not(.literate) {
  --box-hue: 20deg;
  background:
    url(cross.svg) bottom 10px right 10px no-repeat,
    var(--base-bg);
}


.note {
  font-size: 90%;
  font-style: italic;
}


figure {
  width: fit-content;
  margin: auto;
  &.shadowed {
    filter:
      drop-shadow(0.5rem 0.333rem 0.5rem oklch(45% 25% var(--base-hue) / 25%));
  }
}

dl {
  display: grid;
  grid-template-columns: auto auto;
}
dt {
  text-align: right;
  font-weight: bold;
  grid-area: auto / 1 / auto / auto;
  padding-right: 2em;
}
dd {
  grid-area: auto / 2 / auto / auto;
  display: list-item;
}
dt, dd { margin: 0; }
dt, dt + dd {
  margin-top: 1em;
}

:is(nav, ul) > li, dd {
  list-style: '→ ';
}

:is(li, dd)::marker {
  font-size: 80%;
  color: var(--marker-color);
}

aside {
  font-size: 90%;
  &.left, &.right {
    width: 30%;
    margin: 0.5rem 0;
    padding: 0.25em 0.75em;
  }
  &.left {
    float: left;
    margin-right: 1em;
  }
  &.right {
    float: right;
    margin-left: 1em;
  }
}

summary {
  font-size: 125%;
  font-style: italic;

  &::marker { color: var(--marker-color); }

  &::after {
    content: '[show]';
    font-size: 75%;
    font-style: normal;
    margin-left: 1rem;
  }
  [open] > &::after { content: '[hide]'; }
}

details[open]::after, nav::after {
  content: '';
  display: block;
  height: 2px;
  background:
    linear-gradient(to right,
      transparent, var(--marker-color) 20%,
      var(--marker-color) 80%, transparent);
  opacity: 60%;
  width: 60%;
  margin: 1rem auto 2rem;
}