some d&d stuff

dnd/base.css

@@ -0,0 +1,241 @@
+@layer fonts, base, header, footer, images, switcher, phone;
+@import url(../fonts/junicodevf/junicodevf.css) layer(fonts);
+
+@layer base {
+  * { box-sizing: border-box; }
+}
+
+@layer base.cols {
+  :root, ::selection {
+    --text-color: hsl(350deg 40% 15%);
+    --accent-color: hsl(80deg 50% 35%);
+    --shadow-color: hsl(from var(--text-color) h 20% 3% / 20%);
+    --shadow: 3px 2px 0 var(--shadow-color);
+    --shadow2: -2px 0 0 hsl(from var(--text-color) h 20% 7% / 15%);
+  }
+
+  :root {
+    background:
+      url(classy-fabric.png),
+      linear-gradient(to bottom in oklch,
+        hsl(55deg 55% 70%),
+        hsl(80deg 30% 50%));
+    background-blend-mode: multiply;
+    color: var(--text-color);
+    accent-color: var(--accent-color);
+  }
+
+  ::selection {
+    background: hsl(from var(--accent-color) h s calc(l * 0.75));
+    color: hsl(60deg 10% 90%);
+  }
+
+  body {
+    background: url(beige-paper.png), hsl(40deg 80% 80%);
+    background-blend-mode: multiply;
+    border: 10px solid currentcolor;
+    box-shadow: var(--shadow), var(--shadow2);
+  }
+
+}
+
+@layer base.fonts {
+  :root {
+    font-family: JunicodeVF, serif;
+    --base-features:
+      "ccmp", "calt", "liga", "loca", "rlig", "kern", "mark", "mkmk",
+      "ss09", "cv69" 6; /* nice */
+    font-feature-settings: var(--base-features);
+    font-variation-settings: "ENLA" 25;
+    font-stretch: 125%;
+    font-weight: 450;
+  }
+}
+
+
+@layer base.layout {
+  :root {
+    --protrude: 8rem;
+    min-height: 100vh;
+  }
+
+  body {
+    max-width: 50rem;
+    margin: 1rem auto 2rem;
+    padding: 1rem;
+  }
+
+  section, footer { clear: both; }
+
+  footer {
+    text-align: center;
+    padding: 1em 0 0.75em;
+  }
+}
+
+@layer base.other {
+  a {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: hsl(from currentcolor h s l / 0.6);
+    text-underline-offset: 0.125em;
+  }
+
+  dfn {
+    font-weight: 700;
+    font-style: italic;
+  }
+
+  .amp {
+    font-size: 75%;
+    font-weight: 550;
+  }
+
+  small { font-stretch: 100%; }
+}
+
+@layer base.headings {
+  h1, h2, h3, h4, h5, h6 {
+    font-stretch: 75%;
+    font-feature-settings: var(--base-features),
+      "cv02" 1, "cv08" 1, "cv10" 1, "cv12" 10, "cv14" 6, "cv15" 4, "cv16" 1,
+      "cv24" 5, "cv38" 2, "cv48" 1;
+    font-variation-settings: "ENLA" 0;
+
+    small { font-stretch: 65%; }
+  }
+
+  h2 {
+    margin: 0 0 0.5rem;
+    font-size: 225%;
+    font-weight: 500;
+
+    &::before {
+      content: '•';
+      font-size: 80%;
+      font-feature-settings: "ornm" 2;
+    }
+  }
+}
+
+@layer header {
+  header {
+    display: grid;
+    grid-template: "l header r" / 1fr auto 1fr;
+    gap: 1ex;
+    margin: 0.25em auto 0.5em;
+    font-size: 400%;
+    align-items: center;
+  }
+
+  header h1 {
+    font-size: inherit;
+    grid-area: header;
+    margin: 0;
+    font-weight: 400;
+    text-align: center;
+    justify-self: center;
+  }
+
+  header {
+    &::before, &::after {
+      content: '•';
+      font-size: 65%;
+    }
+    &::before {
+      grid-area: l;
+      font-feature-settings: "ornm" 7;
+      justify-self: end;
+    }
+    &::after  {
+      grid-area: r;
+      font-feature-settings: "ornm" 8;
+      justify-self: start;
+    }
+  }
+}
+
+@layer footer {
+  footer {
+    font-feature-settings: "ornm" 6;
+    a { text-decoration: none; }
+    font-size: 250%;
+  }
+}
+
+@layer images {
+  #char-img-holder {
+    display: grid;
+    grid-template: "i";
+    align-items: center;
+    > * { grid-area: i; }
+
+    /* for the narrow layout */
+    max-width: 480px;
+    margin: auto;
+  }
+
+  .mainfig {
+    max-width: 100%;
+  }
+  .bordered {
+    box-shadow: var(--shadow), var(--shadow2);
+    border: 10px solid currentcolor;
+  }
+  #char-pic { filter: drop-shadow(var(--shadow)); }
+
+  figure img { width: 100%; }
+
+  @media (width >= 70rem) {
+    .mainfig {
+      width: 480px;
+      float: right;
+      margin: 0 calc(0px - var(--protrude)) 1em 1em;
+      img { width: 100%; }
+    }
+
+    section:nth-of-type(even) .mainfig { rotate: -1deg; }
+    section:nth-of-type(odd)  .mainfig { rotate: 1.5deg; }
+    #char-pic { rotate: 0deg; }
+  }
+}
+
+@layer switcher {
+  #pic1, #pic2 { transition: all ease 200ms 175ms; }
+
+  :root:has(#switch:checked)       #pic1,
+  :root:not(:has(#switch:checked)) #pic2 {
+    opacity: 0;
+    transition-delay: 0ms;
+    pointer-events: none;
+  }
+
+  #switch {
+    appearance: none;
+    position: absolute;
+  }
+
+  #char-pic label {
+    display: block;
+    width: min-content;
+    margin: 0 auto 1em;
+    text-align: center;
+    padding: 2px 8px 0;
+
+    background: hsl(40deg 25% 95% / 65%);
+    border: 1px solid currentcolor;
+    font-weight: bold;
+
+    cursor: pointer;
+  }
+}
+
+
+@layer phone {
+  @media (width <= 50em) {
+    *      { background-blend-mode: unset; filter: none; }
+    :root  { background: none; }
+    body   { border: 0; margin: 0; }
+    header { margin-left: 0.5em; margin-right: 0.5em; }
+  }
+}

