blog/style/page.scss

@use 'sass:math';
@use 'colours' as *;
@use 'fonts' as *;

@import url(counters.css);


@layer colordefs {
  @property --base-hue {
    syntax: "<number>";
    inherits: true;
    initial-value: 336;
  }

  @include color-var(--fg, $darker, $light);
  @include color-var(--bg, $light, $darker);
  @include color-var(--counter-fg, $lighter, $lighter);
  @include color-var(--counter-bg, $dark, $mid);
  @include color-var(--accent, $dark-accent, $light-accent);
  @include color-var(--counter-accent, $light-accent, $dark-accent);
  @include color-var(--box-base, $light, $mid);
  @include color-var(--box-fg, $darker, $lighter);
  @include color-var(--box-shadow, halfalpha($mid));

  :root {
    --gradient: linear-gradient(
      120deg in oklch,
      oklch(93% 27.1% 96deg),
      oklch(84.03% 22% 15deg),
      oklch(80% 29.3% 303deg),
      oklch(84% 23% 233deg),
      oklch(89% 25% 161deg)
    );

    @media (prefers-color-scheme: dark) {
      // todo oklch
      --gradient:
        linear-gradient(20deg in oklch,
          hsl(300deg 30% 20%),
          hsl(220deg 30% 20%),
          hsl(150deg 30% 20%),
          hsl(30deg  30% 20%),
          hsl(350deg 30% 20%));
    }
  }
}


@mixin boxy-margin { margin: 1rem 0; }

@mixin boxy-shadow($dst: 0.5rem) {
  box-shadow: 0.5rem 0.5rem 0 var(--box-shadow);
}

@function border-style($fg: var(--fg)) { @return 3px solid $fg; }

@mixin boxy-unpadded($bg, $fg: var(--box-fg), $border: $fg, $dst: 0.5em)
{
  color:      $fg;
  background: $bg;
  border:     border-style($border);
  @include boxy-shadow;
}

@mixin boxy($bg, $clear: true, $args...) {
  @include boxy-unpadded($bg, $args...);
  @include boxy-margin;
  padding:  0.5rem 0.8rem;
  @if $clear {
    clear: both;
  } @else {
    overflow: hidden; // makes the box dodge floats?????? idk why
  }
  :first-child { margin-top:    0; }
  :last-child  { margin-bottom: 0; }
}

@mixin fake-border {
  border: none;
  filter:
    drop-shadow(1px 1px 0 currentcolor)
    drop-shadow(1px -1px 0 currentcolor)
    drop-shadow(-1px 1px 0 currentcolor)
    drop-shadow(-1px -1px 0 currentcolor)
    drop-shadow(1px 0 0 currentcolor)
    drop-shadow(-1px 0 0 currentcolor)
    drop-shadow(0 1px 0 currentcolor)
    drop-shadow(0 -1px 0 currentcolor);
}

@mixin decorations($before, $after: $before, $size: null, $color: null) {
  &::before, &::after {
    @include symbol-font;
    font-style:  normal;
    @if $size  { font-size: $size; }
    @if $color { color: $color;    }
    margin: 0 0.5rem;
  }
  &::before { content: $before; }
  &::after  { content: $after;  }
}


@mixin inline-lists {
  ul, menu, li { display: inline; }
  ul, menu { padding-left: 0; }
  li       { list-style: none;    }
  li + li  { margin-left: 0.75ex; }
}

@mixin center {
  text-align: center;
  text-wrap: balance;
}


@layer outer {
  * { box-sizing: border-box; }

  :root {
    background: var(--gradient) fixed;
    color:      var(--fg);

    @include main-font;
    font-size: $body-size;
    line-height: 150%;
  }

  body {
    @include boxy-unpadded(var(--bg));
    margin: 2em auto;

    $darkbg: oklch(from var(--bg) calc(l * 0.9) calc(c * 1.25) h);
    background: linear-gradient(to bottom in oklch, var(--bg), $darkbg);

    width: min(54rem, 85vw);
  }

  main {
    margin: 0 2rem;
  }
}

@layer header {
  header {
    @include inverted;
    @include inline-lists;

    text-align: center;
    text-wrap: balance;
    padding: 1em;

    h1 {
      @include decorations('✿', $size: 60%);
      @include heading-size(0);
      @include heading-font;
      font-weight: $main-heading-weight;
      font-style: italic;
      letter-spacing: 0.1ch;
      margin: { top: 0; bottom: 0.5rem; }

      em { font-weight: $normal-weight; }
    }

    .meta {
      @include small-font;
      display:         flex;
      gap:             2em;
      justify-content: center;

      * { display: inline; }
    }
  }
}

