Update

15 files changed, 429 insertions, 105 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 2a271ff..b2a437b 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -84,7 +84,6 @@ li {
         width:       prop(--dims --indent);
         margin-left: calc(-1 * #{prop(--dims --indent)});
         color:       prop(--colors --fg-hi);
-        font-family: $font-fam--mono;
     }
 }
 
@@ -144,7 +143,7 @@ h6 {
     font-family:           $font-fam--large;
     font-size:             1em;
     font-weight:           600;
-    line-height:           1.2;
+    line-height:           1.4;
     font-feature-settings: 'ss02' 1;
 
     & + & {
@@ -163,7 +162,7 @@ p {
 
 hr {
     height:           1px;
-    margin:           ($line-height * 1rem) 0;
+    margin:           ($line-height * 2rem) 0;
     border:           0;
     background-color: prop(--colors --obj-hi);
 }
@@ -172,5 +171,5 @@ blockquote,
 pre {
     margin:       ($line-height * 1rem) 0 0 1px;
     padding-left: calc(#{prop(--dims --indent)} - 3px);
-    border-left:  2px solid prop(--colors --obj);
+    border-left:  3px solid prop(--colors --obj);
 }
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 263cb5d..3adce04 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -66,9 +66,7 @@ $gray7: hsl(220, 7%, 100%);
         ),
 
         --link: (
-            --idle:         var(--colors--fg-lo),
-            --idle-body:    hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
-            --visited-body: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
+            --idle: var(--colors--fg-lo),
         )
     )
 ));
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 58d64d7..0e44e35 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -13,13 +13,10 @@
             transform:      translateX(-.06em);
             font-family:    $font-fam--large;
             font-weight:    350;
+            line-height:    1.2;
             text-transform: none;
         }
 