dnd/bio.css

@@ -0,0 +1,38 @@
+@import url(base.css);
+
+@layer base.headings {
+  h2 {
+    margin: 2rem 3rem;
+    position: relative;
+
+    border-bottom: 3px double currentcolor;
+
+    &::before {
+      font-feature-settings: "ornm" 5;
+      position: absolute;
+      left: -1.15em;
+      bottom: 7%;
+      rotate: -5deg;
+    }
+  }
+}
+
+@layer base.other {
+  table {
+    min-width: 20rem;
+    margin: 0 3rem;
+    border-bottom: 2px solid currentcolor;
+  }
+  caption {
+    border-top: 2px solid currentcolor;
+    border-bottom: 1px solid currentcolor;
+
+    font-weight: 700;
+    text-align: center;
+    .and { font-weight: 450; }
+  }
+
+  th, td, caption { padding: 0.125lh 0.5em 0.0625lh; }
+
+  tbody th { text-align: right; }
+}

dnd/index.css

@@ -0,0 +1,71 @@
+@import url(base.css);
+
+@layer {
+  header { row-gap: 0; }
+  header p {
+    grid-area: 2/1/2/4;
+    margin: 0;
+    text-align: center;
+
+    font-size: 1.5rem;
+    font-weight: 600;
+    font-stretch: 90%;
+  }
+}
+
+@layer {
+  .portrait {
+    margin: 0;
+    border: 4px solid currentcolor;
+    box-shadow: var(--shadow);
+    img {
+      display: block;
+      width: 200px;
+      height: 200px;
+    }
+  }
+
+  .char {
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+
+    padding-left: 1em;
+    padding-right: 1em;
+
+    display: grid;
+    gap:     0.5em 2em;
+
+    &:nth-of-type(odd) {
+      grid-template:
+        "portrait name" auto
+        "portrait desc" 1fr / min-content auto;
+    }
+    &:nth-of-type(even) {
+      grid-template:
+        "name portrait" auto
+        "desc portrait" 1fr / auto min-content;
+    }
+
+    .portrait { grid-area: portrait; }
+    h2        { grid-area: name; margin: 0; }
+    > div, p  { grid-area: desc; align-self: start; }
+  }
+}
+
+@layer {
+  .char {
+    margin-top: 2em;
+    padding-top: 2em;
+    border-top: 3px double currentcolor;
+  }
+  .char:last-of-type {
+    padding-bottom: 2em;
+    border-bottom: 3px double currentcolor;
+  }
+
+  h2 small {
+    font-size: 70%;
+    font-weight: 700;
+  }
+}