@layer footer {
  footer {
    @include inverted(0.75rem);
    @include small-font;
    @include inline-lists;

    clear: both;
    margin: 2rem 0 0 0;

    display: flex;
    justify-content: center;

    menu { @include decorations('➸', ''); }
  }
}

@layer headings {
  main {
    h1, h2, h3, h4, h5, h6 { @include heading-font; }

    h1 {
      @include inverted;
      @include boxy-margin;
      @include boxy-shadow;
      @include heading-size(1);
      letter-spacing: 0.075ch;
      clear: both;
    }

    h2 { @include heading-size(2); }
    h3 { @include heading-size(3); }
    h4, h5, h6 { font-size: 1rem; }

    h2, h3, h4, h5, h6 {
      padding: 0.25rem 0.75rem;
      border-bottom: border-style();
      margin-bottom: 1rem;
    }
  }
}

@layer links {
  a {
    color: inherit;
    text-decoration: 2px solid underline var(--accent);
    text-underline-offset: 0.175em;
    &:hover { color: var(--accent); }
  }
}

@layer banner {
  .banner {
    @include boxy(var(--accent), $fg: var(--banner-fg),
                  $border: var(--banner-border));
    @include decorations('☛', '☚');
    @include heading-size(2);

    font-weight: $boldbold-weight;
    width:       fit-content;
    margin:      auto;

    p { display: inline; }

    &:has(a) {
      background: var(--accent);
      a { text-decoration: none; }
      a:hover { color: var(--counter-accent); }
    }

    --banner-fg:     #{$lighter};
    --banner-border: #{$dark};
    @media (prefers-color-scheme: dark) {
      --banner-fg:     #{$darker};
      --banner-border: #{$lighter};
    }
  }
}


@layer code {
  pre {
    @include code-font;
    font-size: 1rem * $code-font-scale;
  }

  :where(:not(pre)) > code {
    @include code-font;
    white-space: nowrap;
  }

  /* syntax highlighting */
  .kw { color: hsl(300deg, 60%,  30%); }
  .pp { color: hsl(343deg, 100%, 40%); }
  .dt { color: hsl(173deg, 100%, 24%); }
  .fu, .at { color: hsl(34deg,  100%, 30%); }
  .va { color: hsl(203deg, 100%, 30%); }
  .cf { color: hsl(276deg, 75%,  35%); }
  .op { color: hsl(220deg, 40%,  33%); }
  .co { color: hsl(221deg, 10%,  39%); }
  .bu { color: hsl(120deg, 85%,  25%); }
  .st, .fl, .dv, .bn, .sc, .ss { color: hsl(143deg, 100%, 20%); }
  .wa { color: hsl(350deg, 80%,  25%); text-decoration: wavy 1.5px underline; }
  .al { color: hsl(350deg, 80%,  25%); }
  .cn { color: hsl(343deg, 100%, 30%); }

  @media (prefers-color-scheme: dark) {
    .kw { color: hsl(300deg, 60%,  80%); }
    .pp { color: hsl(343deg, 100%, 85%); }
    .dt { color: hsl(193deg, 60%, 74%); }
    .fu, .at { color: hsl(34deg,  100%, 70%); }
    .va { color: hsl(203deg, 100%, 75%); }
    .cf { color: hsl(276deg, 75%,  85%); }
    .op { color: hsl(220deg, 40%,  70%); }
    .co { color: hsl(221deg, 10%,  80%); }
    .bu { color: hsl(120deg, 55%,  75%); }
    .st, .fl, .dv, .bn, .sc, .ss { color: hsl(143deg, 70%, 80%); }
    .wa { color: hsl(350deg, 80%,  77%); text-decoration: wavy 1.5px underline; }
    .al { color: hsl(350deg, 80%,  77%); }
    .cn { color: hsl(343deg, 80%, 70%); }
  }
}



@layer figures {
  figure {
    img { max-width: 100%; }

    &:where(:not(.nobg, .hasborder)) {
      a       img { border: border-style(); }
      a:hover img { border: border-style(var(--accent)); }
    }

    &.nobg a img { @include fake-border; }
    &.lightbg img { background: var(--light); }
  }

  figcaption {
    @include note-font;
    @include center;

    em { font-style: normal; }
  }

  :not(.floating) > figcaption { width: 75%; }
}


@layer tables {
  table {
    margin: auto;
    border-spacing: 0;
    border: { top: border-style(); bottom: border-style(); }
  }

  th { font-weight: $bold-weight; }

  thead th {
    border-bottom: border-style(halfalpha(var(--fg)));
  }

  td, th {
    padding: 0 0.5em;
    vertical-align: text-bottom;
  }
}


