some d&d stuff

Makefile

@@ -1,15 +1,16 @@
-PAGES = index.html pubkey.txt rainbow-quox/index.html velzek/index.html
+PAGES = index.html pubkey.txt rainbow-quox/index.html \
+        dnd/index.html $(wildcard dnd/*/index.html)
 MEDIA = \
   $(wildcard media/*.png) $(wildcard media/*.gif) $(wildcard media/*.webp) \
   $(wildcard media/flags/*) $(wildcard media/buttons/*) \
   $(wildcard media/icons/*) $(wildcard media/bg/*) 8831.png 8831-quox.png \
   $(wildcard rainbow-quox/front/*) $(wildcard rainbow-quox/back/*) \
   $(wildcard rainbow-quox/*.svg) rainbow-quox/palette.svg \
-  $(wildcard velzek/*.webp) $(wildcard velzek/*.png)
+  $(wildcard dnd/*.png) $(wildcard dnd/*.webp) $(wildcard dnd/*/*.webp)
 CSS   = $(shell find fonts -type f) \
         $(patsubst %.scss,%.css, \
           $(wildcard rainbow-quox/style/*) $(wildcard style/*)) \
-        velzek/style.css
+        dnd/base.css dnd/bio.css dnd/index.css $(wildcard dnd/*/style.css)
 SCRIPTS = $(patsubst %.ts,%.js,$(wildcard script/*.ts rainbow-quox/script/*.ts))
 MISC  = $(shell find .well-known -type f)
 ALL   = $(CSS) $(PAGES) $(MEDIA) $(SCRIPTS) $(MISC)

dnd/base.css

@@ -1,5 +1,5 @@
-@layer base, header, footer, images, switcher, phone;
-@import url(../fonts/junicodevf/junicodevf.css) layer(base);
+@layer fonts, base, header, footer, images, switcher, phone;
+@import url(../fonts/junicodevf/junicodevf.css) layer(fonts);
 
 @layer base {
   * { box-sizing: border-box; }
@@ -10,8 +10,8 @@
     --text-color: hsl(350deg 40% 15%);
     --accent-color: hsl(80deg 50% 35%);
     --shadow-color: hsl(from var(--text-color) h 20% 3% / 20%);
-    --shadow: drop-shadow(3px 2px 0 var(--shadow-color));
-    --shadow2: drop-shadow(-2px 0 0 hsl(from var(--text-color) h 20% 7% / 15%));
+    --shadow: 3px 2px 0 var(--shadow-color);
+    --shadow2: -2px 0 0 hsl(from var(--text-color) h 20% 7% / 15%);
   }
 
   :root {
@@ -34,17 +34,18 @@
     background: url(beige-paper.png), hsl(40deg 80% 80%);
     background-blend-mode: multiply;
     border: 10px solid currentcolor;
-    filter: var(--shadow) var(--shadow2);
+    box-shadow: var(--shadow), var(--shadow2);
   }
 
-  figure { filter: var(--shadow2); }
 }
 
 @layer base.fonts {
   :root {
     font-family: JunicodeVF, serif;
-    font-feature-settings:
-      "ccmp", "calt", "liga", "loca", "rlig", "kern", "mark", "mkmk";
+    --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;
@@ -72,32 +73,6 @@
   }
 }
 
-@layer base.headings {
-  h1, h2, h3, h4, h5, h6 {
-    font-stretch: 75%;
-    font-variation-settings: "ENLA" 0;
-  }
-
-  h2 {
-    margin: 1em;
-    position: relative;
-    border-bottom: 3px double currentcolor;
-
-    font-size: 225%;
-    font-weight: 500;
-
-    &::before {
-      content: '•';
-      font-size: 80%;
-      font-feature-settings: "ornm" 5;
-      position: absolute;
-      left: -1.15em;
-      bottom: 7%;
-      rotate: -5deg;
-    }
-  }
-}
-
 @layer base.other {
   a {
     color: inherit;
@@ -111,19 +86,35 @@
     font-style: italic;
   }
 
-  dl { margin: 0 1em; }
-  dt { font-weight: bold; }
-  dd { margin: 0; }
+  .amp {
+    font-size: 75%;
+    font-weight: 550;
+  }
 
-  @media (width >= 70rem) {
-    dl {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      column-gap: 1em;
+  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;
     }
-
-    dt { grid-column-start: 1; }
-    dd { grid-column-start: 2; }
   }
 }
 
@@ -173,7 +164,7 @@
 }
 
 @layer images {
-  #velzek-img-holder {
+  #char-img-holder {
     display: grid;
     grid-template: "i";
     align-items: center;
@@ -184,37 +175,36 @@
     margin: auto;
   }
 
-  img {
-    filter: var(--shadow2);
+  .mainfig {
     max-width: 100%;
-    &.bordered { border: 10px solid currentcolor; }
   }
+  .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) {
-    figure {
+    .mainfig {
       width: 480px;
       float: right;
       margin: 0 calc(0px - var(--protrude)) 1em 1em;
       img { width: 100%; }
     }
 
-    #velzek-pic {
-      shape-outside: polygon(100% 0%, 13% 0%, 13% 25%, 0% 27%,
-                             0% 51%, 18% 60%, 21% 100%, 100% 100%);
-    }
-
-    #ekkel-pic    { rotate: -2deg; }
-    #suveesha-pic { rotate: 3deg; }
+    section:nth-of-type(even) .mainfig { rotate: -1deg; }
+    section:nth-of-type(odd)  .mainfig { rotate: 1.5deg; }
+    #char-pic { rotate: 0deg; }
   }
 }
 
 @layer switcher {
-  #velzek-pic img {
-    transition: all ease 200ms 175ms;
-  }
+  #pic1, #pic2 { transition: all ease 200ms 175ms; }
 
-  :root:has(#switch:checked)       #clothes-pic,
-  :root:not(:has(#switch:checked)) #armour-pic  {
+  :root:has(#switch:checked)       #pic1,
+  :root:not(:has(#switch:checked)) #pic2 {
     opacity: 0;
     transition-delay: 0ms;
     pointer-events: none;
@@ -225,7 +215,7 @@
     position: absolute;
   }
 
-  #velzek-pic label {
+  #char-pic label {
     display: block;
     width: min-content;
     margin: 0 auto 1em;

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

@@ -8,14 +8,6 @@
 
 <meta name=viewport content='width=device-width; initial-scale=0.75'>
 
-<meta property=og:type content=article>
-<meta property=og:title content="velzek hawthorne">
-<meta property=og:description content="kobold cleric and anthropologist">
-<meta property=og:url content="https://niss.website/velzek/">
-<meta property=og:image  content="https://niss.website/velzek/icon.png">
-<meta name=twitter:card  content=summary_large_image>
-<meta name=twitter:image content="https://niss.website/velzek/clothes.webp">
-
 <header>
 <h1 id=top>velzek hawthorne</h1>
 </header>
@@ -23,36 +15,33 @@
 <section id=info>
   <h2>basic info</h2>
 
-  <figure id=velzek-pic>
+  <figure id=char-pic class=mainfig>
     <input type=checkbox id=switch>
     <label for=switch> switch </label>
 
-    <div id=velzek-img-holder>
-      <a href=clothes.webp>
-        <img id=clothes-pic
-             src=clothes_small.webp srcset='clothes_small2x.webp 2x'
+    <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>
-        <img id=armour-pic
-             src=armour_small.webp srcset='armour_small2x.webp 2x'
+      <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>
 
-  <p>
-    <strong>cleric of <a href=#suveesha>suveesha</a></strong>
-    and anthropologist
-
-  <dl>
-    <dt>height        <dd> 74 cm (2ʹ 5ʺ)
-    <dt>weight        <dd> 18 kg (40 ℔)
-    <dt>age           <dd> 32
-    <dt>year of birth <dd> 1187
-    <dt>alignment     <dd> neutral good
-  </dl>
+  <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
@@ -60,24 +49,26 @@
     eight years ago, she and four other kobolds arrived at the temple of berei,
     next to the green on the south border of marikest.
 
-  <p>
-    her companions are:
-
-  <dl>
-    <dt> yarva bitterbrush <dd> 26, he/him
-      <!-- purshia tridentata -->
-    <dt> keshku aestivae   <dd> 28, she/her
-      <!-- æstīvus: summer, but also wheat is triticum aestivum -->
-    <dt> volek ruba        <dd> 23, she/her
-      <!-- rubus: blackberry/raspberry -->
-    <dt> tokil arceuthus   <dd> 25, he/him
-      <!-- ἄρκευθος: juniper -->
-  </dl>
+  <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.
+    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
@@ -91,9 +82,9 @@
 <section id=ekkel>
   <h2>ekkel</h2>
 
-  <figure id=ekkel-pic>
+  <figure id=ekkel-pic class=mainfig>
     <a href=map_k_full.webp>
-      <img src=map_k.webp class=bordered
+      <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>
@@ -104,7 +95,7 @@
     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
+    single huge family; kobolds don’t consciously keep track of closer kinship
     bonds.
 
   <p>
@@ -126,8 +117,10 @@
 <section id=suveesha>
   <h2>suveesha</h2>
 
-  <figure id=suveesha-pic>
-    <a href=suveesha.webp><img src=suveesha.webp class=bordered></a>
+  <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>
@@ -146,10 +139,10 @@
 
   <p>
     while amongst the humanoids, velzek and the others have been instructed to
-    adopt berei’s symbols for familiarity: a bundle of wheat, a sickle, and a
+    adopt berei’s more familiar symbols: a bundle of wheat, a sickle, and a
     rising sun.
 </section>
 
 <footer>
-  <a href=/index.html aria-label=back>•</a>
+  <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%);
+  }
+}