app: Refactor and CSS rewrite

76 files changed, 2706 insertions, 3820 deletions

diff --git a/.gitignore b/.gitignore
index c550b21..a9fb86d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,11 +1,12 @@
+.hugo_build.lock
 /app/storage
 /cockpit
 /vendor
 config.php
 generators/hugo/content
 generators/hugo/public
+generators/openring/openring
 google[a-z0-9]*.html
-openring
 openring.html
 public/about
 public/abstracts
diff --git a/app/views/components/context.menu.php b/app/views/components/context.menu.php
index 1a3356a..75e1746 100644
--- a/app/views/components/context.menu.php
+++ b/app/views/components/context.menu.php
@@ -1,39 +1,29 @@
-<div class="dropdown <?php echo $type ?? null ?>">
-  <input
-    class="is-hidden dropdown-input"
-    type="checkbox"
-    id="dropdown-menu__<?php echo $id ?? null ?>"
-  />
+<context-menu-container>
+  <more-button>
+    <input hidden type="checkbox" id="context-menu-<?php echo $id ?? null ?>"/>
+    <label for="context-menu-<?php echo $id ?? 'none' ?>"><?php echo $label ?? null ?></label>
 
-  <label class="dropdown-label" for="dropdown-menu__<?php echo $id ?? 'none' ?>">
-    <?php echo $label ?? null ?>
-  </label>
+    <context-menu list right>
+      <context-menu-content>
+       <?php
+          echo $content ?? null;
 
-  <div class="dropdown-menu">
-    <div class="dropdown-content">
-     <?php
+          if ($links ?? null  === true) {
+            $route = '/';                             $label = 'Home';       include views('components', 'navigator.link.dropdown');
+            $route = '/posts/';                       $label = 'Posts';      include views('components', 'navigator.link.dropdown');
+            $route = '/projects/';                    $label = 'Projects';   include views('components', 'navigator.link.dropdown');
+            $route = '/about/';                       $label = 'Profile';    include views('components', 'navigator.link.dropdown');
+            $route = '/abstracts/';                   $label = 'Abstracts';  include views('components', 'navigator.link.dropdown');
+            $route = '/contact/';                     $label = 'Contact';    include views('components', 'navigator.link.dropdown');
+            $route = '/git/';                         $label = 'Repository'; include views('components', 'navigator.link.dropdown');
+            $route = 'https://ko-fi.com/thedroneely'; $label = 'Coffee';     include views('components', 'navigator.link.dropdown');
 
-        echo $content ?? null;
-
-        if ($links ?? null  === true) {
-
-          $route = '/';                             $label = 'Home';       include views('components', 'navigator.link.dropdown');
-          $route = '/posts/';                       $label = 'Posts';      include views('components', 'navigator.link.dropdown');
-          $route = '/projects/';                    $label = 'Projects';   include views('components', 'navigator.link.dropdown');
-          $route = '/about/';                       $label = 'Profile';    include views('components', 'navigator.link.dropdown');
-          $route = '/abstracts/';                   $label = 'Abstracts';  include views('components', 'navigator.link.dropdown');
-          $route = '/contact/';                     $label = 'Contact';    include views('components', 'navigator.link.dropdown');
-          $route = '/git/';                         $label = 'Repository'; include views('components', 'navigator.link.dropdown');
-          $route = 'https://ko-fi.com/thedroneely'; $label = 'Coffee';     include views('components', 'navigator.link.dropdown');
-
-          $formClass = 'theme-toggle';
-          $iconClass = 'is-hidden';
-          $buttonClass ='navbar-item button theme-toggle-button is-text has-text-left';
-          include views('components', 'theme.toggle');
-        }
+            include views('components', 'theme.toggle');
+          }
         ?>
-    </div>
-  </div>
-</div>
+      </context-menu-content>
+    </context-menu>
+  </more-button>
+</context-menu-container>
 
-<?php $type = $id = $label = $content = $links = null; ?>
+<?php $id = $label = $content = $links = null; ?>
diff --git a/app/views/components/navigator.link.dropdown.php b/app/views/components/navigator.link.dropdown.php
index 0657bc6..e0ec008 100644
--- a/app/views/components/navigator.link.dropdown.php
+++ b/app/views/components/navigator.link.dropdown.php
@@ -1,6 +1,6 @@
 <a href="<?php echo $route ?? null; ?>"
-   class="<?php if ($navigation->isActive($route ?? null)) { echo ' navbar__active'; } ?> navbar-item"
    title="<?php echo $label ?? null; ?>"
+   <?php if ($navigation->isActive($route ?? null)) { echo ' data-active'; } ?>
 >
   <?php echo $label ?? null; ?>
 </a>
diff --git a/app/views/components/navigator.link.php b/app/views/components/navigator.link.php
index 3b57d62..f255903 100644
--- a/app/views/components/navigator.link.php
+++ b/app/views/components/navigator.link.php
@@ -1,14 +1,15 @@
-<a href="<?php echo $route ?? null; ?>" class="navbar-item navbar__icon has-text-centered
+<a
+  href="<?php echo $route ?? null; ?>"
   <?php
     $hiddenLabels = [ 'Profile' ];
-    if (in_array($label, $hiddenLabels)) { echo ' navbar__icon__hidden'; }
-    if ($navigation->isActive($route ?? null)) { echo ' navbar__active'; }
+    if (in_array($label, $hiddenLabels)) { echo ' data-hidden'; }
+    if ($navigation->isActive($route ?? null)) { echo ' data-active'; }
   ?>
-">
-  <div class="has-text-centered">
-    <?php echo icon($icon ?? null); ?>
-    <p title="<?php echo $label ?? null; ?>" class="navbar__icon__label"><?php echo $label ?? null; ?></p>
-  </div>
+>
+  <?php echo icon($icon ?? null); ?>
+  <span title="<?php echo $label ?? null; ?>">
+    <?php echo $label ?? null; ?>
+  </span>
 </a>
 
 <?php $route = $label = $icon = null; ?>
diff --git a/app/views/components/theme.toggle.php b/app/views/components/theme.toggle.php
index 3b2d15b..71e8841 100644
--- a/app/views/components/theme.toggle.php
+++ b/app/views/components/theme.toggle.php
@@ -1,5 +1,4 @@
 <form
-  class="<?php echo $formClass ?? null; ?>"
   method="get"
   action="<?php echo $_SERVER['REQUEST_URI']; ?>"
 >
@@ -7,29 +6,25 @@
 
   <button
     title="Switch to Light Theme"
-    class="<?php echo $buttonClass ?? null; ?>"
     name="theme"
     type="submit"
     value="light"
   >
-    <?php echo icon('sun', $iconClass ?? null); ?>
-    <span>Light</span>
+    <?php echo icon('moon'); ?>
+    <span>Dark</span>
   </button>
 
   <?php } else { ?>
 
   <button
     title="Switch to Dark Theme"
-    class="<?php echo $buttonClass ?? null; ?>"
     name="theme"
     type="submit"
     value="dark"
   >
-    <?php echo icon('moon', $iconClass ?? null); ?>
-    <span>Dark</span>
+    <?php echo icon('sun'); ?>
+    <span>Light</span>
   </button>
 
   <?php } ?>
 </form>
-
-<?php $formClass = $buttonClass = $iconClass = null; ?>
diff --git a/app/views/contact.view.php b/app/views/contact.view.php
index 07ac68a..42c03a5 100644
--- a/app/views/contact.view.php
+++ b/app/views/contact.view.php
@@ -2,93 +2,74 @@
 
 <?php require __DIR__ . '/partials/header.php'; ?>
 
-    <body>
-
-    <?php require __DIR__ . '/partials/navigator.php'; ?>
-
-    <section class="section">
-
-        <div class="container">
-            <div class="columns is-centered">
-                <div class="column is-7">
-
-                    <article class="content">
-
-                        <h1 class="title is-3">Contact</h1>
-
-                        <?php if (isset($formSuccess)) : ?>
-                        <div class="message__success" role="alert">
-                        <p>Your message has been successful. I'll get in touch with you soon!</p>
-                        </div>
-                        <?php endif; ?>
-
-                        <p>
-                        Interested in collaborating?
-                        Complete and submit the form below to send me a direct message.
-                        </p>
-
-                        <form method="post" action="/contact/">
-
-                            <div class="field is-horizontal">
-                                <div class="field-body">
-                                    <div class="field is-expanded">
-                                    <label for="name" class="heading is-size-6">Name</label>
-                                        <div class="field has-addons">
-                                            <p class="control is-expanded">
-                                              <input id="name" class="input" type="text" name="26471" value="<?php echo $name ?? '' ?>">
-                                            </p>
-                                        </div>
-                                    </div>
-                                    <div class="field is-expanded">
-                                        <label for="email" class="heading is-size-6">Email <span class="alert">*</span></label>
-                                        <div class="field has-addons">
-                                            <p class="control is-expanded">
-                                              <input id="email" class="input <?php echo $border = isset($emailError) ? 'is-danger' : '';?>"
-                                              type="email" name="26472" value="<?php echo $email ?? '' ?>" required>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <label for="message" class="heading is-size-6">Message <span class="alert">*</span></label>
-
-                            <div class="field is-horizontal">
-                              <div class="field-body">
-                                <div class="field">
-                                  <div class="control">
-                                    <textarea id="message" class="textarea" name="26478" placeholder="" required><?php echo $message ?? '' ?></textarea>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-
-                            <br>
-
-                            <div class="field is-horizontal">
-                              <div class="field-body">
-                                <div class="field">
-                                  <div class="control">
-                                    <button class="button item__box has-text-weight-normal">
-                                      <?php echo icon('send'); ?>
-                                      <span>Send Message</span>
-                                    </button>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-
-                           <input type="checkbox" name="agree" class="agree" tabindex="-1">
-
-                        </form>
-
-                    </article>
-
-                </div>
-            </div>
-        </div>
-
-    </section>
+<body>
+
+<?php require __DIR__ . '/partials/navigator.php'; ?>
+
+<main>
+  <contact-page>
+    <article>
+
+      <h1>Contact</h1>
+
+      <?php if (isset($formSuccess)) : ?>
+        <aside>
+          <p>Your message has been successful. I'll get in touch with you soon!</p>
+        </aside>
+      <?php endif; ?>
+
+      <p>
+        Interested in collaborating? Complete and submit the form below to send me a
+        direct message.
+      </p>
+
+      <form method="post" action="/contact/">
+
+        <field-set>
+
+          <section>
+            <label for="name">Name</label>
+            <input
+              id="name"
+              type="text"
+              name="26471"
+              value="<?php echo $name ?? '' ?>"
+            >
+          </section>
+
+          <section>
+            <label for="email">Email <span data-danger>*</span></label>
+            <input
+              required
+              id="email"
+              type="email"
+              name="26472"
+              value="<?php echo $email ?? '' ?>"
+              <?php echo $border = isset($emailError) ? 'data-contact-required' : '';?>
+            >
+          </section>
+
+        </field-set>
+
+        <label for="message">Message <span data-danger>*</span></label>
+        <textarea
+          id="message"
+          name="26478"
+          placeholder="" required
+        ><?php echo $message ?? '' ?> </textarea>
+
+        <button>
+          <?php echo icon('send'); ?>
+          <span>Send Message</span>
+        </button>
+
+        <input type="checkbox" name="agree" tabindex="-1">
+
+      </form>
+
+      </article>
+    </contact-page>
+  </main>
 
 <?php require __DIR__ . '/partials/footer.php'; ?>
 
diff --git a/app/views/index.view.php b/app/views/index.view.php
index 8261d35..bef54f5 100644
--- a/app/views/index.view.php
+++ b/app/views/index.view.php
@@ -1,109 +1,90 @@
 <?php require __DIR__ . '/partials/header.php';?>
 
-    <body>
+<body>
 
 <?php require __DIR__ . '/partials/navigator.php';?>
 
-    <section class="section">
-
-        <div class="container">
-            <div class="columns is-centered">
-                <div class="column is-7">
-
-                    <h1 class="title has-text-weight-normal">
-                        <span>
-                            Web
-                            <span class="has-text-danger">
-                                Developer
-                            </span>
-                        </span>
-                    </h1>
-
-                    <h2 class="subtitle has-text-grey-dark has-text-weight-normal">
-                        In it for the long haul
-                    </h2>
-
-                    <video-container>
-                      <video preload="none" poster="/images/pipes.png" width="732" autoplay loop muted playsinline>
-                        <source src="/videos/pipes.mp4" type="video/mp4" />
-                        <p>
-                          Sorry, your browser doesn't support embedded videos. Here is a
-                          <a href="/videos/pipes.mp4">link to the video</a> instead.
-                        </p>
-                      </video>
-                      <figcaption class="has-text-grey-dark">pipes.sh terminal screensaver</figcaption>
-                    </video-container>
-
-                    <div class="content">
-
-                    <p class="introduction has-text-left">
-                        <?php fetch('/cockpit/api/singletons/get/introduction', 'text'); ?>
-                    </p>
-
-                    <span class="quote marginnote leftnote">
-                    <span class="has-text-weight-bold has-margin-bottom-sm is-block">Random Quote</span>
-                    <?php echo shell_exec('fortune ' . dirname($_SERVER['DOCUMENT_ROOT']) . '/generators/fortune/quotes.fortune'); ?>
-                    </span>
-
-                    </div>
-
-                    <div class="recent__article">
-
-                    <label for="posts" class="title is-inline-block is-4 has-text-weight-normal marginnote-toggle marginnote-mark">
-                       Recent Posts
-                    </label>
-
-                    <input type="checkbox" id="posts" class="marginnote-toggle">
-
-                    <span class="marginnote rightnote">
-                        See an archive of all posts <a href="/posts/archive/">here.</a>
-                    </span>
-
-                    <?php
-                    $recentPosts = new DOMExtract();
-                    echo $recentPosts->innerHTML('recent-articles', $_SERVER['DOCUMENT_ROOT'] . '/posts/index.html');
-                    ?>
-
-                    <a href="/posts/page/2/"
-                    class="front__more is-block has-text-centered">
-                        See More Posts
-                        <?php icon('chevron-right'); ?>
-                    </a>
-
-                    <br>
-
-
-                    <label for="projects" class="title is-inline-block is-4 has-text-weight-normal marginnote-toggle marginnote-mark">
-                       Recent Projects
-                    </label>
-
-                    <input type="checkbox" id="projects" class="marginnote-toggle">
-
-                    <span class="marginnote rightnote">
-                        See an archive of all projects <a href="/projects/archive/">here.</a>
-                    </span>
-
-                    <?php
-                    $recentProjects = new DOMExtract();
-                    echo $recentPosts->innerHTML('recent-articles', $_SERVER['DOCUMENT_ROOT'] . '/projects/index.html');
-                    ?>
-                    </div>
-
-                    <a href="/projects/page/2/"
-                    class="front__more is-block has-text-centered">
-                        See More Projects
-                        <?php icon('chevron-right'); ?>
-                    </a>
-
-                    <br>
-
-                </div>
-            </div>
-        </div>
-
-    </section>
+<main>
+  <home-page>
+    <article>
+
+      <h1>Web <em>Developer </em></h1>
+
+      <h2>In it for the long haul</h2>
+
+      <video-container>
+        <video preload="none" poster="/images/pipes.png" width="732" autoplay loop muted playsinline>
+          <source src="/videos/pipes.mp4" type="video/mp4" />
+          <p>
+            Sorry, your browser doesn't support embedded videos. Here is a
+            <a href="/videos/pipes.mp4">link to the video</a> instead.
+          </p>
+        </video>
+        <footer><a href="https://github.com/pipeseroni/pipes.sh#readme">pipes.sh</a> terminal screensaver</footer>
+      </video-container>
+
+      <home-page-intro>
+        <?php fetch('/cockpit/api/singletons/get/introduction', 'text'); ?>
+      </home-page-intro>
+
+      <fortune-quote>
+        <margin-note left>
+          <b>Random Quote</b>
+          <?php echo shell_exec('fortune ' . dirname($_SERVER['DOCUMENT_ROOT']) . '/generators/fortune/quotes.fortune'); ?>
+        </margin-note>
+      </fortune-quote>
+
+      <home-page-posts>
+
+        <margin-note-aside>
+          <label for="posts">Recent Posts</label>
+          <input type="checkbox" id="posts" name="toggle">
+          <margin-note right>
+            See an archive of all posts <a href="/archives/posts/">here.</a>
+          </margin-note>
+        </margin-note-aside>
+
+        <?php
+          $recentPosts = new DOMExtract();
+          echo $recentPosts->innerHTML('recent-articles', $_SERVER['DOCUMENT_ROOT'] . '/posts/index.html');
+        ?>
+
+        <a href="/posts/page/2/">
+          See More Posts
+          <?php echo icon('corner-down-right'); ?>
+        </a>
+      </home-page-posts>
+
+      <br>
+
+      <home-page-projects>
+
+        <margin-note-aside>
+          <label for="projects">Recent Projects</label>
+          <input type="checkbox" id="projects" name="toggle">
+          <margin-note right>
+            See an archive of all projects <a href="/archives/projects/">here.</a>
+          </margin-note>
+        </margin-note-aside>
+
+        <?php
+          $recentProjects = new DOMExtract();
+          echo $recentPosts->innerHTML('recent-articles', $_SERVER['DOCUMENT_ROOT'] . '/projects/index.html');
+        ?>
+
+        <a href="/projects/page/2/">
+          See More Projects
+          <?php echo icon('corner-down-right'); ?>
+        </a>
+      </home-page-projects>
+
+      <br>
+
+    </article>
+  </home-page>
+</main>
 
 <?php require __DIR__ . '/partials/footer.php';?>
 
-  </body>
+</body>
 </html>
diff --git a/app/views/partials/footer.php b/app/views/partials/footer.php
index f82d4e1..0a7b37b 100644
--- a/app/views/partials/footer.php
+++ b/app/views/partials/footer.php
@@ -1,53 +1,39 @@
-<footer class="hero-foot">
-  <div class="footer">
-    <div class="container">
+<footer>
 
-      <div class="columns is-centered">
-        <div class="column is-6 has-text-centered footer__section">
+  <a href="/sitemap.xml">Site Map</a> |
 
-            <p class="has-text-grey-dark is-size-7">
+  <a href="/posts/rss.xml">RSS Feed</a> |
 
-            <a href="/sitemap.xml">Site Map</a> |
+  <a href="/index.json">JSON Feed</a> |
 
-            <a href="/posts/rss.xml">RSS Feed</a> |
+  <a href="/resume/">Resume</a>
 
-            <a href="/index.json">JSON Feed</a> |
+  <br>
 
-            <a href="/resume">Resume</a>
+  <a rel="me" href="https://gitlab.com/tdro">Gitlab</a> |
 
-            <br>
+  <a rel="me" href="https://github.com/tdro">Github</a> |
 
-            <a rel="me" href="https://gitlab.com/tdro">Gitlab</a> |
+  <a rel="me" href="https://codeberg.org/tdro">Codeberg</a> |
 
-            <a rel="me" href="https://github.com/tdro">Github</a> |
+  <a href="/analytics">Analytics</a> |
 
-            <a rel="me" href="https://codeberg.org/tdro">Codeberg</a> |
+  <a href="#">Back To Top</a>
 
-            <a href="/analytics">Analytics</a> |
+  <p>
+   The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.
+   The <a href="/git/thedroneely/thedroneely.com">source code</a>
+   for this site is <a href="https://opensource.org/licenses/GPL-3.0">GPL</a>.<br>
+   Copyright &copy; 2018 &mdash; <?php echo date("Y"); ?>
+  </p>
 
-            <a href="#">Back To Top</a>
+  <p hidden class="h-card">
+    <img class="u-photo" src="data:image/ico;base64,<?php echo base64('/public/favicon.ico'); ?>" alt="Terminal" />
+    <a class="p-name u-url" href="https://www.thedroneely.com">Thedro Neely</a>
+    <span class="p-note">Thedro Neely is a web developer based in The Bahamas.</span>
+    <span class="p-country-name">The Bahamas</span>
+  </p>
 
-            </p>
-
-            <p class="has-text-grey-dark is-size-7">
-             The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.
-             The <a href="/git/thedroneely/thedroneely.com">source code</a>
-             for this site is <a href="https://opensource.org/licenses/GPL-3.0">GPL</a>.<br>
-             Copyright &copy; 2018 &mdash; <?php echo date("Y"); ?>
-            </p>
-
-            <p class="is-hidden h-card">
-              <img class="u-photo" src="data:image/ico;base64,<?php echo base64('/public/favicon.ico'); ?>" alt="Terminal" />
-              <a class="p-name u-url" href="https://www.thedroneely.com">Thedro Neely</a>
-              <span class="p-note">Thedro Neely is a web developer based in The Bahamas.</span>
-              <span class="p-country-name">The Bahamas</span>
-            </p>
-
-        </div>
-      </div>
-
-    </div>
-  </div>
 </footer>
 
 <script src="/js/app.js"></script>
diff --git a/app/views/partials/header.php b/app/views/partials/header.php
index b236575..e5439be 100644
--- a/app/views/partials/header.php
+++ b/app/views/partials/header.php
@@ -1,22 +1,21 @@
 <!DOCTYPE html>
-<html class="has-navbar-fixed-top" lang="en-us" itemscope itemtype="http://schema.org/WebPage">
+<html lang="en-us" itemscope itemtype="http://schema.org/WebPage">
 
 <head>
 
-    <title><?php echo $title = $title ?? 'Portfolio - '; ?>Thedro Neely</title>
+<title><?php echo $title = $title ?? 'Portfolio - '; ?>Thedro Neely</title>
 
-    <meta name="description" content="Thedro's Portfolio Website">
-    <meta name="keywords" content="Thedro,Neely,Portfolio,Website">
-    <meta name="author" content="Thedro Neely">
+<meta charset="utf-8">
+<meta name="robots" content="index,follow">
+<meta name="author" content="Thedro Neely">
+<meta name="description" content="Thedro's Portfolio Website">
+<meta name="keywords" content="Thedro,Neely,Portfolio,Website">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="robots" content="index,follow">
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/rss.php'; ?>
 
-    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/rss.php'; ?>
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/favicons.php'; ?>
 
-    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/favicons.php'; ?>
-
-    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/stylesheets.php'; ?>
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/stylesheets.php'; ?>
 
 </head>
diff --git a/app/views/partials/navigator.php b/app/views/partials/navigator.php
index ab2ea58..a9e8c7c 100644
--- a/app/views/partials/navigator.php
+++ b/app/views/partials/navigator.php
@@ -1,57 +1,48 @@
-<nav id="navbar" class="navbar is-fixed-top" aria-label="main navigation">
-    <div class="container">
-        <div class="navbar-menu">
-            <div class="columns is-centered">
+<nav id="navbar">
+  <section>
 
-                <div class="navbar__left column">
-                    <a title="Go to Website Repository"
-                    href="/git/"
-                    class="navbar-item item__box button is-inline-flex">
-                    <?php echo icon('git-commit'); ?>
-                    <span>Repo</span>
-                    </a>
+    <column-left>
+      <button-repo>
+        <button-anchor>
+          <a title="Go to Website Repository" href="/git/">
+            <?php echo icon('git-commit'); ?>
+            <span>Repo</span>
+          </a>
+        </button-anchor>
+      </button-repo>
 
-                    <?php
-                      $formClass = 'is-inline';
-                      $buttonClass ='navbar-item button item__box';
-                      require views('components', 'theme.toggle');
-                    ?>
-                </div>
+      <?php require views('components', 'theme.toggle'); ?>
+    </column-left>
 
-                <div class="navbar__middle column is-7">
-                  <?php
-                    $route = '/';          $label = 'Home';     $icon = 'home';      require views('components', 'navigator.link');
-                    $route = '/posts/';    $label = 'Posts';    $icon = 'feather';   require views('components', 'navigator.link');
-                    $route = '/projects/'; $label = 'Projects'; $icon = 'package';   require views('components', 'navigator.link');
-                    $route = '/about/';    $label = 'Profile';  $icon = 'file-text'; require views('components', 'navigator.link');
-                    $route = '/contact/';  $label = 'Contact';  $icon = 'mail';      require views('components', 'navigator.link');
-                  ?>
+    <column-middle>
+      <?php
+        $route = '/';          $label = 'Home';     $icon = 'home';      require views('components', 'navigator.link');
+        $route = '/posts/';    $label = 'Posts';    $icon = 'feather';   require views('components', 'navigator.link');
+        $route = '/projects/'; $label = 'Projects'; $icon = 'package';   require views('components', 'navigator.link');
+        $route = '/about/';    $label = 'Profile';  $icon = 'file-text'; require views('components', 'navigator.link');
+        $route = '/contact/';  $label = 'Contact';  $icon = 'mail';      require views('components', 'navigator.link');
+      ?>
 
-                  <?php
-                    $links = true;
-                    $id = 'mobile-compact';
-                    $type = 'navbar-item is-menu is-right navbar__icon has-text-dark has-tap-transparent';
-                    $icon = icon('arrow-down-circle');
-                    $label = <<<insert
-                      <span class="is-block has-text-centered">
-                        $icon
-                        <span class="is-block navbar__icon__label">More</span>
-                      </span>
-                    insert;
-                    require views('components', 'context.menu');
-                  ?>
-                </div>
+      <?php
+        $links = true;
+        $id = 'navigation';
+        $icon = icon('arrow-down-circle');
+        $label = <<<insert
+            $icon
+            <span>More</span>
+          insert;
+        require views('components', 'context.menu');
+      ?>
+    </column-middle>
 
-                 <div class="navbar__right column">
-                    <a title="Coffee"
-                    href ="https://ko-fi.com/thedroneely"
-                    class="navbar-item item__box button is-inline-flex has-margin-left-none">
-                    <?php echo icon('coffee'); ?>
-                    <span>Coffee</span>
-                    </a>
-                </div>
+    <column-right>
+      <button-anchor>
+        <a title="Coffee" href ="https://ko-fi.com/thedroneely">
+          <?php echo icon('coffee'); ?>
+          <span>Coffee</span>
+        </a>
+      </button-anchor>
+    </column-right>
 
-            </div>
-        </div>
-    </div>
+  </section>
 </nav>
diff --git a/app/views/resume.view.php b/app/views/resume.view.php
index e61bdab..dd3d3e8 100644
--- a/app/views/resume.view.php
+++ b/app/views/resume.view.php
@@ -3,265 +3,248 @@
 
 <head>
 
-    <title>Resume - Thedro Neely</title>
+  <title>Resume - Thedro Neely</title>
 
-    <meta name="description" content="Thedro's Web Development Resume">
-    <meta name="keywords" content="Thedro,Neely,Portfolio,Website,Resume">
-    <meta name="author" content="Thedro Neely">
+  <meta charset="utf-8">
+  <meta name="description" content="Thedro's Web Development Resume">
+  <meta name="keywords" content="Thedro,Neely,Portfolio,Website,Resume">
+  <meta name="author" content="Thedro Neely">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="robots" content="index,follow">
 
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="robots" content="index,follow">
+  <style>html::-webkit-scrollbar { height: 0; width: 0; }</style>
 
-    <style>html::-webkit-scrollbar { height: 0; width: 0; }</style>
+  <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/rss.php'; ?>
 
-    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/rss.php'; ?>
+  <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/favicons.php'; ?>
 
-    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/favicons.php'; ?>
-
-    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/stylesheets.php'; ?>
-
-    <link rel="stylesheet" href="/css/bulma-timeline.css">
+  <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/stylesheets.php'; ?>
 
 </head>
 
-    <body>
-
-        <div class="columns max__height is-gapless">
+    <body data-resume>
 
-            <div class="column column__background is-4">
+        <resume-page>
 
