velzek

2024-12-22 04:27:37 +01:00 · 2024-12-22 04:27:37 +01:00 · 898c7753a4
commit 898c7753a4
parent 7e4518bdaf
30 changed files with 500 additions and 3 deletions
--- a/8
+++ b/8
@ -1,13 +1,15 @@
-PAGES = index.html pubkey.txt rainbow-quox/index.html
+PAGES = index.html pubkey.txt rainbow-quox/index.html velzek/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 rainbow-quox/*.svg) rainbow-quox/palette.svg \
  $(wildcard velzek/*.webp) $(wildcard velzek/*.png)
 CSS   = $(shell find fonts -type f) \
        $(patsubst %.scss,%.css, \
-          $(wildcard rainbow-quox/style/*) $(wildcard style/*))
+          $(wildcard rainbow-quox/style/*) $(wildcard style/*)) \
        velzek/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)
--- a/fonts/junicodevf/junicodevf.css
+++ b/fonts/junicodevf/junicodevf.css
@ -0,0 +1,11 @@
@font-face {
  font-family: JunicodeVF;
  src: url(JunicodeVF-Roman.ttf);
  font-style: normal;
 }
@font-face {
  font-family: JunicodeVF;
  src: url(JunicodeVF-Italic.ttf);
  font-style: italic;
 }
--- a/velzek/armour.webp
+++ b/velzek/armour.webp
--- a/velzek/armour_small.webp
+++ b/velzek/armour_small.webp
--- a/velzek/armour_small2x.webp
+++ b/velzek/armour_small2x.webp
--- a/velzek/beige-paper.png
+++ b/velzek/beige-paper.png
--- a/velzek/classy-fabric.png
+++ b/velzek/classy-fabric.png
--- a/velzek/clothes.webp
+++ b/velzek/clothes.webp
--- a/velzek/clothes_small.webp
+++ b/velzek/clothes_small.webp
--- a/velzek/clothes_small2x.webp
+++ b/velzek/clothes_small2x.webp
--- a/velzek/icon.webp
+++ b/velzek/icon.webp
--- a/velzek/index.html
+++ b/velzek/index.html
@ -0,0 +1,155 @@
 <!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'>
 <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>
 <section id=info>
  <h2>basic info</h2>
  <figure id=velzek-pic>
    <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'
             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'
             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>
  <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.
  <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>
  <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.
  <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>
    <a href=map_k_full.webp>
      <img src=map_k.webp 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>
    <a href=suveesha.webp><img src=suveesha.webp 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 symbols for familiarity: a bundle of wheat, a sickle, and a
    rising sun.
 </section>
 <footer>
  <a href=/index.html aria-label=back>•</a>
 </footer>
--- a/velzek/map_k.webp
+++ b/velzek/map_k.webp
--- a/velzek/map_k_full.webp
+++ b/velzek/map_k_full.webp
--- a/velzek/src/armour.png
+++ b/velzek/src/armour.png
--- a/velzek/src/armour_small.png
+++ b/velzek/src/armour_small.png
--- a/velzek/src/armour_small2x.png
+++ b/velzek/src/armour_small2x.png
--- a/velzek/src/clothes.png
+++ b/velzek/src/clothes.png
--- a/velzek/src/clothes_small.png
+++ b/velzek/src/clothes_small.png
--- a/velzek/src/clothes_small2x.png
+++ b/velzek/src/clothes_small2x.png
--- a/velzek/src/icon.png
+++ b/velzek/src/icon.png
--- a/velzek/src/koboldowo.png
+++ b/velzek/src/koboldowo.png
--- a/velzek/src/map_k.png
+++ b/velzek/src/map_k.png
--- a/velzek/src/map_k_full.kra
+++ b/velzek/src/map_k_full.kra
--- a/velzek/src/map_k_full.png
+++ b/velzek/src/map_k_full.png
--- a/velzek/src/suveesha.kra
+++ b/velzek/src/suveesha.kra
--- a/velzek/src/suveesha.png
+++ b/velzek/src/suveesha.png
--- a/velzek/src/velzek
+++ b/velzek/src/velzek
--- a/velzek/style.css
+++ b/velzek/style.css
@ -0,0 +1,251 @@
@layer base, header, footer, images, switcher, phone;
@import url(../fonts/junicodevf/junicodevf.css) layer(base);
@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: drop-shadow(3px 2px 0 var(--shadow-color));
    --shadow2: drop-shadow(-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;
    filter: 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";
    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.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;
    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;
  }
  dl { margin: 0 1em; }
  dt { font-weight: bold; }
  dd { margin: 0; }
  @media (width >= 70rem) {
    dl {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 1em;
    }
    dt { grid-column-start: 1; }
    dd { grid-column-start: 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 {
  #velzek-img-holder {
    display: grid;
    grid-template: "i";
    align-items: center;
    > * { grid-area: i; }
    /* for the narrow layout */
    max-width: 480px;
    margin: auto;
  }
  img {
    filter: var(--shadow2);
    max-width: 100%;
    &.bordered { border: 10px solid currentcolor; }
  }
  @media (width >= 70rem) {
    figure {
      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; }
  }
 }
@layer switcher {
  #velzek-pic img {
    transition: all ease 200ms 175ms;
  }
  :root:has(#switch:checked)       #clothes-pic,
  :root:not(:has(#switch:checked)) #armour-pic  {
    opacity: 0;
    transition-delay: 0ms;
    pointer-events: none;
  }
  #switch {
    appearance: none;
    position: absolute;
  }
  #velzek-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; }
  }
 }
--- a/velzek/suveesha.webp
+++ b/velzek/suveesha.webp