dnd/index.html

@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>d&amp;d chars</title>
+
+<link rel=stylesheet href=index.css>
+
+<meta name=viewport content='width=device-width; initial-scale=0.75'>
+
+<header>
+  <h1>d<span class=amp>&amp;</span>d chars</h1>
+  <p> blorbos from my tabletop
+</header>
+
+
+<section class=char id=velzek>
+  <figure class=portrait>
+    <a href=velzek>
+      <img src=velzek.webp srcset='velzek2x.webp 2x'>
+    </a>
+  </figure>
+
+  <h2>
+    <a href=velzek>velzek hawthorne</a>
+  </h2>
+
+  <p>
+    anthropologist observing the humanoid society in marikest, when a suspicious
+    sequence of events plunge the city into chaos.
+    (2024–)
+</section>
+
+<section class=char id=marigold>
+  <figure class=portrait>
+    <a href=marigold>
+      <img src=marigold.webp srcset='marigold2x.webp 2x'>
+    </a>
+  </figure>
+
+  <h2>
+    <a href=marigold><small>(call me)</small> marigold</a>
+  </h2>
+
+  <p>
+    disgraced acolyte of bahamut sent out into the world to atone for her
+    mistakes.
+    (2024–)
+</section>
+
+<section class=char id=nex>
+  <figure class=portrait>
+    <a href=nex> <img src=nex.webp srcset='nex2x.webp 2x'> </a>
+  </figure>
+
+  <h2>
+    <a href=nex>nex</a>
+  </h2>
+
+  <p>
+    went to hell and back to stop the world from disintegrating. you know,
+    normal stuff.
+    (2020–24)
+</section>
+
+<section class=char id=kezda>
+  <figure class=portrait>
+    <a href=kezda> <img src=kezda.webp srcset='kezda2x.webp 2x'> </a>
+  </figure>
+
+  <h2>
+    <a href=kezda>kezda</a>
+  </h2>
+
+  <p>
+    little lizard who saw magic one time and never stopped thinking about it
+    <br>
+    (2019; <small>game abandoned but i still like this lil gremlin</small>)
+</section>
+
+
+<footer>
+  <a href=.. aria-label=back>•</a>
+</footer>

dnd/kezda/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>kezda</title>
+
+<link rel=stylesheet href=style.css>
+<link rel=icon       href=icon.webp>
+
+<meta name=viewport content='width=device-width; initial-scale=0.75'>
+
+<header>
+<h1 id=top>kezda</h1>
+</header>
+
+<section id=info>
+  <h2>basic info</h2>
+
+  <figure id=char-pic class=mainfig>
+    <img src=kezda.webp srcset='kezda2x.webp 2x'
+         alt='kezda with their familar poking out of a hole in their hat'>
+  </figure>
+
+  a lil creature
+</section>
+
+<footer>
+  <a href=.. aria-label=back>•</a>
+</footer>