-            <section class="section has-text-centered">
-
-                <a href="/resume" class="title has-text-weight-normal is-size-4 has-text-white inline__padding">Resume</a>
+            <column-left>
+              <section>
+                <h1>
+                  <a href="/resume/">Resume</a>
+                </h1>
 
                 <br>
 
-                <a href="/contact/" class="resume__label title has-text-weight-normal is-size-7 text__frame">Contact for Full Resume</a>
+                <p>
+                  <a href="/contact/">Contact for Full Resume</a>
+                </p>
 
                 <br>
 
-                <h1 class="title has-text-weight-normal is-size-3 has-text-white inline__padding">Web <br> Developer</h1>
+                <h1><a href="/">Web <br> Developer</a></h1>
 
                 <br>
 
-                <p>
-                    <a href="/" class="title has-text-weight-normal is-size-7 resume__label">https://www.thedroneely.com</a>
-                </p>
+                <p><a href="/">https://www.thedroneely.com</a></p>
 
                 <br>
 
                 <p>
-                    <a href="#tools" class="title has-text-weight-normal is-size-7 resume__label">#Tools</a>
-
-                    <a href="#projects" class="title has-text-weight-normal is-size-7 resume__label">#Projects</a>
-
-                    <a href="#questions" class="title has-text-weight-normal is-size-7 resume__label">#Questions</a>
+                  <a href="#stack">#Stack</a>
+                  <a href="#questions">#Questions</a>
+                  <a href="#projects">#Projects</a>
                 </p>
+              </section>
+            </column-left>
 
-            </section>
+            <column-right>
 
-            </div>
+                <main>
 
-            <div class="column column__right is-size-6">
-
-                <div id="tools" class="resume__container">
-
-                <div class="resume__break"></div>
-                <div class="resume__break"></div>
-
-                <div class="column resume__column">
+                <article>
 
                     <section>
-
-                        <h1 class="title has-text-weight-normal has-text-primary is-4">
-                            Thedro Neely
-                        </h1>
-
-                        <p class="is-size-7">
-                            Hi, My name is Thedro, and I'm a web developer based in The Bahamas.
-                        </p>
-
+                      <h1>Thedro Neely</h1>
+                      <p>Hi, My name is Thedro, and I'm a web developer based in The Bahamas.</p>
                     </section>
 
                     <br>
 
-                    <div class="columns">
-
-                        <div class="column">
-
-                            <section>
-                                <h1 class="heading title has-text-weight-semibold">Stack</h1>
-                            </section>
-
-                            <br>
-
-                            <section>
-
-                                <div class="timeline">
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                  <p class="heading">Front End</p>
-                                  <p class="is-size-7">HTML &nbsp; CSS &nbsp; JavaScript &nbsp; Bulma</p>
-                                  <p class="is-size-7">Bootstrap &nbsp; Sass &nbsp; Tailwind</p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                  <p class="heading">Back End</p>
-                                  <p class="is-size-7">PHP &nbsp; Python &nbsp; MariaDB &nbsp; MySQL</p>
-                                  <p class="is-size-7">PostgreSQL &nbsp; Nginx &nbsp; Apache </p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                  <p class="heading">Tooling and Frameworks</p>
-                                  <p class="is-size-7">LaTeX &nbsp; Laravel &nbsp; Sublime Text</p>
-                                  <p class="is-size-7">Npm &nbsp; Webpack &nbsp; Gimp &nbsp; Hugo</p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                  <p class="heading">Version Systems & GUIs</p>
-                                  <p class="is-size-7">Git &nbsp; Gitlab &nbsp; Github &nbsp; Gitea</p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                  <p class="heading">Sys Admin</p>
-                                  <p class="is-size-7">CentOS &nbsp; Debian &nbsp; Windows</p>
-                                  <p class="is-size-7">Android &nbsp; Alpine &nbsp; pfSense/Opnsense</p>
-                                  <p class="is-size-7">Systemd &nbsp; DNS &nbsp; SMTP &nbsp; DHCP</p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                  <p class="heading">Dev Ops</p>
-                                  <p class="is-size-7">Docker &nbsp; Jenkins &nbsp; Drone CI</p>
-                                  <p class="is-size-7">LXC</p>
-                                </div>
-                                </div>
-
-                                </div>
-
-                            </section>
-
-                        </div>
-
-                        <div class="column">
-
-                            <section id="questions">
-                                <h1 class="heading title has-text-weight-semibold">Questions</h1>
-                            </section>
-
-                            <br>
-
-                            <section>
-
-                                <div class="timeline">
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                    <p class="heading">Are you currently available for work?</p>
-                                    <p class="is-size-7">
-                                        Yes, I'm currently available for
-                                        contract work and full-time job
-                                        opportunities.
-                                    </p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                    <p class="heading">How long have you been programming?</p>
-                                    <p class="is-size-7">
-                                        I've been programming for a long time, too long to accurately say.
-                                    </p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                    <p class="heading">What is your preferred stack?</p>
-                                    <p class="is-size-7">
-                                        PHP 7 + PostgreSQL. Pretty decent stuff. I'm still learning
-                                        Vue and React. I'd like to learn Go next.
-                                    </p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                    <p class="heading">What's your OS setup?</p>
-                                    <p class="is-size-7">
-                                        Linux distribution on bare metal, and everything else floating on top.
-                                        Arch bare metaling and hosting CentOS, Debian, Void, Windows and macOS.
-                                    </p>
-                                </div>
-                                </div>
-
-                                </div>
-
-                            </section>
-
-                        </div>
-
-                    </div>
-                </div>
+                    <column-section>
+
+                        <column-stack>
+                          <section>
+                            <h1>Stack</h1>
+                          </section>
+
+                          <br>
+
+                          <section>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Front End</h1>
+                                <p>HTML &nbsp; CSS &nbsp; JavaScript &nbsp; Bulma</p>
+                                <p>Bootstrap &nbsp; Sass &nbsp; Tailwind</p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Back End</h1>
+                                <p>PHP &nbsp; Python &nbsp; MariaDB &nbsp; MySQL</p>
+                                <p>PostgreSQL &nbsp; Nginx &nbsp; Apache </p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Tooling and Frameworks</h1>
+                                <p>LaTeX &nbsp; Laravel &nbsp; Sublime Text</p>
+                                <p>Npm &nbsp; Webpack &nbsp; Gimp &nbsp; Hugo</p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Version Systems &amp; GUIs</h1>
+                                <p>Git &nbsp; Gitlab &nbsp; Github &nbsp; Gitea</p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Sys Admin</h1>
+                                <p>CentOS &nbsp; Debian &nbsp; Windows</p>
+                                <p>Android &nbsp; Alpine &nbsp; pfSense/Opnsense</p>
+                                <p>Systemd &nbsp; DNS &nbsp; SMTP &nbsp; DHCP</p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Dev Ops</h1>
+                                <p>Docker &nbsp; Jenkins &nbsp; Drone CI</p>
+                                <p>LXC</p>
+                              </timeline-content>
+                            </timeline-item>
+
+                          </section>
+                        </column-stack>
+
+                        <column-questions>
+                          <section id="questions">
+                              <h1>Questions</h1>
+                          </section>
+
+                          <br>
+
+                          <section>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Are you currently available for work?</h1>
+                                <p>
+                                  Yes, I'm currently available for contract work and full-time job
+                                  opportunities.
+                                </p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>How long have you been programming?</h1>
+                                <p>I've been programming for a long time, too long to accurately say.</p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>What is your preferred stack?</h1>
+                                <p>
+                                  PHP 7 + PostgreSQL. Pretty decent stuff. I'm still learning Vue and React. I'd
+                                  like to learn Go next.
+                                </p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>What's your OS setup?</h1>
+                                  <p>
+                                    Linux distribution with everything else floating on top. NixOS hosting Arch,
+                                    CentOS, Debian, Void, Windows, macOS and more.
+                                  </p>
+                              </timeline-content>
+                            </timeline-item>
+
+                          </section>
+                        </column-questions>
+
+                    </column-section>
+                </article>
 
                 <br>
 
                 <section id="projects">
-                    <h1 class="heading title has-text-weight-semibold">Projects</h1>
+                  <h1>Projects</h1>
                 </section>
 
-                <div class="resume__break"></div>
+                <br>
 
                 <section>
-                    <div class="tile is-ancestor">
-
-                        <div class="tile is-parent">
-                            <a href="/projects/personal-portfolio">
-                              <img width="203" height="360" src="/images/personal-portfolio.png" alt="thedro">
-                            </a>
-                        </div>
-
-                        <div class="tile is-parent">
-                            <a href="/projects/bulma-resume">
-                              <img width="203" height="360" src="/images/bulma-resume.png" alt="resume">
-                            </a>
-                        </div>
-
-                        <div class="tile is-parent">
-                            <a href="/projects/voiceover-website/">
-                              <img width="203" height="360" src="/images/voiceover-website.png" alt="edwin">
-                            </a>
-                        </div>
-
-                    </div>
+
+                  <tile-set>
+                      <tile-item>
+                        <a href="/projects/personal-portfolio/">
+                          <img
+                            width="203"
+                            height="360"
+                            src="/images/personal-portfolio.png"
+                            alt="thedro"
+                          >
+                        </a>
+                      </tile-item>
+
+                      <tile-item>
+                        <a href="/projects/bulma-resume/">
+                          <img
+                            width="203"
+                            height="360"
+                            src="/images/bulma-resume.png"
+                            alt="resume"
+                          >
+                        </a>
+                      </tile-item>
+
+                      <tile-item>
+                        <a href="/projects/voiceover-website/">
+                          <img
+                            width="203"
+                            height="360"
+                            src="/images/voiceover-website.png"
+                            alt="edwin"
+                          >
+                        </a>
+                      </tile-item>
+                  </tile-set>
+
                 </section>
 
-            </div>
+            </main>
 
-          </div>
+          </column-right>
 
-        </div>
+        </resume-page>
 
     </body>
 </html>
diff --git a/app/views/snippets/favicons.php b/app/views/snippets/favicons.php
index 424d2a3..f052ee5 100644
--- a/app/views/snippets/favicons.php
+++ b/app/views/snippets/favicons.php
@@ -1,7 +1,7 @@
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,<?php echo base64('/public/favicon-32x32.png'); ?>">
-    <link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,<?php echo base64('/public/favicon-16x16.png'); ?>">
-    <link rel="manifest" href="data:application/manifest+json;base64,<?php echo base64('/public/site.webmanifest'); ?>">
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
-    <meta name="msapplication-TileColor" content="#b91d47">
-    <meta name="theme-color" content="#ffffff">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,<?php echo base64('/public/favicon-32x32.png'); ?>">
+<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,<?php echo base64('/public/favicon-16x16.png'); ?>">
+<link rel="manifest" href="data:application/manifest+json;base64,<?php echo base64('/public/site.webmanifest'); ?>">
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+<meta name="msapplication-TileColor" content="#b91d47">
+<meta name="theme-color" content="#ffffff">
diff --git a/app/views/snippets/stylesheets.php b/app/views/snippets/stylesheets.php
index 6132261..7eb1c06 100644
--- a/app/views/snippets/stylesheets.php
+++ b/app/views/snippets/stylesheets.php
@@ -5,10 +5,11 @@
 <?php } ?>
 
 <noscript>
-    <style>
-        .has-navbar-fixed-top { padding-top: 0 !important; }
-        .is-fixed-top { position: unset !important; }
-        .posts__more__content { margin-bottom: 0 !important; }
-        .isso-comments-counter, .comments__section { display: none; }
-    </style>
+  <style>
+    article-comments,
+    [href="#isso-thread"],
+    article-meta-top aside:nth-child(2) svg:first-child {
+      display: none;
+    }
+  </style>
 </noscript>
diff --git a/app/views/upload.view.php b/app/views/upload.view.php
index 93ab171..f504d5b 100644
--- a/app/views/upload.view.php
+++ b/app/views/upload.view.php
@@ -2,31 +2,32 @@
 
 <?php require __DIR__ . '/partials/header.php';?>
 
-    <body>
+<body>
 
 <?php require __DIR__ . '/partials/navigator.php';?>
 
-    <section class="section">
-        <div class="container">
+  <main>
+    <article>
+      <upload-page>
+        <h1>Upload Files</h1>
+        <div id="file-upload-area"></div>
+      </upload-page>
+    </article>
+  </main>
 
-            <h1 class="title has-text-centered">Upload Files</h1>
-            <div id="file-upload-area"></div>
+  <link href="/css/uppy.min.css" rel="stylesheet">
 
-        </div>
-    </section>
+  <script src="/js/uppy.min.js"></script>
 
-    <link href="/css/uppy.min.css" rel="stylesheet">
-    <script src="/js/uppy.min.js"></script>
+  <script>
+   var uppy = Uppy.Core()
+    .use(Uppy.Url, { companionUrl: 'https://www.thedroneely.com/' })
+    .use(Uppy.Webcam, {})
+    .use(Uppy.Dashboard, { inline: true, target: '#file-upload-area',  plugins: ['Url', 'Webcam'] })
+    .use(Uppy.XHRUpload, {endpoint: '/upload/', formdata: true, fieldName: 'upload' })
+  </script>
 
-    <script>
-     var uppy = Uppy.Core()
-        .use(Uppy.Url, { companionUrl: 'https://www.thedroneely.com/' })
-        .use(Uppy.Webcam, {})
-        .use(Uppy.Dashboard, { inline: true, target: '#file-upload-area',  plugins: ['Url', 'Webcam'] })
-        .use(Uppy.XHRUpload, {endpoint: '/upload/', formdata: true, fieldName: 'upload' })
-    </script>
+<?php require __DIR__ . '/partials/footer.php';?>
 
-  <?php require __DIR__ . '/partials/footer.php';?>
-
-    </body>
+</body>
 </html>
diff --git a/generators/hugo/themes/tdro/layouts/_default/_markup/render-codeblock-goat.html b/generators/hugo/themes/tdro/layouts/_default/_markup/render-codeblock-goat.html
index d2d0753..67b004b 100644
--- a/generators/hugo/themes/tdro/layouts/_default/_markup/render-codeblock-goat.html
+++ b/generators/hugo/themes/tdro/layouts/_default/_markup/render-codeblock-goat.html
@@ -14,5 +14,5 @@
       {{ .Inner }}
     </svg>
   {{ end }}
-  <figcaption class="has-text-grey-dark">{{ $caption }}</figcaption>
+  <figcaption>{{ $caption }}</figcaption>
 </diagram-container>
diff --git a/generators/hugo/themes/tdro/layouts/_default/_markup/render-codeblock.html b/generators/hugo/themes/tdro/layouts/_default/_markup/render-codeblock.html
new file mode 100644
index 0000000..7541268
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/_default/_markup/render-codeblock.html
@@ -0,0 +1,17 @@
+{{- $caption := .Attributes.caption -}}
+{{- $type    := .Type | default "text" -}}
+{{- $options := .Attributes.options | default "default=1" -}}
+{{- $id      := print "code-block-" (truncate 7 "" (md5 .Inner)) -}}
+
+<code-block id="{{ $id }}" {{ if in (lower $options) "linenos" }}data-lines{{ end }}>
+  <header>
+  <language-label>
+    <a href="#{{ $id }}"><code>{{ $type }}</code></a>
+  </language-label>
+  </header>
+  {{ highlight .Inner $type (print $options ",lineAnchors=" "code-line-" (truncate 7 "" (md5 .Inner))) }}
+</code-block>
+
+{{- with $caption -}}
+  <footer>{{- . | markdownify -}}</footer>
+{{- end -}}
diff --git a/generators/hugo/themes/tdro/layouts/_default/_markup/render-heading.html b/generators/hugo/themes/tdro/layouts/_default/_markup/render-heading.html
index 10e6709..48e02c1 100644
--- a/generators/hugo/themes/tdro/layouts/_default/_markup/render-heading.html
+++ b/generators/hugo/themes/tdro/layouts/_default/_markup/render-heading.html
@@ -1,6 +1,5 @@
 <h{{ .Level }} id="{{ .Anchor | safeURL }}">
   <a
-    class="article__heading__anchor"
     title="{{ .Text | safeHTML }}"
     href="#{{ .Anchor | safeURL }}">
     {{ .Text | safeHTML }}
diff --git a/generators/hugo/themes/tdro/layouts/_default/_markup/render-image.html b/generators/hugo/themes/tdro/layouts/_default/_markup/render-image.html
index 5307cc2..1b524ac 100644
--- a/generators/hugo/themes/tdro/layouts/_default/_markup/render-image.html
+++ b/generators/hugo/themes/tdro/layouts/_default/_markup/render-image.html
@@ -39,7 +39,7 @@
     />
   </a>
 {{ if $.Title }}
-<figcaption class="has-text-grey-dark">{{ $.Title | markdownify }}</figcaption>
+<figcaption>{{ $.Title | markdownify }}</figcaption>
 {{ end -}}
 </figure>
 {{- /* This comment removes trailing newlines. */ -}}
diff --git a/generators/hugo/themes/tdro/layouts/_default/archive.html b/generators/hugo/themes/tdro/layouts/_default/archive.html
index 7399a98..8cbd435 100644
--- a/generators/hugo/themes/tdro/layouts/_default/archive.html
+++ b/generators/hugo/themes/tdro/layouts/_default/archive.html
@@ -1,36 +1,29 @@
 {{ define "main" }}
-<section class="section is-fullheight">
-  <div class="container">
-    <div class="columns is-centered">
-      <div class="column is-7">
-        {{ $type := .Type }}
+<main>
+  <article-archive-list>
+  {{ $type := .Type }}
 
-        {{ range (.Site.RegularPages.GroupByDate "2006") }}
-          {{ $articles := (where .Pages "Type" $type) }}
-          {{ if and (gt .Key 1) (gt (where .Pages "Type" $type) 0) }}
-
-            {{ range (first 1 $articles) }}
-            <h1 class="article__list title is-4 has-text-weight-normal has-margin-bottom-lg">{{ .Date.Format "2006" }}</h1>
-            {{ end }}
-
-            <ul class="article__list">
-              {{ range $articles }}
-                {{ if (ne .Params.hidden true) }}
-                <li>
-                  <a title="{{ .Title }}" class="is-block" href="{{ .RelPermalink }}">
-                    <span class="article__list__date monospace has-text-grey-dark">{{ .Date.Format "02 Jan" }}</span>
-                    {{- .Title | markdownify -}}
-                  </a>
-                </li>
-                {{ end }}
-              {{ end }}
-            </ul>
+  {{ range (.Site.RegularPages.GroupByDate "2006") }}
+    {{ $articles := (where .Pages "Type" $type) }}
+    {{ if and (gt .Key 1) (gt (where .Pages "Type" $type) 0) }}
+      {{ range (first 1 $articles) }}
+      <h1>{{ .Date.Format "2006" }}</h1>
+      {{ end }}
 
+      <ul>
+        {{ range $articles }}
+          {{ if (ne .Params.hidden true) }}
+          <li>
+            <a title="{{ .Title }}" href="{{ .RelPermalink }}">
+              <code><time datetime="{{ dateFormat "2006-01-02" .Date }}">{{ .Date.Format "02 Jan" }}</time></code>
+              <span>{{- .Title | markdownify -}}</span>
+            </a>
+          </li>
           {{ end }}
         {{ end }}
