Update

11 files changed, 147 insertions, 257 deletions

diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss
index aa1ec45..6b3095e 100644
--- a/assets/css/_fonts.scss
+++ b/assets/css/_fonts.scss
@@ -17,6 +17,14 @@
 @font-face {
     font-family:  'IBM Plex Sans';
     font-style:   normal;
+    font-weight:  500;
+    font-display: swap;
+    src:          url('/IBMPlexSans-Medium.woff2') format('woff2');
+}
+
+@font-face {
+    font-family:  'IBM Plex Sans';
+    font-style:   normal;
     font-weight:  bold;
     font-display: swap;
     src:          url('/IBMPlexSans-Bold.woff2') format('woff2');
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 9ec6483..3ae810d 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -29,6 +29,7 @@
 @use 'iro-design/src/scopes/headings' as iro-headings;
 @use 'iro-design/src/scopes/invisible-links' as iro-invisible-links;
 @use 'iro-design/src/scopes/lists' as iro-lists;
+@use 'iro-design/src/scopes/tables' as iro-tables;
 @use 'scopes/small';
 
 @use 'iro-design/src/utils';
diff --git a/assets/fonts/IBMPlexSans-Medium.ttf b/assets/fonts/IBMPlexSans-Medium.ttf
new file mode 100644
index 0000000..4de5fea
--- /dev/null
+++ b/assets/fonts/IBMPlexSans-Medium.ttf
diff --git a/content/art/drawings/2022-ava-shading/index.md b/content/art/drawings/2022-autumn-fox/index.md
index 9dcea6a..9dcea6a 100644
--- a/content/art/drawings/2022-ava-shading/index.md
+++ b/content/art/drawings/2022-autumn-fox/index.md
diff --git a/content/art/drawings/2022-ava-shading/pic.png b/content/art/drawings/2022-autumn-fox/pic.png
index 0689364..0689364 100755
--- a/content/art/drawings/2022-ava-shading/pic.png
+++ b/content/art/drawings/2022-autumn-fox/pic.png
diff --git a/content/art/drawings/2022-ava-shading/thumbnail.png b/content/art/drawings/2022-autumn-fox/thumbnail.png
index dc39092..dc39092 100755
--- a/content/art/drawings/2022-ava-shading/thumbnail.png
+++ b/content/art/drawings/2022-autumn-fox/thumbnail.png
diff --git a/content/main.js b/content/main.js
index 760d40a..c843947 100644
--- a/content/main.js
+++ b/content/main.js
@@ -32,7 +32,7 @@
     const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn");
     const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img");
     const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer");
-    const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a"));
+    const figureEls = Array.from(mainEl.querySelectorAll("figure"));
 
     const show = () => {
         visible = true;
@@ -47,7 +47,7 @@
     const setIndex = (i) => {
         thumbnailEls[currentIndex].classList.remove("is-selected");
         currentIndex = i;
-        lightboxImgEl.src = figureEls[i].href;
+        lightboxImgEl.src = figureEls[i].firstElementChild.href;
         thumbnailEls[i].classList.add("is-selected");
     };
 
@@ -70,13 +70,29 @@
             setIndex(i);
         };
 
-        figureEl.addEventListener("click", go);
+        let anchorEl;
+        let imgEl;
+
+        if (figureEl.firstElementChild.tagName === "A") {
+            anchorEl = figureEl.firstElementChild;
+            imgEl = anchorEl.firstElementChild;
+        } else {
+            imgEl = figureEl.firstElementChild;
+            anchorEl = document.createElement("a");
+            anchorEl.href = imgEl.src;
+
+            figureEl.insertBefore(anchorEl, imgEl);
+            figureEl.removeChild(imgEl);
+            anchorEl.appendChild(imgEl);
+        }
+
+        anchorEl.addEventListener("click", go);
 
         const thumbnailButtonEl = document.createElement("button");
         const thumbnailImgEl = document.createElement("img");
 
         thumbnailImgEl.classList.add("o-lightbox__thumbnail-img");
-        thumbnailImgEl.src = figureEl.href;
+        thumbnailImgEl.src = anchorEl.href;
 
         thumbnailButtonEl.classList.add("o-lightbox__thumbnail");
         thumbnailButtonEl.appendChild(thumbnailImgEl);
diff --git a/content/notebook/scrap/design-test.md b/content/notebook/scrap/design-test.md
index 2367513..2a272c3 100644
--- a/content/notebook/scrap/design-test.md
+++ b/content/notebook/scrap/design-test.md
@@ -1,315 +1,177 @@
 ---
-title: Design Test
+title: Markdown Test Page
+last_update: 2022-06-16
 ---
 
-- [Overview](#overview)
-  - [Philosophy](#philosophy)
-- [Block Elements](#block-elements)
-  - [Paragraphs and Line Breaks](#paragraphs-and-line-breaks)
-  - [Headers](#headers)
-  - [Blockquotes](#blockquotes)
-  - [Lists](#lists)
-  - [Code Blocks](#code-blocks)
-- [Span Elements](#span-elements)
-  - [Links](#links)
-  - [Emphasis](#emphasis)
-  - [Code](#code)
+- [Headings](#headings)
+- [Paragraphs](#paragraphs)
+- [Blockquotes](#blockquotes)
+- [Lists](#lists)
+  - [Ordered List](#ordered-list)
+  - [Unordered List](#unordered-list)
+- [Horizontal rule](#horizontal-rule)
+- [Table](#table)
+- [Code](#code)
+  - [Inline code](#inline-code)
+  - [Highlighted](#highlighted)
+- [Inline elements](#inline-elements)
 
-----
-
-## Overview
-
-### Philosophy
-
-Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
-
-Readability, however, is emphasized above all else. A Markdown-formatted
-document should be publishable as-is, as plain text, without looking
-like it's been marked up with tags or formatting instructions. While
-Markdown's syntax has been influenced by several existing text-to-HTML
-filters -- including [Setext](http://docutils.sourceforge.net/mirror/setext.html), [atx](http://www.aaronsw.com/2002/atx/), [Textile](http://textism.com/tools/textile/), [reStructuredText](http://docutils.sourceforge.net/rst.html),
-[Grutatext](http://www.triptico.com/software/grutatxt.html), and [EtText](http://ettext.taint.org/doc/) -- the single biggest source of
-inspiration for Markdown's syntax is the format of plain text email.
-
-## Block Elements
-
-### Paragraphs and Line Breaks
-
-A paragraph is simply one or more consecutive lines of text, separated
-by one or more blank lines. (A blank line is any line that looks like a
-blank line -- a line containing nothing but spaces or tabs is considered
-blank.) Normal paragraphs should not be indented with spaces or tabs.
-
-The implication of the "one or more consecutive lines of text" rule is
-that Markdown supports "hard-wrapped" text paragraphs. This differs
-significantly from most other text-to-HTML formatters (including Movable
-Type's "Convert Line Breaks" option) which translate every line break
-character in a paragraph into a `<br />` tag.
-
-When you *do* want to insert a `<br />` break tag using Markdown, you
-end a line with two or more spaces, then type return.
-
-### Headers
-
-Markdown supports two styles of headers, [Setext] [1] and [atx] [2].
-
-Optionally, you may "close" atx-style headers. This is purely
-cosmetic -- you can use this if you think it looks better. The
-closing hashes don't even need to match the number of hashes
-used to open the header. (The number of opening hashes
-determines the header level.)
-
-
-### Blockquotes
-
-Markdown uses email-style `>` characters for blockquoting. If you're
-familiar with quoting passages of text in an email message, then you
-know how to create a blockquote in Markdown. It looks best if you hard
-wrap the text and put a `>` before every line:
-
-> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
-> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
-> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
-> 
-> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
-> id sem consectetuer libero luctus adipiscing.
-
-Markdown allows you to be lazy and only put the `>` before the first
-line of a hard-wrapped paragraph:
-
-> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
-consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
-Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+---
 
-> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
-id sem consectetuer libero luctus adipiscing.
+# Headings
 
-Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by
-adding additional levels of `>`:
+# Heading one
 
-> This is the first level of quoting.
->
-> > This is nested blockquote.
->
-> Back to the first level.
+Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat commodo id sunt. Nostrud enim ad commodo incididunt cupidatat in ullamco ullamco Lorem cupidatat velit enim et Lorem. Ut laborum cillum laboris fugiat culpa sint irure do reprehenderit culpa occaecat. Exercitation esse mollit tempor magna aliqua in occaecat aliquip veniam reprehenderit nisi dolor in laboris dolore velit.
 
-Blockquotes can contain other Markdown elements, including headers, lists,
-and code blocks:
+## Heading two
 
-> ## This is a header.
-> 
-> 1.   This is the first list item.
-> 2.   This is the second list item.
-> 
-> Here's some example code:
-> 
->     return shell_exec("echo $input | $markdown_script");
+Aute officia nulla deserunt do deserunt cillum velit magna. Officia veniam culpa anim minim dolore labore pariatur voluptate id ad est duis quis velit dolor pariatur enim. Incididunt enim excepteur do veniam consequat culpa do voluptate dolor fugiat ad adipisicing sit. Labore officia est adipisicing dolore proident eiusmod exercitation deserunt ullamco anim do occaecat velit. Elit dolor consectetur proident sunt aliquip est do tempor quis aliqua culpa aute. Duis in tempor exercitation pariatur et adipisicing mollit irure tempor ut enim esse commodo laboris proident. Do excepteur laborum anim esse aliquip eu sit id Lorem incididunt elit irure ea nulla dolor et. Nulla amet fugiat qui minim deserunt enim eu cupidatat aute officia do velit ea reprehenderit.
 
-Any decent text editor should make email-style quoting easy. For
-example, with BBEdit, you can make a selection and choose Increase
-Quote Level from the Text menu.
+### Heading three
 
+Voluptate cupidatat cillum elit quis ipsum eu voluptate fugiat consectetur enim. Quis ut voluptate culpa ex anim aute consectetur dolore proident voluptate exercitation eiusmod. Esse in do anim magna minim culpa sint. Adipisicing ipsum consectetur proident ullamco magna sit amet aliqua aute fugiat laborum exercitation duis et.
 
-### Lists
+#### Heading four
 
-Markdown supports ordered (numbered) and unordered (bulleted) lists.
+Commodo fugiat aliqua minim quis pariatur mollit id tempor. Non occaecat minim esse enim aliqua adipisicing nostrud duis consequat eu adipisicing qui. Minim aliquip sit excepteur ipsum consequat laborum pariatur excepteur. Veniam fugiat et amet ad elit anim laborum duis mollit occaecat et et ipsum et reprehenderit. Occaecat aliquip dolore adipisicing sint labore occaecat officia fugiat. Quis adipisicing exercitation exercitation eu amet est laboris sunt nostrud ipsum reprehenderit ullamco. Enim sint ut consectetur id anim aute voluptate exercitation mollit dolore magna magna est Lorem. Ut adipisicing adipisicing aliqua ullamco voluptate labore nisi tempor esse magna incididunt.
 
-Unordered lists use asterisks, pluses, and hyphens -- interchangably
--- as list markers:
+##### Heading five
 
-*   Red
-*   Green
-*   Blue
+Veniam enim esse amet veniam deserunt laboris amet enim consequat. Minim nostrud deserunt cillum consectetur commodo eu enim nostrud ullamco occaecat excepteur. Aliquip et ut est commodo enim dolor amet sint excepteur. Amet ad laboris laborum deserunt sint sunt aliqua commodo ex duis deserunt enim est ex labore ut. Duis incididunt velit adipisicing non incididunt adipisicing adipisicing. Ad irure duis nisi tempor eu dolor fugiat magna et consequat tempor eu ex dolore. Mollit esse nisi qui culpa ut nisi ex proident culpa cupidatat cillum culpa occaecat anim. Ut officia sit ea nisi ea excepteur nostrud ipsum et nulla.
 
-is equivalent to:
+###### Heading six
 
-+   Red
-+   Green
-+   Blue
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
-and:
+[[Top]](#top)
 
--   Red
--   Green
--   Blue
+# Paragraphs
 
-Ordered lists use numbers followed by periods:
+Incididunt ex adipisicing ea ullamco consectetur in voluptate proident fugiat tempor deserunt reprehenderit ullamco id dolore laborum. Do laboris laboris minim incididunt qui consectetur exercitation adipisicing dolore et magna consequat magna anim sunt. Officia fugiat Lorem sunt pariatur incididunt Lorem reprehenderit proident irure. Dolore ipsum aliqua mollit ad officia fugiat sit eu aliquip cupidatat ipsum duis laborum laborum fugiat esse. Voluptate anim ex dolore deserunt ea ex eiusmod irure. Occaecat excepteur aliqua exercitation aliquip dolor esse eu eu.
 
-1.  Bird
-2.  McHale
-3.  Parish
+Officia dolore laborum aute incididunt commodo nisi velit est est elit et dolore elit exercitation. Enim aliquip magna id ipsum aliquip consectetur ad nulla quis. Incididunt pariatur dolor consectetur cillum enim velit cupidatat laborum quis ex.
 
-It's important to note that the actual numbers you use to mark the
-list have no effect on the HTML output Markdown produces. The HTML
-Markdown produces from the above list is:
+Officia irure in non voluptate adipisicing sit amet tempor duis dolore deserunt enim ut. Reprehenderit incididunt in ad anim et deserunt deserunt Lorem laborum quis. Enim aute anim labore proident laboris voluptate elit excepteur in. Ex labore nulla velit officia ullamco Lorem Lorem id do. Dolore ullamco ipsum magna dolor pariatur voluptate ipsum id occaecat ipsum. Dolore tempor quis duis commodo quis quis enim.
 
-If you instead wrote the list in Markdown like this:
+[[Top]](#top)
 
-1.  Bird
-1.  McHale
-1.  Parish
+# Blockquotes
 
-or even:
+Ad nisi laborum aute cupidatat magna deserunt eu id laboris id. Aliquip nulla cupidatat sint ex Lorem mollit laborum dolor amet est ut esse aute. Nostrud ex consequat id incididunt proident ipsum minim duis aliqua ut ex et ad quis. Laborum sint esse cillum anim nulla cillum consectetur aliqua sit. Nisi excepteur cillum labore amet excepteur commodo enim occaecat consequat ipsum proident exercitation duis id in.
 
-3. Bird
-1. McHale
-8. Parish
+> Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.
 
-you'd get the exact same HTML output. The point is, if you want to,
-you can use ordinal numbers in your ordered Markdown lists, so that
-the numbers in your source match the numbers in your published HTML.
-But if you want to be lazy, you don't have to.
+Labore ea magna Lorem consequat aliquip consectetur cillum duis dolore. Et veniam dolor qui incididunt minim amet laboris sit. Dolore ad esse commodo et dolore amet est velit ut nisi ea. Excepteur ea nulla commodo dolore anim dolore adipisicing eiusmod labore id enim esse quis mollit deserunt est. Minim ea culpa voluptate nostrud commodo proident in duis aliquip minim.
 
-To make lists look nice, you can wrap items with hanging indents:
+> Qui est sit et reprehenderit aute est esse enim aliqua id aliquip ea anim. Pariatur sint reprehenderit mollit velit voluptate enim consectetur sint enim. Quis exercitation proident elit non id qui culpa dolore esse aliquip consequat.
 
-*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
-    viverra nec, fringilla in, laoreet vitae, risus.
-*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
-    Suspendisse id sem consectetuer libero luctus adipiscing.
+Ipsum excepteur cupidatat sunt minim ad eiusmod tempor sit.
 
-But if you want to be lazy, you don't have to:
+> Deserunt excepteur adipisicing culpa pariatur cillum laboris ullamco nisi fugiat cillum officia. In cupidatat nulla aliquip tempor ad Lorem Lorem quis voluptate officia consectetur pariatur ex in est duis. Mollit id esse est elit exercitation voluptate nostrud nisi laborum magna dolore dolore tempor in est consectetur.
 
-*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
-viverra nec, fringilla in, laoreet vitae, risus.
-*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
-Suspendisse id sem consectetuer libero luctus adipiscing.
+Adipisicing voluptate ipsum culpa voluptate id aute laboris labore esse fugiat veniam ullamco occaecat do ut. Tempor et esse reprehenderit veniam proident ipsum irure sit ullamco et labore ea excepteur nulla labore ut. Ex aute minim quis tempor in eu id id irure ea nostrud dolor esse.
 
-List items may consist of multiple paragraphs. Each subsequent
-paragraph in a list item must be indented by either 4 spaces
-or one tab:
+[[Top]](#top)
 
-1.  This is a list item with two paragraphs. Lorem ipsum dolor
-    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
-    mi posuere lectus.
+# Lists
 
-    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
-    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
-    sit amet velit.
+### Ordered List
 
-2.  Suspendisse id sem consectetuer libero luctus adipiscing.
+1. Longan
+2. Lychee
+3. Excepteur ad cupidatat do elit laborum amet cillum reprehenderit consequat quis.
+   Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip aliquip velit pariatur dolore.
+4. Marionberry
+5. Melon
+   - Cantaloupe
+   - Honeydew
+   - Watermelon
+6. Miracle fruit
+7. Mulberry
 
-It looks nice if you indent every line of the subsequent
-paragraphs, but here again, Markdown will allow you to be
-lazy:
+### Unordered List
 
-*   This is a list item with two paragraphs.
+- Olive
+- Orange
+  - Blood orange
+  - Clementine
+- Papaya
+- Ut aute ipsum occaecat nisi culpa Lorem id occaecat cupidatat id id magna laboris ad duis. Fugiat cillum dolore veniam nostrud proident sint consectetur eiusmod irure adipisicing.
+- Passionfruit
 
-    This is the second paragraph in the list item. You're
-only required to indent the first line. Lorem ipsum dolor
-sit amet, consectetuer adipiscing elit.
+[[Top]](#top)
 
-*   Another item in the same list.
+# Horizontal rule
 
-To put a blockquote within a list item, the blockquote's `>`
-delimiters need to be indented:
+In dolore velit aliquip labore mollit minim tempor veniam eu veniam ad in sint aliquip mollit mollit. Ex occaecat non deserunt elit laborum sunt tempor sint consequat culpa culpa qui sit. Irure ad commodo eu voluptate mollit cillum cupidatat veniam proident amet minim reprehenderit.
 
-*   A list item with a blockquote:
+---
 
-    > This is a blockquote
-    > inside a list item.
+In laboris eiusmod reprehenderit aliquip sit proident occaecat. Non sit labore anim elit veniam Lorem minim commodo eiusmod irure do minim nisi. Dolor amet cillum excepteur consequat sint non sint.
 
-To put a code block within a list item, the code block needs
-to be indented *twice* -- 8 spaces or two tabs:
+[[Top]](#top)
 
-*   A list item with a code block:
+# Table
 
-        <code goes here>
+Duis sunt ut pariatur reprehenderit mollit mollit magna dolore in pariatur nulla commodo sit dolor ad fugiat. Laboris amet ea occaecat duis eu enim exercitation deserunt ea laborum occaecat reprehenderit. Et incididunt dolor commodo consequat mollit nisi proident non pariatur in et incididunt id. Eu ut et Lorem ea ex magna minim ipsum ipsum do.
 
-### Code Blocks
+| Table Heading 1 | Table Heading 2 | Center align | Right align | Table Heading 5 |
+| :-------------- | :-------------- | :----------: | ----------: | :-------------- |
+| Item 1          | Item 2          |    Item 3    |      Item 4 | Item 5          |
+| Item 1          | Item 2          |    Item 3    |      Item 4 | Item 5          |
+| Item 1          | Item 2          |    Item 3    |      Item 4 | Item 5          |
+| Item 1          | Item 2          |    Item 3    |      Item 4 | Item 5          |
+| Item 1          | Item 2          |    Item 3    |      Item 4 | Item 5          |
 
-Pre-formatted code blocks are used for writing about programming or
-markup source code. Rather than forming normal paragraphs, the lines
-of a code block are interpreted literally. Markdown wraps a code block
-in both `<pre>` and `<code>` tags.
+Minim id consequat adipisicing cupidatat laborum culpa veniam non consectetur et duis pariatur reprehenderit eu ex consectetur. Sunt nisi qui eiusmod ut cillum laborum Lorem officia aliquip laboris ullamco nostrud laboris non irure laboris. Cillum dolore labore Lorem deserunt mollit voluptate esse incididunt ex dolor.
 
-To produce a code block in Markdown, simply indent every line of the
-block by at least 4 spaces or 1 tab.
+[[Top]](#top)
 
-This is a normal paragraph:
+# Code
 
-    This is a code block.
+## Inline code
 
-Here is an example of AppleScript:
+Ad amet irure est magna id mollit Lorem in do duis enim. Excepteur velit nisi magna ea pariatur pariatur ullamco fugiat deserunt sint non sint. Duis duis est `code in text` velit velit aute culpa ex quis pariatur pariatur laborum aute pariatur duis tempor sunt ad. Irure magna voluptate dolore consectetur consectetur irure esse. Anim magna `<strong>in culpa qui officia</strong>` dolor eiusmod esse amet aute cupidatat aliqua do id voluptate cupidatat reprehenderit amet labore deserunt.
 
-    tell application "Foo"
-        beep
-    end tell
+## Highlighted
 
-A code block continues until it reaches a line that is not indented
-(or the end of the article).
+Et fugiat ad nisi amet magna labore do cillum fugiat occaecat cillum Lorem proident. In sint dolor ullamco ad do adipisicing amet id excepteur Lorem aliquip sit irure veniam laborum duis cillum. Aliqua occaecat minim cillum deserunt magna sunt laboris do do irure ea nostrud consequat ut voluptate ex.
 
-Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
-are automatically converted into HTML entities. This makes it very
-easy to include example HTML source code using Markdown -- just paste
-it and indent it, and Markdown will handle the hassle of encoding the
-ampersands and angle brackets. For example, this:
+```go
+package main
 
-    <div class="footer">
-        &copy; 2004 Foo Corporation
-    </div>
+import (
+    "fmt"
+    "net/http"
+)
 
-Regular Markdown syntax is not processed within code blocks. E.g.,
-asterisks are just literal asterisks within a code block. This means
-it's also easy to use Markdown to write about Markdown's own syntax.
+func handler(w http.ResponseWriter, r *http.Request) {
+    fmt.Fprintf(w, "Hi there, I love %s!", r.URL.Path[1:])
+}
 
+func main() {
+    http.HandleFunc("/", handler)
+    http.ListenAndServe(":8080", nil)
+}
 ```
-tell application "Foo"
-    beep
-end tell
-```
-
-## Span Elements
-
-### Links
-
-Markdown supports two style of links: *inline* and *reference*.
-
-In both styles, the link text is delimited by [square brackets].
-
-To create an inline link, use a set of regular parentheses immediately
-after the link text's closing square bracket. Inside the parentheses,
-put the URL where you want the link to point, along with an *optional*
-title for the link, surrounded in quotes. For example:
-
-This is [an example](http://example.com/) inline link.
 
-[This link](http://example.net/) has no title attribute.
+Ex amet id ex aliquip id do laborum excepteur exercitation elit sint commodo occaecat nostrud est. Nostrud pariatur esse veniam laborum non sint magna sit laboris minim in id. Aliqua pariatur pariatur excepteur adipisicing irure culpa consequat commodo et ex id ad.
 
-### Emphasis
+[[Top]](#top)
 
-Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
-emphasis. Text wrapped with one `*` or `_` will be wrapped with an
-HTML `<em>` tag; double `*`'s or `_`'s will be wrapped with an HTML
-`<strong>` tag. E.g., this input:
+# Inline elements
 
-*single asterisks*
-
-_single underscores_
-
-**double asterisks**
-
-__double underscores__
-
-### Code
-
-To indicate a span of code, wrap it with backtick quotes (`` ` ``).
-Unlike a pre-formatted code block, a code span indicates code within a
-normal paragraph. For example:
-
-Use the `printf()` function.
-
----
+Sint ea anim ipsum ad commodo cupidatat do **exercitation** incididunt et minim ad labore sunt. Minim deserunt labore laboris velit nulla incididunt ipsum nulla. Ullamco ad laborum ea qui et anim in laboris exercitation tempor sit officia laborum reprehenderit culpa velit quis. **Consequat commodo** reprehenderit duis [irure](#!) esse esse exercitation minim enim Lorem dolore duis irure. Nisi Lorem reprehenderit ea amet excepteur dolor excepteur magna labore proident voluptate ipsum. Reprehenderit ex esse deserunt aliqua ea officia mollit Lorem nulla magna enim. Et ad ipsum labore enim ipsum **cupidatat consequat**. Commodo non ea cupidatat magna deserunt dolore ipsum velit nulla elit veniam nulla eiusmod proident officia.
 
-# Headline 1
+![Super wide](http://placekitten.com/1280/800)
 
-## Headline 2
+_Proident sit veniam in est proident officia adipisicing_ ea tempor cillum non cillum velit deserunt. Voluptate laborum incididunt sit consectetur Lorem irure incididunt voluptate nostrud. Commodo ut eiusmod tempor cupidatat esse enim minim ex anim consequat. Mollit sint culpa qui laboris quis consectetur ad sint esse. Amet anim anim minim ullamco et duis non irure. Sit tempor adipisicing ea laboris `culpa ex duis sint` anim aute reprehenderit id eu ea. Aute [excepteur proident](#!) Lorem minim adipisicing nostrud mollit ad ut voluptate do nulla esse occaecat aliqua sint anim.
 
-### Headline 3
+![Not so big](http://placekitten.com/480/400)
 
-#### Headline 4
+Incididunt in culpa cupidatat mollit cillum qui proident sit. In cillum aliquip incididunt voluptate magna amet cupidatat cillum pariatur sint aliqua est _enim **anim** voluptate_. Magna aliquip proident incididunt id duis pariatur eiusmod incididunt commodo culpa dolore sit. Culpa do nostrud elit ad exercitation anim pariatur non minim nisi **adipisicing sunt _officia_**. Do deserunt magna mollit Lorem commodo ipsum do cupidatat mollit enim ut elit veniam ea voluptate.
 
-##### Headline 5
+[![Manny Pacquiao](https://img.youtube.com/vi/s6bCmZmy9aQ/0.jpg)](https://youtu.be/s6bCmZmy9aQ)
 
-###### Headline 6
+Reprehenderit non eu quis in ad elit esse qui aute id [incididunt](#!) dolore cillum. Esse laboris consequat dolor anim exercitation tempor aliqua deserunt velit magna laboris. Culpa culpa minim duis amet mollit do quis amet commodo nulla irure.
diff --git a/scripts/metadata_filter.lua b/scripts/metadata_filter.lua
index 07f060c..b78c480 100644
--- a/scripts/metadata_filter.lua
+++ b/scripts/metadata_filter.lua
@@ -51,9 +51,9 @@ function page_sort(order)
         elseif p2.position then
             return false
         elseif order == "date_desc" then
-            if p1.date then
-                if p2.date then
-                    return p1.date.yyyy_mm_dd > p2.date.yyyy_mm_dd
+            if p1.last_update then
+                if p2.last_update then
+                    return p1.last_update.yyyy_mm_dd > p2.last_update.yyyy_mm_dd
                 else
                     return true
                 end
@@ -155,7 +155,7 @@ function process_pages(global, order, pages_by_id)
         local p = process(global, page)
         if not p.unlisted then
             pages_all:insert(p)
-            if p.date then pages_date_desc:insert(p) end
+            if p.last_update then pages_date_desc:insert(p) end
         end
     end
 
@@ -188,6 +188,7 @@ function d1_page_to_list_item(meta, p)
         title = p.title,
         subtitle = p.subtitle,
         date = p.date,
+        last_update = p.last_update,
         position = p.position,
         url = p.url,
         slug = p.slug,
@@ -204,6 +205,7 @@ function d2_page_to_list_item(meta, cat, p, set_cat_title)
         subtitle = p.subtitle,
         category = set_cat_title and cat.title,
         date = p.date,
+        last_update = p.last_update,
         position = p.position,
         url = p.url,
         slug = p.slug,
@@ -223,6 +225,7 @@ function cat_to_list_cat(cat, allItems)
         title = cat.title,
         description = (cat.description and pandoc.MetaBlocks(pandoc.Para(cat.description))) or
             (not cat.no_description and cat.content),
+        last_update = cat.last_update,
         url = cat.url,
         slug = cat.slug,
         layout = cat.list_layout,
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 1037938..75ea3be 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,4 +1,4 @@
-<article class="l-container l-container--pad-x l-container--pad-y l-container--narrow s-body s-colored-links s-headings s-blockquotes s-code s-lists $if(intro)$s-intro$endif$">
+<article class="l-container l-container--pad-x l-container--pad-y l-container--narrow s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables $if(intro)$s-intro$endif$">
     $if(date)$
         <div class="o-badge s-body__meta u-mb-125">
             $date.long$
diff --git a/yarn.lock b/yarn.lock
index e0a59c1..9d2a6e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1280,7 +1280,7 @@ internal-slot@^1.0.3:
 
 "iro-design@git+https://git.vulpes.one/git/iro-design.git":
   version "1.0.0"
-  resolved "git+https://git.vulpes.one/git/iro-design.git#dc4bf84ad353f8cb15123fabe2be8d56b0a5e6da"
+  resolved "git+https://git.vulpes.one/git/iro-design.git#3d0e5fa8fb7d9755b23b93fa8b6a82cc87cbf69e"
   dependencies:
     "@oddbird/blend" "^0.2.3"
     include-media "^1.4.9"