dnd/kezda/style.css

@@ -0,0 +1,3 @@
+@import url(../bio.css);
+
+

dnd/marigold/index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>marigold</title>
+
+<link rel=stylesheet href=style.css>
+<link rel=icon       href=icon.webp>
+
+<meta name=viewport content='width=device-width; initial-scale=0.75'>
+
+
+<header>
+  <h1 id=top>marigold</h1>
+</header>
+
+<section id=info>
+  <h2>basic info</h2>
+
+  <table class=stats>
+    <caption> warlock of bahamut
+    <tbody>
+      <tr> <th> height  <td> 198 cm (6ʹ 6ʺ)
+      <tr> <th> weight  <td> 121 kg (267 ℔)
+      <tr> <th> age     <td> 37
+  </table>
+
+  <p>
+    let’s get it out of the way. her actual name is, um, let’s see here…
+    <span class=ipa>[ˈqχḁʂx̩kɬ̩ːχ]</span>. which is why she goes by ‘marigold’
+    among the humanoids.
+</section>
+
+<footer>
+  <a href=.. aria-label=back>•</a>
+</footer>

dnd/marigold/style.css

@@ -0,0 +1,6 @@
+@import url(../bio.css);
+
+.ipa {
+  font-feature-settings: "ss03" 1;
+  font-variation-settings: "ENLA" 0;
+}

dnd/nex/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>nex</title>
+
+<link rel=stylesheet href=../bio.css>
+<link rel=icon       href=icon.webp>
+
+<meta name=viewport content='width=device-width; initial-scale=0.75'>
+
+
+<header>
+<h1 id=top>nex</h1>
+</header>
+
+<section id=info>
+  <h2>basic info</h2>
+</section>
+
+<footer>
+  <a href=.. aria-label=back>•</a>
+</footer>

dnd/velzek/index.html