-
-      </div>
-    </div>
-  </div>
-</section>
+      </ul>
+    {{ end }}
+  {{ end }}
+  </article-archive-list>
+</main>
 {{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/_default/baseof.html b/generators/hugo/themes/tdro/layouts/_default/baseof.html
index 81c9a1e..0f84698 100644
--- a/generators/hugo/themes/tdro/layouts/_default/baseof.html
+++ b/generators/hugo/themes/tdro/layouts/_default/baseof.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
-<html class="has-navbar-fixed-top" lang="en-us" itemscope itemtype="http://schema.org/Article">
+<html lang="en-us" itemscope itemtype="http://schema.org/Article">
 
 <head>
 
-{{ partial "head.html" . -}}
+{{ partial "base-head.html" . -}}
   
 </head>
 
 <body>
 
-{{ partial "nav.html" . -}}
+{{ partial "base-nav.html" . -}}
 
 	{{- block "main" . }} 
 		<p>If you are seeing this, your page content hasn't been created.</p>
 	{{- end }}
 
-{{ partial "footer.html" . -}}
+{{ partial "base-footer.html" . -}}
diff --git a/generators/hugo/themes/tdro/layouts/_default/index.json b/generators/hugo/themes/tdro/layouts/_default/index.json
index 3cab4c6..92801bf 100644
--- a/generators/hugo/themes/tdro/layouts/_default/index.json
+++ b/generators/hugo/themes/tdro/layouts/_default/index.json
@@ -32,7 +32,7 @@
         {{- end -}}
       ],
       "content_text": {{ $data.Plain | jsonify }},
-      "content_html": {{ $data.Content | jsonify }}
+      "content_html": {{ partial "function-content.html" $data.Content | jsonify }}
     }
     {{- end -}}
     {{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/_default/list.html b/generators/hugo/themes/tdro/layouts/_default/list.html
deleted file mode 100644
index 78fec9b..0000000
--- a/generators/hugo/themes/tdro/layouts/_default/list.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{{ define "main" }}
-<section class="section">
-	<div class="container">
-		<div class="columns is-centered">
-			<div class="column is-7">
-				<article class="content">
-				<h2 class="title">{{ .Title | markdownify }}</h2>
-				{{ range .Paginator.Pages }}
-				{{ .Render "summary" }}
-				{{ end }}
-				</article>
-				{{ partial "pagination.html" . }}
-			</div>
-		</div>
-	</div>
-</section>
-{{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/_default/rss.xml b/generators/hugo/themes/tdro/layouts/_default/rss.xml
index 9f94c84..47c2d70 100644
--- a/generators/hugo/themes/tdro/layouts/_default/rss.xml
+++ b/generators/hugo/themes/tdro/layouts/_default/rss.xml
@@ -24,7 +24,7 @@
         <link>{{ .Permalink }}</link>
         <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
         <guid>{{ .Permalink }}</guid>
-        <description>{{ .Content | html }}</description>
+        <description>{{ partial "function-content.html" .Content | html }}</description>
       </item>
       {{ end }}
     {{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/_default/section.html b/generators/hugo/themes/tdro/layouts/_default/section.html
index 47ea0a7..10f501a 100644
--- a/generators/hugo/themes/tdro/layouts/_default/section.html
+++ b/generators/hugo/themes/tdro/layouts/_default/section.html
@@ -1,26 +1,25 @@
 {{ define "main" }}
-<section class="section is-fullheight">
-  <div class="container">
-    <div class="columns is-centered">
-      <div class="column is-7">
-        <article class="content">
-        <br>
-        <span class="marginnote rightnote">
-          See an archive of all {{ .Type }} <a href="{{ partial "archive-link.html" . }}">here.</a>
-        </span>
-        <recent-articles>
-          {{ range where .Paginator.Pages ".Params.hidden" "ne" "true" }}
-            {{ .Render "summary" }}
-          {{ end }}
-        </recent-articles>
-        </article>
-        {{ partial "pagination.html" . }}
-        <br>
-        <a href="{{ partial "archive-link.html" . }}" class="front__more is-block has-text-centered">
-          <span>Archive of all {{ .Type }}</span> {{ safeHTML (readFile "public/css/icons/feather/corner-down-right.svg") }}
-        </a>
-      </div>
-    </div>
-  </div>
-</section>
+<main>
+  <article-list>
+
+    <margin-note right>
+      See an archive of all {{ .Type }} <a href="/archives/{{ .Type }}/">here.</a>
+    </margin-note>
+
+    <recent-articles>
+      {{ if eq .Title "Posts" }}<recent-posts>{{ end }}
+      {{ if eq .Title "Projects" }}<recent-projects>{{ end }}
+        {{ range where .Paginator.Pages ".Params.hidden" "ne" "true" }}
+          {{ .Render "summary" }}
+        {{ end }}
+      {{ if eq .Title "Posts" }}</recent-posts>{{ end }}
+      {{ if eq .Title "Projects" }}</recent-projects>{{ end }}
+    </recent-articles>
+
+  {{ partial "article-pagination.html" . }}
+
+  {{ partial "article-archive-link.html" . }}
+
+  </article-list>
+</main>
 {{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/_default/single.html b/generators/hugo/themes/tdro/layouts/_default/single.html
index a3eaf4a..96bb02c 100644
--- a/generators/hugo/themes/tdro/layouts/_default/single.html
+++ b/generators/hugo/themes/tdro/layouts/_default/single.html
@@ -1,141 +1,18 @@
 {{ define "main" }}
-<main class="section is-block is-fullheight">
-  <div class="container">
-    <div class="columns is-centered">
-      <div class="column is-7">
-        <article class="content document">
-          <h1 class="title is-2 serif">{{ .Title | markdownify }}</h1>
-          {{ if .Params.toc }}
-          <div class="tableofcontents marginnote rightnote is-inline">
-            <div class="is-size-6 is-uppercase has-text-weight-bold has-spacing-widest has-margin-bottom-sm">Table of Contents</div>
-            {{ .TableOfContents }}
-          </div>
-          {{ end }}
-
-          <aside class="subtitle is-6 has-text-grey-dark">
-            {{- partial "page-meta.html" . -}}
-            <br>
-            <span class="isso-comments-counter"><a class="has-text-grey-dark focus-link" title="Jump to Comments" href="#isso-thread">0 Comments</a> &middot;</span>
-            {{- partial "read-time.html" . -}} &middot; {{ .FuzzyWordCount }} words
-          </aside>
-
-          {{- partial "page-status.html" . -}}
-
-          {{- .Content |
-            replaceRE "<p>\n<figure>" "<figure>" |
-            replaceRE "</figure></p>" "</figure>" |
-            replaceRE "<p>" "<p class=\"serif is-size-serif\">" |
-            replaceRE "<h2" "<h2 class=\"serif\"" |
-            replaceRE "<h3" "<h3 class=\"serif\"" |
-            safeHTML
-          -}}
-        </article>
-      </div>
-    </div>
-  </div>
+<main>
+  <article>
+    <h1>{{ .Title | markdownify }}</h1>
+    {{- partial "article-table-contents.html" . -}}
+    {{- partial "article-meta-top.html" . -}}
+    {{- partial "function-content.html" .Content | safeHTML -}}
+  </article>
+
+  {{- partial "article-meta-bottom.html"  . -}}
+  {{- partial "article-more-content.html" . -}}
+  {{- if fileExists "themes/tdro/layouts/partials/openring.html" -}}
+  {{- partial "article-on-web.html"       . -}}
+  {{- end -}}
+  {{- partial "article-syntax.html"       . -}}
+  {{- partial "article-comments.html"     . -}}
 </main>
-
-<aside class="section">
-  <div class="container">
-    <div class="columns is-tablet is-centered">
-      <div class="column is-7 has-text-grey-dark has-text-right">
-        <p>
-          {{ dateFormat "2 January 2006" .Params.date }}
-          <code> &mdash; Written</code>
-          <br>
-          {{ if .Params.updated }}
-            {{ dateFormat "2 January 2006" .Params.updated }}
-          {{ else }}
-            {{ dateFormat "2 January 2006" .Params.date }}
-          {{ end }}
-          <code> &mdash; Updated</code>
-          <br>
-          {{ .Site.Author.name }}<code> &mdash; Creator</code>
-          <br>
-          <a class="has-text-grey-dark" href="{{ strings.TrimRight "/" .Permalink }}.md">{{ .Slug }}.md</a><code> &mdash; Article</code>
-        </p>
-      </div>
-    </div>
-  </div>
-</aside>
-
-<aside class="section content article__more__content has-margin-bottom-none">
-  <div class="container">
-    <div class="columns is-tablet is-centered">
-      <div class="column is-7">
-
-        <section class="section-vertical">
-          <h2 class="is-uppercase is-size-5 has-spacing-widest has-margin-bottom-lg">More Content</h2>
-          {{ $related :=  shuffle .Site.RegularPages | first 3 }}
-          {{ with $related }}
-          {{ range . }}
-
-          <ul>
-            <li>
-              <p class="has-margin-none">
-                <a href="{{ .RelPermalink }}" title="{{ truncate 100 "..." .Summary }}" class="serif is-size-4">
-                  {{ .Title | markdownify }}
-                </a>
-              </p>
-              <time datetime="{{ dateFormat "2006-01-02" .Date }}">
-                {{ dateFormat "02 Jan 2006" .Date }}
-              </time>
-            </li>
-          </ul>
-
-          {{ end }}
-          {{ end }}
-        </section>
-
-      </div>
-    </div>
-  </div>
-</aside>
-
-<aside class="section content article__webring">
-  <div class="container">
-    <div class="columns is-tablet is-centered">
-      <div class="column is-7">
-
-        <section class="webring section-vertical">
-          <a href="https://git.sr.ht/~sircmpwn/openring"
-          title="Generated by Open Ring"
-          class="attribution is-pulled-right has-text-grey-dark">
-            <span class="button item__box item__no__hover">
-            {{ safeHTML (readFile "public/css/icons/feather/help-circle.svg") }}
-            <span>Openring</span>
-            </span>
-          </a>
-          {{- partial "openring.html" . -}}
-        </section>
-
-      </div>
-    </div>
-  </div>
-</aside>
-
-{{ if .Params.syntax }}
-<link rel="stylesheet" href="/css/syntax-highlight.css">
-{{ end }}
-
-<aside class="section content container">
-  <div class="columns is-centered">
-    <div class="column is-7">
-
-      <h1 id="comments" class="is-uppercase is-size-5 has-spacing-widest">Comments</h1>
-
-      <script
-        data-isso="/isso/"
-        data-title="{{ .Title }}"
-        data-isso-css="false"
-        data-isso-reply-notifications="true"
-        src="/isso/js/embed.min.js">
-      </script>
-
-      <div id="isso-thread" data-title="{{ .Title }}"></div>
-
-    </div>
-  </div>
-</aside>
-
 {{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/_default/subsection.html b/generators/hugo/themes/tdro/layouts/_default/subsection.html
index ffaa3f9..d57c2cb 100644
--- a/generators/hugo/themes/tdro/layouts/_default/subsection.html
+++ b/generators/hugo/themes/tdro/layouts/_default/subsection.html
@@ -1,15 +1,9 @@
 {{ define "main" }}
-<section class="section is-fullheight">
-  <div class="container">
-    <div class="columns is-centered">
-      <div class="column is-7">
-        <article class="content document">
-          <h1 class="title is-3">{{ .Title | markdownify }}</h1>
-          {{- partial "page-status.html" . -}}
-          {{- .Content | safeHTML }}
-        </article>
-      </div>
-    </div>
-  </div>
-</section>
+<main>
+  <article-subsection>
+    <h1>{{ .Title | markdownify }}</h1>
+    {{- partial "meta-pagestatus.html" . -}}
+    {{- .Content | safeHTML -}}
+  </article-subsection>
+</main>
 {{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/_default/summary.html b/generators/hugo/themes/tdro/layouts/_default/summary.html
index ae150d5..4d41046 100644
--- a/generators/hugo/themes/tdro/layouts/_default/summary.html
+++ b/generators/hugo/themes/tdro/layouts/_default/summary.html
@@ -1,27 +1,24 @@
-<div class="columns is-mobile">
+<article-card>
+  <article-thumbnail>
+    {{ partial "article-thumbnail-image.html" . }}
+  </article-thumbnail>
 
-  <div class="column is-5 has-text-centered">
-    {{ partial "thumbnail-image.html" . }}
-  </div>
+  <article-summary>
+      <h2><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title | markdownify }}</a></h2>
 
-  <div class="column is-7">
-    <article>
-      <header class="post-header">
+      <article-summary-meta>
+        {{- partial "meta-pagedate.html" . -}}
+        {{- partial "meta-pagestatus.html" . -}}
+        {{- partial "meta-readtime.html" . -}}
+      </article-summary-meta>
 
-      <h2 class="article__title title is-5 has-text-weight-bold">
-        <a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title | markdownify }}</a>
-      </h2>
-
-      <p class="article__date subtitle is-6">
-        {{ partial "page-date.html" . }}{{ partial "page-status.html" . }} &middot; {{ partial "read-time.html" . }}
+      <p>
+        {{ if .Params.summary }}
+          {{ truncate 75 "..." .Params.summary }}
+        {{ else }}
+          {{ truncate 75 "..." .Summary}}
+        {{ end }}
       </p>
-
-      </header>
-      <p class="article__summary">{{ if .Params.summary }}{{ truncate 75 "..." .Params.summary }}{{ else }}{{ truncate 75 "..." .Summary}}{{ end }}</p>
-      <p><a href='{{ .Permalink }}'>Continue reading ({{ .FuzzyWordCount }} words)</a></p>
-    </article>
-  </div>
-
-</div>
-
-<hr class="article__divider">
+      <a href='{{ .Permalink }}'>Continue reading ({{ .FuzzyWordCount }} words)</a>
+  </article-summary>
+</article-card>
diff --git a/generators/hugo/themes/tdro/layouts/_default/taxonomy.html b/generators/hugo/themes/tdro/layouts/_default/taxonomy.html
index 134c19b..ec5a71f 100644
--- a/generators/hugo/themes/tdro/layouts/_default/taxonomy.html
+++ b/generators/hugo/themes/tdro/layouts/_default/taxonomy.html
@@ -1,63 +1,68 @@
 {{ define "main" }}
-{{ $sidenote := "<span class=\"marginnote rightnote\">See an archive of all taxonomies <a href=\"/archives/tags/\">here.</a></span>" }}
-<section class="section is-fullheight">
-  <div class="container">
-    <div class="columns is-centered">
-      <div class="column is-7">
-        {{ $title := .Title }}
-        {{ if eq $title "Tags" }}
-          <article class="content">
-          <h1 class="article__list title is-3">Taxonomies</h1>
-          {{ safeHTML $sidenote }}
-          {{ range .Paginator.Pages }}
-            {{ $title := .Title }}
-            <h1 class="article__list smallcaps title">{{ .Title | title }}</h1>
-            {{ range $taxonomy := .Site.Taxonomies }}
-              {{ range $tag, $article := $taxonomy }}
-                {{ if eq $tag $title }}
-                <ul class="article__list">
-                  {{ range $article.Pages }}
-                  <li>
-                    <a title="{{ .Title }}" class="is-block" href="{{ .RelPermalink }}">
-                      <span class="article__list__date monospace has-text-grey-dark">{{ .Date.Format "02 Jan 2006" }}</span>{{ .Title }}
-                    </a>
-                  </li>
-                  {{ end }}
-                </ul>
+  {{ $sidenote := "<margin-note right>See an archive of all taxonomies <a href=\"/archives/tags/\">here.</a></margin-note>" }}
+  {{ $title := .Title }}
+  {{ if eq $title "Tags" }}
+    <main>
+      <taxonomy-list>
+      {{ safeHTML $sidenote }}
+      <h1>Taxonomies</h1>
+      <hr>
+      <section>
+        {{ range .Paginator.Pages }}
+          {{ $title := .Title }}
+          <h2>{{ .Title | title }}</h2>
+          {{- range $taxonomy := .Site.Taxonomies -}}
+            {{- range $tag, $article := $taxonomy -}}
+              {{ if eq $tag $title }}
+              <ul>
+                {{ range $article.Pages }}
+                <li>
+                  <a title="{{ .Title }}" href="{{ .RelPermalink }}">
+                    <code><time datetime="{{ dateFormat "2006-01-02" .Date }}">{{ .Date.Format "02 Jan 2006" }}</time></code>
+                    <span>{{ .Title }}</span>
+                  </a>
+                </li>
                 {{ end }}
+              </ul>
               {{ end }}
-            {{ end }}
-          {{ end }}
-          </article>
-          {{ partial "pagination.html" . }}
-        {{ else  }}
-          <article class="content">
-          <h1 class="smallcaps title">
-            {{ if ne $title "Tags" }} <a href="/{{ .Data.Plural }}/">Tags</a> <span>&mdash;</span> <span>{{ end }}{{ .Title | title }}</span>
-          </h1>
-          {{ safeHTML $sidenote }}
-            {{ range $taxonomy := .Site.Taxonomies }}
-              {{ range $tag, $article := $taxonomy }}
-                {{ if eq $tag $title }}
-                <ul class="article__list">
-                  {{ range $article.Pages }}
-                  <li>
-                    <a title="{{ .Title }}" class="is-block" href="{{ .RelPermalink }}">
-                      <span class="article__list__date monospace has-text-grey-dark">
-                        {{- .Date.Format "02 Jan 2006" -}}
-                      </span>
-                      {{- .Title | markdownify -}}
-                    </a>
-                  </li>
-                  {{ end }}
-                </ul>
-                {{ end }}
-              {{ end }}
-            {{ end }}
-          </article>
+            {{- end -}}
+          {{- end -}}
+        {{- end -}}
+      </section>
+      {{ partial "article-pagination.html" . }}
+      </taxonomy-list>
+    </main>
+  {{ else  }}
+    <main>
+      <taxonomy-list>
+      {{ safeHTML $sidenote }}
+      <h1>
+        {{ if ne $title "Tags" }}
+          <a href="/{{ .Data.Plural }}/">Tags</a>
+          <span>&mdash;</span>
+          <span>{{ .Title | title }}</span>
         {{ end }}
-      </div>
-    </div>
-  </div>
-</section>
+      </h1>
+      <hr>
+      <section>
+        {{- range $taxonomy := .Site.Taxonomies -}}
+          {{- range $tag, $article := $taxonomy -}}
+            {{- if eq $tag $title -}}
+            <ul>
+              {{ range $article.Pages }}
+              <li>
+                <a title="{{ .Title }}" href="{{ .RelPermalink }}">
+                  <code><time datetime="{{ dateFormat "2006-01-02" .Date }}">{{- .Date.Format "02 Jan 2006" -}}</time></code>
+                  <span>{{- .Title | markdownify -}}</span>
+                </a>
+              </li>
+              {{ end }}
+            </ul>
+            {{- end -}}
+          {{- end -}}
+        {{- end -}}
+      </section>
+      </taxonomy-list>
+    </main>
+  {{ end }}
 {{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/_default/taxonomy_archive.html b/generators/hugo/themes/tdro/layouts/_default/taxonomy_archive.html
index 859252f..614ef98 100644
--- a/generators/hugo/themes/tdro/layouts/_default/taxonomy_archive.html
+++ b/generators/hugo/themes/tdro/layouts/_default/taxonomy_archive.html
@@ -1,34 +1,31 @@
 {{ define "main" }}
-<section class="section is-fullheight">
-  <div class="container">
-    <div class="columns is-centered">
-      <div class="column is-7">
-        {{ $title := .Title }}
-        <article class="content">
-          <h1 class="article__list smallcaps title">{{ .Title | markdownify }}</h1>
-          {{ range $taxonomy := .Site.Taxonomies }}
-            {{ $title := .Title }}
-            {{ range $tag, $article := $taxonomy }}
-              {{ if ne $tag $title }}
-                <h1 class="article__list smallcaps title is-4">{{ $tag }}</h1>
-                <ul class="article__list">
-                  {{ range $article.Pages }}
-                    <li>
-                      <a title="{{ .Title }}" class="is-block" href="{{ .RelPermalink }}">
-                        <span class="article__list__date monospace has-text-grey-dark">
-                          {{- .Date.Format "02 Jan 2006" -}}
-                        </span>
-                        {{- .Title | markdownify -}}
-                      </a>
-                    </li>
-                  {{ end }}
-                </ul>
-              {{ end }}
+  <main>
+    <taxonomy-archive-list>
+    {{ $title := .Title }}
+    <h1>{{ .Title | markdownify }}</h1>
+    <hr>
+      <section>
+        {{ range $taxonomy := .Site.Taxonomies }}
+          {{ $title := .Title }}
+          {{ range $tag, $article := $taxonomy }}
+            {{ if ne $tag $title }}
+              <h2>{{ $tag }}</h2>
+              <ul>
+                {{ range $article.Pages }}
+                  <li>
+                    <a
+                      title="{{ .Title }}"
+                      href="{{ .RelPermalink }}">
+                      <code><time>{{- .Date.Format "02 Jan 2006" -}}</time></code>
+                      <span>{{- .Title | markdownify -}}</span>
+                    </a>
+                  </li>
+                {{ end }}
+              </ul>
             {{ end }}
           {{ end }}
-        </article>
-      </div>
-    </div>
-  </div>
-</section>
+        {{ end }}
+      </section>
+    </taxonomy-archive-list>
+  </main>
 {{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/abstracts/section.html b/generators/hugo/themes/tdro/layouts/abstracts/section.html
index f7dad6c..d06ab1e 100644
--- a/generators/hugo/themes/tdro/layouts/abstracts/section.html
+++ b/generators/hugo/themes/tdro/layouts/abstracts/section.html
@@ -1,28 +1,25 @@
 {{ define "main" }}
-<section class="section is-fullheight">
-  <div class="container">
-    <div class="columns is-centered">
-      <div class="column is-7">
-        <article class="content">
-          <h1 class="title is-3">{{ .Type | title }}</h1>
-          <span class="marginnote rightnote">
-            See an archive of all {{ .Type }} <a href="{{ partial "archive-link.html" . }}">here.</a>
-          </span>
-          <recent-articles>
-            <div class="abstract tile is-ancestor has-text-centered">
-              {{ range where .Paginator.Pages ".Params.hidden" "ne" "true" }}
-              {{ .Render "summary" }}
-              {{ end }}
-            </div>
-          </recent-articles>
-        </article>
-        {{ partial "pagination.html" . }}
-        <br>
-        <a href="{{ partial "archive-link.html" . }}" class="front__more is-block has-text-centered">
-          <span>Archive of all {{ .Type }}</span> {{ safeHTML (readFile "public/css/icons/feather/corner-down-right.svg") }}
-        </a>
-      </div>
-    </div>
-  </div>
-</section>
+<main>
+  <abstracts-page>
+    <article-list>
+        <h1>{{ .Type | title }}</h1>
+
+        <margin-note right>
+          See an archive of all {{ .Type }} <a href="/archives/{{ .Type }}/">here.</a>
+        </margin-note>
+
+        <recent-articles>
+          <recent-abstracts>
+            {{ range where .Paginator.Pages ".Params.hidden" "ne" "true" }}
+            {{ .Render "summary" }}
+            {{ end }}
+          </recent-abstracts>
+        </recent-articles>
+
+      {{ partial "article-pagination.html" . }}
+
+      {{ partial "article-archive-link.html" . }}
+    </article-list>
+  </abstracts-page>
+</main>
 {{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/abstracts/summary.html b/generators/hugo/themes/tdro/layouts/abstracts/summary.html
index e81dae3..3018677 100644
--- a/generators/hugo/themes/tdro/layouts/abstracts/summary.html
+++ b/generators/hugo/themes/tdro/layouts/abstracts/summary.html
@@ -1,11 +1,22 @@
-<div class="tile is-parent">
-  <article class="abstract tile is-child">
-    {{ partial "thumbnail-image.html" . }}
-    <h2 class="article__title title is-5 has-text-weight-bold">
-      <a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title | markdownify }}</a>
-    </h2>
-    <p class="article__date subtitle is-6">
-    {{ partial "page-date.html" . }} <br> {{ partial "read-time.html" .}}
-    </p>
-  </article>
-</div>
+<abstract-card>
+  <abstract-thumbnail>
+    {{ partial "article-thumbnail-image.html" . }}
+  </abstract-thumbnail>
+  <abstract-summary>
+    <section>
+      <h2>
+        <a
+          href="{{ .Permalink }}"
+          title="{{ .Title }}">
+          {{ .Title | markdownify }}
+        </a>
+      </h2>
+      <abstract-summary-meta>
+        <footer>
+          <p>{{ partial "meta-pagedate.html" . }}</p>
+          <p>{{ partial "meta-readtime.html" . }}</p>
+        </footer>
+      </abstract-summary-meta>
+    </section>
+  </abstract-summary>
+</abstract-card>
diff --git a/generators/hugo/themes/tdro/layouts/partials/archive-link.html b/generators/hugo/themes/tdro/layouts/partials/archive-link.html
deleted file mode 100644
index 8b08ba3..0000000
--- a/generators/hugo/themes/tdro/layouts/partials/archive-link.html
+++ /dev/null
@@ -1,2 +0,0 @@
-/archives/{{ .Type }}/
-{{- /* Strip newline. */ -}}
diff --git a/generators/hugo/themes/tdro/layouts/partials/article-archive-link.html b/generators/hugo/themes/tdro/layouts/partials/article-archive-link.html
new file mode 100644
index 0000000..0c9e6bd
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/article-archive-link.html
@@ -0,0 +1,6 @@
+<article-archive-link>
+  <a href="/archives/{{ .Type }}/">
+    <span>Archive of all {{ .Type }}</span>
+    {{ safeHTML (readFile "public/css/icons/feather/corner-down-right.svg") }}
+  </a>
+</article-archive-link>
diff --git a/generators/hugo/themes/tdro/layouts/partials/article-comments.html b/generators/hugo/themes/tdro/layouts/partials/article-comments.html
new file mode 100644
index 0000000..8788254
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/article-comments.html
@@ -0,0 +1,14 @@
+<article-comments>
+  <section>
+    <h2 id="comments">Comments</h2>
+    <script
+      data-isso="/isso/"
+      data-isso-css="false"
+      data-title="{{ .Title }}"
+      data-isso-reply-notifications="true"
+      src="/isso/js/embed.min.js"
+    >
+    </script>
+    <aside id="isso-thread" data-title="{{ .Title }}"></aside>
+  </section>
+</article-comments>
diff --git a/generators/hugo/themes/tdro/layouts/partials/article-meta-bottom.html b/generators/hugo/themes/tdro/layouts/partials/article-meta-bottom.html
new file mode 100644
index 0000000..d1adf5c
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/article-meta-bottom.html
@@ -0,0 +1,15 @@
+<article-meta-bottom>
+  {{ dateFormat "2 January 2006" .Params.date }}
+  <code> &mdash; Written</code>                         
+  <br>
+  {{ if .Params.updated }}
+    {{ dateFormat "2 January 2006" .Params.updated }}
+  {{ else }}
+    {{ dateFormat "2 January 2006" .Params.date }}
+  {{ end }}
+  <code> &mdash; Updated</code>                         
+  <br>
+  {{ .Site.Author.name }}<code> &mdash; Creator</code>  
+  <br>
+  <a href="{{ strings.TrimRight "/" .Permalink }}.md">{{ .Slug }}.md</a><code> &mdash; Article</code>
+</article-meta-bottom>
diff --git a/generators/hugo/themes/tdro/layouts/partials/article-meta-top.html b/generators/hugo/themes/tdro/layouts/partials/article-meta-top.html
new file mode 100644
index 0000000..27f069c
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/article-meta-top.html
@@ -0,0 +1,13 @@
+<article-meta-top>
+  <aside>
+    {{- partial "meta-pagedate.html" . -}}
+    {{- partial "meta-pagetags.html" . -}}
+  </aside>
+  <aside>
+    {{- partial "meta-commentcount.html" . -}}
+    {{- partial "meta-readtime.html" . -}}
+    {{- partial "meta-wordcount.html" . -}}
+    {{- partial "meta-feedlink.html" . -}}
+    {{- partial "meta-pagestatus.html" . -}}
+  </aside>
+</article-meta-top>
diff --git a/generators/hugo/themes/tdro/layouts/partials/article-more-content.html b/generators/hugo/themes/tdro/layouts/partials/article-more-content.html
new file mode 100644
index 0000000..dbe5725
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/article-more-content.html
@@ -0,0 +1,25 @@
+<article-more-content>
+  <section>
+    <h2>More Content</h2>
+    {{ $more := shuffle .Site.RegularPages | first 3 }}
+    {{ with $more }}
+      {{ range . }}
+        <ul>
+          <li>
+            <h3>
+              <a 
+                href="{{ .RelPermalink }}" 
+                title="{{ truncate 100 "..." .Summary }}"
+              >
+                {{ .Title | markdownify }}
+              </a>
+            </h3>
+            <time datetime="{{ dateFormat "2006-01-02" .Date }}">
+              {{ dateFormat "January 2, 2006" .Date }}
+            </time>
+          </li>
+        </ul>
+      {{ end }}
+    {{ end }}
+  </section>
+</article-more-content>
diff --git a/generators/hugo/themes/tdro/layouts/partials/article-on-web.html b/generators/hugo/themes/tdro/layouts/partials/article-on-web.html
new file mode 100644
index 0000000..59776da
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/article-on-web.html
@@ -0,0 +1,12 @@
+<article-on-web>
+  <section>
+    <button-anchor>
+      <a href="https://git.sr.ht/~sircmpwn/openring" title="Generated by Open Ring">
+        {{ safeHTML (readFile "public/css/icons/feather/help-circle.svg") }}
+        <span>Openring</span>
+      </a>
+    </button-anchor>
+    <h2>On the Web</h2>
+  </section>
+  {{- partial "openring.html" . -}}
+</article-on-web>
diff --git a/generators/hugo/themes/tdro/layouts/partials/article-pagination.html b/generators/hugo/themes/tdro/layouts/partials/article-pagination.html
new file mode 100644
index 0000000..0d07e0e
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/article-pagination.html
@@ -0,0 +1,77 @@
+{{- $HugoPaginator := $.Paginator -}}
+{{- $Pages := $HugoPaginator.TotalNumberOfElements -}}
+{{- $MyPaginator := math.Ceil (div (float $Pages) 3) -}}
+
+{{ if gt $HugoPaginator.TotalPages 1 }}
+
+<pagination-controller>
+  <nav>
+
+    <pagination-previous>
+      <a {{ if $HugoPaginator.HasPrev }}
+        href="{{ $HugoPaginator.Prev.URL }}"
+        {{ end }}
+        title="Previous page"
+        {{ if not $HugoPaginator.HasPrev }}
+        data-disabled
+        {{ end }}
+      >
+        Previous
+      </a>
+    </pagination-previous>
+
+    <ul>
+
+    {{- $.Scratch.Set "__paginator.ellipsed" false -}}
+    {{- range (first $MyPaginator $HugoPaginator.Pagers) -}}
+    {{- $right := sub .TotalPages .PageNumber -}}
+    {{- $showNumber := or (le .PageNumber 1) (eq $right 0) -}}
+    {{- $showNumber := or $showNumber (and (gt .PageNumber (sub $HugoPaginator.PageNumber 2)) (lt .PageNumber (add $HugoPaginator.PageNumber 2))) -}}
+
+      {{ if $showNumber }}
+        {{ $.Scratch.Set "__paginator.ellipsed" false }}
+        {{ $.Scratch.Set "__paginator.shouldEllipse" false }}
+      {{ else }}
+        {{ $.Scratch.Set "__paginator.shouldEllipse" (not ($.Scratch.Get "__paginator.ellipsed") ) }}
+        {{ $.Scratch.Set "__paginator.ellipsed" true }}
+      {{ end }}
+
+      {{ if $showNumber }}
+
+        <li>
+          <a
+            href="{{ .URL }}"
+            title="Go to page {{ .PageNumber }}"
+            {{ if eq . $HugoPaginator }}data-pagination-current{{ end }}
+          >
+            {{ .PageNumber }}
+          </a>
+        </li>
+
+      {{ else if ($.Scratch.Get "__paginator.shouldEllipse") }}
+
+        <li><pagination-ellipsis>&hellip;</pagination-ellipsis></li>
+
+      {{ end }}
+
+    {{ end }}
+    </ul>
+    <pagination-next>
+      <a
+        {{ if not (le (int $MyPaginator) $HugoPaginator.PageNumber) }}
+        {{ if $HugoPaginator.HasNext }}
+        href="{{ $HugoPaginator.Next.URL }}"
+        {{ end }}
+        {{ end }}
+        title="Next page"
+        {{ if le (int $MyPaginator) $HugoPaginator.PageNumber }}
+        data-disabled
+        {{ end }}
+      >
+        Next
+      </a>
+    </pagination-next>
+
+  </nav>
+</pagination-controller>
+{{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/partials/article-syntax.html b/generators/hugo/themes/tdro/layouts/partials/article-syntax.html
new file mode 100644
index 0000000..63479e9
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/article-syntax.html
@@ -0,0 +1,3 @@
+{{ if .Params.syntax }}
+  <link rel="stylesheet" href="/css/syntax-highlight.css">
+{{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/partials/article-table-contents.html b/generators/hugo/themes/tdro/layouts/partials/article-table-contents.html
new file mode 100644
index 0000000..89970dc
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/article-table-contents.html
@@ -0,0 +1,6 @@
+{{- if .Params.toc -}}
+  <table-contents>
+    <h2>Table of Contents</h2>
+    {{ .TableOfContents }}
+  </table-contents>
+{{- end -}}
diff --git a/generators/hugo/themes/tdro/layouts/partials/article-thumbnail-image.html b/generators/hugo/themes/tdro/layouts/partials/article-thumbnail-image.html
new file mode 100644
index 0000000..8f592f9
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/article-thumbnail-image.html
@@ -0,0 +1,27 @@
+{{- $imageFile := print "public/images/thumbnails/" (partial "article-image.html" .) ".png" -}}
+{{- if fileExists $imageFile -}}
+{{- $image := imageConfig $imageFile -}}
+<a title="{{ .Title }}" href="{{ .Permalink }}">
+  <picture>
+    <source srcset="/images/thumbnails/{{ partial "article-image.html" . }}.png" type="image/png">
+    <source srcset="/images/thumbnails/{{ partial "article-image.html" . }}.jpg" type="image/jpeg">
+    <source srcset="/images/thumbnails/{{ partial "article-image.html" . }}.webp" type="image/webp">
+    <img
+      alt="{{ .Title }}"
+      src="/images/thumbnails/{{ partial "article-image.html" . }}.png"
+      width="{{ $image.Width }}"
+      height="{{ $image.Height }}"
+    />
+  </picture>
+</a>
+{{- else -}}
+{{- $image := imageConfig "public/images/thumbnails/placeholder.png" -}}
+<a href="{{ .Permalink }}">
+  <img
+    alt="{{ .Title }}"
+    src="/images/thumbnails/placeholder.png"
+    height="{{ $image.Height }}"
+    width="{{ $image.Width }}"
+  />
+</a>
+{{- end -}}
diff --git a/generators/hugo/themes/tdro/layouts/partials/footer.html b/generators/hugo/themes/tdro/layouts/partials/base-footer.html
index a39bf67..a39bf67 100644
--- a/generators/hugo/themes/tdro/layouts/partials/footer.html
+++ b/generators/hugo/themes/tdro/layouts/partials/base-footer.html
diff --git a/generators/hugo/themes/tdro/layouts/partials/head.html b/generators/hugo/themes/tdro/layouts/partials/base-head.html
index a406d9e..edce96a 100644
--- a/generators/hugo/themes/tdro/layouts/partials/head.html
+++ b/generators/hugo/themes/tdro/layouts/partials/base-head.html
@@ -1,7 +1,7 @@
 <!-- HTML Meta Tags -->
-<title>{{ partial "title.html" . -}}</title>
+<title>{{ partial "base-title.html" . -}}</title>
 <meta name="description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else }}{{ .Summary }}{{ end }}">
-<meta name="keywords" content="{{ partial "title.html" . -}}">
+<meta name="keywords" content="{{ partial "base-title.html" . -}}">
 <meta name="author" content="{{ .Site.Author.name }}">
 
 <meta charset="utf-8">
@@ -9,12 +9,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <!-- Search Engine Tags -->
-<meta itemprop="name" content="{{ partial "title.html" . -}}">
+<meta itemprop="name" content="{{ partial "base-title.html" . -}}">
 <meta itemprop="description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else }}{{ .Summary }}{{ end }}">
 <meta itemprop="image" content="{{ .Site.BaseURL }}/images/thumbnails/{{ partial "article-image.html" . }}.png">
 
 <!-- Open Graph Meta Tags -->
-<meta property="og:title" content="{{ partial "title.html" . -}}">
+<meta property="og:title" content="{{ partial "base-title.html" . -}}">
 <meta property="og:description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else }}{{ .Summary }}{{ end }}">
 <meta property="og:url" content="{{ .Permalink }}">
 <meta property="og:image" content="{{ .Site.BaseURL }}/images/thumbnails/{{ partial "article-image.html" . }}.png">
@@ -24,7 +24,7 @@
 
 <!-- Twitter Meta Tags -->
 <meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="{{ partial "title.html" . -}}">
+<meta name="twitter:title" content="{{ partial "base-title.html" . -}}">
 <meta name="twitter:description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else }}{{ .Summary }}{{ end }}">
 <meta name="twitter:image" content="{{ .Site.BaseURL }}/images/thumbnails/{{ partial "article-image.html" . }}.png">
 
diff --git a/generators/hugo/themes/tdro/layouts/partials/nav.html b/generators/hugo/themes/tdro/layouts/partials/base-nav.html
index 1b1829c..1b1829c 100644
--- a/generators/hugo/themes/tdro/layouts/partials/nav.html
+++ b/generators/hugo/themes/tdro/layouts/partials/base-nav.html
diff --git a/generators/hugo/themes/tdro/layouts/partials/title.html b/generators/hugo/themes/tdro/layouts/partials/base-title.html
index 874d944..874d944 100644
--- a/generators/hugo/themes/tdro/layouts/partials/title.html
+++ b/generators/hugo/themes/tdro/layouts/partials/base-title.html
diff --git a/generators/hugo/themes/tdro/layouts/partials/function-content.html b/generators/hugo/themes/tdro/layouts/partials/function-content.html
new file mode 100644
index 0000000..6debad6
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/function-content.html
@@ -0,0 +1,10 @@
+{{- $content := . -}}
+
+{{-
+  $content = $content |
+    replaceRE "<p><figure>"   "<figure>"  |
+    replaceRE "<p>\n<figure>" "<figure>"  |
+    replaceRE "</figure></p>" "</figure>" |
+-}}
+
+{{- return $content -}}
diff --git a/generators/hugo/themes/tdro/layouts/partials/meta-commentcount.html b/generators/hugo/themes/tdro/layouts/partials/meta-commentcount.html
new file mode 100644
index 0000000..d398335
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/meta-commentcount.html
@@ -0,0 +1,2 @@
+{{ safeHTML (readFile "public/css/icons/feather/message-circle.svg") }}
+<a title="Jump to Comments" href="#isso-thread">0 Comments</a>
diff --git a/generators/hugo/themes/tdro/layouts/partials/meta-feedlink.html b/generators/hugo/themes/tdro/layouts/partials/meta-feedlink.html
new file mode 100644
index 0000000..db65e0c
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/meta-feedlink.html
@@ -0,0 +1,2 @@
+{{- safeHTML (readFile "public/css/icons/feather/rss.svg") -}}
+<a href="/{{ .Type }}/rss.xml" title="Really Simple Syndication Feed (RSS Feed)">RSS Feed</a>
diff --git a/generators/hugo/themes/tdro/layouts/partials/meta-pagedate.html b/generators/hugo/themes/tdro/layouts/partials/meta-pagedate.html
new file mode 100644
index 0000000..0278ec6
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/meta-pagedate.html
@@ -0,0 +1,10 @@
+{{ if .Params.date }}
+  {{ safeHTML (readFile "public/css/icons/feather/calendar.svg") }}
+  <time datetime="{{ dateFormat "2006-01-02" .Params.date }}">
+    {{ dateFormat "January 2, 2006" .Params.date }}
+  </time>
+  {{else}}
+  <time datetime="{{ .Date.Format "2006-01-02"}}">
+    {{ .Date.Format "January 2, 2006" }}
+  </time>
+{{- end -}}
diff --git a/generators/hugo/themes/tdro/layouts/partials/meta-pagestatus.html b/generators/hugo/themes/tdro/layouts/partials/meta-pagestatus.html
new file mode 100644
index 0000000..3d77aeb
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/meta-pagestatus.html
@@ -0,0 +1,5 @@
+{{ if .Draft }}
+  <draft-indicator>
+    <strong>DRAFT</strong>
+  </draft-indicator>
+{{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/partials/meta-pagetags.html b/generators/hugo/themes/tdro/layouts/partials/meta-pagetags.html
new file mode 100644
index 0000000..41ba5c5
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/meta-pagetags.html
@@ -0,0 +1,6 @@
+{{- with .Params.tags -}} 
+  {{- range $tags, $tag := sort . -}}
+    {{ safeHTML (readFile "public/css/icons/feather/tag.svg") }}
+    <a href="{{ "tags/" | relURL }}{{ $tag | urlize }}/">{{ $tag }}</a>
+  {{ end }}
+{{- end -}}
diff --git a/generators/hugo/themes/tdro/layouts/partials/meta-readtime.html b/generators/hugo/themes/tdro/layouts/partials/meta-readtime.html
new file mode 100644
index 0000000..c1d7449
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/meta-readtime.html
@@ -0,0 +1,10 @@
+{{- safeHTML (readFile "public/css/icons/feather/clock.svg") -}}
+
+<span>
+  {{ $minutes := div .WordCount 150 }}
+  {{ if lt $minutes 1 }}
+    1 minute read
+  {{- else -}}
+    {{ $minutes }} minute read
+  {{ end }}
+</span>
diff --git a/generators/hugo/themes/tdro/layouts/partials/meta-wordcount.html b/generators/hugo/themes/tdro/layouts/partials/meta-wordcount.html
new file mode 100644
index 0000000..a41a4cc
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/partials/meta-wordcount.html
@@ -0,0 +1,2 @@
+{{- safeHTML (readFile "public/css/icons/feather/file-text.svg") -}}
+<span>{{ .FuzzyWordCount }} words</span>
diff --git a/generators/hugo/themes/tdro/layouts/partials/page-categories.html b/generators/hugo/themes/tdro/layouts/partials/page-categories.html
deleted file mode 100644
index efd6cb7..0000000
--- a/generators/hugo/themes/tdro/layouts/partials/page-categories.html
+++ /dev/null
@@ -1,2 +0,0 @@
-{{- range $i, $value := sort . -}}{{ if $i }}, {{ end -}}
-<a href="{{ "categories/" | absLangURL }}{{ $value | urlize }}/">{{ $value }}</a>{{- end -}}
diff --git a/generators/hugo/themes/tdro/layouts/partials/page-date.html b/generators/hugo/themes/tdro/layouts/partials/page-date.html
deleted file mode 100644
index e53e222..0000000
--- a/generators/hugo/themes/tdro/layouts/partials/page-date.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{{ if .Params.date }}
-<time datetime="{{ dateFormat "2006-01-02" .Params.date }}">{{ dateFormat "2 January 2006"  .Params.date }}</time> 
-{{else}}
-<time datetime="{{ .Date.Format "2006-01-02"}}">{{ .Date.Format "2 January 2006" }}</time>
-{{- end -}}
diff --git a/generators/hugo/themes/tdro/layouts/partials/page-meta.html b/generators/hugo/themes/tdro/layouts/partials/page-meta.html
deleted file mode 100644
index 44cc4fb..0000000
--- a/generators/hugo/themes/tdro/layouts/partials/page-meta.html
+++ /dev/null
@@ -1,3 +0,0 @@
-{{ partial "page-date.html" . -}}
-{{- with .Params.categories }} in {{ partial "page-categories.html" . }}{{ end }}
-{{- with .Params.tags }} {{ partial "page-tags.html" . }}{{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/partials/page-status.html b/generators/hugo/themes/tdro/layouts/partials/page-status.html
deleted file mode 100644
index 7cfde17..0000000
--- a/generators/hugo/themes/tdro/layouts/partials/page-status.html
+++ /dev/null
@@ -1 +0,0 @@
-{{ if .Draft }}<span>&middot;<strong class="has-text-danger"> DRAFT</strong></span>{{end}}
diff --git a/generators/hugo/themes/tdro/layouts/partials/page-tags.html b/generators/hugo/themes/tdro/layouts/partials/page-tags.html
deleted file mode 100644
index 1f99a3b..0000000
--- a/generators/hugo/themes/tdro/layouts/partials/page-tags.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{{- range $tags, $tag := sort . }}
-  &middot;
-  <a
-    class="has-text-grey-dark"
-    href="{{ "tags/" | relURL }}{{ $tag | urlize }}/">
-    {{ $tag }}
-  </a>
-{{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/partials/pagination.html b/generators/hugo/themes/tdro/layouts/partials/pagination.html
deleted file mode 100644
index 698ac6a..0000000
--- a/generators/hugo/themes/tdro/layouts/partials/pagination.html
+++ /dev/null
@@ -1,55 +0,0 @@
-{{ $HugoPaginator := $.Paginator }}
-{{ $Pages := $HugoPaginator.TotalNumberOfElements }}
-{{ $MyPaginator := math.Ceil (div (float $Pages) 3) }}
-
-{{ if gt $HugoPaginator.TotalPages 1 }}
-
-<nav class="pagination" aria-label="pagination">
-
-  <a {{ if $HugoPaginator.HasPrev }} href="{{ $HugoPaginator.Prev.URL }}" {{ end }}
-      class="pagination-previous {{ if not $HugoPaginator.HasPrev }}disabled{{ end }}"
-			aria-label="Previous page" {{ if not $HugoPaginator.HasPrev }}aria-hidden="true"{{ end }}>
-      Previous
-  </a>
-
-	<a {{ if not (le (int $MyPaginator) $HugoPaginator.PageNumber) }}{{ if $HugoPaginator.HasNext }} href="{{ $HugoPaginator.Next.URL }}" {{ end }}{{ end }}
-    class="pagination-next {{ if le (int $MyPaginator) $HugoPaginator.PageNumber }}disabled{{ end }}"
-			aria-label="Next page" {{ if le (int $MyPaginator) $HugoPaginator.PageNumber }}aria-hidden="true"{{ end }}>
-      Next
-  </a>
-
-	<ul class="pagination-list">
-
-  {{ $.Scratch.Set "__paginator.ellipsed" false }}
-  {{ range (first $MyPaginator $HugoPaginator.Pagers) }}
-  {{ $right := sub .TotalPages .PageNumber }}
-  {{ $showNumber := or (le .PageNumber 3) (eq $right 0) }}
-  {{ $showNumber := or $showNumber (and (gt .PageNumber (sub $HugoPaginator.PageNumber 2)) (lt .PageNumber (add $HugoPaginator.PageNumber 2))) }}
-
-      {{ if $showNumber }}
-        {{ $.Scratch.Set "__paginator.ellipsed" false }}
-        {{ $.Scratch.Set "__paginator.shouldEllipse" false }}
-      {{ else }}
-        {{ $.Scratch.Set "__paginator.shouldEllipse" (not ($.Scratch.Get "__paginator.ellipsed") ) }}
-        {{ $.Scratch.Set "__paginator.ellipsed" true }}
-      {{ end }}
-
-      {{ if $showNumber }}
-
-        <li>
-          <a href="{{ .URL }}" aria-label="Go to page {{ .PageNumber }}"
-            class="pagination-link {{ if eq . $HugoPaginator }}is-current{{ end }}">
-            {{ .PageNumber }}
-          </a>
-        </li>
-
-      {{ else if ($.Scratch.Get "__paginator.shouldEllipse") }}
-
-        <li><span class="pagination-ellipsis" aria-hidden="true">&hellip;</span></li>
-
-      {{ end }}
-
-  {{ end }}
-	</ul>
-</nav>
-{{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/partials/read-time.html b/generators/hugo/themes/tdro/layouts/partials/read-time.html
deleted file mode 100644
index e445068..0000000
--- a/generators/hugo/themes/tdro/layouts/partials/read-time.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{{ $minutes := div .WordCount 150 }}
-{{ if lt $minutes 1 }}
-  1 minute read
-{{- else -}}
-  {{ $minutes }} minute read
-{{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/partials/thumbnail-image.html b/generators/hugo/themes/tdro/layouts/partials/thumbnail-image.html
deleted file mode 100644
index 857e01f..0000000
--- a/generators/hugo/themes/tdro/layouts/partials/thumbnail-image.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{{ $imageFile := print "public/images/thumbnails/" (partial "article-image.html" .) ".png" }}
-{{ if fileExists $imageFile }}
-{{ $image := imageConfig $imageFile }}
-<a title="{{ .Title }}" href="{{ .Permalink }}">
-  <picture>
-    <source srcset="/images/thumbnails/{{ partial "article-image.html" . }}.png" type="image/png">
-    <source srcset="/images/thumbnails/{{ partial "article-image.html" . }}.jpg" type="image/jpeg">
-    <source srcset="/images/thumbnails/{{ partial "article-image.html" . }}.webp" type="image/webp">
-    <img class="image__thumbnail" alt="{{ .Title }}" src="/images/thumbnails/{{ partial "article-image.html" . }}.png" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
-  </picture>
-</a>
-{{ else }}
-{{ $image := imageConfig "public/images/thumbnails/placeholder.png" }}
-<a href="{{ .Permalink }}">
-  <img class="image__thumbnail" alt="{{ .Title }}" src="/images/thumbnails/placeholder.png" height="{{ $image.Height }}" width="{{ $image.Width }}"/>
-</a>
-{{ end }}
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/footer.html b/generators/hugo/themes/tdro/layouts/shortcodes/footer.html
index 63af9fa..3e71164 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/footer.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/footer.html
@@ -1 +1,3 @@
-<span class="serif blockquote-footer has-text-right is-block">{{ .Inner | markdownify }}</span>
+<blockquote-footer>
+  {{ .Inner | markdownify }}
+</blockquote-footer>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/image.html b/generators/hugo/themes/tdro/layouts/shortcodes/image.html
index e90352d..3b211ff 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/image.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/image.html
@@ -1,9 +1,15 @@
-{{ $imageFile := print "public" (.Get `source`) }}
-{{ $image := imageConfig $imageFile }}
+{{- $imageFile := print "public" (.Get `source`) -}}
+{{- $image := imageConfig $imageFile -}}
 
 <figure>
   <a href="{{ .Get `source` }}" onclick="return false;">
-    <img data-image-zoom src="{{ .Get `source` }}" alt="{{ .Get `title` }}" title="{{ .Get `title` }}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
+    <img data-image-zoom
+      src="{{ .Get `source` }}"
+      alt="{{ .Get `title` }}"
+      title="{{ .Get `title` }}"
+      width="{{ $image.Width }}"
+      height="{{ $image.Height }}"
+    />
   </a>
-  <figcaption class="has-text-grey-dark">{{ .Inner | markdownify }}</figcaption>
+  <figcaption>{{ .Inner | markdownify }}</figcaption>
 </figure>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/marginimage.html b/generators/hugo/themes/tdro/layouts/shortcodes/marginimage.html
index 498a901..d69966f 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/marginimage.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/marginimage.html
@@ -1,14 +1,24 @@
-{{ $id := md5 (printf (.Get `mark`) .Inner) }}
-{{ $imageFile := print "public" (.Get `source`) }}
-{{ $image := imageConfig $imageFile }}
+{{- $mark   := (.Get `mark`)   -}}
+{{- $set    := (.Get `set`)    -}}
+{{- $source := (.Get `source`) -}}
+{{- $title  := (.Get `title`)  -}}
+{{- $id := md5 (printf $mark .Inner) -}}
+{{- $imageFile := print "public" $source -}}
+{{- $image := imageConfig $imageFile -}}
 
-<span class="marginnote-container">
-  <label for="{{ $id }}" class="marginnote-toggle marginnote-mark" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ .Get `mark` | markdownify }}</span></label>
-  <input type="checkbox" id="{{ $id }}" class="marginnote-toggle">
-  <span class="sans-serif marginnote sideimage {{ .Get `set` }}note">
-    <a href="{{.Get `source`}}" onclick="return false;">
-      <img data-image-zoom src="{{ .Get `source`}}" alt="{{ .Inner | markdownify }}" title="{{ .Get `title`}}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
+<margin-note-aside>
+  <label for="{{ $id }}" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ $mark | markdownify }}</span></label>
+  <input type="checkbox" id="{{ $id }}" name="toggle">
+  <margin-note title="{{ $mark }}" image {{ $set }}>
+    <a href="{{ $source }}" onclick="return false;">
+      <img data-image-zoom
+        src="{{ $source }}"
+        title="{{ $title }}"
+        width="{{ $image.Width }}"
+        height="{{ $image.Height }}"
+        alt="{{ .Inner | markdownify }}"
+      />
     </a>
-    <span class="sideimage-footer is-block has-text-centered has-text-grey-dark"><mark>{{ .Inner | markdownify }}</mark></span>
-  </span>
-</span>
+    <mark>{{ .Inner | markdownify }}</mark>
+  </margin-note>
+</margin-note-aside>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html b/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html
index 96dc001..c19b9a2 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html
@@ -1,9 +1,11 @@
-{{ $id := md5 (printf (.Get `mark`) .Inner) }}
+{{- $mark := (.Get `mark`) -}}
+{{- $set  := (.Get `set`)  -}}
+{{- $id := md5 (printf $mark .Inner) -}}
 
-<span class="marginnote-container">
-  <label for="{{ $id }}" class="marginnote-toggle marginnote-mark" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ .Get `mark` | markdownify }}</span></label>
-  <input type="checkbox" id="{{ $id }}" class="marginnote-toggle">
-  <span class="sans-serif marginnote {{ .Get `set` }}note">
+<margin-note-aside>
+  <label for="{{ $id }}" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ $mark | markdownify }}</span></label>
+  <input type="checkbox" id="{{ $id }}" name="toggle">
+  <margin-note title="{{ $mark }}" {{ $set }}>
     <mark>{{ .Inner | markdownify }}</mark>
-  </span>
-</span>
+  </margin-note>
+</margin-note-aside>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html b/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
index f309fdc..a2574d5 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
@@ -1,14 +1,24 @@
-{{ $id := md5 (printf (.Get `mark`) .Inner) }}
-{{ $imageFile := print "public" (.Get `source`) }}
-{{ $image := imageConfig $imageFile }}
+{{- $mark   := (.Get `mark`)   -}}
+{{- $set    := (.Get `set`)    -}}
+{{- $source := (.Get `source`) -}}
+{{- $title  := (.Get `title`)  -}}
+{{- $id := md5 (printf $mark .Inner) -}}
+{{- $imageFile := print "public" $source -}}
+{{- $image := imageConfig $imageFile -}}
 
-<span class="sidenote-container">
-  <label for="{{ $id }}" class="sidenote-toggle sidenote-mark" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ .Get `mark` | markdownify }}</span></label>
-  <input type="checkbox" id="{{ $id }}" class="sidenote-toggle">
-  <span class="sans-serif sidenote sideimage {{ .Get `set` }}note">
-    <a href="{{.Get `source`}}" onclick="return false;">
-      <img data-image-zoom src="{{ .Get `source`}}" alt="{{ .Inner | markdownify }}" title="{{ .Get `title`}}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
+<side-note-aside>
+  <label for="{{ $id }}" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ $mark | markdownify }}</span></label>
+  <input type="checkbox" id="{{ $id }}" name="toggle">
+  <side-note title="{{ $mark }}" image {{ $set }}>
+    <a href="{{ $source }}" onclick="return false;">
+      <img data-image-zoom
+        src="{{ $source }}"
+        title="{{ $title }}"
+        width="{{ $image.Width }}"
+        height="{{ $image.Height }}"
+        alt="{{ .Inner | markdownify }}"
+      />
     </a>
-    <span class="sideimage-footer is-block has-text-centered has-text-grey-dark"><mark>{{ .Inner | markdownify }}</mark></span>
-  </span>
-</span>
+    <mark>{{ .Inner | markdownify }}</mark>
+  </side-node>
+</side-note-aside>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html b/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html
index d54a077..d207d68 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html
@@ -1,13 +1,11 @@
-{{ $id := md5 (printf (.Get `mark`) .Inner) }}
+{{- $mark := (.Get `mark`) -}}
+{{- $set  := (.Get `set`)  -}}
+{{- $id   := md5 (printf $mark .Inner) -}}
 
-<span class="sidenote-container">
-  <label
-    for="{{ $id }}"
-    class="sidenote-toggle sidenote-mark"
-    title="{{ .Inner | replaceRE "\n" " " | markdownify }}">
-    <span>{{ .Get `mark` | markdownify }}</span></label>
-  <input type="checkbox" id="{{ $id }}" class="sidenote-toggle">
-  <span class="sans-serif sidenote {{ .Get `set` }}note">
-    <mark>{{ .Inner | markdownify }}</mark>
-  </span>
-</span>
+<side-note-aside>
+  <label for="{{ $id }}" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ $mark | markdownify }}</span></label>
+  <input type="checkbox" id="{{ $id }}" name="toggle">
+  <side-note title="{{ $mark }}" {{ $set }}>
+    <mark >{{ .Inner | markdownify }}</mark>
+  </side-note>
+</side-note-aside>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/smallcaps.html b/generators/hugo/themes/tdro/layouts/shortcodes/smallcaps.html
index 147fbf2..5ca8c2d 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/smallcaps.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/smallcaps.html
@@ -1 +1,3 @@
-<span class="smallcaps smallcaps{{ .Get `type` }}">{{ .Get `set` }}</span>
+<small-caps {{ .Get `type` }}>
+  {{ .Get `set` }}
+</small-caps>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/video.html b/generators/hugo/themes/tdro/layouts/shortcodes/video.html
index a0bf488..745db07 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/video.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/video.html
@@ -22,5 +22,5 @@
       <a href="{{ $source }}">link to the video</a> instead.
     </p>
   </video>
-  <figcaption class="has-text-grey-dark">{{ .Inner | markdownify }}</figcaption>
+  <figcaption>{{ .Inner | markdownify }}</figcaption>
 </video-container>
diff --git a/generators/openring/template.html b/generators/openring/template.html
index fdbdc8b..35110c6 100644
--- a/generators/openring/template.html
+++ b/generators/openring/template.html
@@ -1,16 +1,20 @@
-<h2 class="is-inline is-uppercase is-size-5 has-spacing-widest">On the Web</h2>
-
-<ul class="articles">
+<ul>
   {{ range .Articles }}
-
-  <li>
-    <h2>
-      <a href="{{ .Link }}" target="_blank" rel="noopener" title="{{ .Summary }}" class="serif is-size-4">{{ .Title }}</a>
-    </h2>
-    <div class="source is-block">by <a href="{{ .SourceLink}} ">{{ .SourceTitle }}</a></div>
-    <div class="is-block has-text-grey-dark">{{ .Date | date }}</div>
-  </li>
-
-  {{end}}
-
+    <li>
+      <h3>
+        <a
+          href="{{ .Link }}"
+          rel="noopener"
+          target="_blank"
+          title="{{ .Summary }}"
+        >
+          {{ .Title }}
+        </a>
+      </h3>
+      <p>
+        by <a href="{{ .SourceLink}} ">{{ .SourceTitle }}</a>
+      </p>
+      <time datetime="{{ .Date }}">{{ .Date | date }}</time>
+    </li>
+  {{ end }}
 </ul>
diff --git a/public/css/bulma-timeline.css b/public/css/bulma-timeline.css
deleted file mode 100644
index b1476be..0000000
--- a/public/css/bulma-timeline.css
+++ /dev/null
@@ -1,754 +0,0 @@
-@-webkit-keyframes spinAround {
-    from {
-        -webkit-transform: rotate(0);
-        transform: rotate(0)
-    }
-
-    to {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg)
-    }
-
-}
-
-@keyframes spinAround {
-    from {
-        -webkit-transform: rotate(0);
-        transform: rotate(0)
-    }
-
-    to {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg)
-    }
-
-}
-
-.timeline {
-    display: flex;
-    flex-direction: column
-}
-
-.timeline .timeline-header {
-    width: 4em;
-    min-width: 4em;
-    max-width: 8em;
-    word-wrap: normal;
-    text-align: center;
-    display: flex;
-    justify-content: center
-}
-
-.timeline .timeline-item {
-    display: flex;
-    display: -webkit-flex;
-    position: relative;
-    margin-left: 0.35em;
-    padding-bottom: 2em
-}
-
-.timeline .timeline-item::before {
-    content: "";
-    background-color: #dbdbdb;
-    display: block;
-    width: 1px;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0
-}
-
-.timeline .timeline-item .timeline-marker {
-    position: absolute;
-    background: #b3cfe6;
-    border: 3px solid #fff;
-    border-radius: 100%;
-    content: "";
-    display: block;
-    height: .8em;
-    left: -.35em;
-    top: 1.2rem;
-    width: .8em
-}
-
-.timeline .timeline-item .timeline-marker.is-image {
-    background: #dbdbdb;
-    border: .1em solid #dbdbdb;
-    border-radius: 100%;
-    display: block;
-    overflow: hidden
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-16x16 {
-    height: 16px;
-    width: 16px;
-    left: -8px
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-24x24 {
-    height: 24px;
-    width: 24px;
-    left: -12px
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-32x32 {
-    height: 32px;
-    width: 32px;
-    left: -16px
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-48x48 {
-    height: 48px;
-    width: 48px;
-    left: -24px
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-64x64 {
-    height: 64px;
-    width: 64px;
-    left: -32px
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-96x96 {
-    height: 96px;
-    width: 96px;
-    left: -48px
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-128x128 {
-    height: 128px;
-    width: 128px;
-    left: -64px
-}
-
-.timeline .timeline-item .timeline-marker.is-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 1.5em;
-    width: 1.5em;
-    left: -.7em;
-    line-height: .75rem;
-    padding: .25rem;
-    background: #dbdbdb;
-    border: .1em solid #dbdbdb;
-    border-radius: 100%
-}
-
-.timeline .timeline-item .timeline-marker.is-icon>i {
-    color: #fff;
-    font-size: .75rem !important
-}
-
-.timeline .timeline-item .timeline-marker.is-outlined .image {
-    background: #fff
-}
-
-.timeline .timeline-item .timeline-marker.is-outlined.is-icon {
-    background: #fff
-}
-
-.timeline .timeline-item .timeline-marker.is-outlined.is-icon>i {
-    color: #dbdbdb
-}
-
-.timeline .timeline-item .timeline-marker.is-white {
-    background-color: #fff !important;
-    border-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white .image {
-    border-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white.is-icon {
-    background-color: #fff !important;
-    border-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white.is-icon>i {
-    color: #0a0a0a !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white.is-outlined {
-    background-color: #fff !important;
-    border-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white.is-outlined.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black {
-    background-color: #0a0a0a !important;
-    border-color: #0a0a0a !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black .image {
-    border-color: #0a0a0a !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black.is-icon {
-    background-color: #0a0a0a !important;
-    border-color: #0a0a0a !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black.is-outlined {
-    background-color: #fff !important;
-    border-color: #0a0a0a !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black.is-outlined.is-icon>i {
-    color: #0a0a0a !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light {
-    background-color: #f5f5f5 !important;
-    border-color: #f5f5f5 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light .image {
-    border-color: #f5f5f5 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light.is-icon {
-    background-color: #f5f5f5 !important;
-    border-color: #f5f5f5 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light.is-icon>i {
-    color: #363636 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light.is-outlined {
-    background-color: #fff !important;
-    border-color: #f5f5f5 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light.is-outlined.is-icon>i {
-    color: #f5f5f5 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark {
-    background-color: #363636 !important;
-    border-color: #363636 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark .image {
-    border-color: #363636 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark.is-icon {
-    background-color: #363636 !important;
-    border-color: #363636 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark.is-icon>i {
-    color: #f5f5f5 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark.is-outlined {
-    background-color: #fff !important;
-    border-color: #363636 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark.is-outlined.is-icon>i {
-    color: #363636 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary {
-    background-color: #00d1b2 !important;
-    border-color: #00d1b2 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary .image {
-    border-color: #00d1b2 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary.is-icon {
-    background-color: #00d1b2 !important;
-    border-color: #00d1b2 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary.is-outlined {
-    background-color: #fff !important;
-    border-color: #00d1b2 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary.is-outlined.is-icon>i {
-    color: #00d1b2 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link {
-    background-color: #3273dc !important;
-    border-color: #3273dc !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link .image {
-    border-color: #3273dc !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link.is-icon {
-    background-color: #3273dc !important;
-    border-color: #3273dc !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link.is-outlined {
-    background-color: #fff !important;
-    border-color: #3273dc !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link.is-outlined.is-icon>i {
-    color: #3273dc !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info {
-    background-color: #209cee !important;
-    border-color: #209cee !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info .image {
-    border-color: #209cee !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info.is-icon {
-    background-color: #209cee !important;
-    border-color: #209cee !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info.is-outlined {
-    background-color: #fff !important;
-    border-color: #209cee !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info.is-outlined.is-icon>i {
-    color: #209cee !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success {
-    background-color: #23d160 !important;
-    border-color: #23d160 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success .image {
-    border-color: #23d160 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success.is-icon {
-    background-color: #23d160 !important;
-    border-color: #23d160 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success.is-outlined {
-    background-color: #fff !important;
-    border-color: #23d160 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success.is-outlined.is-icon>i {
-    color: #23d160 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning {
-    background-color: #ffdd57 !important;
-    border-color: #ffdd57 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning .image {
-    border-color: #ffdd57 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning.is-icon {
-    background-color: #ffdd57 !important;
-    border-color: #ffdd57 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning.is-icon>i {
-    color: rgba(0, 0, 0, .7) !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning.is-outlined {
-    background-color: #fff !important;
-    border-color: #ffdd57 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning.is-outlined.is-icon>i {
-    color: #ffdd57 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger {
-    background-color: #ff3860 !important;
-    border-color: #ff3860 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger .image {
-    border-color: #ff3860 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger.is-icon {
-    background-color: #ff3860 !important;
-    border-color: #ff3860 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger.is-outlined {
-    background-color: #fff !important;
-    border-color: #ff3860 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger.is-outlined.is-icon>i {
-    color: #ff3860 !important
-}
-
-.timeline .timeline-item .timeline-content {
-    padding: 1em 0 0 .5em;
-    padding: 1em 0 0 2em
-}
-
-.timeline .timeline-item .timeline-content .heading {
-    font-weight: 600
-}
-
-.timeline .timeline-item.is-white::before {
-    background-color: #fff
-}
-
-.timeline .timeline-item.is-black::before {
-    background-color: #0a0a0a
-}
-
-.timeline .timeline-item.is-light::before {
-    background-color: #f5f5f5
-}
-
-.timeline .timeline-item.is-dark::before {
-    background-color: #363636
-}
-
-.timeline .timeline-item.is-primary::before {
-    background-color: #00d1b2
-}
-
-.timeline .timeline-item.is-link::before {
-    background-color: #3273dc
-}
-
-.timeline .timeline-item.is-info::before {
-    background-color: #209cee
-}
-
-.timeline .timeline-item.is-success::before {
-    background-color: #23d160
-}
-
-.timeline .timeline-item.is-warning::before {
-    background-color: #ffdd57
-}
-
-.timeline .timeline-item.is-danger::before {
-    background-color: #ff3860
-}
-
-.timeline.is-centered .timeline-header {
-    display: flex;
-    width: 100%;
-    align-self: center
-}
-
-.timeline.is-centered .timeline-item {
-    width: 50%;
-    align-self: flex-end
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) {
-    align-self: flex-start;
-    margin-left: 0;
-    margin-right: 2em
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n)::before {
-    right: -.1em;
-    left: auto
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker {
-    left: auto;
-    right: -.45em
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-16x16 {
-    left: auto;
-    right: -8px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-24x24 {
-    left: auto;
-    right: -12px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-32x32 {
-    left: auto;
-    right: -16px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-48x48 {
-    left: auto;
-    right: -24px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-64x64 {
-    left: auto;
-    right: -32px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-96x96 {
-    left: auto;
-    right: -48px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-128x128 {
-    left: auto;
-    right: -64px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-icon {
-    left: auto;
-    right: -.8em
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-content {
-    padding: 1em 2em 0 0;
-    text-align: right;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    flex-basis: 100%
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n+1)::before {
-    content: "";
-    background-color: #dbdbdb;
-    display: block;
-    width: .1em;
-    height: 100%;
-    position: absolute;
-    top: 0
-}
-
-.timeline.is-centered .timeline-item.is-white::before {
-    background-color: #fff
-}
-
-.timeline.is-centered .timeline-item.is-black::before {
-    background-color: #0a0a0a
-}
-
-.timeline.is-centered .timeline-item.is-light::before {
-    background-color: #f5f5f5
-}
-
-.timeline.is-centered .timeline-item.is-dark::before {
-    background-color: #363636
-}
-
-.timeline.is-centered .timeline-item.is-primary::before {
-    background-color: #00d1b2
-}
-
-.timeline.is-centered .timeline-item.is-link::before {
-    background-color: #3273dc
-}
-
-.timeline.is-centered .timeline-item.is-info::before {
-    background-color: #209cee
-}
-
-.timeline.is-centered .timeline-item.is-success::before {
-    background-color: #23d160
-}
-
-.timeline.is-centered .timeline-item.is-warning::before {
-    background-color: #ffdd57
-}
-
-.timeline.is-centered .timeline-item.is-danger::before {
-    background-color: #ff3860
-}
-
-.timeline.is-rtl {
-    justify-content: flex-end;
-    align-items: flex-end
-}
-
-.timeline.is-rtl .timeline-item {
-    justify-content: flex-end;
-    border-left: none;
-    margin-left: 0;
-    margin-right: 2em
-}
-
-.timeline.is-rtl .timeline-item::before {
-    right: 0;
-    left: auto
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker {
-    left: auto;
-    right: -.35em
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-16x16 {
-    left: auto;
-    right: -8px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-24x24 {
-    left: auto;
-    right: -12px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-32x32 {
-    left: auto;
-    right: -16px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-48x48 {
-    left: auto;
-    right: -24px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-64x64 {
-    left: auto;
-    right: -32px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-96x96 {
-    left: auto;
-    right: -48px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-128x128 {
-    left: auto;
-    right: -64px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-icon {
-    left: auto;
-    right: -.7em
-}
-
-.timeline.is-rtl .timeline-item .timeline-content {
-    padding: 1em 2em 0 0;
-    text-align: right
-}
-
-.timeline.no-headers .timeline-item.is-first::before {
-    height: calc(100% - 1.2rem);
-    top: 1.2rem
-}
-
-.timeline.no-headers .timeline-item.is-last::before {
-    height: 1.2rem
-}
diff --git a/public/css/syntax-highlight.css b/public/css/syntax-highlight.css
index bc2fc10..40be532 100644
--- a/public/css/syntax-highlight.css
+++ b/public/css/syntax-highlight.css
@@ -1,3 +1,8 @@
+/* ----- Colors ----- */
+
+code-block language-label   { background-color: #0079ad; }
+code-block language-label a { color: #fff; }
+
 /* Background               */ .chroma             { color: #f8f8f2; background-color: #002e42; }
 /* Error                    */ .chroma .err        { color: #960050; background-color: #1e0010; }
 /* LineTableTD              */ .chroma .lntd       { vertical-align: top; padding: 0; margin: 0; border: 0; }
@@ -5,7 +10,6 @@
 /* LineHighlight            */ .chroma .hl         { display: block; background-color: #004766; padding: 0 1.25rem; margin: 0 -1.25rem; }
 /* LineNumbersTable         */ .chroma .lnt        { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
 /* LineNumbers              */ .chroma .ln         { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
-/* LanguageLabel            */ .chroma code:before { color: #e6e6e6; background-color: #006894; }
 
 /* Keyword                  */ .chroma .k   { color:       #93ddfd }
 /* KeywordConstant          */ .chroma .kc  { color:       #66d9ef }
diff --git a/public/css/tdro-dark.css b/public/css/tdro-dark.css
index 556183f..6da0590 100644
--- a/public/css/tdro-dark.css
+++ b/public/css/tdro-dark.css
@@ -1,11 +1,24 @@
-html {
-  background-color: #001f2c;
-}
+/* Dark Semantic CSS */
+
+::selection {
+  color: #000;
+  background-color: #999;
+}
+
+::-webkit-selection {
+  color: #000;
+  background-color: #999;
+}
+
+::-moz-selection {
+  color: #000;
+  background-color: #999;
+}
+
 a {
   color: #75b2f0;
 }
-a:focus,
-a:focus span {
+a:focus {
   color: #fff;
   background-color: #005d85;
 }
@@ -16,197 +29,239 @@ a:hover img {
 a:focus img {
   outline: 9px dashed #75b2f0;
 }
-a.navbar-item:hover {
-  color: #fff !important;
-}
+
 img {
   box-shadow: none;
   filter: brightness(75%);
 }
+
+html {
+  background-color: #001f2c;
+}
+
 body,
-.document h1 a,
-.document h2 a,
-.document h3 a,
-nav#TableOfContents a {
+resume-page article > section h1 {
   color: #cad6e2;
 }
-.document a {
-  color: #eee;
-}
-.article__list li:hover,
-nav#TableOfContents li:hover {
-  background-color: #002e42;
-}
-.leftnote,
-.rightnote,
-mark {
-  color: #a9bdd0;
-}
-.medium-zoom-overlay {
+
+body .medium-zoom-overlay {
   background-color: #001f2c;
   background-color: rgba(0, 31, 44, 0.9);
 }
-.navbar-item,
-.subtitle,
-.has-text-grey-dark {
-  color: #fff !important;
+
+video {
+  color: transparent;
 }
-.dropdown-content {
+
+body > nav {
   background-color: #002e42;
-  border: 1px solid #00405c;
-}
-.dropdown-content a.navbar-item:hover,
-.dropdown-content .theme-toggle-button:hover {
-  color: #fff;
-  background-color: #005d85;
-}
-.dropdown-content .navbar__active {
-  background-color: #004766;
-}
-.has-text-danger {
-  color: #ff8f93 !important;
-}
-.has-text-primary {
-  color: #a6c9e8 !important;
-}
-.footer a {
-  color: #bbb;
+  box-shadow: 0 0px 10px 0 #000;
 }
-.footer {
-  padding: 1.5rem;
-}
-.navbar {
-  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.5);
-}
-.navbar,
-.navbar-menu {
+
+input,
+textarea {
   background-color: #002e42;
-  background-color: rgba(0, 46, 66, 0.95);
-}
-a.navbar-item:focus,
-a.navbar-item:hover,
-.navbar-item:hover label {
+  border-color: transparent;
   color: #fff;
 }
-.navbar__icon:hover svg,
-.navbar__icon:hover svg,
-.navbar__icon:hover label svg {
-  fill: #af0c00;
-}
-.title,
-.content h1,
-.content h2,
-.content h3 {
-  color: #ddd;
-}
-.button.is-link.is-outlined,
-.button.is-success.is-outlined {
-  border-color: #cad6e2;
-  color: #cad6e2;
-  border-width: 1px;
-}
-.input,
-.textarea {
-  background-color: #002e42;
-  border-color: transparent;
-  color: white;
+
+article a,
+body > footer a,
+article-subsection a {
+  color: #eee;
 }
-.item__box {
+
+button,
+button-anchor a,
+pagination-controller a,
+input[type="submit"],
+input[type="button"] {
   color: #fff;
   background-color: #004766;
+  box-shadow: none;
 }
-.item__box:hover,
-.item__box:hover svg,
-.item__box:focus svg {
+
+button:hover,
+button-anchor a:hover,
+pagination-controller a,
+input[type="submit"]:hover,
+input[type="button"]:hover {
+  background-color: #005980;
+}
+
+button:hover svg,
+button-anchor:hover svg {
   color: #fff;
+  fill: #0961aa;
+}
+
+nav column-middle > a,
+nav column-middle > a[data-active],
+nav column-middle context-menu a,
+nav column-middle context-menu a[data-active],
+nav column-middle context-menu button,
+nav column-middle more-button {
+  color: #f1f1f1;
+}
+
+nav column-middle > a[data-active] svg {
+  fill: #0961aa;
+}
+
+a,
+home-page article a,
+recent-articles h2 a {
+  color: #75b2f0;
 }
-.message__success {
-  background-color: #55a1ec;
-  border: 1px solid #1259a1;
-  color: black;
+
+article > mark,
+margin-note-aside:hover label span,
+margin-note-aside:hover margin-note a,
+margin-note-aside:hover margin-note mark,
+side-note-aside:hover label span,
+side-note-aside:hover side-note a,
+side-note-aside:hover side-note mark {
+  background-color: #042f52;
+  color: #fff;
 }
-.pagination-link.is-current {
-  background-color: #004766;
-  border-color: #00608a;
-  color: #fff !important;
+
+input,
+button,
+textarea,
+input[type="submit"],
+input[type="button"],
+button-anchor a,
+home-page label,
+home-page article > h1,
+pagination-controller a {
+  color: #fff;
 }
-.pagination-previous,
-.pagination-next,
-.pagination-link {
-  border-color: #002e42;
-  color: #cad6e2;
-  min-width: 2.25em;
+
+footer,
+footer a,
+body > footer,
+figcaption,
+figcaption code,
+article-archive-list time,
+article-meta-bottom a,
+article-meta-bottom,
+article-meta-top a,
+article-meta-top,
+article-more-content time,
+article-on-web time,
+article-summary-meta,
+blockquote-footer,
+home-page article > h2,
+margin-note[left],
+margin-note[right],
+side-note[left],
+side-note[right],
+table-contents a,
+table-contents h2,
+taxonomy-archive-list time,
+taxonomy-list time,
+video-container footer a {
+  color: #bfbfbf;
+}
+
+nav column-middle > a:hover,
+nav column-middle more-button:hover {
+  color: #fff;
 }
-.pagination-previous:hover,
-.pagination-next:hover,
-.pagination-link:hover,
-.pagination-previous.disabled,
-.pagination-next.disabled {
-  color: #cad6e2;
+
+nav column-middle a:hover svg,
+nav column-middle more-button:hover svg {
+  fill: #dd4b50;
 }
-.pagination-previous.disabled,
-.pagination-next.disabled {
+
+context-menu-content {
   background-color: #002e42;
-  border-color: #002e42;
-  color: #fff;
+  border-color: #00405c;
 }
-.navbar__active {
-  color: #fff !important;
+
+nav column-middle context-menu a[data-active] {
+  background-color: #004766;
 }
-.navbar__active svg {
-  fill: #0073ca;
+
+nav column-middle context-menu a:hover,
+nav column-middle context-menu button:hover {
+  color: #fff;
+  background-color: #005d85;
 }
-@media screen and (max-width: 1087px) {
-  .theme-toggle-button {
-    color: #cad6e2;
-  }
+
+article-archive-list li:hover,
+taxonomy-list > section ul li:hover,
+taxonomy-archive-list > section ul li:hover {
+  background-color: #002e42;
 }
-#isso-thread > h4 {
-  color: #b7c7d7;
+
+resume-page timeline-item aside {
+  border: 3px solid #001f2c;
 }
-#isso-thread .textarea.placeholder {
-  color: #cad6e2;
+
+home-page article > h1 em {
+  color: #f48a8e;
 }
-.isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
-  background-color: #002e42;
-  color: white;
+
+[data-danger] {
+  color: #ff8585;
 }
-.isso-postbox > .form-wrapper .textarea,
-.isso-postbox > .form-wrapper .preview {
+
+contact-page aside {
   background-color: #002e42;
+  border-color: #008fcc;
 }
-.isso-comment > div.text-wrapper > .isso-comment-header .author {
-  color: #fff;
-}
-.isso-comment-footer .upvote svg,
-.isso-comment-footer .downvote svg {
-  fill: white;
-}
+
+/* ---------------------------------------------------------- */
+
 input::placeholder,
 textarea::placeholder {
   color: #cad6e2;
 }
+
 input::-moz-placeholder,
 textarea::-moz-placeholder {
   color: #cad6e2;
 }
+
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   color: #cad6e2;
 }
+
 input:-moz-placeholder,
 textarea:-moz-placeholder {
   color: #cad6e2;
 }
+
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
   color: #cad6e2;
 }
-.isso-postbox > .form-wrapper > .auth-section .post-action > input {
-  border: 1px solid #557181;
-  background-color: transparent;
+
+#isso-thread > h4 {
+  color: #b7c7d7;
+}
+
+#isso-thread .textarea.placeholder {
+  color: #cad6e2;
+}
+
+.isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
+  background-color: #002e42;
   color: white;
 }
+
+.isso-comment .textarea,
+.isso-postbox > .form-wrapper .textarea,
+.isso-postbox > .form-wrapper .preview {
+  background-color: #002e42;
+}
+
+.isso-comment > div.text-wrapper > .isso-comment-header .author {
+  color: #ccc;
+}
+
 .isso-postbox > .form-wrapper .preview {
   background-color: #001f2c;
   background: repeating-linear-gradient(
@@ -217,29 +272,11 @@ textarea:-ms-input-placeholder {
     #002e42 20px
   );
 }
+
 .isso-comment > div.text-wrapper > .isso-comment-header .permalink {
   color: #ccc;
 }
+
 .isso-comment > div.text-wrapper > .text a {
   color: #cad6e2;
 }
-.is-success:focus,
-.is-link:focus {
-  background-color: #75b2f0 !important;
-  color: #121212 !important;
-  border-color: #75b2f0 !important;
-}
-.timeline .timeline-item .timeline-marker {
-  border: 3px solid #001f2c !important;
-}
-article > mark,
-.sidenote-container:hover .sidenote-mark span,
-.sidenote-container:hover .sidenote mark,
-.marginnote-container:hover .marginnote-mark span,
-.marginnote-container:hover .marginnote mark,
-.sidenote-container:hover .sidenote a,
-.marginnote-container:hover .marginnote a {
-  color: #fcfcfc;
-  background-color: #005d85;
-  border-color: #af0c00;
-}
diff --git a/public/css/tdro.css b/public/css/tdro.css
index 1ac9e18..fd845d0 100644
--- a/public/css/tdro.css
+++ b/public/css/tdro.css
@@ -1,94 +1,85 @@
-/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
+/* ----- Semantic Pact CSS ----- */
 
-.button,
-.pagination-previous,
-.pagination-next,
-.pagination-link,
-.pagination-ellipsis {
-  user-select: none;
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
 }
 
-.box:not(:last-child),
-.content:not(:last-child),
-.table:not(:last-child),
-.title:not(:last-child),
-.subtitle:not(:last-child),
-.block:not(:last-child),
-.highlight:not(:last-child),
-.level:not(:last-child),
-.list:not(:last-child),
-article > mark:not(:last-child),
-.message:not(:last-child) {
-  margin-bottom: 1.5rem;
+:focus {
+  outline: none;
 }
 
-.button,
-.input,
-.textarea,
-.pagination-previous,
-.pagination-next,
-.pagination-link,
-.pagination-ellipsis {
-  appearance: none;
-  align-items: center;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  box-shadow: none;
-  display: inline-flex;
-  font-size: 1rem;
-  height: 2.5em;
-  justify-content: flex-start;
-  line-height: 1.5;
-  padding-bottom: calc(0.5em - 1px);
-  padding-left: calc(0.75em - 1px);
-  padding-right: calc(0.75em - 1px);
-  padding-top: calc(0.5em - 1px);
-  position: relative;
-  vertical-align: top;
+:target::before {
+  content: "";
+  display: block;
+  height: 5rem;
+  margin-top: -5rem;
+  visibility: hidden;
 }
 
-.button:focus,
-.input:focus,
-.textarea:focus,
-.pagination-previous:focus,
-.pagination-next:focus,
-.pagination-link:focus,
-.pagination-ellipsis:focus,
-.button:active,
-.input:active,
-.textarea:active,
-.pagination-previous:active,
-.pagination-next:active,
-.pagination-link:active,
-.pagination-ellipsis:active {
-  outline: none;
+::selection {
+  text-shadow: 0 0 currentColor;
 }
 
-.button[disabled],
-.input[disabled],
-.textarea[disabled],
-.pagination-previous[disabled],
-.pagination-next[disabled],
-.pagination-link[disabled],
-.pagination-previous.disabled,
-.pagination-next.disabled,
-.pagination-ellipsis[disabled] {
-  cursor: not-allowed;
+::-webkit-selection {
+  text-shadow: 0 0 currentColor;
+}
+
+::-moz-selection {
+  text-shadow: 0 0 currentColor;
+}
+
+img::selection {
+  background-color: transparent;
+}
+
+img::-webkit-selection {
+  background-color: transparent;
+}
+
+img::-moz-selection {
+  background-color: transparent;
+}
+
+h1:target,
+h2:target,
+h3:target {
+  text-decoration: underline;
+  text-decoration-style: double;
+}
+
+a:hover {
+  border-bottom: 2px solid;
+  text-shadow: 0 0 currentColor;
+}
+
+a:focus {
+  border-bottom: 3px solid;
+}
+
+a:hover img {
+  box-shadow: 0 8px 32px;
+}
+
+a:focus img,
+:focus:not(article-thumbnail a):not(abstract-thumbnail a):not(figure
+    > a):not(nav column-middle a):not(tile-item a),
+:focus-visible:not(article-thumbnail a):not(abstract-thumbnail a):not(figure
+    > a):not(nav column-middle a):not(tile-item a) {
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 0.125rem #4992d0;
+  outline: none;
 }
 
-/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
 html,
 body,
 p,
 ol,
 ul,
 li,
-dl,
-dt,
-dd,
 blockquote,
 figure,
-fieldset,
 legend,
 textarea,
 pre,
@@ -97,23 +88,11 @@ hr,
 h1,
 h2,
 h3,
-h4,
-h5,
-h6 {
+h4 {
   margin: 0;
   padding: 0;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 100%;
-  font-weight: normal;
-}
-
 button,
 input,
 select,
@@ -121,31 +100,6 @@ textarea {
   margin: 0;
 }
 
-html {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-img,
-video {
-  max-width: 100%;
-}
-
-html {
-  background-color: #fcfcfc;
-  font-size: 16px;
-  min-width: 300px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  text-rendering: optimizeLegibility;
-  text-size-adjust: 100%;
-}
-
 article,
 aside,
 figure,
@@ -156,11 +110,18 @@ section {
   display: block;
 }
 
-body {
-  color: #222;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.8;
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+  overflow-y: scroll;
+  padding-top: 4rem;
+  text-rendering: optimizeLegibility;
+  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+figure > a:focus {
+  background-color: transparent;
 }
 
 code {
@@ -173,8 +134,6 @@ code {
 }
 
 hr {
-  background-color: #ddd;
-  border: none;
   display: block;
   height: 1px;
   margin: 1.5rem 0;
@@ -184,12 +143,7 @@ img {
   height: auto;
   max-width: 100%;
   border-radius: 0.1em;
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-  vertical-align: baseline;
+  box-shadow: 0 4px 12px 0;
 }
 
 span {
@@ -202,10 +156,10 @@ strong * {
 }
 
 pre {
-  border-radius: 3px;
-  font-size: 0.875em;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
   max-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
   padding: 1.25em 1.5em;
   white-space: pre;
   word-wrap: normal;
@@ -215,1774 +169,1247 @@ pre code {
   background-color: transparent;
   color: currentColor;
   display: inline-block;
-  font-size: 1em;
+  font-size: 0.875rem;
   min-width: 100%;
-  padding: 0.75em 0 0 0;
   position: relative;
 }
 
-pre code:before {
-  border-radius: 0 0 0.25em 0.25em;
-  content: attr(data-lang);
-  font-size: 0.9em;
-  letter-spacing: 0.01rem;
-  line-height: 1;
-  padding: 0.25em 0.5em;
-  position: absolute;
-  left: 0;
-  text-transform: uppercase;
-  top: -1.4em;
+button:hover svg,
+button-anchor:hover svg {
+  stroke-width: 2px;
 }
 
-.is-pulled-right {
-  float: right !important;
+a,
+home-page article a,
+recent-articles h2 a {
+  border-bottom: 1px solid;
+  overflow-wrap: break-word;
+  text-decoration: none;
 }
 
-.is-size-3 {
-  font-size: 2rem !important;
+video {
+  display: inline-block;
+  box-shadow: 0 0.25rem 1rem;
+  max-width: 100%;
 }
 
-.is-size-4 {
-  font-size: 1.5rem !important;
+video-container {
+  display: block;
+  text-align: center;
 }
 
-.is-size-5 {
-  font-size: 1.25rem !important;
+figure {
+  text-align: center;
 }
 
-.is-size-6 {
-  font-size: 1rem !important;
+ul {
+  list-style: none;
+  margin-top: 1rem;
 }
 
-.is-size-7 {
-  font-size: 0.75rem !important;
+h1,
+h2,
+h3,
+h4 {
+  font-size: 100%;
+  font-weight: 400;
 }
 
-.has-text-centered {
-  text-align: center !important;
+footer,
+figcaption,
+figcaption code {
+  font-size: 95%;
+  margin-bottom: 1rem;
+  margin-top: 0.5rem;
+  text-align: center;
 }
 
-.has-text-left {
-  text-align: left !important;
+ul + ul,
+li + li {
+  margin-top: 0.25rem;
 }
 
-.has-text-right {
-  text-align: right !important;
+input[type="text"],
+input[type="email"] {
+  height: 2.5rem;
+  max-width: 100%;
+  width: 100%;
 }
 
-.is-uppercase {
-  text-transform: uppercase !important;
+textarea {
+  height: 2.5rem;
+  max-width: 100%;
+  min-width: 100%;
+  min-height: 8rem;
+  resize: vertical;
 }
 
-.has-text-white {
-  color: white !important;
+button,
+textarea,
+input[type="text"],
+input[type="email"],
+input[type="submit"],
+input[type="button"] {
+  -webkit-appearance: none;
+  appearance: none;
 }
 
-.has-text-primary {
-  color: #245a8a !important;
+input,
+button,
+textarea,
+button-anchor a,
+pagination-controller a {
+  border-radius: 0.25rem;
+  border: 1px solid;
+  font-size: 1rem;
+  padding: 0.5rem;
 }
 
-.has-text-danger {
-  color: #f05a60 !important;
+button,
+input[type="submit"],
+input[type="button"],
+button-anchor a,
+pagination-controller a {
+  align-items: center;
+  border: 0 solid transparent;
+  cursor: pointer;
+  display: flex;
+  height: 2rem;
+  justify-content: center;
+  padding: 0.25rem 1rem;
 }
 
-a.has-text-danger:hover,
-a.has-text-danger:focus {
-  color: #ff0537 !important;
+button svg,
+button-anchor a svg {
+  stroke-width: 1.5px;
+  width: 20px;
+  height: 20px;
 }
 
-.has-text-grey-dark {
-  color: #4a4a4a !important;
+button span,
+button-anchor a span {
+  padding-left: 0.5rem;
 }
 
-.has-text-grey {
-  color: #7a7a7a !important;
+ol {
+  counter-reset: ol;
 }
 
-.has-text-weight-normal {
-  font-weight: 400 !important;
+ol {
+  margin-left: 4rem;
+  margin-top: 1.5rem;
 }
 
-.has-text-weight-semibold {
-  font-weight: 600 !important;
+ol li {
+  -ms-hyphens: auto;
+  -ms-word-break: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  font-size: 1.25rem;
+  list-style: none;
 }
 
-.has-text-weight-bold {
-  font-weight: 700 !important;
+ol li + li {
+  margin-top: 1rem;
 }
 
-.is-block {
-  display: block !important;
+ol li:before {
+  border-radius: 100%;
+  border: 1px solid;
+  content: counter(ol);
+  counter-increment: ol;
+  font-size: 1rem;
+  font-weight: 700;
+  margin-left: -2.75rem;
+  margin-top: 0.25rem;
+  padding: 0 0.5rem;
+  position: absolute;
 }
 
-.is-flex {
-  display: flex !important;
+ol:not(:last-child) {
+  margin-bottom: 1.5rem;
 }
 
-.is-inline {
-  display: inline !important;
+body {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.8;
+  margin: 0 auto;
+  max-width: 1152px;
 }
 
-.is-inline-block {
-  display: inline-block !important;
+main {
+  min-height: 450px;
 }
 
-.is-inline-flex {
-  display: inline-flex !important;
+main article {
+  min-height: 450px;
 }
 
-.is-hidden {
-  display: none !important;
+article > mark:not(:last-child) {
+  margin-bottom: 1.5rem;
 }
 
-.button {
-  background-color: transparent;
-  border-color: #dbdbdb;
-  border-width: 1px;
-  color: #363636;
-  cursor: pointer;
-  justify-content: center;
-  padding-bottom: calc(0.375em - 1px);
-  padding-left: 0.75em;
-  padding-right: 0.75em;
-  padding-top: calc(0.375em - 1px);
+body > footer {
+  font-size: 75%;
   text-align: center;
-  white-space: nowrap;
+  margin: 0;
 }
 
-.button strong {
-  color: inherit;
+article p {
+  font-size: 1.25rem;
+  margin-bottom: 1.5rem;
 }
 
-.button.is-text {
-  background-color: transparent;
-  border-color: transparent;
-}
+/* ----- Tables ----- */
 
-.button[disabled] {
-  background-color: white;
-  border-color: #dbdbdb;
-  box-shadow: none;
-  opacity: 0.5;
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin-bottom: 1.5rem;
+  width: 100%;
 }
 
-.container {
-  flex-grow: 1;
-  margin: 0 auto;
-  position: relative;
-  width: auto;
+table,
+table code {
+  font-size: 1.15rem;
 }
 
-@media screen and (min-width: 1088px) {
-  .container {
-    max-width: 960px;
-  }
+table th {
+  font-weight: 700;
+  font-variant: small-caps;
+  text-transform: lowercase;
+  letter-spacing: 0.05rem;
+  padding: 0.4rem;
 }
 
-@media screen and (min-width: 1280px) {
-  .container {
-    max-width: 1152px;
-  }
+table td,
+table th {
+  vertical-align: top;
+  padding: 0;
+  padding: 0.4rem;
+  min-width: 8rem;
 }
 
-.content li + li {
-  margin-top: 0.5em;
+table td:not([align]),
+table th:not([align]) {
+  text-align: left;
 }
 
-.content p:not(:last-child),
-.content dl:not(:last-child),
-.content ol:not(:last-child),
-.content ul:not(:last-child),
-.content blockquote:not(:last-child),
-.content pre:not(:last-child),
-.content table:not(:last-child) {
-  margin-bottom: 1.5rem;
+@media (max-width: 550px) {
+  table {
+    table-layout: fixed;
+  }
 }
 
-.content h1 {
-  font-size: 2em;
-  margin-bottom: 0.5em;
+/* ----- Fonts ----- */
+
+ol li,
+article p,
+article h1,
+article h2,
+article h3,
+article-on-web h3,
+side-note-aside label,
+margin-note-aside label,
+article-more-content h3 {
+  font-family: Charter, Georgia, "Book Antiqua", serif;
 }
 
-.content h1:not(:first-child) {
-  margin-top: 1em;
+body,
+input,
+button,
+select,
+textarea,
+side-note-aside,
+margin-note-aside,
+blockquote-footer,
+table-contents h2,
+home-page article p,
+home-page article h1,
+home-page article h2,
+resume-page article p,
+resume-page article h1,
+contact-page article p,
+contact-page article h1,
+home-page margin-note-aside label {
+  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
 }
 
-.content h2 {
-  font-size: 1.75em;
-  margin-bottom: 0.5714em;
+pre,
+code,
+blockquote p {
+  font-family: "Fira Code", "Lucida Console", "Andale Mono", monospace;
 }
 
-.content h2:not(:first-child) {
-  margin-top: 1.1428em;
+h1 {
+  margin-bottom: 1.5rem;
+  font-size: 2.5rem;
+  line-height: 1.25;
 }
 
-.content h3 {
-  font-size: 1.5em;
-  margin-bottom: 0.6666em;
+h2 {
+  font-size: 1.75rem;
+  margin-bottom: 0.75rem;
+  margin-top: 1.15rem;
+  line-height: 1.5;
 }
 
-.content h3:not(:first-child) {
-  margin-top: 1.3333em;
+h3 {
+  font-size: 1.5rem;
+  line-height: 1.5;
 }
 
-.content blockquote {
+blockquote {
   padding: 0 1.5em;
   margin-left: 5%;
-  margin-bottom: 1.3em !important;
-}
-
-.content ul,
-ul {
-  list-style: none;
-  margin-top: 1em;
-}
-
-.content ul ul {
-  list-style-type: circle;
-  margin-top: 0.5em;
+  margin-bottom: 1.5rem;
 }
 
-.content ul ul ul {
-  list-style-type: square;
+blockquote-footer {
+  font-size: 85%;
+  text-align: right;
+  display: block;
+  margin-top: 1rem;
 }
 
-.content dd {
-  margin-left: 2em;
+home-page-intro {
+  padding: 1rem;
+  display: block;
+  margin-bottom: 1rem;
 }
 
-.content figure {
-  margin-bottom: 1em;
-  text-align: center;
+home-page label {
+  display: inline-block !important;
+  line-height: 1.125;
+  margin-bottom: 1.5rem;
+  font-size: 1.5rem;
 }
 
-.content sup,
-.content sub {
-  font-size: 75%;
+home-page article > h1 {
+  font-size: 2rem;
+  line-height: 1.125;
+  margin-bottom: 0;
 }
 
-.title,
-.subtitle {
-  word-break: break-word;
+home-page article > h1 em {
+  font-style: normal;
 }
 
-.title em,
-.title span,
-.subtitle em,
-.subtitle span {
-  font-weight: inherit;
+home-page article > h2 {
+  font-size: 1.25rem;
+  margin-bottom: 1.5rem;
+  margin-top: 0.5rem;
 }
 
-.title sub,
-.subtitle sub {
-  font-size: 0.75em;
+home-page article p,
+contact-page article p {
+  font-size: 100%;
 }
 
-.title sup,
-.subtitle sup {
-  font-size: 0.75em;
+home-page-posts > a,
+home-page-projects > a {
+  text-decoration: none;
+  text-align: center;
+  display: block;
+  text-transform: uppercase;
 }
 
-.title .tag,
-.subtitle .tag {
+home-page-posts > a svg,
+home-page-projects > a svg {
+  display: inline-block;
   vertical-align: middle;
 }
 
-.title {
-  color: #363636;
-  font-size: 2rem;
-  font-weight: 600;
-  line-height: 1.125;
-}
-
-.title strong {
-  color: inherit;
-  font-weight: inherit;
-}
-
-.title + .highlight {
-  margin-top: -0.75rem;
+home-page recent-projects article-thumbnail {
+  flex: 2;
 }
 
-.title:not(.is-spaced) + .subtitle {
-  margin-top: -1.25rem;
-}
-
-.title.is-1 {
-  font-size: 3rem;
+recent-projects article-thumbnail {
+  flex: none;
 }
 
-.title.is-2 {
-  font-size: 2.5rem;
+upload-page h1 {
+  text-align: center;
 }
 
-.title.is-3 {
+article-subsection h1,
+contact-page article h1,
+abstracts-page article-list h1 {
   font-size: 2rem;
 }
 
-.title.is-4 {
-  font-size: 1.5rem;
-}
-
-.title.is-5 {
-  font-size: 1.125rem;
-}
-
-.title.is-6 {
-  font-size: 1rem;
+fortune-quote b {
+  display: block;
+  margin-bottom: 0.25rem;
 }
 
-.title.is-7 {
-  font-size: 0.75rem;
+contact-page form label {
+  letter-spacing: 0.05rem;
+  text-transform: uppercase;
+  margin: 0.5rem 0;
+  display: block;
 }
 
-.subtitle {
-  color: #4a4a4a;
-  font-size: 1.25rem;
-  font-weight: 400;
-  line-height: 1.8;
+contact-page form textarea {
+  margin-bottom: 1rem;
 }
 
-.subtitle strong {
-  color: #363636;
-  font-weight: 600;
+contact-page field-set {
+  display: flex;
+  margin: 0;
+  padding: 0;
 }
 
-.subtitle:not(.is-spaced) + .title {
-  margin-top: -1.25rem;
+contact-page form field-set section {
+  flex: 1;
 }
 
-.subtitle.is-6 {
-  font-size: 1rem;
+contact-page form field-set section + section {
+  margin-left: 0.75rem;
 }
 
-.heading {
-  display: block;
-  font-size: 11px;
-  letter-spacing: 1px;
-  margin-bottom: 5px;
-  text-transform: uppercase;
+contact-page input[name="agree"] {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+  z-index: -1;
 }
 
-.highlight {
-  font-weight: 400;
-  max-width: 100%;
-  overflow: hidden;
-  padding: 0;
+contact-page aside {
+  border-radius: 0.5rem;
+  border: 1px solid;
+  margin-bottom: 1rem;
+  padding: 1rem;
 }
 
-.highlight:focus-within {
-  outline: 0.25rem solid #ff8383;
+contact-page aside p {
+  margin: 0;
 }
 
-.input,
-.textarea,
-.select select {
-  background-color: #f9f9f9;
-  border-color: #ccc;
-  color: #363636;
-  max-width: 100%;
-  width: 100%;
-  font-weight: 400;
-  border-radius: 3px;
+article,
+body > footer,
+article-list,
+taxonomy-list,
+article-on-web,
+article-comments,
+article-subsection,
+article-meta-bottom,
+article-archive-list,
+taxonomy-archive-list,
+article-more-content {
+  max-width: 62%;
+  padding: 1.5rem;
+  display: block;
+  margin: 0 auto;
+  transform: translateY(0);
 }
 
-.input:focus,
-.textarea:focus,
-.is-focused.input,
-.is-focused.textarea,
-.input:active,
-.textarea:active,
-.is-active.input,
-.is-active.textarea {
-  border-color: #4992d0;
-  box-shadow: 0 0 0 0.125em rgba(73, 146, 208, 0.5);
+@media screen and (max-width: 768px) {
+  article,
+  body > footer,
+  article-list,
+  taxonomy-list,
+  article-on-web,
+  article-comments,
+  article-subsection,
+  article-meta-bottom,
+  article-archive-list,
+  taxonomy-archive-list,
+  article-more-content {
+    max-width: 100%;
+  }
 }
 
-.input[disabled],
-.textarea[disabled] {
-  background-color: whitesmoke;
-  border-color: whitesmoke;
-  box-shadow: none;
-  color: #7a7a7a;
+taxonomy-list h2,
+article-on-web h2,
+article-comments h2,
+article-more-content h2,
+taxonomy-archive-list h2 {
+  font-size: 1.25rem;
+  text-transform: uppercase;
+  margin-bottom: 1.5rem;
+  letter-spacing: 0.1rem;
 }
 
-.is-danger.input,
-.is-danger.textarea {
-  border-color: #ff3860;
+article-list {
+  margin-top: 1rem;
 }
 
-.textarea {
-  display: block;
-  max-width: 100%;
-  min-width: 100%;
-  padding: 0.625em;
-  resize: vertical;
+article-list recent-abstracts {
+  display: flex;
+  margin: 0 -0.75rem;
 }
 
-.textarea:not([rows]) {
-  min-height: 120px;
+abstracts-page article-list {
+  margin-top: 0;
 }
 
-.textarea[rows] {
-  height: initial;
+article-more-content li {
+  display: flex;
+  align-items: baseline;
 }
 
-.checkbox,
-.radio {
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1.25;
-  position: relative;
+article-more-content li h3 {
+  flex: 1;
+  padding-right: 1rem;
 }
 
-.checkbox input,
-.radio input {
-  cursor: pointer;
+article-more-content ul + ul {
+  margin-top: 1.5rem;
 }
 
-.checkbox:hover,
-.radio:hover {
-  color: #363636;
+article-meta-top {
+  margin-bottom: 1.5rem;
 }
 
-.checkbox[disabled],
-.radio[disabled] {
-  color: #7a7a7a;
-  cursor: not-allowed;
+article-summary-meta {
+  margin-bottom: 0.75rem;
 }
 
-.radio + .radio {
-  margin-left: 0.5em;
+article-meta-top,
+article-summary-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
-.field:not(:last-child) {
-  margin-bottom: 0.75rem;
+article-meta-top a {
+  text-decoration: underline;
 }
 
-.field.has-addons {
+article-meta-top aside {
   display: flex;
-  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  flex-wrap: wrap;
 }
 
-.field.has-addons .control:not(:last-child) {
-  margin-right: -1px;
+abstract-summary-meta svg,
+article-summary-meta svg,
+article-meta-top svg {
+  height: 1rem;
+  margin-right: 0.35rem;
+  width: 1rem;
+  display: inline-block;
+  vertical-align: middle;
 }
 
-.field.has-addons .control:not(:first-child):not(:last-child) .button,
-.field.has-addons .control:not(:first-child):not(:last-child) .input,
-.field.has-addons .control:not(:first-child):not(:last-child) .select select {
-  border-radius: 0;
+article-summary-meta *:not(svg),
+article-meta-top aside *:not(svg) {
+  margin-right: 0.5rem;
 }
 
-.field.has-addons .control:first-child:not(:only-child) .button,
-.field.has-addons .control:first-child:not(:only-child) .input,
-.field.has-addons .control:first-child:not(:only-child) .select select {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+abstract-summary-meta footer {
+  text-align: inherit;
 }
 
-.field.has-addons .control:last-child:not(:only-child) .button,
-.field.has-addons .control:last-child:not(:only-child) .input,
-.field.has-addons .control:last-child:not(:only-child) .select select {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+taxonomy-list > h1 {
+  font-size: 2rem;
+  font-variant: small-caps;
+  letter-spacing: 0.05rem;
+  text-transform: lowercase;
+  margin: 0;
 }
 
-.field.has-addons .control .button:not([disabled]):hover,
-.field.has-addons .control .button:not([disabled]).is-hovered,
-.field.has-addons .control .input:not([disabled]):hover,
-.field.has-addons .control .input:not([disabled]).is-hovered,
-.field.has-addons .control .select select:not([disabled]):hover,
-.field.has-addons .control .select select:not([disabled]).is-hovered {
-  z-index: 2;
+taxonomy-list hr {
+  margin: 1rem 0;
 }
 
-.field.has-addons .control .button:not([disabled]):focus,
-.field.has-addons .control .button:not([disabled]).is-focused,
-.field.has-addons .control .button:not([disabled]):active,
-.field.has-addons .control .button:not([disabled]).is-active,
-.field.has-addons .control .input:not([disabled]):focus,
-.field.has-addons .control .input:not([disabled]).is-focused,
-.field.has-addons .control .input:not([disabled]):active,
-.field.has-addons .control .input:not([disabled]).is-active,
-.field.has-addons .control .select select:not([disabled]):focus,
-.field.has-addons .control .select select:not([disabled]).is-focused,
-.field.has-addons .control .select select:not([disabled]):active,
-.field.has-addons .control .select select:not([disabled]).is-active {
-  z-index: 3;
+taxonomy-list li,
+taxonomy-archive-list li,
+article-archive-list li {
+  line-height: 2.5;
 }
 
-.field.has-addons .control .button:not([disabled]):focus:hover,
-.field.has-addons .control .button:not([disabled]).is-focused:hover,
-.field.has-addons .control .button:not([disabled]):active:hover,
-.field.has-addons .control .button:not([disabled]).is-active:hover,
-.field.has-addons .control .input:not([disabled]):focus:hover,
-.field.has-addons .control .input:not([disabled]).is-focused:hover,
-.field.has-addons .control .input:not([disabled]):active:hover,
-.field.has-addons .control .input:not([disabled]).is-active:hover,
-.field.has-addons .control .select select:not([disabled]):focus:hover,
-.field.has-addons .control .select select:not([disabled]).is-focused:hover,
-.field.has-addons .control .select select:not([disabled]):active:hover,
-.field.has-addons .control .select select:not([disabled]).is-active:hover {
-  z-index: 4;
+article-archive-list ul,
+taxonomy-list > section ul,
+taxonomy-archive-list > section ul {
+  margin-bottom: 1rem;
+  margin-left: -0.5rem;
 }
 
-.field.has-addons .control.is-expanded {
-  flex-grow: 1;
-  flex-shrink: 1;
+taxonomy-archive-list h1,
+article-archive-list h1 {
+  font-size: 1.5rem;
+  line-height: 1.125;
+  margin-bottom: 1rem;
 }
 
-@media screen and (min-width: 769px), print {
-  .field.is-horizontal {
-    display: flex;
-  }
+taxonomy-list time,
+taxonomy-archive-list time,
+article-archive-list time {
+  padding-right: 1rem;
+  text-transform: uppercase;
+  flex: initial;
 }
 
-.field-body .field .field {
-  margin-bottom: 0;
+taxonomy-list ul a,
+taxonomy-archive-list ul a,
+article-archive-list ul a {
+  display: flex;
+  padding: 0 0.5rem;
+  align-items: baseline;
 }
 
-@media screen and (min-width: 400px), print {
-  .field-body {
-    display: flex;
-    flex-basis: 0;
-    flex-grow: 5;
-    flex-shrink: 1;
-  }
-  .field-body .field {
-    margin-bottom: 0;
-  }
-  .field-body > .field {
-    flex-shrink: 1;
-  }
-  .field-body > .field:not(.is-narrow) {
-    flex-grow: 1;
-  }
-  .field-body > .field:not(:last-child) {
-    margin-right: 0.75rem;
-  }
+taxonomy-archive-list span,
+article-archive-list span {
+  flex: 3;
+  line-height: 1.5;
 }
 
-.control {
-  box-sizing: border-box;
-  clear: both;
-  font-size: 1rem;
-  position: relative;
-  text-align: left;
+article-archive-link a {
+  text-decoration: none;
+  text-align: center;
+  display: block;
+  text-transform: uppercase;
 }
 
-.dropdown {
-  display: inline-flex;
-  position: relative;
-  vertical-align: top;
+article-archive-link a svg {
+  vertical-align: bottom;
 }
 
-.dropdown.is-right .dropdown-menu {
-  left: auto;
-  right: 0;
+article-meta-bottom,
+article-more-content,
+article-on-web {
+  padding: 2.5rem 1.5rem;
 }
 
-.dropdown.is-menu .dropdown-menu {
-  top: 0.5rem;
-  right: 0.5rem;
+article-on-web button-anchor {
+  float: right;
 }
 
-.dropdown-menu {
-  display: none;
-  left: 0;
-  min-width: 6.25rem;
-  padding-top: 4px;
-  position: absolute;
-  top: 100%;
-  z-index: 20;
+article-on-web li + li {
+  margin-top: 1.5rem;
 }
 
-.dropdown-content {
-  background-color: #fafafa;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
-    0 0px 0 1px rgba(10, 10, 10, 0.02);
-  padding-bottom: 0.5rem;
-  padding-top: 0.5rem;
+article-meta-bottom {
+  text-align: right;
 }
 
-.navbar {
-  background-color: white;
-  min-height: 3.25rem;
-  position: relative;
-  z-index: 30;
+article-card {
+  align-items: center;
+  display: flex;
+  margin-bottom: 3rem;
 }
 
-.navbar > .container {
-  align-items: stretch;
-  display: flex;
-  min-height: 3.25rem;
-  width: 100%;
+article-card h2 {
+  font-size: 1.125rem;
+  margin: 0;
 }
 
-.navbar.is-fixed-bottom,
-.navbar.is-fixed-top {
-  left: 0;
-  position: fixed;
-  right: 0;
-  z-index: 30;
+article-thumbnail {
+  display: block;
+  flex: 2;
+  margin-right: 2rem;
+  text-align: center;
 }
 
-.navbar.is-fixed-top {
-  top: 0;
+article-summary {
+  flex: 3;
 }
 
-html.has-navbar-fixed-top,
-body.has-navbar-fixed-top {
-  padding-top: 3.25rem;
+article-summary p {
+  margin-bottom: 0.75rem;
 }
 
-.navbar-menu {
-  display: none;
+article-summary h2 {
+  font-weight: 700;
+  margin-bottom: 0.125rem;
 }
 
-.navbar-item .icon:only-child,
-.navbar-link .icon:only-child {
-  margin-left: -0.25rem;
-  margin-right: -0.25rem;
+abstract-card {
+  flex: 1;
+  margin: 0.75rem;
+  text-align: center;
 }
 
-a.navbar-item,
-.navbar-link {
-  cursor: pointer;
+abstract-card h2 {
+  font-weight: 700;
+  font-size: 100%;
 }
 
-.navbar-item {
-  display: block;
-  flex-grow: 0;
-  flex-shrink: 0;
+pagination-controller nav {
+  display: flex;
+  margin-bottom: 1.5rem;
 }
 
-@media screen and (max-width: 1087px) {
-  .navbar > .container {
-    display: block;
-  }
-  .navbar-menu {
-    background-color: white;
-    box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
-    padding: 0.5rem 0;
-  }
-  .navbar.is-fixed-top .navbar-menu,
-  .navbar.is-fixed-top-touch .navbar-menu {
-    -webkit-overflow-scrolling: touch;
-    max-height: calc(100vh - 3.25rem);
-    overflow: auto;
-  }
+pagination-controller ul {
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  flex-grow: 1;
 }
 
-@media screen and (min-width: 1088px) {
-  .navbar,
-  .navbar-menu,
-  .navbar-start,
-  .navbar-end {
-    align-items: stretch;
-    display: flex;
-  }
-  .navbar {
-    min-height: 4rem;
-  }
-  .navbar-item,
-  .navbar-link {
-    align-items: center;
-    display: flex;
-  }
-  .navbar-item {
-    display: flex;
-  }
-  .navbar-menu {
-    flex-grow: 1;
-    flex-shrink: 0;
-  }
-  .navbar > .container .navbar-menu,
-  .container > .navbar .navbar-menu {
-    margin-right: -0.75rem;
-  }
+pagination-controller li {
+  margin: 0;
 }
 
-.pagination {
-  font-size: 1rem;
-  margin: -0.25rem;
+pagination-controller [data-pagination-current] {
+  font-weight: 700;
 }
 
-.pagination,
-.pagination-list {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  margin: 0;
+pagination-ellipsis {
+  padding: 0 0.5rem;
 }
 
-.pagination-previous,
-.pagination-next,
-.pagination-link,
-.pagination-ellipsis {
-  font-size: 1em;
+pagination-ellipsis,
+pagination-controller a {
+  align-items: center;
+  display: inline-flex;
+  font-size: 1rem;
+  height: 2.5rem;
   justify-content: center;
   margin: 0.25rem;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  text-align: center;
 }
 
-.pagination-previous,
-.pagination-next,
-.pagination-link {
-  border-color: #dbdbdb;
-  color: #363636;
-  min-width: 2.5em;
+table-contents {
+  clear: right;
+  float: right;
+  font-size: 1rem;
+  letter-spacing: 0.01rem;
+  margin-bottom: 1rem;
+  margin-right: -22vw;
+  max-width: 22em;
+  overflow-wrap: break-word;
+  padding-right: 1.125rem;
+  user-select: none;
+  width: 18vw;
+  word-break: break-word;
 }
 
-.pagination-previous:hover,
-.pagination-next:hover,
-.pagination-link:hover {
-  border-color: #b5b5b5;
-  color: #363636;
-  border-width: 1px;
+table-contents h2 {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.1rem;
+  margin-bottom: 0.25rem;
+  text-transform: uppercase;
+  line-height: 1.5;
 }
 
-.pagination-previous:focus,
-.pagination-next:focus,
-.pagination-link:focus {
-  border-color: #3273dc;
+table-contents a {
+  display: block;
+  font-size: 0.8125rem;
+  padding: 0.125rem 0 0.125rem 0.5rem;
 }
 
-.pagination-previous:active,
-.pagination-next:active,
-.pagination-link:active {
-  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+table-contents ul {
+  margin-left: -0.5rem;
 }
 
-.pagination-previous[disabled],
-.pagination-next[disabled],
-.pagination-link[disabled],
-.pagination-previous.disabled,
-.pagination-next.disabled {
-  background-color: #dbdbdb;
-  border-color: #dbdbdb;
-  box-shadow: none;
-  color: #7a7a7a;
-  opacity: 0.5;
-}
-
-.pagination-previous,
-.pagination-next {
-  padding-left: 0.75em;
-  padding-right: 0.75em;
-  white-space: nowrap;
+table-contents li + li {
+  margin-top: 0.25rem;
 }
 
-.pagination-link.is-current {
-  background-color: #3273dc;
-  border-color: #3273dc;
-  color: #fff;
-  font-weight: bold;
+code-block {
+  display: block;
+  margin-bottom: 1.5rem;
 }
 
-.pagination-ellipsis {
-  color: #b5b5b5;
-  pointer-events: none;
+code-block header {
+  margin: -1rem 2rem 0 2rem;
+  text-align: right;
+  display: flex;
+  justify-content: flex-end;
 }
 
-.pagination-list {
-  flex-wrap: wrap;
+code-block div:focus-within {
+  outline: 0.25rem solid #ff8383;
+  outline-offset: -0.15rem;
 }
 
-@media screen and (max-width: 768px) {
-  .pagination {
-    flex-wrap: wrap;
-  }
-  .pagination-previous,
-  .pagination-next {
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-  .pagination-list li {
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
+code-block language-label {
+  line-height: 1.25;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  text-transform: uppercase;
 }
 
-@media screen and (min-width: 769px), print {
-  .pagination-list {
-    flex-grow: 1;
-    flex-shrink: 1;
-    justify-content: flex-start;
-    order: 1;
-  }
-  .pagination-previous {
-    order: 2;
-  }
-  .pagination-next {
-    order: 3;
-  }
-  .pagination {
-    justify-content: space-between;
-  }
+code-block language-label code {
+  font-size: 85%;
+  padding: 0 0.5rem;
 }
 
-.column {
-  display: block;
+tile-set {
+  align-items: stretch;
+  display: flex;
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
-  padding: 0.75rem;
-}
-
-.columns.is-mobile > .column.is-5 {
-  flex: none;
-  width: 41.66667%;
-}
-
-.columns.is-mobile > .column.is-7 {
-  flex: none;
-  width: 58.33333%;
-}
-
-@media screen and (min-width: 769px), print {
-  .column.is-4,
-  .column.is-4-tablet {
-    flex: none;
-    width: 33.33333%;
-  }
-  .column.is-5,
-  .column.is-5-tablet {
-    flex: none;
-    width: 41.66667%;
-  }
-  .column.is-6,
-  .column.is-6-tablet {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-7,
-  .column.is-7-tablet {
-    flex: none;
-    width: 58.33333%;
-  }
-}
-
-.columns {
+  margin-bottom: -0.75rem;
   margin-left: -0.75rem;
   margin-right: -0.75rem;
   margin-top: -0.75rem;
+  min-height: min-content;
 }
 
-.columns.is-gapless {
-  margin: 0;
-}
-
-.columns:last-child {
-  margin-bottom: -0.75rem;
-}
-
-.columns:not(:last-child) {
-  margin-bottom: calc(1.5rem - 0.75rem);
-}
-
-.columns.is-centered {
-  justify-content: center;
-}
-
-.columns.is-mobile {
-  display: flex;
-}
-
-@media screen and (min-width: 769px), print {
-  .columns:not(.is-desktop) {
-    display: flex;
-  }
-}
-
-@media screen and (min-width: 1088px) {
-  .columns.is-desktop {
-    display: flex;
-  }
-}
-
-.tile {
+tile-item {
   align-items: stretch;
-  display: block;
   flex-basis: 0;
-  -ms-flex-preferred-size: auto;
   flex-grow: 1;
   flex-shrink: 1;
   min-height: min-content;
-}
-
-.tile.is-ancestor {
-  margin-left: -0.75rem;
-  margin-right: -0.75rem;
-  margin-top: -0.75rem;
-}
-
-.tile.is-ancestor:last-child {
-  margin-bottom: -0.75rem;
-}
-
-.tile.is-ancestor:not(:last-child) {
-  margin-bottom: 0.75rem;
-}
-
-.tile.is-child {
-  margin: 0 !important;
-}
-
-.tile.is-parent {
   padding: 0.75rem;
+  display: flex;
 }
 
-@media screen and (min-width: 769px), print {
-  .tile:not(.is-child) {
-    display: flex;
-  }
-}
-
-.section {
-  padding: 2rem 0;
+small-caps {
+  font-variant: small-caps;
+  letter-spacing: 0.05rem;
+  line-height: 0;
+  text-transform: lowercase;
 }
 
-.section-vertical {
-  padding: 1.5rem 0;
+small-caps[intro] {
+  font-size: 2rem !important;
+  text-transform: none;
 }
 
-@media screen and (max-width: 1087px) {
-  .section {
-    padding: 1.5rem;
-  }
+resume-page {
+  display: flex;
+  min-height: 100vh;
+  margin-top: -4rem;
 }
 
-.footer {
-  padding: 1.5rem;
+resume-page column-left {
+  background-image: url("/images/shells.jpg");
+  background-position: center;
+  background-size: cover;
+  display: block;
+  flex: none;
+  min-height: 50vh;
+  padding: 0.75rem;
+  width: 33%;
 }
 
-/*
- * Custom Resets
- */
-
-article.content {
-  min-height: 452px;
+resume-page column-left p a {
+  font-size: 0.75rem;
+  border-bottom: none;
+  padding: 10px;
+  border-radius: 3px;
+  margin-bottom: 1.5rem;
 }
 
-video {
+resume-page column-left h1 {
+  font-size: 2rem;
   display: inline-block;
-  box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.3);
-}
-
-a {
-  border-bottom: 1px solid #999;
-  color: #014cc6;
-  cursor: pointer;
-  text-decoration: none;
-  overflow-wrap: break-word;
-}
-a:hover {
-  border-bottom: 2px solid #999;
-  text-shadow: 0 0 currentColor;
+  border-bottom: 1px solid transparent;
+  margin-bottom: 1rem;
 }
 
-a:focus {
-  border-bottom: 3px solid #999;
+resume-page column-left h1 a {
+  display: inline-block;
 }
 
-h1:target,
-h2:target,
-h3:target {
-  text-decoration: underline;
-  text-decoration-style: double;
+resume-page column-left section {
+  text-align: center;
+  padding: 2rem 0;
 }
 
-:target::before {
-  content: "";
+resume-page column-right {
   display: block;
-  height: 5rem;
-  margin-top: -5rem;
-  visibility: hidden;
-}
-
-ol {
-  counter-reset: ol;
-}
-
-ol,
-.document > ul {
-  margin-left: 4rem;
-  margin-top: 1.5rem;
-}
-
-ol li,
-.document > ul li {
-  -ms-hyphens: auto;
-  -ms-word-break: normal;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  font-size: 1.25rem;
-  list-style: none;
+  max-height: 100vh;
+  overflow: auto;
+  width: 100%;
 }
 
-ol li + li {
-  margin-top: 1rem !important;
+resume-page column-right main {
+  max-width: 1152px;
+  padding: 0 3rem 0 3rem;
 }
 
-ol li:before {
-  border-radius: 100%;
-  border: 1px solid;
-  content: counter(ol);
-  counter-increment: ol;
-  font-size: 1rem;
+resume-page column-right h1 {
+  font-size: 70%;
   font-weight: 700;
-  margin-left: -2.75rem;
-  margin-top: 0.25rem;
-  padding: 0 0.5rem;
-  position: absolute;
-}
-
-figure > a,
-.navbar-item,
-.webring a,
-.article__more__content a,
-.front__more,
-.is-mobile .has-text-centered > a,
-.article__list li a,
-.tableofcontents li a,
-.resume__label,
-.resume__container a,
-.isso-comment-footer a,
-.abstract.tile > a {
-  border-bottom: none !important;
-}
-.abstract.tile.is-ancestor {
-  margin-top: 2rem;
-}
-
-.article__more__content time {
-  margin-right: 1rem;
-  font-size: 1.125rem;
   letter-spacing: 0.05rem;
-  font-variant: all-small-caps;
+  margin-bottom: 0.25rem;
+  text-transform: uppercase;
+  line-height: 1.75;
 }
 
-.article__more__content li {
+resume-page column-section {
   display: flex;
-  align-items: center;
+  margin-bottom: -0.75rem;
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+  margin-top: -0.75rem;
 }
 
-.article__more__content li p {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  padding-right: 1rem;
-  text-overflow: ellipsis;
+resume-page column-stack,
+resume-page column-questions {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding: 0.75rem;
 }
 
-@media screen and (max-width: 968px) {
-  .article__more__content li {
-    display: block;
-  }
-  .article__more__content li p {
-    white-space: normal;
-  }
+resume-page article {
+  display: block;
+  margin: 2.5rem 0 0 0;
+  max-width: 100%;
+  padding: 0;
 }
 
-.image__thumbnail {
-  max-height: 222px;
-}
-.medium-zoom-overlay {
-  background-color: #fff;
-  background-color: rgba(255, 255, 255, 0.9);
+resume-page article p {
+  margin: 0;
+  font-size: 0.75rem;
 }
 
-/*
- * Fonts
- */
-
-body,
-button,
-input,
-select,
-textarea,
-.sans-serif {
-  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+resume-page article > section h1 {
+  font-size: 1.5rem;
+  font-weight: 400;
+  letter-spacing: normal;
+  margin-bottom: 0.75rem;
+  text-transform: none;
 }
 
-.serif,
-article > mark,
-.document ol li,
-.document > ul li {
-  font-family: Charter, Georgia, "Book Antiqua", serif;
+resume-page timeline-item {
+  display: flex;
+  position: relative;
+  margin-left: 0.35rem;
+  padding-bottom: 2rem;
 }
 
-pre,
-code,
-svg text,
-.monospace,
-blockquote > p.serif {
-  font-family: "Fira Code", "Lucida Console", "Andale Mono", monospace;
+resume-page timeline-item aside {
+  position: absolute;
+  background: #b3cfe6;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  content: "";
+  display: block;
+  height: 0.8rem;
+  left: -0.35rem;
+  top: 1.2rem;
+  width: 0.8rem;
 }
 
-.document a {
-  color: #000;
+resume-page timeline-item:before {
+  content: "";
+  display: block;
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
-article > mark,
-.is-size-serif {
-  font-size: 1.25rem !important;
+resume-page timeline-content {
+  padding: 1rem 0 0 2rem;
 }
 
-.content h1,
-.content h2,
-.content h3,
-.document h1 a,
-.document h2 a,
-.document h3 a {
-  color: #111;
-  font-weight: 400;
-  line-height: 1.4;
-}
+/* ----- Attributes ----- */
 
-blockquote .blockquote-footer {
-  margin-top: 1.3rem;
-}
-blockquote > p.serif {
-  font-size: 1.2rem !important;
+[hidden] {
+  display: none;
 }
 
-.smallcaps {
-  font-variant: small-caps;
-  letter-spacing: 0.05rem;
-  line-height: 0;
-  text-transform: lowercase;
-}
-.smallcapsintro {
-  font-size: 2rem !important;
-  text-transform: none;
+[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-/*
- * Text selection
- */
-
-::selection {
-  color: #fff;
-  background-color: #000;
-  text-shadow: 0 0 currentColor;
-}
-::-webkit-selection {
-  color: #fff;
-  background-color: #000;
-  text-shadow: 0 0 currentColor;
-}
-::-moz-selection {
-  color: #fff;
-  background-color: #000;
-  text-shadow: 0 0 currentColor;
+[data-resume] {
+  margin: 0;
+  max-width: 100%;
 }
 
-/*
- * Front page
- */
+/* ----- Context Menu ----- */
 
-.introduction {
-  padding: 1em;
-  margin-top: 0.75em;
+input[type="checkbox"]:checked ~ context-menu {
+  display: block;
 }
 
-.front__more {
-  text-transform: uppercase;
-}
-.front__more svg {
-  vertical-align: bottom;
+context-menu[right] {
+  left: auto;
+  right: 0;
 }
 
-.recent__article p,
-.article__summary {
-  margin-bottom: 0.75rem !important;
+context-menu[list] {
+  top: 0.5rem;
+  right: 0.5rem;
 }
 
-/*
- * Navigation Bar Reset
- */
-
-a.navbar-item:focus,
-a.navbar-item:hover,
-.navbar-item:hover label {
-  color: #000000;
-}
-.navbar__icon:hover svg,
-.navbar__icon:hover label svg {
-  fill: #ffc966;
+context-menu {
+  display: none;
+  left: 0;
+  min-width: 6.25rem;
+  position: absolute;
+  top: 100%;
+  z-index: 20;
 }
 
-.navbar-item {
+context-menu-content {
+  border-radius: 0.25rem;
+  border: 1px solid;
   display: block;
-  line-height: 1.25;
-  padding: 0.5rem 0.75rem;
-  position: relative;
 }
 
-.navbar {
+nav.hide {
+  top: -5rem !important;
+}
+
+body > nav {
+  margin: 0 auto;
+  left: 0;
+  min-height: 4rem;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 30;
   -webkit-transition: top 0.15s;
   -o-transition: top 0.15s;
   transition: top 0.15s;
 }
-.headroom {
-  top: -5em !important;
-}
-.navbar-item {
-  color: #555;
-}
-.navbar {
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
-  background-color: #fcfcfc;
-  background-color: rgba(252, 252, 252, 0.97);
-  min-height: 4rem;
-}
-.navbar,
-.navbar-menu {
-  background-color: #fcfcfc;
-  background-color: rgba(252, 252, 252, 0.97);
-}
-.navbar-menu {
+
+body > nav section {
+  align-items: center;
   display: flex;
-  overflow: visible !important;
-  box-shadow: none;
-}
-.navbar-menu .columns {
+  justify-content: center;
   margin: 0 auto;
-  display: flex;
-}
-.navbar-menu .column {
-  padding: 0;
-}
-html.has-navbar-fixed-top,
-body.has-navbar-fixed-top,
-html.has-navbar-fixed-bottom,
-body.has-navbar-fixed-bottom {
-  padding-top: 4rem;
+  max-width: 1152px;
 }
-.navbar .container,
-.navbar__left,
-.navbar__middle,
-.navbar__right {
-  min-height: 4rem;
+
+nav column-left,
+nav column-right,
+nav column-middle {
+  display: inline-flex;
   align-items: center;
 }
-.navbar__tablet__compact .navbar__active {
-  border-bottom: 2px solid #75b2f0;
-}
 
-@media screen and (max-width: 1087px) {
-  .navbar-menu .columns {
-    margin: 0 1em;
-    width: 100%;
-  }
-  .navbar-menu {
-    padding: 0 !important;
-  }
+nav column-middle {
+  flex: 3;
+  justify-content: center;
+  width: 100%;
 }
 
-@media screen and (min-width: 1088px) {
-  .navbar-menu,
-  .navbar-item {
-    display: inline-block;
-  }
+nav column-left {
+  justify-content: flex-end;
 }
-@media screen and (max-width: 400px) {
-  .is-mobile {
-    display: block !important;
-  }
-  .is-mobile .column {
-    width: 100% !important;
-  }
+
+nav column-right {
+  justify-content: flex-start;
 }
 
-.navbar__left {
-  display: inline-flex;
-  justify-content: flex-end;
+nav column-left,
+nav column-right {
+  flex: 1;
+  margin: 0 1rem;
 }
-.navbar__right {
-  display: inline-flex;
-  justify-content: flex-start;
+
+nav column-left button-repo {
+  margin-right: 0.75rem;
 }
-.navbar__middle {
-  display: inline-flex;
-  justify-content: center;
+
+nav column-middle context-menu a {
+  padding: 0.65rem 1rem;
+  display: block;
+  width: 100%;
+  line-height: 1.25;
 }
 
-@media screen and (max-width: 900px) {
-  .navbar__left,
-  .navbar__right {
-    display: none;
-  }
+nav column-middle context-menu svg {
+  display: none;
 }
 
-.navbar__icon {
-  display: flex;
+nav column-middle > a {
   align-items: center;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.75rem;
+  height: 4rem;
   justify-content: center;
+  line-height: 1.5;
   padding: 0 1.5rem;
-  height: 4rem;
-}
-.navbar__icon__label {
-  font-size: 0.75rem;
+  text-align: center;
 }
-.navbar__icon__label:after {
-  display: block;
+
+nav column-middle span:before {
   content: attr(title);
+  display: block;
   font-weight: 700;
   height: 0;
   overflow: hidden;
   visibility: hidden;
 }
 
-@media screen and (max-width: 624px) {
-  .navbar-menu .columns {
-    margin: 0;
-  }
-  .navbar__icon {
-    padding: 0;
-    width: 20%;
-  }
-  .navbar__icon__hidden {
-    display: none;
-  }
-}
-.navbar__active {
-  color: #014cc6 !important;
-}
-.navbar__active svg {
-  fill: #d1ebff;
-}
-.navbar__active .navbar__icon__label {
-  font-weight: 700;
-}
-.navbar__icon__menu {
-  margin: 0;
-  justify-content: center;
-  height: 100%;
+nav column-middle context-menu button {
+  height: auto;
+  display: inline;
+  background: transparent;
+  padding: 0.65rem 1rem;
+  width: 100%;
+  text-align: left;
+  line-height: 1.25;
 }
-.navbar__middle .dropdown {
+
+nav column-middle context-menu button span {
   padding: 0;
 }
 
-.dropdown label {
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1.5rem;
-}
-.dropdown-content .navbar-item {
-  margin: 0;
-  padding: 0.65rem 1rem;
-  width: 100%;
-}
-.dropdown-content .navbar__active {
+nav column-middle > a[data-active],
+nav column-middle context-menu a[data-active] {
   font-weight: 700;
-  background-color: #ebf2ff;
-}
-.dropdown-content a.navbar-item:hover,
-.dropdown-content .theme-toggle-button:hover {
-  background-color: #ffeac2;
-  color: black;
-}
-.dropdown-input[type="checkbox"]:checked ~ .dropdown-menu {
-  display: block;
 }
 
-.error__headerSize {
-  font-size: 8rem;
+nav column-middle more-button {
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  display: flex;
+  height: 4rem;
+  justify-content: center;
+  position: relative;
 }
 
-nav .item__box {
-  margin: 0 0 0 0.7rem;
-}
-.item__box span {
-  padding-left: 10px;
-}
-.item__box svg {
-  stroke-width: 1.5px;
-  width: 20px;
-  height: 20px;
-}
-.item__box:hover,
-.item__box:hover svg,
-.item__box:focus svg {
-  fill: currentColor;
-  color: #000;
-}
-.item__no__hover:hover svg,
-.item__no__hover:focus svg {
-  fill: transparent !important;
-}
-.item__box {
-  height: 2rem;
+nav column-middle more-button label {
+  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 400;
-  padding: 0.25rem 1rem;
-  background-color: #f2f2f2;
-  border: 0 solid transparent !important;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
-}
-
-/*
- * Contact Form
- */
-
-.alert {
-  color: #f00;
-}
-.agree {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 0;
-  width: 0;
-  z-index: -1;
-}
-.message__success {
-  background-color: #effaef;
-  padding: 1em;
-  border: 1px solid #28d263;
-  margin-bottom: 1em;
-}
-
-/*
- * Footer
- */
-
-.footer__section {
-  line-height: 2.2;
-}
-.hero-foot > .footer > .columns {
-  margin: 0;
-}
-.footer a {
-  color: #333;
-}
-
-/*
- * Posts and Projects
- */
-
-.article__title a {
-  line-height: 1.8;
-}
-.article__date {
-  margin-bottom: 0.75rem;
-}
-.article__divider {
-  background-color: transparent;
-}
-.article__updated {
-  padding: 0.5em;
-}
-ul.article__list {
-  line-height: 2.5;
-}
-.article__list li:hover {
-  background-color: #f1f1f1;
-}
-.article__list a {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.article__list__date {
-  padding-right: 1rem;
-  text-transform: uppercase;
-}
-.article__list a,
-h1.article__list {
-  padding: 0 0.5rem;
-}
-h1.article__list:not(:first-child) {
-  margin-top: 1.5rem;
-}
-.article__heading__anchor {
-  border-bottom: none;
-}
-
-.webring li {
-  padding-top: 1em;
-}
-.webring ul {
-  margin-top: 0;
-}
-.webring .articles h2 {
-  margin-bottom: 0.1em;
+  flex-direction: column;
+  height: 100%;
+  padding: 0 1.5rem;
+  line-height: 1.5;
 }
 
-/*
- * Resume Page
- */
-
-.max__height {
-  min-height: 100vh;
+nav column-middle > a span,
+nav column-middle more-button label span {
+  margin-top: 0.15rem;
+  font-size: 0.75rem;
 }
 
-.resume__container {
-  padding: 0 3em 0 3em;
-  max-width: 1152px;
-}
-.resume__section {
-  padding: 0 1.5em;
-}
-.resume__break {
-  padding: 0.75em 1.5em;
-}
-.resume__column {
-  padding: 0;
-}
-.resume__label {
-  padding: 10px;
-  color: #fff !important;
-  border-radius: 3px;
-}
-.resume__label:hover {
-  background-color: #fcfcfc;
-  color: #333 !important;
+nav column-middle a:hover svg,
+nav column-middle more-button:hover svg {
+  fill: #ffc966;
 }
 
-.inline__padding {
-  display: inline-block;
-  margin: 0.5em;
-  border-bottom: 1px solid transparent !important;
-}
+/* ----- Responsive ----- */
 
-@media screen and (min-width: 769px) {
-  .column__right {
-    max-height: 100vh;
-    overflow: auto;
+@media screen and (max-width: 1152px) {
+  column-left button-repo {
+    display: none;
   }
 }
 
-.column__background {
-  background-color: #4587c1;
-  background-image: url("/images/shells.jpg");
-  background-position: center;
-  background-size: cover;
-  min-height: 50vh;
-}
-
-.text__frame {
-  border-radius: 2px;
-  display: inline-block;
-  padding: 10px;
-}
-
-/*
- * Focus Links
- */
-
-a:focus,
-a:focus span {
-  background-color: #ffeac2;
-  color: #000;
-  outline: none;
-}
-a:focus img {
-  outline: 2px solid;
-}
-a:hover img {
-  box-shadow: 0 8px 32px #999;
-}
-figure > a:focus {
-  background-color: transparent;
-}
-.is-success:focus,
-.is-link:focus {
-  background-color: #ebebeb !important;
-}
-
-/*
- * Figures
- */
-
-figure div {
-  height: 0;
-}
-
-figcaption,
-figcaption code {
-  font-size: 0.95em;
-  margin-bottom: 1em;
-  margin-top: 1.5em;
-  text-align: center;
-}
-
-video-container {
-  display: block;
-  text-align: center;
+@media screen and (max-width: 824px) {
+  nav column-left,
+  nav column-right {
+    display: none;
+  }
+  nav column-middle > a,
+  nav column-middle context-menu-container {
+    width: 20%;
+  }
 }
 
-/*
- * Theme toggle
- */
-
-.theme-toggle-button {
-  border-radius: 0;
-  height: auto;
-  border: none;
-  justify-content: start;
-  font-weight: 400;
+@media screen and (max-width: 768px) {
+  table-contents {
+    display: none;
+  }
+  home-page article-card {
+    clear: both;
+  }
+  home-page margin-note {
+    margin: 0 0 1.5rem 0 !important;
+  }
+  recent-posts article-card {
+    display: block;
+  }
+  recent-posts article-thumbnail {
+    margin: 0 0 1.5rem 0;
+  }
+  resume-page {
+    display: block;
+  }
+  resume-page column-left {
+    width: 100%;
+  }
+  resume-page column-right {
+    overflow: visible;
+  }
 }
 
-/*
- * Custom Helpers
- */
-
-.has-padding-none {
-  padding: 0 !important;
-}
-.has-padding-left-md {
-  padding-left: 0.5em !important;
-}
-.has-margin-none {
-  margin: 0 !important;
-}
-.has-margin-left-none {
-  margin-left: 0 !important;
-}
-.has-margin-right-none {
-  margin-right: 0 !important;
-}
-.has-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-.has-margin-bottom-sm {
-  margin-bottom: 0.25em !important;
-}
-.has-margin-bottom-md {
-  margin-bottom: 0.5em !important;
-}
-.has-margin-bottom-lg {
-  margin-bottom: 1em !important;
-}
-.has-spacing-widest {
-  letter-spacing: 0.1em;
-}
-.has-tap-transparent {
-  -webkit-tap-highlight-color: transparent;
+@media screen and (max-width: 624px) {
+  article-more-content li {
+    display: block;
+  }
+  pagination-controller ul li:not(:first-child):not(:last-child) {
+    display: none;
+  }
+  article-list recent-abstracts {
+    display: block;
+  }
+  article-list recent-abstracts abstract-card {
+    display: block;
+    margin: 0 0 2rem 0;
+  }
+  resume-page column-section {
+    display: block;
+  }
 }
 
-/*
- * Table of Contents
- */
-
-details summary {
-  cursor: pointer;
+@media screen and (max-width: 524px) {
+  nav column-middle > a[data-hidden] {
+    display: none;
+  }
+  contact-page field-set {
+    display: block;
+  }
+  contact-page form field-set section + section {
+    margin-left: 0;
+  }
 }
 
-nav#TableOfContents li:hover {
-  background-color: #f1f1f1;
-}
-nav#TableOfContents ul {
-  margin-left: -0.5em;
-}
-nav#TableOfContents a {
-  display: block;
-  color: #444;
-  padding: 0.125rem 0 0.125rem 0.5rem;
-}
-nav#TableOfContents a {
-  display: block;
-  font-size: 0.8125rem;
+@media screen and (max-width: 424px) {
+  recent-projects article-card {
+    display: block;
+  }
+  recent-projects article-thumbnail {
+    margin: 0 0 1.5rem 0;
+  }
 }
 
-/*
- * Tables
- */
+/* ----- Tufte CSS: https://edwardtufte.github.io/tufte-css/ ----- */
 
-td,
-th {
-  padding: 0;
-}
-table td,
-table th {
-  vertical-align: top;
-}
-td:not([align]),
-th:not([align]) {
-  text-align: left;
-}
-table td {
-  padding: 0.4rem;
-  min-width: 8rem;
-}
-table td:not([align]),
-table th:not([align]) {
-  text-align: left;
-}
-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-table th {
-  font-weight: 700;
-  font-variant: small-caps;
-  text-transform: lowercase;
-  letter-spacing: 0.05rem;
-  padding: 0.4rem;
-}
-table,
-table code {
-  font-size: 1.15rem;
-}
-@media (max-width: 550px) {
-  table {
-    table-layout: fixed;
-  }
+body {
+  counter-reset: sidenote-counter;
 }
 
-/*
- * Tufte CSS: https://edwardtufte.github.io/tufte-css/
- */
-
-.leftnote {
+side-note[left],
+margin-note[left] {
   float: left;
   clear: left;
   margin-left: -40%;
   margin-left: -22vw;
 }
 
-.rightnote {
+side-note[right],
+margin-note[right] {
   float: right;
   clear: right;
   margin-right: -40%;
   margin-right: -22vw;
 }
 
-.leftnote,
-.rightnote {
+side-note[left],
+side-note[right],
+margin-note[left],
+margin-note[right] {
   width: 32%;
   width: 18vw;
-  margin-top: 0;
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
   font-size: 1rem;
   vertical-align: baseline;
   position: relative;
-  color: #444;
 }
 
-.sidenote,
-.marginnote {
+side-note,
+margin-note {
   -ms-hyphens: auto;
   -ms-word-break: normal;
   overflow-wrap: break-word;
@@ -1993,95 +1420,94 @@ table code {
   letter-spacing: 0.01rem;
 }
 
-.sidenote:hover,
-.marginnote:hover {
+side-note:hover,
+margin-note:hover {
   -webkit-user-select: inherit;
   -ms-user-select: inherit;
   user-select: inherit;
 }
 
 @media (min-width: 769px) {
-  .rightnote {
+  side-note[right],
+  margin-note[right] {
     padding-right: 1.125em;
   }
-  .leftnote {
+  side-note[left],
+  margin-note[left] {
     text-align: right;
     padding-left: 1.125em;
   }
-  .leftnote,
-  .rightnote {
+  side-note[left],
+  side-note[right],
+  margin-note[left],
+  margin-note[right] {
     max-width: 22em;
   }
 }
 @media (min-width: 2000px) {
-  .leftnote {
+  side-note[left],
+  margin-note[left] {
     margin-left: -28em;
   }
-  .rightnote {
+  side-note[right],
+  margin-note[right] {
     margin-right: -28em;
   }
 }
 
-body {
-  counter-reset: sidenote-counter;
-}
-
-label.sidenote-mark {
+side-note-aside label {
   display: inline;
 }
-input.sidenote-toggle,
-input.marginnote-toggle {
+
+side-note-aside input[name="toggle"],
+margin-note-aside input[name="toggle"] {
   display: none;
 }
 
-.sidenote-mark {
+side-note-aside label {
   counter-increment: sidenote-counter;
 }
-.sidenote:before {
+
+side-note:before {
   content: counter(sidenote-counter) " ";
 }
-.sidenote-mark:after {
+
+side-note-aside label:after {
   content: counter(sidenote-counter);
   left: 0.1rem;
 }
 
-.sidenote-mark:after,
-.sidenote:before,
-.marginnote-mark:after {
+side-note-aside label:after,
+side-note:before,
+margin-note-aside label:after {
   position: relative;
   vertical-align: baseline;
   font-size: 0.7rem;
   top: -0.5rem;
 }
 
-.sidenote-container mark {
+side-note-aside mark,
+margin-note-aside mark {
   background-color: transparent;
   color: unset;
 }
 
-article > mark,
-.sidenote-container:hover .sidenote-mark span,
-.sidenote-container:hover .sidenote mark,
-.marginnote-container:hover .marginnote-mark span,
-.marginnote-container:hover .marginnote mark,
-.sidenote-container:hover .sidenote a,
-.marginnote-container:hover .marginnote a {
-  background-color: #ffeac2;
-  color: #000;
-}
-.sidenote-container:hover .sidenote a,
-.marginnote-container:hover .marginnote a {
-  border-color: dodgerblue;
+side-note[image],
+margin-note[image] {
+  text-align: center;
 }
-.sideimage > a,
-.sideimage a:focus {
+
+side-note[image] > a,
+side-note[image] a:focus,
+margin-note[image] > a,
+margin-note[image] a:focus {
   border-bottom: 1px solid transparent !important;
   background-color: transparent !important;
 }
 
 @media (max-width: 768px) {
-  .sidenote-toggle:checked + .sidenote,
-  .marginnote-toggle:checked + .marginnote {
+  side-note-aside input[name="toggle"]:checked + side-note,
+  margin-note-aside input[name="toggle"]:checked + margin-note {
     display: block;
     float: left;
     left: 1rem;
@@ -2091,67 +1517,50 @@ article > mark,
     vertical-align: baseline;
     position: relative;
   }
-  label {
-    cursor: pointer;
+  side-note-aside input[name="toggle"]:checked + side-note[image] a,
+  margin-note-aside input[name="toggle"]:checked + margin-note[image] a {
+    display: block;
   }
-  label.marginnote-toggle:not(.sidenote-number) {
-    display: inline;
+  side-note label,
+  margin-note label {
+    cursor: pointer;
   }
-  .sidenote,
-  .marginnote {
+  side-note,
+  margin-note {
     display: none;
   }
-  .tableofcontents {
-    display: none !important;
-  }
-  .sidenote-mark,
-  .marginnote-mark {
+  side-note-aside label,
+  margin-note-aside label {
     border-bottom: 1px dashed #999;
   }
-  .marginnote-mark:after {
+  margin-note-aside label:after {
     content: "\0002B";
-    font-weight: bold;
+    font-weight: 700;
   }
-  .sideimage {
-    margin: 0 !important;
+  side-note[image],
+  margin-note[image] {
     left: 0 !important;
+    margin: 1rem 0 !important;
     width: 100% !important;
   }
-  .sidenote mark {
+  side-note mark {
     background-color: transparent !important;
     color: unset !important;
   }
 }
 
-.document .subtitle {
-  margin-top: 0 !important;
-  margin-bottom: 1.5em !important;
-}
-.recent__article .marginnote,
-.recent__article .sidenote {
-  margin-top: 0 !important;
-}
+/* ----- Side Notes Float Clear ----- */
 
 @media (max-width: 768px) {
-  .recent__article .columns,
-  .content blockquote,
-  .highlight {
+  code-block {
     clear: both;
   }
 }
 
-/* IE quote height fix */
-
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .quote {
-    height: 0;
-  }
-}
-
-/* Embed friendly */
+/* ----- Embed Friendly ----- */
 
 @media (max-height: 16rem) {
-  html.has-navbar-fixed-top {
+  html {
     padding: 0;
   }
   nav {
@@ -2159,55 +1568,44 @@ article > mark,
   }
 }
 
-/*
- * Isso comments
- */
+/* ----- Isso Comments ----- */
 
-#isso-thread * {
-  box-sizing: border-box;
-  word-wrap: break-word;
+#isso-thread {
+  padding: 0;
+  margin: 0;
 }
 
 #isso-thread .isso-comment-header a {
   text-decoration: none;
 }
 
-#isso-thread {
-  padding: 0;
-  margin: 0;
+#isso-thread div.text p:not(:last-child) {
+  margin-bottom: 1.5rem;
 }
 
-#isso-thread > h4 {
+.isso-comment > div.text-wrapper > .text a {
+  color: #000;
+}
+
+#isso-thread h4 {
   color: #555;
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
 }
 
-#isso-thread > .isso-feedlink {
+#isso-thread .isso-feedlink {
   float: right;
-  padding-left: 1em;
+  padding-left: 1rem;
 }
 
-#isso-thread > .isso-feedlink > a {
-  font-size: 0.8em;
+#isso-thread .isso-feedlink a {
+  font-size: 0.8rem;
   vertical-align: bottom;
 }
 
-#isso-thread .textarea {
-  height: auto !important;
-  line-height: 1.8;
-  outline: 0;
-  overflow: auto;
-  resize: auto;
-}
-
-#isso-thread .textarea.placeholder {
-  color: #545454;
-}
-
 #isso-root .isso-comment {
-  max-width: 68em;
-  padding-top: 0.95em;
-  margin: 0.95em auto;
+  max-width: 68rem;
+  padding-top: 0.95rem;
+  margin: 0.95rem auto;
 }
 
 #isso-root .preview .isso-comment {
@@ -2215,7 +1613,7 @@ article > mark,
   margin: 0;
 }
 
-.isso-comment > div.avatar {
+.isso-comment div.avatar {
   float: left;
   width: 16px;
   height: 16px;
@@ -2234,7 +1632,7 @@ article > mark,
   padding-left: 0.5rem;
 }
 
-.isso-comment > div.avatar > svg {
+.isso-comment div.avatar svg {
   max-width: 48px;
   max-height: 48px;
   border: 1px solid rgba(0, 0, 0, 0.2);
@@ -2242,7 +1640,7 @@ article > mark,
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
-.isso-comment > div.text-wrapper {
+.isso-comment div.text-wrapper {
   display: block;
 }
 
@@ -2250,115 +1648,95 @@ article > mark,
   padding-left: 2rem;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-header,
-.isso-comment > div.text-wrapper > .isso-comment-footer {
-  font-size: 0.95em;
-}
-
-.isso-comment > div.text-wrapper > .text a {
-  color: black;
+.isso-comment .isso-comment-header,
+.isso-comment .isso-comment-footer {
+  font-size: 0.95rem;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-header .permalink {
+.isso-comment .isso-comment-header .permalink {
   color: #555;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-header .spacer {
+.isso-comment .isso-comment-header .spacer {
   padding: 0 6px;
   color: #999;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-header .note {
+.isso-comment .isso-comment-header .note {
   float: right;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-header .author {
-  font-weight: bold;
+.isso-comment .isso-comment-header .author {
+  font-weight: 700;
   color: #555;
 }
 
-.isso-comment > div.text-wrapper > .textarea-wrapper .textarea,
-.isso-comment > div.text-wrapper > .textarea-wrapper .preview {
-  margin: 0.25rem 0;
-}
-
 .isso-comment > div.text-wrapper > div.text p:last-child {
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
 }
 
-.isso-comment > div.text-wrapper > div.text h1,
-.isso-comment > div.text-wrapper > div.text h2,
-.isso-comment > div.text-wrapper > div.text h3,
-.isso-comment > div.text-wrapper > div.text h4,
-.isso-comment > div.text-wrapper > div.text h5,
-.isso-comment > div.text-wrapper > div.text h6 {
+.isso-comment h1,
+.isso-comment h2,
+.isso-comment h3,
+.isso-comment h4,
+.isso-comment h5,
+.isso-comment h6 {
   font-size: 130%;
-  font-weight: bold;
+  font-weight: 700;
 }
 
-.isso-comment > div.text-wrapper > div.textarea-wrapper .textarea,
-.isso-comment > div.text-wrapper > div.textarea-wrapper .preview {
+.isso-comment div.textarea-wrapper .textarea,
+.isso-comment div.textarea-wrapper .preview {
   width: 100%;
-  border: 1px solid #f0f0f0;
-  border-radius: 2px;
-  box-shadow: 0 0 2px #888;
+  margin: 0.5rem 0 0.75rem 0;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-footer {
-  font-size: 0.8em;
-  color: gray;
+.isso-comment .isso-comment-footer {
+  font-size: 85%;
+  color: #555;
   clear: left;
 }
 
-.isso-feedlink,
-.isso-comment > div.text-wrapper > .isso-comment-footer a {
-  font-weight: bold;
+.isso-feedlink {
+  font-weight: 700;
   text-decoration: none;
 }
 
+.isso-comment .isso-comment-footer a {
+  border: none;
+  font-weight: 700;
+  padding: 0.25rem 0.5rem;
+}
+
 .isso-feedlink:hover,
-.isso-comment > div.text-wrapper > .isso-comment-footer a:hover svg,
-.isso-comment > div.text-wrapper > .isso-comment-footer .reply:hover,
-.isso-comment > div.text-wrapper > .isso-comment-footer .edit:hover,
-.isso-comment > div.text-wrapper > .isso-comment-footer .cancel:hover,
-.isso-comment > div.text-wrapper > .isso-comment-footer .delete:hover {
+.isso-comment .isso-comment-footer a:hover svg,
+.isso-comment .isso-comment-footer .edit:hover,
+.isso-comment .isso-comment-footer .cancel:hover,
+.isso-comment .isso-comment-footer .reply:hover,
+.isso-comment .isso-comment-footer .delete:hover {
   color: #111111;
   text-shadow: #aaaaaa 0 0 1px !important;
   background-color: #ccc;
   fill: #111111;
+  border-radius: 0.25rem;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-footer > a {
-  position: relative;
-  top: 0.2em;
-  padding: 0.3em;
-  border-radius: 0.1em;
-}
-
-.isso-comment > div.text-wrapper > .isso-comment-footer .votes {
-  background-color: #014cc6;
-  border-radius: 3px;
-  padding: 2px 6px;
-  font-weight: bold;
-  color: white;
-  margin-right: 0.5rem;
-}
-
-.isso-comment > div.text-wrapper > .isso-comment-footer .upvote svg,
-.isso-comment > div.text-wrapper > .isso-comment-footer .downvote svg {
-  position: relative;
-  top: 0.2em;
+.isso-comment .isso-comment-footer .votes,
+.isso-comment .isso-comment-footer .spacer,
+.isso-comment .isso-comment-footer .upvote,
+.isso-comment .isso-comment-footer .downvote {
+  display: none;
 }
 
 .isso-comment .isso-postbox {
-  margin-top: 0.8em;
+  margin-top: 0.8rem;
 }
 
-.isso-comment-footer > .delete {
+.isso-comment-footer .delete {
   margin: 0.2rem 0 0 0.4rem;
 }
 
-.isso-comment-footer > .cancel {
+.isso-comment-footer .cancel {
   margin-left: 0.3rem;
 }
 
@@ -2367,100 +1745,74 @@ article > mark,
 }
 
 .isso-postbox {
-  max-width: 68em;
-  margin: 0 auto 2em;
+  max-width: 68rem;
+  margin: 0 auto 2rem;
   clear: right;
 }
 
-.isso-postbox > .form-wrapper {
+.isso-postbox .form-wrapper {
   display: block;
   padding: 0;
 }
 
-.isso-postbox > .form-wrapper > .auth-section,
-.isso-postbox > .form-wrapper > .auth-section .post-action {
+.isso-postbox .auth-section,
+.isso-postbox .auth-section .post-action {
   display: block;
 }
 
-.isso-postbox > .form-wrapper .textarea,
-.isso-postbox > .form-wrapper .preview {
-  margin: 0 0 0.6em;
-  padding: 0.4em 0.8em;
+.isso-comment .textarea,
+.isso-postbox .form-wrapper .textarea,
+.isso-postbox .form-wrapper .preview {
+  margin: 0 0 0.6rem;
+  padding: 0.4em 0.8rem;
   border-radius: 2px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   background-color: #fafafa;
   min-height: 150px;
 }
 
-#isso-thread .textarea:focus,
-#isso-thread input:focus {
-  border-color: rgb(73, 146, 208);
-}
-
-.isso-postbox > .form-wrapper > .auth-section .input-wrapper {
+.isso-postbox .auth-section .input-wrapper {
   display: inline-block;
   position: relative;
-  padding-bottom: 0.6em;
+  padding-bottom: 0.6rem;
   width: 33.33%;
 }
 
-.isso-postbox > .form-wrapper > .auth-section .input-wrapper:nth-child(-n + 2) {
-  padding-right: 0.6em;
+.isso-postbox .auth-section .input-wrapper:nth-child(-n + 2) {
+  padding-right: 0.6rem;
 }
 
-.isso-postbox > .form-wrapper > .auth-section .post-action {
-  padding-left: 0.6em;
+.isso-postbox .auth-section .post-action {
+  padding-left: 0.6rem;
   margin-bottom: 0 !important;
 }
 
-.isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
-  padding: 0.6em 10px;
-  font-size: 0.8em;
-  width: 100%;
-  border-radius: 2px;
-  background-color: #fafafa;
-  line-height: 1.4em;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-.isso-postbox > .form-wrapper > .auth-section .post-action {
+.isso-postbox .auth-section .post-action {
   display: inline-block;
   float: right;
 }
 
-.isso-postbox > .form-wrapper > .auth-section .post-action > input {
-  padding: 0.4em;
-  font-size: 0.8em;
-  border-radius: 2px;
-  border: 1px solid #3273dc;
-  cursor: pointer;
-  outline: 0;
-  line-height: 1.7em;
-  width: 6em;
-  background-color: white;
-  color: #1e55ae;
+.isso-postbox input[name="preview"],
+.isso-postbox input[name="edit"] {
+  width: 6rem;
 }
 
-.isso-postbox > .form-wrapper > .auth-section .post-action > input:hover {
-  font-weight: bold;
-}
-
-.isso-postbox > .form-wrapper .preview,
-.isso-postbox > .form-wrapper input[name="edit"],
-.isso-postbox.preview-mode > .form-wrapper input[name="preview"],
-.isso-postbox.preview-mode > .form-wrapper .textarea {
+.isso-postbox .form-wrapper .preview,
+.isso-postbox .form-wrapper input[name="edit"],
+.isso-postbox.preview-mode .form-wrapper input[name="preview"],
+.isso-postbox.preview-mode .form-wrapper .textarea {
   display: none;
 }
 
-.isso-postbox.preview-mode > .form-wrapper .preview {
+.isso-postbox.preview-mode .form-wrapper .preview {
   display: block;
 }
 
-.isso-postbox.preview-mode > .form-wrapper input[name="edit"] {
+.isso-postbox.preview-mode .form-wrapper input[name="edit"] {
   display: inline;
 }
 
-.isso-postbox > .form-wrapper .preview {
+.isso-postbox .preview {
   background-color: #f8f8f8;
   background: repeating-linear-gradient(
     -45deg,
@@ -2471,32 +1823,27 @@ article > mark,
   );
 }
 
-.isso-postbox > .form-wrapper > .notification-section {
+.isso-postbox .notification-section {
   display: none;
   padding-bottom: 10px;
 }
 
-.isso-postbox
-  > .form-wrapper
-  > .notification-section
-  input[name="notification"] {
+.isso-postbox input[name="notification"] {
   margin-right: 0.5rem;
 }
 
 @media screen and (max-width: 600px) {
-  .isso-postbox > .form-wrapper > .auth-section .input-wrapper {
+  .isso-postbox .input-wrapper {
     display: inline-block;
     max-width: 100%;
-    margin: 0 0 0.3em;
+    margin: 0 0 0.3rem;
   }
-  .isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
+  .isso-postbox .input-wrapper input {
     width: 100%;
   }
 }
 
-/*
- * Uppy CSS
- */
+/* ----- Uppy CSS ----- */
 
 .uppy-Dashboard-inner {
   background-color: #fff !important;
@@ -2510,3 +1857,326 @@ article > mark,
 .uppy-size--md .uppy-Dashboard-inner {
   margin: 0 auto;
 }
+
+/* ----- Colors ----- */
+
+::selection {
+  color: #fff;
+  background-color: #000;
+}
+
+::-webkit-selection {
+  color: #fff;
+  background-color: #000;
+}
+
+::-moz-selection {
+  color: #fff;
+  background-color: #000;
+}
+
+a:hover {
+  border-color: #999;
+}
+
+a:focus {
+  background-color: #ffeac2;
+  border-color: #999;
+  color: #000;
+}
+
+a:hover img {
+  color: #999;
+}
+
+html {
+  background-color: #fcfcfc;
+}
+
+body {
+  color: #222;
+}
+
+body > footer a {
+  color: #111;
+}
+
+body .medium-zoom-overlay {
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+img {
+  color: #ccc;
+}
+
+hr {
+  background-color: #ddd;
+}
+
+video {
+  color: #999;
+}
+
+input,
+textarea {
+  background-color: #f9f9f9;
+  border-color: #ccc;
+}
+
+button,
+button-anchor a,
+pagination-controller a,
+input[type="submit"],
+input[type="button"] {
+  background-color: #f2f2f2;
+  box-shadow: 0 1px 1px #aaa;
+}
+
+button:hover,
+button-anchor a:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover {
+  background-color: #eee;
+}
+
+button:hover svg,
+button-anchor:hover svg {
+  color: #014cc6;
+  fill: #d1ebff;
+}
+
+a,
+home-page article a,
+recent-articles h2 a {
+  border-color: #999;
+  color: #014cc6;
+}
+
+article a,
+article-subsection a {
+  color: #000;
+}
+
+home-page article > h1 em {
+  color: #f05a60;
+}
+
+contact-page aside {
+  background-color: #effaef;
+  border-color: #28d263;
+}
+
+article-archive-list li:hover,
+taxonomy-list > section ul li:hover,
+taxonomy-archive-list > section ul li:hover {
+  background-color: #f1f1f1;
+}
+
+pagination-controller [data-pagination-current] {
+  background-color: #3273dc;
+  border-color: #3273dc;
+  color: #fff;
+}
+
+pagination-ellipsis {
+  color: #b5b5b5;
+}
+
+pagination-controller a {
+  border-color: #dbdbdb !important;
+}
+
+pagination-controller a:hover {
+  border-color: #b5b5b5;
+}
+
+table-contents li:hover {
+  background-color: #f1f1f1;
+}
+
+resume-page column-left {
+  background-color: #4587c1;
+}
+
+resume-page column-left h1,
+resume-page column-left p a,
+resume-page column-left h1 a {
+  color: #fff;
+}
+
+resume-page article > section h1 {
+  color: #245a8a;
+}
+
+resume-page timeline-item:before {
+  background-color: #dbdbdb;
+}
+
+context-menu-content {
+  background-color: #fafafa;
+  border-color: #ddd;
+  box-shadow: 0 0.5rem 1rem -0.125rem #0a0a0a1a, 0 0px 0 1px #0a0a0a05;
+}
+
+body > nav {
+  background-color: #fcfcfc;
+  box-shadow: 0 4px 12px 0 #0000000d;
+}
+
+nav column-middle > a,
+nav column-middle more-button,
+nav column-middle context-menu a,
+nav column-middle context-menu button {
+  color: #555;
+}
+
+nav column-middle > a:hover,
+nav column-middle more-button:hover {
+  color: #000;
+}
+
+nav column-middle context-menu a:hover,
+nav column-middle context-menu button:hover {
+  background-color: #ffeac2;
+  color: #000;
+}
+
+nav column-middle > a[data-active] svg {
+  fill: #d1ebff;
+}
+
+nav column-middle > a[data-active],
+nav column-middle context-menu a[data-active] {
+  color: #014cc6;
+}
+
+input,
+button,
+textarea,
+input[type="submit"],
+input[type="button"],
+button-anchor a,
+home-page label,
+home-page article > h1,
+pagination-controller a {
+  color: #363636;
+}
+
+footer,
+footer a,
+body > footer,
+figcaption,
+figcaption code,
+article-archive-list time,
+article-meta-bottom a,
+article-meta-bottom,
+article-meta-top a,
+article-meta-top,
+article-more-content time,
+article-on-web time,
+article-summary-meta,
+blockquote-footer,
+home-page article > h2,
+margin-note[left],
+margin-note[right],
+side-note[left],
+side-note[right],
+table-contents a,
+table-contents h2,
+taxonomy-archive-list time,
+taxonomy-list time,
+video-container footer a {
+  color: #4a4a4a;
+}
+
+article > mark,
+margin-note-aside:hover label span,
+margin-note-aside:hover margin-note a,
+margin-note-aside:hover margin-note mark,
+side-note-aside:hover label span,
+side-note-aside:hover side-note a,
+side-note-aside:hover side-note mark {
+  background-color: #ffeac2;
+  color: #000;
+}
+
+side-note-aside:hover side-note a,
+margin-note-aside:hover margin-note a {
+  border-color: #1e90ff;
+}
+
+[data-danger] {
+  color: #b30000;
+}
+
+[data-contact-required] {
+  border-color: #b30000;
+}
+
+/* ----- Excludes ----- */
+
+hr,
+h1 a,
+h2 a,
+h3 a,
+figure > a,
+main a:focus,
+footer a:focus,
+figure > a:focus,
+figure > a:hover,
+abstract-thumbnail a,
+abstract-thumbnail a:hover,
+article-archive-link a,
+article-archive-link a:hover,
+article-archive-list ul a,
+article-archive-list ul a:hover,
+article-card article-thumbnail a,
+article-card article-thumbnail a:hover,
+article-meta-top a,
+article-meta-top a:hover,
+article-on-web a,
+button-anchor a:focus,
+button-anchor a:hover,
+code-block language-label a,
+code-block language-label a:hover,
+contact-page field-set,
+home-page home-page-posts > a,
+home-page home-page-posts > a:hover,
+home-page home-page-projects > a,
+home-page home-page-projects > a:hover,
+nav column-middle > a,
+nav column-middle > a:focus,
+nav column-middle > a:hover,
+nav column-middle context-menu a,
+nav column-middle context-menu a:focus,
+nav column-middle context-menu a:hover,
+pagination-controller a,
+pagination-controller a:focus,
+pagination-controller a:hover,
+resume-page a,
+resume-page a:focus,
+resume-page a:hover,
+table-contents a,
+table-contents a:hover,
+taxonomy-archive-list section ul a,
+taxonomy-archive-list section ul a:hover,
+taxonomy-list section ul a,
+taxonomy-list section ul a:hover,
+article-more-content a {
+  border: none;
+}
+
+side-note[image] > a:focus,
+side-note[image] > a:focus-visible,
+margin-note[image] > a:focus,
+margin-note[image] > a:focus-visible,
+nav column-middle > a:focus,
+nav column-middle > a:focus-visible,
+nav column-middle context-menu a:focus,
+nav column-middle context-menu a:focus-visible,
+nav column-middle context-menu button,
+nav column-middle context-menu button:focus,
+nav column-middle context-menu button:focus-visible {
+  box-shadow: none;
+}
diff --git a/public/js/app.js b/public/js/app.js
index e8d8934..cb3dfa0 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -10,6 +10,24 @@ function addClass (el, cl) { if (el) { var a = el.className.split(' '); if (!afi
 function remClass (el, cl) { if (el) { var a = el.className.split(' '); arem(a, cl); el.className = a.join(' '); } }
 function runOnce(action) { runOnce = function(){}; action(); }
 
+/*
+ * Context Menu functions
+ */
+function contextMenuHide(element, event) {
+  /* Hide contextMenu elements */
+  for (var i = 0; i < element.length; i++) {
+    element[i].checked = false;
+  }
+}
+
+function contextMenuClickHide(element, event) {
+  /* Hide contextMenu when clicked outside of region */
+  for (var i = 0; i < element.length; i++) {
+    let notClicked = !element[i].contains(event.target);
+    if (notClicked && contextMenuInputs[i].checked === true) { contextMenuHide(contextMenuInputs); }
+  }
+}
+
 /**
  * Remove url query string
  */
@@ -22,7 +40,7 @@ window.history.replaceState(null, '', url);
 url = window.location.href.split('#')[0];
 
 /**
- * Settings array
+ * Load events
  */
 var settings = { pager: {} };
 
@@ -41,64 +59,17 @@ window.addEventListener('DOMContentLoaded', function(event) {
 });
 
 /*
- * Dropdown functions
- */
-function dropdownHide(element, event) {
-  /* Hide dropdown elements */
-  for (var i = 0; i < element.length; i++) {
-    element[i].checked = false;
-  }
-}
-
-function dropdownClickHide(element, event) {
-  /* Hide dropdown when clicked outside of region */
-  for (var i = 0; i < element.length; i++) {
-    let click = element[i].contains(event.target);
-    if (!click && dropdownInputList[i].checked === true) { dropdownHide(dropdownInputList); }
-  }
-}
-
-/*
- * Hide dropdown when the mouse is far away
- */
-document.addEventListener('mousemove', function(event) {
-  let mouseX = event.pageX;
-  let mouseY = event.pageY;
-
-  function magnitude(x, y) {
-    return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
-  }
-
-  function distance(mouseX, mouseY, element) {
-    let position = element.getBoundingClientRect();
-    let elementX = position.right - (element.offsetWidth / 2 ) + window.pageXOffset;
-    let elementY = position.bottom - (element.offsetHeight / 2 ) + window.pageYOffset;
-    return Math.abs(magnitude(mouseX, mouseY) - magnitude(elementX, elementY));
-  }
-
-  function hide(element, threshold, event) {
-    for (var i = 0; i < element.length; i++) {
-      let proximity = distance(mouseX, mouseY, element[i]);
-      if (proximity > threshold && dropdownInputList[i].checked === true) {
-        dropdownHide(dropdownInputList, event);
-      }
-    }
-  }
-  hide(dropdownContentList, 300, event);
-});
-
-/*
  * Click events
  */
 document.addEventListener('click', function(event) {
-  dropdownClickHide(dropdownMenuList, event);
+  contextMenuClickHide(contextMenus, event);
 });
 
 /*
  * Touch start events
  */
 document.addEventListener('touchstart', function(event) {
-  dropdownClickHide(dropdownMenuList, event);
+  contextMenuClickHide(contextMenus, event);
 });
 
 /**
@@ -109,13 +80,12 @@ var navbar = document.getElementById("navbar");
 var navbarHeight = navbar.offsetHeight;
 var scrolls = 0;
 
-var dropdownInputList = byClass(document, 'dropdown-input');
-var dropdownContentList = byClass(document, 'dropdown-content');
-var dropdownMenuList = byClass(document, 'dropdown');
+var contextMenus = document.getElementsByTagName('context-menu-container');
+var contextMenuInputs = document.querySelectorAll('context-menu-container input');
 
 window.addEventListener('scroll', function(event) {
 
-    dropdownHide(dropdownInputList);
+    contextMenuHide(contextMenuInputs);
 
     var currentPosition = window.pageYOffset;
     var velocity = previousPosition - currentPosition;
@@ -125,11 +95,11 @@ window.addEventListener('scroll', function(event) {
 
     if (scrolls > 3) {
       if (velocity > 75 || currentPosition < navbarHeight) {
-        remClass(navbar, 'headroom');
+        remClass(navbar, 'hide');
       } else if (velocity < -25) {
-        addClass(navbar, 'headroom');
+        addClass(navbar, 'hide');
       } else if (currentPosition > navbarHeight) {
-        runOnce(function () { addClass(navbar, 'headroom'); });
+        runOnce(function () { addClass(navbar, 'hide'); });
       }
     }
 
@@ -631,8 +601,8 @@ window.addEventListener('scroll', function(event) {
  * Activate Medium Zoom
  */
 var imageZoom = mediumZoom('[data-image-zoom]');
-imageZoom.on('open', function(event) { addClass(navbar, 'headroom'); });
-imageZoom.on('close', function(event) { remClass(navbar, 'headroom'); });
+imageZoom.on('open', function(event) { addClass(navbar, 'hide'); });
+imageZoom.on('close', function(event) { remClass(navbar, 'hide'); });
 
 
 /**