5 files changed, 936 insertions, 0 deletions

diff --git a/site/assets/icon.png b/site/assets/icon.png
new file mode 100644
index 0000000..f182cc1
--- /dev/null
+++ b/site/assets/icon.png
diff --git a/site/assets/new.scss b/site/assets/new.scss
new file mode 100644
index 0000000..73c4ed8
--- /dev/null
+++ b/site/assets/new.scss
@@ -0,0 +1,679 @@
+---
+---
+
+:root {
+  --backgroundColor: #fdfdfd;
+  --textColor: #303030;
+  --secondaryTextColor: #404040;
+  --mutedTextColor: #707070;
+  --subtleBackgroundColor: #f5f5f5;
+  --heartedBackgroundColor: #ffe2e2;
+  --selectionBackgroundColor: #ffc;
+  --linkColor: #2357cd;
+  --borderColor: #ccc;
+  --hrColor: #888;
+  --activeColor: #74d274;
+  --langBackgroundColor: #eeeeee;
+  --langShadowColor: transparent;
+  --logoColor: #cccccc;
+  --photoBackground: #f4f4f4;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --backgroundColor: #151615;
+    --textColor: #dbdfdf;
+    --secondaryTextColor: #cfd5d5;
+    --mutedTextColor: #b4b6b8;
+    --subtleBackgroundColor: #3a3b3b;
+    --heartedBackgroundColor: #652222;
+    --selectionBackgroundColor: #19446b;
+    --linkColor: #6eb8ff;
+    --borderColor: #414141;
+    --hrColor: #888;
+    --activeColor: #74d274;
+    --langBackgroundColor: #2c2c2c;
+    --langShadowColor: #0b0c0b33;
+    --logoColor: #555555;
+    --photoBackground: #1a1a1a;
+  }
+}
+
+body {
+  background: var(--backgroundColor);
+  color: var(--textColor);
+  line-height: 1.7em;
+  padding: 0 2.5em;
+  margin: 0;
+  font-size: 18px;
+  word-wrap: break-word;
+}
+
+body, kbd {
+  font-family: system-ui, sans-serif;
+}
+
+a {
+  color: var(--linkColor);
+}
+
+::selection {
+  background: var(--selectionBackgroundColor);
+}
+
+header {
+  padding-top: 2.5em;
+}
+
+footer {
+  padding-bottom: 2.5em;
+}
+
+main {
+  padding-top: 1em;
+  padding-bottom: 3em;
+}
+
+header,
+main,
+footer {
+  max-width: 36em;
+  margin: auto;
+}
+
+h1, h2, h3, h4, h5, h6, .font {
+  font-family: 'Readex Pro', sans-serif;
+}
+
+.plain {
+  font-family: system-ui, sans-serif
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 1.4em 0 1em 0;
+  font-weight: normal;
+}
+
+.logo {
+  width: 2em;
+
+  path {
+    stroke: var(--logoColor);
+  }
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+}
+
+.post-body  {
+  .logo-container {
+    line-height: 1em;
+    color: var(--mutedTextColor);
+  }
+  
+  .logo {
+    width: 1em;
+    margin-left: .8em;
+    margin-right: .4em;
+
+    path { 
+      stroke: var(--mutedTextColor);
+      stroke-width: 22; 
+    }
+  }
+
+  .h1 {
+    font-size: 1.5rem;
+  }
+}
+
+.h1 {
+  font-size: 1.2rem;
+  font-weight: normal;
+  margin-bottom: 0;
+}
+
+.text {
+  margin-right: .4rem;
+  font-size: inherit;
+  font-weight: normal;
+  display: inline-block;
+  margin-top: 0;
+}
+
+.terminal .line {
+  padding: 0;
+  margin-bottom: 1em;
+  line-height: 1.6em;
+}
+
+.terminal {
+  list-style: none;
+  padding-left: 0;
+
+  li {
+    padding: .1rem 0;
+  }
+
+  ul {
+    margin-top: 0.5rem;
+  }
+}
+
+.hr {
+  border: 0;
+  border-left: .7rem solid var(--textColor);
+  height: .7rem;
+  margin: 3rem 0;
+}
+
+.notes {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  .note {
+    border-bottom: 1px solid var(--borderColor);
+    padding-bottom: 3em;
+    margin-top: 3em;
+  }
+}
+
+.targeted {
+  color: var(--activeColor);
+  margin-right: .2em;
+  display: inline;
+}
+
+.note {
+  scroll-margin: 2em;
+
+  &:last-of-type {
+    border-bottom: 0;
+  }
+
+  .targeted {
+    display: none; 
+  }
+
+  &:target .targeted {
+    display: inline;
+  }
+  p:first-child, blockquote:first-child { margin-top: 0; }
+  p:last-child, blockquote:last-child, img:last-child { margin-bottom: 0; }
+}
+
+.note-heading {
+  font-size: .8em;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  color: var(--mutedTextColor);
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+blockquote {
+  &::before {
+    content: '“';
+    font-size: 2rem;
+    position: absolute;
+    margin-left: -.5em;
+    color: var(--secondaryTextColor);
+    font-family: sans-serif;
+  }
+}
+
+img {
+  max-width: 100%;
+  margin: 1em 0;
+
+  &[width] {
+    margin: 0;
+    vertical-align: middle;
+  }
+}
+
+hr {
+  margin: 2em 0;
+  border: 0;
+  border-bottom: 1px solid var(--hrColor);
+}
+
+.pagination {
+  margin-top: 4em;
+}
+
+article {
+  font-family: system-ui, sans-serif;
+  font-size: 16px;
+}
+
+.smol {
+  font-size: .8em;
+  font-weight: normal;
+}
+
+.task-list-item-checkbox {
+  margin-right: .5em;
+  vertical-align: middle;
+}
+
+.entry-title {
+  margin: 0;
+}
+
+.entry {
+  margin-bottom: 3em;
+}
+
+.lang {
+  font-size: .8rem;
+  display: inline-flex;
+  margin-top: 2em;
+  white-space: nowrap;
+  box-shadow: 0 5px 15px var(--langShadowColor);
+
+  a[aria-current] {
+    color: var(--textColor);
+    
+    &:before {
+      content: "●";
+      color: var(--activeColor);
+    }
+  }
+
+  a {
+    background-color: var(--langBackgroundColor);
+    border-color: var(--borderColor);
+    color: var(--mutedTextColor);
+    padding: 4px 16px;
+    margin-right: 1px;
+    text-decoration: none;
+
+    &:first-child {
+      border-top-left-radius: 6px;
+      border-bottom-left-radius: 6px;
+    }
+
+    &:last-child {
+      border-top-right-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+
+    &:hover {
+      background: var(--langBackgroundColor);
+    }
+
+    &:focus {
+      z-index: 1;
+    }
+
+    &:before {
+      content: "○";
+      color: var(--borderColor);
+      padding-right: 10px;
+    }
+  }
+}
+
+.styled-link {
+  margin-left: .4rem;
+  font-size: .7em;
+}
+
+time {
+  font-size: .8em;
+  color: var(--mutedTextColor);
+}
+
+.desc {
+  color: var(--mutedTextColor);
+  font-size: 0.8em;
+}
+
+@keyframes flash {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.timestamp-colon {
+  animation-name: flash;
+  animation-duration:  2s;
+  animation-timing-function: step-end;
+  animation-iteration-count: infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .timestamp-colon {
+    animation-name: none;
+  }
+}
+
+.offsetthis {
+  vertical-align: super;
+  font-size: .6em;
+}
+
+.photos {
+  display: flex;
+  gap: 1em;
+  flex-wrap: nowrap;
+  overflow: auto;
+  align-items: center;
+
+  .image-link {
+    flex-shrink: 0;
+  }
+
+  img {
+    background-color: var(--photoBackground);
+  }
+}
+
+figure {
+  margin: 1em 0 3em;
+
+  img {
+    margin: 0 auto;
+    max-height: calc(100vh - 6em);
+    background-color: var(--photoBackground);
+    display: block;
+  }
+  
+  .image-link {
+    display: block;
+    width: fit-content;
+    margin: auto;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+[data-page-title="Photos"] {
+  header, main, footer {
+    max-width: 100%;
+  }
+
+  input {
+    position: absolute;
+    left: -100px;
+
+    &:checked + label path {
+      fill: var(--activeColor);
+    }
+
+    &:focus + label {
+      outline: auto;
+      outline-color: var(--activeColor);
+    }
+  }
+
+  label {
+    top: -50px;
+    left: 100px;
+    padding: .5em;
+    cursor: pointer;
+    position: relative;
+    display: inline-flex;
+  }
+
+  label path {
+    fill: var(--logoColor);
+  }
+}
+
+.photos-wrapper {
+  &:focus { outline: none; }
+  scroll-behavior: smooth;
+  margin-top: -40px;
+  clear: both;
+  text-align: center;
+}
+
+.back-link {
+  text-decoration: none;
+  color: var(--textColor);
+  background-color: var(--langBackgroundColor);
+  width: 1.6em;
+  text-align: center;
+  line-height: 1.6em;
+  aspect-ratio: 1/1;
+  display: inline-block;
+  border-radius:  4em;
+}
+
+[value*="grid"]:checked ~ .photos-wrapper {
+  display: grid;
+  column-gap: 2.5em;
+  grid-template-columns: repeat(2, 1fr);
+  // https://caniuse.com/mdn-css_properties_grid-template-rows_masonry
+  grid-template-rows: masonry;
+
+  figure {
+    margin-bottom: 0;
+  }
+
+  img {
+    max-height: none;
+    height: auto;
+  }
+}
+
+[value="grid3fr"]:checked ~ .photos-wrapper {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+[value="x-scroll"]:checked ~ .photos-wrapper {
+  display: flex;
+  overflow: auto;
+  gap: 1.5em;
+  scroll-snap-type: x mandatory;
+  scroll-snap-align: center;
+
+  figure {
+    scroll-snap-align: center;
+    margin-bottom: 0;
+    flex-shrink: 0;
+
+    &:has(.portrait) figcaption {
+      max-width: calc(100vh * 0.667 - 6em);
+      margin: auto;
+    }
+
+    &:has(.landscape) figcaption {
+      max-width: calc(100vw * 0.667 - 2em);
+      margin: auto;
+    }
+  }
+
+
+  img {
+    max-height: calc(100vh - 6em);
+    max-width: calc(100vw - 5em);
+    flex-shrink: 0;
+  }
+}
+
+figcaption {
+  padding: .5em 1em;
+
+  p {
+    margin: 0;
+  }
+}
+
+// This ensures that
+// 1. screens that are too short
+// 2. screens that are not tall enough to display the full width of a 3:2 image
+//    at height: (100v - 6em) height
+// don't get the option to use horizontal scroll.
+
+// https://github.com/web-platform-tests/wpt/pull/34865
+// @media (max-height: 540px), (max-width: calc((100vh - 6em) * 1.5)) {
+@media (max-height: 540px), (max-width: calc(100vh * 1.4)) {
+    body {
+      padding: 0 2em;
+    }
+
+    .photos-wrapper {
+      margin-left: -2em;
+      margin-right: -2em;
+
+      img {
+        max-height: none;
+
+        &.landscape {
+          height: calc(100vw / 1.5);
+        }
+        &.portrait {
+          height: calc(100vw / 0.667);
+        }
+        &.square {
+          height: 100vw;
+        }
+      }
+    }
+    
+    [name="layout"] {
+      &, + label { visibility: hidden; }
+    }
+}
+
+.stories {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  overflow: auto;
+  padding: 10px;
+  margin: -10px;
+}
+
+open-stories {
+  .count {
+    font-size: 0.8em;
+  }
+  &::part(dialog):focus {
+    outline: none;
+  }
+
+  &:not(:defined),
+  &::part(button) {
+    font-family: system-ui, sans-serif;
+    border: 1px solid var(--borderColor);
+    box-shadow: inset 0 0 0 2px var(--backgroundColor);
+    color: var(--textColor);
+    background: var(--subtleBackgroundColor);
+    padding: 1em 0;
+    text-align: center;
+    height: 76px;
+    width: 76px;
+    border-radius: 50%;
+    font-size: 0.65em;
+    box-sizing: border-box;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    transition: all .3s;
+    text-transform: lowercase;
+    line-height: normal;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--linkColor);
+      color: var(--backgroundColor);
+      transform: scale(1.05);
+    }
+  }
+
+  
+  &:not([is-highlight])::part(button) {
+    border-color: var(--secondaryTextColor);
+  }
+  
+  &:not(.is-read):not(.is-empty):not([is-highlight])::part(button) {
+    border-color: var(--linkColor);
+  }
+
+  
+  &.is-empty::part(button) {
+    pointer-events: none;
+    opacity: 0.5;
+    overflow: hidden;
+    position: relative;
+
+    &:before {
+      display: block;
+      content: '';
+      border-left: 1px solid var(--mutedTextColor);
+      position: absolute;
+      transform: rotate(-45deg);
+      top: 0;
+      left: 0;
+      width: 150%;
+      height: 150%;
+      transform-origin: top left;
+    }
+  }
+}
+
+.monospace {
+  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;  
+  font-size: 0.9em;
+}
+
+open-heart.text-open-heart {
+  display: inline;
+  margin-left: 1em;
+  transition: all .4s;
+
+  &:not([disabled]):hover {
+    cursor: pointer;
+    color: var(--activeColor);
+  }
+
+  .on { display: none; }
+
+  &[aria-pressed="true"] {
+    border-color: var(--heartedBackgroundColor);
+    .on { display: initial; }
+    .off { display: none; }
+  }
+
+  &[count]::after {
+    content: "(" attr(count) ")";
+  }
+}
+
+kbd {
+  border: 1px solid var(--borderColor);
+  padding: 1px 4px;
+  border-radius: 3px;
+  box-shadow: 0 1px;
+  font-size: 0.9em;
+}
+
+nav {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: .6em;
+  margin: .6em 0;
+}
diff --git a/site/assets/site.js b/site/assets/site.js
new file mode 100644
index 0000000..4e72511
--- /dev/null
+++ b/site/assets/site.js
@@ -0,0 +1,32 @@
+function settime() {
+  const timestamp = document.querySelector('[data-timestamp-text]')
+  if (!timestamp || !('Intl' in window)) return
+
+  const options = {
+    timeZone: "Asia/Taipei",
+    timeStyle: "short",
+    hour12: false
+  }
+
+  // https://gist.github.com/muan/e7414b6241f088090acd916ed965540e
+  let time = new Intl.DateTimeFormat(navigator.language || "zh-TW", options).format(new Date())
+
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=1262801
+  if (time.match(/^24:/)) time = time.replace('24:', '00:')
+
+  // Setting interpolated string instead of just the time because
+  // if there's no JS there should be no mentions of current time
+  const text = timestamp.getAttribute('data-timestamp-text').replace('{time}', time)
+  timestamp.innerHTML = text.replace(':', '<span class="timestamp-colon" data-colon>:</span>')
+
+  const now = new Date()
+  const sec = now.getSeconds()
+  const secondIsEven = sec % 2 === 0
+  const colon = document.querySelector('[data-colon]')
+  if (colon) colon.style.animationDelay = `${(secondIsEven ? 0 : 1000) - now.getMilliseconds()}ms`
+
+  const delay = 60000 - ((sec * 1000) + now.getMilliseconds())
+  setTimeout(settime, delay)
+}
+
+settime()
diff --git a/site/assets/syntax.css b/site/assets/syntax.css
new file mode 100644
index 0000000..de3ac90
--- /dev/null
+++ b/site/assets/syntax.css
@@ -0,0 +1,225 @@
+
+pre, code {
+  font-family: 'Menlo', monospace;
+}
+
+code {
+  font-size: 0.85em;
+}
+
+pre code {
+  font-size: 0.9em;
+}
+
+:root {
+  --syntaxBackground: #ffffff;
+  --hll: #ffffcc;
+  --c: #999988;
+  --err: #a61717;
+  --errBackground: #e3d2d2;
+  --k: #000000;
+  --o: #000000;
+  --cm: #999988;
+  --cp: #999999;
+  --c1: #999988;
+  --cs: #999999;
+  --gd: #000000;
+  --ge: #000000;
+  --gr: #aa0000;
+  --gh: #999999;
+  --gi: #000000;
+  --go: #888888;
+  --gp: #555555;
+  --gu: #aaaaaa;
+  --gt: #aa0000;
+  --kc: #000000;
+  --kd: #000000;
+  --kn: #000000;
+  --kp: #000000;
+  --kr: #000000;
+  --kt: #445588;
+  --m: #009999;
+  --s: #d01040;
+  --na: #008080;
+  --nb: #0086B3;
+  --nc: #445588;
+  --no: #008080;
+  --nd: #3c5d5d;
+  --ni: #800080;
+  --ne: #990000;
+  --nf: #990000;
+  --nl: #990000;
+  --nn: #555555;
+  --nt: #000080;
+  --nv: #008080;
+  --ow: #000000;
+  --w: #bbbbbb;
+  --mf: #009999;
+  --mh: #009999;
+  --mi: #009999;
+  --mo: #009999;
+  --sb: #d01040;
+  --sc: #d01040;
+  --sd: #d01040;
+  --s2: #d01040;
+  --se: #d01040;
+  --sh: #d01040;
+  --si: #d01040;
+  --sx: #d01040;
+  --sr: #009926;
+  --s1: #d01040;
+  --ss: #990073;
+  --bp: #999999;
+  --vc: #008080;
+  --vg: #008080;
+  --vi: #008080;
+  --il: #009999;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --syntaxBackground: #121615;
+    --hll: #002b36;
+    --c: #586e75;
+    --err: #e3d2d2;
+    --errBackground: #a61717;
+    --k: #859900;
+    --o: #859900;
+    --cm: #586e75;
+    --c1: #586e75;
+    --gd: #ffdddd;
+    --ge: #2aa198;
+    --gh: #cb4b16;
+    --gi: #ddffdd;
+    --gu: #cb4b16;
+    --m: #74b9b9;
+    --s: #9faf74;
+    --kc: #cb4b16;
+    --kd: #2aa198;
+    --kn: #2aa198;
+    --kp: #2aa198;
+    --kr: #2aa198;
+    --nb: #b58900;
+    --no: #cb4b16;
+    --ni: #cb4b16;
+    --ne: #cb4b16;
+    --nf: #cb4b16;
+    --nl: #cb4b16;
+    --nt: #7aa1ad;
+    --ow: #2aa198;
+    --sb: #586e75;
+    --sc: #586e75;
+    --sd: #586e75;
+    --s2: #586e75;
+    --se: #586e75;
+    --sh: #586e75;
+    --si: #586e75;
+    --sx: #586e75;
+  }
+}
+
+div.highlight {
+  overflow: hidden;
+  position: relative;
+  margin: 0;
+  background-color: var(--syntaxBackground);
+  padding: .6em 1em;
+  border-radius: 6px;
+  tab-size: 2;
+}
+
+.highlight .gutter {
+  padding-right: 1em;
+  color: #aaa;
+  border-right: 3px solid var(--syntaxBackground);
+}
+
+.highlight .code {
+  padding-left: 1em;
+}
+
+.highlight pre {
+  overflow: auto;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+code {
+  background: var(--syntaxBackground);
+  padding: .2em .6em;
+  border-radius: 4px;
+  vertical-align: middle;
+}
+
+p code {
+  vertical-align: inherit;
+}
+
+pre code {
+  padding: 0;
+  word-wrap: initial;
+  background: transparent;
+}
+
+.hll { background-color: var(--hll) }
+.c { color: var(--c); font-style: italic } /* Comment */
+.err { color: var(--err); background-color: var(--errBackground) } /* Error */
+.k { color: var(--k); font-weight: bold } /* Keyword */
+.o { color: var(--o); font-weight: bold } /* Operator */
+.cm { color: var(--cm); font-style: italic } /* Comment.Multiline */
+.cp { color: var(--cp); font-weight: bold; font-style: italic } /* Comment.Preproc */
+.c1 { color: var(--c1); font-style: italic } /* Comment.Single */
+.cs { color: var(--cs); font-weight: bold; font-style: italic } /* Comment.Special */
+.gd { color: var(--k); background-color: var(--gd) } /* Generic.Deleted */
+.ge { color: var(--ge); font-style: italic } /* Generic.Emph */
+.gr { color: var(--gr) } /* Generic.Error */
+.gh { color: var(--gh) } /* Generic.Heading */
+.gi { color: var(--k); background-color: var(--gi) } /* Generic.Inserted */
+.go { color: var(--go) } /* Generic.Output */
+.gp { color: var(--gp) } /* Generic.Prompt */
+.gs { font-weight: bold } /* Generic.Strong */
+.gu { color: var(--gu) } /* Generic.Subheading */
+.gt { color: var(--gt) } /* Generic.Traceback */
+.kc { color: var(--kc); font-weight: bold } /* Keyword.Constant */
+.kd { color: var(--kd); font-weight: bold } /* Keyword.Declaration */
+.kn { color: var(--kn); font-weight: bold } /* Keyword.Namespace */
+.kp { color: var(--kp); font-weight: bold } /* Keyword.Pseudo */
+.kr { color: var(--kr); font-weight: bold } /* Keyword.Reserved */
+.kt { color: var(--kt); font-weight: bold } /* Keyword.Type */
+.m { color: var(--m) } /* Literal.Number */
+.s { color: var(--s) } /* Literal.String */
+.na { color: var(--na) } /* Name.Attribute */
+.nb { color: var(--nb) } /* Name.Builtin */
+.nc { color: var(--nc); font-weight: bold } /* Name.Class */
+.no { color: var(--no) } /* Name.Constant */
+.nd { color: var(--nd); font-weight: bold } /* Name.Decorator */
+.ni { color: var(--ni) } /* Name.Entity */
+.ne { color: var(--ne); font-weight: bold } /* Name.Exception */
+.nf { color: var(--nf); font-weight: bold } /* Name.Function */
+.nl { color: var(--nl); font-weight: bold } /* Name.Label */
+.nn { color: var(--nn) } /* Name.Namespace */
+.nt { color: var(--nt) } /* Name.Tag */
+.nv { color: var(--nv) } /* Name.Variable */
+.ow { color: var(--ow); font-weight: bold } /* Operator.Word */
+.w { color: var(--w) } /* Text.Whitespace */
+.mf { color: var(--mf) } /* Literal.Number.Float */
+.mh { color: var(--mh) } /* Literal.Number.Hex */
+.mi { color: var(--mi) } /* Literal.Number.Integer */
+.mo { color: var(--mo) } /* Literal.Number.Oct */
+.sb { color: var(--sb) } /* Literal.String.Backtick */
+.sc { color: var(--sc) } /* Literal.String.Char */
+.sd { color: var(--sd) } /* Literal.String.Doc */
+.s2 { color: var(--s2) } /* Literal.String.Double */
+.se { color: var(--se) } /* Literal.String.Escape */
+.sh { color: var(--sh) } /* Literal.String.Heredoc */
+.si { color: var(--si) } /* Literal.String.Interpol */
+.sx { color: var(--sx) } /* Literal.String.Other */
+.sr { color: var(--sr) } /* Literal.String.Regex */
+.s1 { color: var(--s1) } /* Literal.String.Single */
+.ss { color: var(--ss) } /* Literal.String.Symbol */
+.bp { color: var(--bp) } /* Name.Builtin.Pseudo */
+.vc { color: var(--vc) } /* Name.Variable.Class */
+.vg { color: var(--vg) } /* Name.Variable.Global */
+.vi { color: var(--vi) } /* Name.Variable.Instance */
+.il { color: var(--il) } /* Literal.Number.Integer.Long */
+
diff --git a/site/assets/valid-rss-rogers.png b/site/assets/valid-rss-rogers.png
new file mode 100644
index 0000000..8ce6d12
--- /dev/null
+++ b/site/assets/valid-rss-rogers.png