@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>velzek hawthorne</title>
+
+<link rel=stylesheet href=style.css>
+<link rel=icon       href=icon.webp>
+
+<meta name=viewport content='width=device-width; initial-scale=0.75'>
+
+<header>
+<h1 id=top>velzek hawthorne</h1>
+</header>
+
+<section id=info>
+  <h2>basic info</h2>
+
+  <figure id=char-pic class=mainfig>
+    <input type=checkbox id=switch>
+    <label for=switch> switch </label>
+
+    <div id=char-img-holder>
+      <a href=clothes.webp id=pic1>
+        <img src=clothes.s.webp srcset='clothes.s2x.webp 2x'
+             alt='velzek the kobold in green priest garments'>
+      </a>
+
+      <a href=armour.webp id=pic2>
+        <img src=armour.s.webp srcset='armour.s2x.webp 2x'
+             alt='velzek the kobold in metal armour holding a mace'>
+      </a>
+    </div>
+  </figure>
+
+  <table class=stats>
+    <caption>
+      cleric of <a href=#suveesha>suveesha</a>
+      <span class=and>and anthropologist</span>
+    <tbody>
+      <tr> <th> height        <td> 74 cm (2ʹ 5ʺ)
+      <tr> <th> weight        <td> 18 kg (40 ℔)
+      <tr> <th> age           <td> 32
+      <tr> <th> year of birth <td> 1187
+  </table>
+
+  <p>
+    <dfn>velzek</dfn> is a kobold from a community called
+    <a href=#ekkel>ekkel</a>, north of the ruins of avaro’s dungeon. around
+    eight years ago, she and four other kobolds arrived at the temple of berei,
+    next to the green on the south border of marikest.
+
+  <table>
+    <caption> velzek’s companions
+    <tbody>
+      <tr> <th> yarva bitterbrush <td> 26, he/him
+      <tr> <th> keshku æstivæ     <td> 28, she/her
+      <tr> <th> volek ruba        <td> 23, she/her
+      <tr> <th> tokil arceuthus   <td> 25, he/him
+  </table>
+  <!--
+    purshia tridentata
+    æstīvus: summer, but also wheat is triticum aestivum
+    rubus: blackberry/raspberry
+    ἄρκευθος: juniper
+  -->
+
+  <p>
+    until arriving in marikest, the concept of a surname was totally unknown to
+    the kobolds, so they all invented names based on plants for themselves once
+    they became needed. in the city they’ve been under the mentorship of a
+    halfling named <dfn>bobbie fairchild</dfn>.
+
+  <p>
+    the purpose of the kobolds’ arrival in marikest is to study outside
+    cultures, in the hope of easing the ancient distrust between kobolds and
+    surface dwellers. unravelling the common perception of kobolds as stupid
+    and/or evil is hard work, so progress is slow. but the recent political
+    situation has been <em>very</em> interesting to study as a group of
+    outsiders.
+</section>
+
+<section id=ekkel>
+  <h2>ekkel</h2>
+
+  <figure id=ekkel-pic class=mainfig>
+    <a href=map_k_full.webp>
+      <img src=map_k.s.webp srcset='map_k.s2x.webp 2x' class=bordered
+           alt="ekkel is north of the ruins of avaro’s dungeon"
+           title="location of ekkel burrow">
+    </a>
+  </figure>
+
+  <p>
+    velzek’s old home, <dfn>ekkel</dfn>, consists of a network of caves within
+    the windswept wall. despite the historical friction between kobolds and
+    humanoids, ekkel has enjoyed peace for decades, due to its location far away
+    from any major surface roads. like all burrows, ekkel is considered to be a
+    single huge family; kobolds don’t consciously keep track of closer kinship
+    bonds.
+
+  <p>
+    the centre of ekkel is a large cavern; individual living spaces radiate
+    out in a dense network of narrow tunnels. the central space is dominated
+    by a huge temple to suveesha, which serves as a communal kitchen and
+    dining room, as well as a school. outside of her studies into humanoid
+    cultures, velzek’s duties at the temple included teaching young kobolds to
+    read and write, and—like all priests to suveesha—helping in the kitchen.
+
+  <p>
+    ekkel is far from isolated. several of the outer tunnels dip into the
+    underdark, and through there, are connected to other kobold burrows. in
+    fact, due to its safe location, it has been steadily growing in recent
+    decades as more precarious communities decide to migrate there. however,
+    its current population is still only around six thousand.
+</section>
+
+<section id=suveesha>
+  <h2>suveesha</h2>
+
+  <figure id=suveesha-pic class=mainfig>
+    <a href=suveesha.webp>
+      <img src=suveesha.s.webp srcset='suveesha.s2x.webp 2x' class=bordered>
+    </a>
+  </figure>
+
+  <p>
+    the goddess known to humanoids as berei, concerned with home and family,
+    is commonly revered among kobolds in consecuar in a form known as
+    <dfn>suveesha</dfn>. she is represented in this form as a four-horned
+    kobold holding a golden flame; temples to suveesha generally have a
+    pair of huge braziers outside the entrance, providing warmth to the
+    community.
+
+  <p>
+    it is claimed by some senior members of the clergy that ekkel is
+    particularly blessed by suveesha, and insulated from the troubles of the
+    outside world. maybe it is. or maybe it’s just that, from the perspective of
+    the surface world, it’s in the middle of nowhere.
+
+  <p>
+    while amongst the humanoids, velzek and the others have been instructed to
+    adopt berei’s more familiar symbols: a bundle of wheat, a sickle, and a
+    rising sun.
+</section>
+
+<footer>
+  <a href=.. aria-label=back>•</a>
+</footer>

dnd/velzek/style.css

@@ -0,0 +1,8 @@
+@import url(../bio.css);
+
+@layer {
+  #char-pic {
+    shape-outside: polygon(100% 0%, 13% 0%, 13% 25%, 0% 27%,
+                           0% 51%, 18% 60%, 21% 100%, 100% 100%);
+  }
+}