@layer boxes {
  pre, aside, blockquote {
    $hue: calc(h + var(--hue-nudge));
    --box-bg: oklch(from var(--box-base) var(--luma) c #{$hue});
    @include boxy(var(--box-bg), $clear: false);

    --luma: calc(l * 1.05);
    @media (prefers-color-scheme: dark) { --luma: calc(l / 1.05); }
  }

  :is(pre, .sourceCode, aside, blockquote) {
    & + & { margin-top: 1.5em; }
  }

  pre {
    --hue-nudge: 60;
  }

  aside {
    @include note-font;
    --hue-nudge: -80;
  }

  blockquote {
    @include note-font;
    --hue-nudge: 180;
  }

  .light {
    @include apply-colors($fg: $darker, $bg: $lighter);
  }
}


@layer conlangs {
  .ipa { @include ipa-font; }

  .lang, .ebnf-t {
    @include ipa-font;
    font-weight: 700;
    font-variation-settings: "ENLA" 25;
      /* ENLA (increased x-height) not defined for IPA characters */
  }

  .scr {
    vertical-align: -40%;
    height: 1.5em;

    :is(.gloss, .bigscr) & { height: 2em; }
    .hugescr & { height: 4em; }
  }

  .gloss {
    border: none;
    text-align: left;
    & + & { margin-top: 2em; }
  }

  .gloss-split, .gloss-gloss { @include small-font; }

  .glosses.left .gloss { margin-left: 0; }

  .abbr-list {
    dl {
      display: grid;
      grid-template-columns: 1fr 8fr 1fr 8fr;
    }
    dt { @extend .abbr; }
  }

}


@layer spans {

  dfn, b, strong, dt { font-weight: $bold-weight; }

  dfn { font-style: normal; }

  abbr, .abbr { font-variant: all-small-caps; }

  u u { text-decoration: double underline; }

  .note { @include note-font; }
  :is(h1, h2) .note { font-size: 75%; }

  mark {
    --mark-hue: calc(var(--hue) + 90)
    padding: 0 0.35ch;
    mix-blend-mode: multiply;
    background: oklch(95% 40% var(--mark-hue) / 30%);

    @media (prefers-color-scheme: dark) {
      mix-blend-mode: screen;
    }
  }

}

@layer lists {
  :not(ol) > li {
    list-style: '☀ ';

    &::marker {
      @include symbol-font;
      font-size: 80%;
    }
  }

}


@layer dl {

  dt {
    font-weight: bold;
    display: inline;
    break-after: avoid;
  }

  dd {
    margin-left: 1em;
    display: inline;
    break-before: avoid;
  }

  dd::after {
    content: '';
    display: block;
  }

}

@layer twocol {
  .twocol {
    columns: 2;
    > :first-child { margin-top: 0; }
  }

  .twocol-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1em;
  }
}

@layer ebnf {

  .ebnf {
    border: none;
  }

  .ebnf td {
    padding: 0 0.15em;
  }

  .ebnf-nt {
    font-weight: bold;
    color: hsl(155deg, 80%, 30%);
    white-space: nowrap;
  }

  .ebnf-punc {
    color: hsl(25deg, 40%, 30%);
  }

  .ebnf-sub, .ebnf-brack {
    color: hsl(210deg, 80%, 35%);
    font-weight: bold;
  }

  .ebnf-brack {
    padding: 0 0.05em;
  }

  .ebnf-s {
    font-style: italic;
    color: hsl(330deg, 80%, 30%);
  }
}


@layer floats {
  .floating {
    max-width: 33%;
    margin: 0.5em 1em;

    &:not(.left) {
      float: right;
      margin-right: 0;
    }

    &.left {
      float: left;
      margin-left: 0;
    }
  }

  .shaped { shape-margin: 1em; }
}


@layer images {

  .pixel {
    image-rendering: crisp-edges;
    image-rendering: pixelated;
  }

  .emoji {
    height: 1em;
    width:  1em;
    vertical-align: -0.1em;
  }

  .bigemoji {
    height: 2em;
    width:  2em;
    vertical-align: -0.2em;
  }

  .emojiseq { white-space: nowrap; }
}

@layer citations {

.citation {
  font-size: 90%;
}

#refs {
  margin-top: 0.75em;
}
.csl-entry {
  margin-left: 2em;
  text-indent: -2em;
}

}

@layer math {

  math[display=block] {
    border: 2px solid var(--fg);

    padding: 1em 3em;
    margin: auto;
    width: min-content;

  }
  .rulebox math[display=block] {
    border: none;
    padding: 0;
  }

  .texdefs {
    display: none;
  }

  .rulebox {
    float: right;
    border: 1px solid var(--fg);
    background: #ffffff66;
    padding: .4em 1.2em;
    margin-left: 3em;

    // "#asd" for specificity
    :is(p, .math, mjx-container, #asd) {
      margin: 0;
      padding: 0;
    }
  }

}