first

style/style.css

@@ -0,0 +1,253 @@
+@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;
+}