-        @include element('text') {
-            font-size: 1 / 16 * 18em;
-        }
-
         @include element('title-inner') {
             background-image: linear-gradient(
                 to top,
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index d1da93c..22fa251 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -24,10 +24,10 @@
         transition:       background-color .2s, color .2s;
         background-color: prop(--colors --bg);
         color:            prop(--colors --fg);
-        font-family:      $font-fam--large;
-        font-size:        1rem;
-        font-weight:      500;
+        font-size:        1 / 16 * 15rem;
+        letter-spacing:   1px;
         text-decoration:  none;
+        text-transform:   uppercase;
 
         @include modifier('inverted') {
             background-color: prop(--colors --inverted --bg);
@@ -51,8 +51,8 @@
 
         @include element('icon-symbol') {
             display: block;
-            width:   1.35em;
-            height:  1.35em;
+            width:   1.45em;
+            height:  1.45em;
         }
 
         @include element('content') {
@@ -60,7 +60,6 @@
             padding-right: prop(--dims --pad-x);
             padding-left:  prop(--dims --pad-x);
             transition:    border-color .2s;
-            font-size:     1 / 16 * 15em;
             line-height:   prop(--dims --outer, $global: true);
             white-space:   nowrap;
         }
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index b4d0a3c..8e5f876 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,10 +1,6 @@
 @include namespace('body') {
     @include store((
         --colors: (
-            --emph: (
-                --fg: prop(--colors --accent --color, $global: true),
-                --bg: prop(--colors --bg-hi, $global: true),
-            ),
             --meta: (
                 --fg: prop(--colors --fg-hi, $global: true),
             )
@@ -12,73 +8,15 @@
     ));
 
     @include scope(namespace()) {
-        font-size: 1 / 16 * 18em;
-
-        > :first-child {
-            margin-top: 0;
-        }
-
-        :link {
-            color: prop(--colors --link --idle-body, $global: true);
-        }
-
-        :visited {
-            color: prop(--colors --link --visited-body, $global: true);
-        }
-
-        h1,
-        h2,
-        h3,
-        h4 {
-            transform: translateX(-.06em);
-        }
-
-        h1 {
-            @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
-        }
-
-        h2 {
-            @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
-        }
-
-        h3 {
-            @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
-
-            letter-spacing: .05em;
-            text-transform: uppercase;
-        }
-
-        h4,
-        h5,
-        h6 {
-            @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
-
-            letter-spacing: .1em;
-            text-transform: uppercase;
-        }
-
-        h5,
-        h6 {
-            color:       currentColor;
-            font-weight: 400;
-        }
-
-        @include element('title-inner') {
-            background-image: linear-gradient(
-                to top,
-                transparent .15em,
-                #{prop(--colors --emph --bg)} .15em,
-                #{prop(--colors --emph --bg)} .6em,
-                transparent .6em
-            );
-        }
+        font-size: 1 / 16 * 19em;
 
         @include element('meta') {
-            color:     prop(--colors --meta --fg);
-            font-size: 1 / 18 * 16em;
+            margin-top:    $line-height * 1rem;
+            color:         prop(--colors --meta --fg);
+            font-size:     1 / 16 * 15rem;
 
-            + h1 {
-                margin-top: $line-height * 1rem;
+            + * {
+                margin-top: $line-height * 1.5rem;
             }
         }
 
diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss
new file mode 100644
index 0000000..25ed289
--- /dev/null
+++ b/assets/css/scopes/_colored-links.scss
@@ -0,0 +1,20 @@
+@include namespace('colored-links') {
+    @include store((
+        --colors: (
+            --link: (
+                --idle:    hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
+                --visited: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
+            )
+        )
+    ));
+
+    @include scope(namespace()) {
+        :link {
+            color: prop(--colors --link --idle);
+        }
+
+        :visited {
+            color: prop(--colors --link --visited);
+        }
+    }
+}
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
new file mode 100644
index 0000000..6b28e9c
--- /dev/null
+++ b/assets/css/scopes/_headlines.scss
@@ -0,0 +1,58 @@
+@include namespace('headlines') {
+    @include store((
+        --colors: (
+            --emph: (
+                --bg: prop(--colors --bg-hi, $global: true),
+            )
+        )
+    ));
+
+    @include scope(namespace()) {
+        h1,
+        h2,
+        h3,
+        h4 {
+            transform: translateX(-.06em);
+        }
+
+        h1 {
+            @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
+        }
+
+        h2 {
+            @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
+        }
+
+        h3 {
+            @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
+
+            letter-spacing: .05em;
+            text-transform: uppercase;
+        }
+
+        h4,
+        h5,
+        h6 {
+            @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
+
+            letter-spacing: .1em;
+            text-transform: uppercase;
+        }
+
+        h5,
+        h6 {
+            color:       currentColor;
+            font-weight: 400;
+        }
+
+        @include element('title-inner') {
+            background-image: linear-gradient(
+                to top,
+                transparent .15em,
+                #{prop(--colors --emph --bg)} .15em,
+                #{prop(--colors --emph --bg)} .6em,
+                transparent .6em
+            );
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index aa83f85..e4a36b0 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -24,6 +24,8 @@
 @import 'components/card';
 @import 'components/project';
 
+@import 'scopes/colored-links';
+@import 'scopes/headlines';
 @import 'scopes/body';
 
 @import 'utils';
diff --git a/content/personal/infinite-skyscrapers/index.md b/content/personal/dre-infinite-skyscrapers/index.md
index a4a78e1..ca30329 100644
--- a/content/personal/infinite-skyscrapers/index.md
+++ b/content/personal/dre-infinite-skyscrapers/index.md
@@ -1,6 +1,6 @@
 ---
-date: 2021-01-09
-title: Infinite Skyscrapers
+date:     2021-01-09
+title:    Infinite Skyscrapers
 category: dre
 ---
 
diff --git a/content/personal/mis-design-test/index.md b/content/personal/mis-design-test/index.md
new file mode 100644
index 0000000..c31e42d
--- /dev/null
+++ b/content/personal/mis-design-test/index.md
@@ -0,0 +1,306 @@
+---
+title:    "Design Test: Markdown Syntax"
+category: mis
+---
+
+- [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)
+
+
+**Note:** This document is itself written using Markdown; you
+can [see the source for it by adding '.text' to the URL](/projects/markdown/syntax.text).
+
+----
+
+## 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.
+
+Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by
+adding additional levels of `>`:
+
+> This is the first level of quoting.
+>
+> > This is nested blockquote.
+>
+> Back to the first level.
+
+Blockquotes can contain other Markdown elements, including headers, lists,
+and code blocks:
+
+> ## 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");
+
+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.
+
+
+### Lists
+
+Markdown supports ordered (numbered) and unordered (bulleted) lists.
+
+Unordered lists use asterisks, pluses, and hyphens -- interchangably
+-- as list markers:
+
+*   Red
+*   Green
+*   Blue
+
+is equivalent to:
+
++   Red
++   Green
++   Blue
+
+and:
+
+-   Red
+-   Green
+-   Blue
+
+Ordered lists use numbers followed by periods:
+
+1.  Bird
+2.  McHale
+3.  Parish
+
+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:
+
+If you instead wrote the list in Markdown like this:
+
+1.  Bird
+1.  McHale
+1.  Parish
+
+or even:
+
+3. Bird
+1. McHale
+8. Parish
+
+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.
+
+To make lists look nice, you can wrap items with hanging indents:
+
+*   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.
+
+But if you want to be lazy, you don't have to:
+
+*   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.
+
+List items may consist of multiple paragraphs. Each subsequent
+paragraph in a list item must be indented by either 4 spaces
+or one tab:
+
+1.  This is a list item 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.
+
+2.  Suspendisse id sem consectetuer libero luctus adipiscing.
+
+It looks nice if you indent every line of the subsequent
+paragraphs, but here again, Markdown will allow you to be
+lazy:
+
+*   This is a list item with two paragraphs.
+
+    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.
+
+*   Another item in the same list.
+
+To put a blockquote within a list item, the blockquote's `>`
+delimiters need to be indented:
+
+*   A list item with a blockquote:
+
+    > This is a blockquote
+    > inside a list item.
+
+To put a code block within a list item, the code block needs
+to be indented *twice* -- 8 spaces or two tabs:
+
+*   A list item with a code block:
+
+        <code goes here>
+
+### Code Blocks
+
+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.
+
+To produce a code block in Markdown, simply indent every line of the
+block by at least 4 spaces or 1 tab.
+
+This is a normal paragraph:
+
+    This is a code block.
+
+Here is an example of AppleScript:
+
+    tell application "Foo"
+        beep
+    end tell
+
+A code block continues until it reaches a line that is not indented
+(or the end of the article).
+
+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:
+
+    <div class="footer">
+        &copy; 2004 Foo Corporation
+    </div>
+
+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.
+
+```
+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.
+
+### Emphasis
+
+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:
+
+*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.
diff --git a/filters/common_actions.lua b/filters/common_actions.lua
index 262f086..5b6c86b 100644
--- a/filters/common_actions.lua
+++ b/filters/common_actions.lua
@@ -1,12 +1,15 @@
 function CodeBlock(el)
     if el.classes[1] == "plain" then
         el = pandoc.Div({el}, {class = 's-code'})
-    else
+    elseif el.classes[1] then
         local formatted = pandoc.pipe('pygmentize', {
             '-l', el.classes[1], '-f', 'html', '-O',
             'cssclass=s-code s-code--highlight'
         }, el.text)
-        el = pandoc.RawBlock('html', formatted)
+
+        if formatted then
+            el = pandoc.RawBlock('html', formatted)
+        end
     end
 
     return el
@@ -16,7 +19,7 @@ function Header(el)
     if el.level == 1 then
         local newchildren = pandoc.List()
 
-        newchildren:insert(pandoc.Span(el.content, {class = 's-body__title-inner'}))
+        newchildren:insert(pandoc.Span(el.content, {class = 's-headlines__title-inner'}))
 
         el.content = newchildren
     end
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
index c8a841d..86b5c66 100644
--- a/metadata/metadata.yaml
+++ b/metadata/metadata.yaml
@@ -26,6 +26,8 @@ categories:
     dre:
       name:      Dream Journal
       show_date: true
+    mis:
+      name: Sonstiges
       
   projects:
     emj:
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 8cc5c24..5e2d4a5 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,11 +1,13 @@
 <section class="l-section l-section--fullscreen l-section--no-head">
-    <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body">
-        <h1><span class="s-body__title-inner">$title$</span></h1>
+    <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links">
+        <div class="s-headlines s-body">
+            <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
 
 $body$
+        </div>
 
         $for(pages.by_category)$
-            <h2>
+            <h2 class="s-body__h3">
                 $for(it.value/first/first)$
                     $it.category.name$
                 $endfor$
@@ -13,10 +15,10 @@ $body$
             <ul>
                 $for(it.value)$
                     <li>
+                        $if(it.category.show_date)$
+                            $it.date.yyyy_mm_dd$: 
+                        $endif$
                         <a href="$it.url.rel$">
-                            $if(it.category.show_date)$
-                                $it.date.yyyy_mm_dd$: 
-                            $endif$
                             $it.title$
                         </a>
                     </li>
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 18b1c69..6d4c776 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -6,7 +6,7 @@
                     I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise.
                 </span>
             </h1>
-            <p class="c-landing-banner__text">
+            <p class="c-landing-banner__text s-body">
                 Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
             </p>
         </div>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index e45f6eb..2093f8c 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,13 +1,13 @@
 <section class="l-section l-section--fullscreen l-section--no-head">
-    <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body">
-        $if(category.show_date)$
-            <div class="s-body__meta">
-                $date.long$
-            </div>
-        $endif$
+    <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines s-body">
+        <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
 
-        <h1><span class="s-body__title-inner">$title$</span></h1>
+        <div class="s-body__meta">
+            $if(category.show_date)$
+                $date.long$
+            $endif$
+        </div>
 
-        $body$
+$body$
     </div>
 </section>