docs: rename article slug

2021-02-13 22:17:45 +09:00
parent ac0d966308
commit 2afd947660
68 changed files with 18 additions and 32 deletions
--- a/themes/uio/.gitignore
+++ b/themes/uio/.gitignore
@@ -0,0 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
--- a/themes/uio/LICENSE
+++ b/themes/uio/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 snovey
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/themes/uio/README.md
+++ b/themes/uio/README.md
@@ -0,0 +1,2 @@
+# hexo-theme-vanilla
+A minimalist style hexo theme
--- a/themes/uio/_config.yml
+++ b/themes/uio/_config.yml
@@ -0,0 +1,48 @@
+# ---------------------------------------------------------------
+# Site Information Settings
+# ---------------------------------------------------------------
+
+# Put your favicon.ico into `hexo-site/source/` directory.
+favicon: /favicon.ico
+
+# Set default keywords (Use a comma to separate)
+keywords: "Hexo, plain"
+
+# Set rss to false to disable feed link.
+# Leave rss as empty to use site's feed link.
+# Set rss to specific value if you have burned your feed already.
+rss:
+
+# Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
+# See: https://support.google.com/webmasters/answer/139066
+# Tips: Before you open this tag, remeber set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
+canonical: true
+
+# ---------------------------------------------------------------
+# Menu Settings
+# ---------------------------------------------------------------
+
+# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
+menu:
+  home: /
+  archives: /archives/
+  categories: /categories/
+  tags: /tags/
+  about: /about/
+
+# Table Of Contents in the Sidebar
+#toc: false
+toc:
+  list_number: false # Whether to display numerical ordering
+
+# Scroll to top
+# top: true
+
+# Creative Commons 4.0 International License.
+# http://creativecommons.org/
+# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
+#creative_commons: by-nc-sa
+creative_commons: by-nc-nd
+
+# Copyright year
+since_year: 2016
--- a/themes/uio/languages/default.yml
+++ b/themes/uio/languages/default.yml
@@ -0,0 +1,14 @@
+Menu:
+  home: Home
+  archives: Archives
+  categories: Categories
+  tags: Tags
+  about: About
+
+toc: Toc
+counter: There are %d
+continue: continue
+
+archive:
+  name: articles
+  counter: There are %d
--- a/themes/uio/layout/_partial/footer.ejs
+++ b/themes/uio/layout/_partial/footer.ejs
@@ -0,0 +1,2 @@
+<!-- Umami Analytics -->
+<script async defer data-website-id="<%- config.umami.id %>" src="https://<%- config.umami.host %>/umami.js"></script>
--- a/themes/uio/layout/_partial/head.ejs
+++ b/themes/uio/layout/_partial/head.ejs
@@ -0,0 +1,55 @@
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <!-- Icon -->
+  <link rel="shortcut icon" href="<%- url_for('images/favicon.ico') %>" />
+  <link
+    rel="apple-touch-icon"
+    sizes="180x180"
+    href="<%- url_for('images/apple-touch-icon.png') %>"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    href="<%- url_for('images/favicon-32x32.png') %>"
+    sizes="32x32"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    href="<%- url_for('images/favicon-16x16.png') %>"
+    sizes="16x16"
+  />
+  <link
+    rel="mask-icon"
+    href="<%- url_for('images/safari-pinned-tab.svg') %>"
+    color="#5bbad5"
+  />
+
+  <!-- Metadata -->
+  <%
+  const pageUrl = `${config.url}/${page.canonical_path.replace('index.html', '')}`
+  const title = page.title || config.title
+  const description = strip_html(page.excerpt) || config.description
+  %>
+  <title><%- title %></title>
+  <link rel="canonical" href="<%- pageUrl %>">
+  <meta name="description" content="<%- description %>">
+  <meta property="og:title" content="<%- title %>">
+  <meta property="og:description" content="<%- description %>">
+  <meta property="og:url" content="<%- pageUrl %>">
+  <meta property="og:site_name" content="<%- config.title %>">
+  <meta property="og:locale" content="<%- config.language %>">
+  <meta property="twitter:title" content="<%- title %>">
+  <meta name="twitter:site" content="@<%- config.twitter.username %>">
+  <meta name="twitter:card" content="summary">
+
+  <!-- Styles -->
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+  />
+  <%- css('css/index') %>
+</head>
--- a/themes/uio/layout/_partial/header.ejs
+++ b/themes/uio/layout/_partial/header.ejs
@@ -0,0 +1,24 @@
+<header class="header">
+  <a class="logo" href="<%- config.root %>"
+    ><img src="<%- url_for('/images/logo.svg') %>" style="height: 50px"
+  /></a>
+  <nav>
+    <ul class="menu">
+      <li class="menu__item">
+        <a href="/me">Me</a>
+      </li>
+      <li class="menu__item">
+        <a href="https://github.com/<%- config.github.username %>">GitHub</a>
+      </li>
+      <li class="menu__item">
+        <a href="https://twitter.com/<%- config.twitter.username %>">Twitter</a>
+      </li>
+      <li class="menu__item">
+        <a href="/wallpaper">Wallpaper</a>
+      </li>
+      <li class="menu__item">
+        <a href="/pay">Pay</a>
+      </li>
+    </ul>
+  </nav>
+</header>
--- a/themes/uio/layout/_partial/paginator.ejs
+++ b/themes/uio/layout/_partial/paginator.ejs
@@ -0,0 +1,29 @@
+<% if (page.prev || page.next) { %>
+  <nav class="page-nav">
+       <% if (page.prev) { %>
+       <a class="page-prev" href="<%- url_for(page.prev_link) %>">
+        &lt;
+        <!-- <span>
+          <% if (page.prev.title) { %>
+            <%= page.prev.title %>
+          <% } else { %>
+            (no title)
+          <% } %>
+        </span> -->
+      </a>
+      <% } %>
+      <div class="page-number date"><%= page.current %> / <%= Math.ceil(site.posts.length / config.per_page) %></div>
+      <% if (page.next) { %>
+        <a class="page-next" href="<%- url_for(page.next_link) %>">
+         &gt;
+         <!-- <span>
+           <% if (page.next.title) { %>
+             <%= page.next.title %>
+            <% } else { %>
+              (no title)
+            <% } %>
+        </span> -->
+        </a>
+      <% } %>
+  </nav>
+<% } %>
--- a/themes/uio/layout/archive.ejs
+++ b/themes/uio/layout/archive.ejs
@@ -0,0 +1,18 @@
+<section class="archives">
+  <div class="archive-page-counter"><%- __('archive.counter', site.posts.length) %><%- __('archive.name') %></div>
+  <div class="archive">
+    <% var lastyear; %>
+    <% page.posts.each(function(post) { %>
+      <% var year = post.date.year() %>
+      <% if(lastyear !== year) { %>
+        <h2 class="archive-year date"><%= year %></h2>
+        <% lastyear = year %>
+      <% } %>
+      <div class="archive-item">
+        <a class="archive-title" href="<%- url_for(post.path) %>"><%= post.title %></a>
+        <span class="archive-time date"><%= post.date.format('MM-DD') %></span>
+      </div>
+      <% }) %>
+  </div>
+</section>
+<%- partial('_partial/paginator') %>
--- a/themes/uio/layout/category.ejs
+++ b/themes/uio/layout/category.ejs
@@ -0,0 +1,10 @@
+<section class="categories">
+    <h1><%= page.category %></h1>
+    <% page.posts.each(function(post){ %>
+      <article class="category-item">
+        <a class="category-title" href="<%- url_for(post.path) %>"><%= post.title %></a>
+        <span class="post-date date"><%= post.date.format('YYYY-MM-DD') %></span>
+      </article>
+    <% }) %>
+</section>
+<%- partial('_partial/paginator') %>
--- a/themes/uio/layout/index.ejs
+++ b/themes/uio/layout/index.ejs
@@ -0,0 +1,35 @@
+<section>
+  <% page.posts.each(function (post) { %>
+  <article class="article-list__item">
+    <h2 class="article-list__item__title">
+      <a href="<%- url_for(post.path) %>"><%= post.title %></a>
+    </h2>
+    <!-- <time class="article-list__item__pubdate" pubdate><%- date(post.date, "YYYY-MM-DD") %></time> -->
+    <% if (theme.menu.tags && post.tags && post.tags.length) { %>
+      <%- list_tags(post.tags, {
+        show_count: false,
+        class: 'article-tag',
+        style: 'span',
+        separator: ', '
+      }) %>
+    <% } %>
+    <% if (theme.menu.categories && post.categories && post.categories.length) { %>
+      <%- list_categories(post.categories, {
+        show_count: false,
+        class: 'article-tag',
+        style: 'span',
+        separator: ', '
+      }) %>
+    <% } %>
+    <article class="article-list__item__excerpt">
+      <%- strip_html(post.excerpt) %>
+    </article>
+    <a
+      class="article-list__item__button"
+      href="<%- url_for(post.path) %>"
+      ><%- __('continue') %></a
+    >
+  </article>
+  <% }) %>
+  <%- partial('_partial/paginator') %>
+</section>
--- a/themes/uio/layout/layout.ejs
+++ b/themes/uio/layout/layout.ejs
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <%- partial('_partial/head') %>
+
+  <body>
+    <%- partial('_partial/header') %>
+    <%- body %>
+    <%- partial('_partial/footer') %>
+  </body>
+</html>
--- a/themes/uio/layout/page.ejs
+++ b/themes/uio/layout/page.ejs
@@ -0,0 +1,5 @@
+<section>
+  <article class="article">
+    <div class="article__content"><%- page.content %></div>
+  </article>
+</section>
--- a/themes/uio/layout/post.ejs
+++ b/themes/uio/layout/post.ejs
@@ -0,0 +1,55 @@
+<section>
+  <article class="article">
+    <hgroup class="article__metadata">
+      <% if (page.date) { %>
+      <h3 class="article__pubdate">
+        <time pubdate><%- date(page.date, "YYYY-MM-DD") %></time>
+      </h3>
+      <% } %>
+      <h2 class="article__title"><%- page.title %></h2>
+    </hgroup>
+    <div class="article__content"><%- page.content %></div>
+
+    <!-- Social buttons -->
+    <script
+      defer
+      src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8"
+      id="facebook-jssdk"
+    ></script>
+    <script
+      defer
+      src="https://platform.twitter.com/widgets.js"
+      id="twitter-wjs"
+    ></script>
+    <div id="fb-root"></div>
+    <div class="article__social">
+      <a
+        href="https://twitter.com/share"
+        class="twitter-share-button"
+        data-size="large"
+        >Tweet</a
+      >
+      <div
+        class="fb-like"
+        data-layout="button"
+        data-action="like"
+        data-size="large"
+        data-show-faces="false"
+        data-share="true"
+      ></div>
+    </div>
+  </article>
+</section>
+
+<!-- Syntax Highlight -->
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/highlight.js@9.18.1/styles/night-owl.css"
+/>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/languages/go.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/languages/scss.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/languages/lua.min.js"></script>
+<script>
+  hljs.initHighlightingOnLoad()
+</script>
--- a/themes/uio/layout/redirect.ejs
+++ b/themes/uio/layout/redirect.ejs
@@ -0,0 +1,10 @@
+<% const newUrl = full_url_for(page.target.path) %>
+
+<h1>Page address was changed</h1>
+<p>The new page address is <a href="<%= newUrl %>"><%= newUrl %></a></p>
+
+<script type="text/javascript">
+  setTimeout(function () {
+    document.location.href = "<%= newUrl %>";
+  }, 5000);
+</script>
--- a/themes/uio/layout/tag.ejs
+++ b/themes/uio/layout/tag.ejs
@@ -0,0 +1,10 @@
+<section class="tags">
+    <h1><%= page.tag %></h1>
+    <% page.posts.each(function(post){ %>
+      <article class="tag-item">
+        <a class="tag-title" href="<%- url_for(post.path) %>"><%= post.title %></a>
+        <span class="post-date date"><%= post.date.format('YYYY-MM-DD') %></span>
+      </article>
+    <% }) %>
+</section>
+<%- partial('_partial/paginator') %>
--- a/themes/uio/scripts/math-api.js
+++ b/themes/uio/scripts/math-api.js
@@ -0,0 +1,34 @@
+// function filter(config) {
+//   return function (content) {
+//     return content
+//       .replace(
+//         /\$\$\n([\w\W]+?)\n\$\$/gm,
+//         (_, eq) => `![](https://math.now.sh?from=${encodeURIComponent(eq)})`
+//       )
+//       .replace(
+//         /([\s^])\$(.+?)\$([\s$])/g,
+//         (_, s, eq, e) =>
+//           `${s}![](https://math.now.sh?inline=${encodeURIComponent(eq)})${e}`
+//       );
+//   };
+// }
+
+// const config = (hexo.config.mathapi = Object.assign(
+//   {
+//     color: undefined,
+//     alternateColor: undefined,
+//   },
+//   hexo.config.mathapi
+// ));
+
+// const mathapi = filter(config);
+
+// hexo.extend.filter.register(
+//   "before_post_render",
+//   (data) => {
+//     // if (!data.mathapi && !config.every_page) return;
+//     data.content = mathapi(data.content);
+//     return data;
+//   },
+//   5
+// );
--- a/themes/uio/scripts/redirect.js
+++ b/themes/uio/scripts/redirect.js
@@ -0,0 +1,40 @@
+const generator = (hexo) => ({ posts, pages }) =>
+  [
+    ...posts
+      .filter(({ redirect_from }) => redirect_from)
+      .map((page) =>
+        (typeof page.redirect_from === "string"
+          ? [page.redirect_from]
+          : page.redirect_from
+        ).map((redirect) => ({ redirect, page }))
+      )
+      .reduce((result, current) => [...result, ...current], []),
+    ...pages
+      .filter(({ redirect_from }) => redirect_from)
+      .map((page) =>
+        (typeof page.redirect_from === "string"
+          ? [page.redirect_from]
+          : page.redirect_from
+        ).map((redirect) => ({ redirect, page }))
+      )
+      .reduce((result, current) => [...result, ...current], []),
+  ].map(({ redirect, page }) => ({
+    path: `${redirect}/index.html`,
+    data: {
+      target: page,
+      redirect_from: redirect,
+      layout: hexo.config.redirect.layout,
+    },
+    layout: hexo.config.redirect.layout,
+  }));
+
+hexo.config.redirect = Object.assign(
+  {
+    enable: true,
+    layout: "redirect",
+  },
+  hexo.config.redirect
+);
+
+hexo.extend.generator.register("redirect", generator(hexo));
+// module.exports = generator;
--- a/themes/uio/source/css/index.scss
+++ b/themes/uio/source/css/index.scss
@@ -0,0 +1,182 @@
+@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700");
+
+$break-small: 500px;
+$break-large: 840px;
+
+:root {
+  --background: #fff;
+  --text: #000;
+  --accent: #4f33e8;
+  --highlight: #f6f6f6;
+  --tone: #989898;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #261e3a;
+    --text: #e2dfea;
+    --accent: #7033e8;
+    --highlight: #140d25;
+    --tone: #989898;
+  }
+}
+
+html,
+body {
+  box-sizing: border-box;
+}
+
+body {
+  width: 900px;
+  margin: 0 auto;
+  padding: 0 20px;
+  font-family: "PT Sans", "Hiragino Sans", "Hiragino Mincho ProN", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "kern", "palt", "pwid";
+  -webkit-font-feature-settings: "kern", "palt", "pwid";
+  -moz-font-feature-settings: "kern", "palt", "pwid";
+  -moz-font-feature-settings: "kern=1", "palt", "pwid";
+  background: var(--background);
+  color: var(--text);
+
+  @media screen and (max-width: $break-large) {
+    width: auto;
+    margin: 0;
+  }
+}
+
+// Highlight.js
+.hljs {
+  border-radius: 6px;
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-size: 14px;
+  background: #0e0127 !important;
+  padding: 12px 18px !important;
+  line-height: 1.6em !important;
+  margin: 0;
+}
+code {
+  padding: 0 12px;
+}
+p code {
+  padding: 3px 10px;
+  background: var(--highlight);
+  border-radius: 3px;
+  font-size: 16px;
+}
+a:hover,
+a:active,
+a:link,
+a:visited {
+  color: var(--text);
+  text-decoration: none;
+}
+h1,
+h2,
+h3,
+h4,
+p {
+  margin: 0;
+  padding: 0;
+  line-height: 1.333em;
+}
+hr {
+  display: block;
+  width: 100%;
+  height: 1px;
+  background-color: var(--highlight);
+  border: 0;
+  margin: 40px 0;
+}
+
+.header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 50px;
+  margin-bottom: 50px;
+  padding: 15px 0;
+
+  @media screen and (max-width: $break-small) {
+    margin-top: 0px;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  .logo {
+    margin: 10px 0 10px;
+    @media (prefers-color-scheme: dark) {
+      filter: invert(1);
+    }
+  }
+
+  .menu {
+    list-style: none;
+    margin-left: 40px;
+    padding: 8px 0;
+    display: flex;
+    flex-flow: row wrap;
+    text-transform: uppercase;
+    font-weight: bold;
+
+    .menu__item:not(:last-child) {
+      margin-right: 30px;
+
+      @media screen and (max-width: $break-small) {
+        margin-right: 20px;
+      }
+    }
+
+    @media screen and (max-width: $break-small) {
+      padding: 0;
+      margin: 5px 0;
+    }
+  }
+}
+
+.metro {
+  // text-align: center;
+  display: flex;
+  flex-direction: column;
+  margin: 75px 0 100px;
+
+  .logo {
+    @media (prefers-color-scheme: dark) {
+      filter: invert(1);
+    }
+  }
+
+  .menu {
+    margin: 15px 0 0 0;
+    padding: 0;
+    text-transform: uppercase;
+    font-size: 16px;
+    font-weight: bold;
+    list-style: none;
+    .menu__item:not(:last-child) {
+      margin-bottom: 12px;
+    }
+  }
+
+  @media screen and (max-width: $break-small) {
+    margin: 40px 0 40px;
+    .menu {
+      font-size: 15px;
+    }
+  }
+}
+
+.page-nav {
+  display: flex;
+  justify-content: center;
+
+  .page-prev,
+  .page-number,
+  .page-next {
+    font-size: 1.2rem;
+    padding: 20px;
+  }
+}
+
+@import "./post";
--- a/themes/uio/source/css/post.scss
+++ b/themes/uio/source/css/post.scss
@@ -0,0 +1,227 @@
+.article-list__item {
+  margin: 0 0 60px;
+
+  img {
+    max-width: 100%;
+  }
+}
+
+.article-list__item__title {
+  margin: 0 0 2px;
+  font-size: 40px;
+}
+
+.article-list__item__pubdate {
+  text-transform: uppercase;
+}
+
+.article-list__item__excerpt {
+  margin-top: 5px;
+  font-size: 20px;
+  color: var(--tone);
+  line-height: 1.6em;
+  word-break: break-all;
+}
+
+a.article-list__item__button {
+  border: 1px solid var(--tone);
+  border-radius: 3px;
+  color: var(--tone);
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  display: inline-block;
+  margin: 10px 0;
+  padding: 10px 17px;
+  text-transform: uppercase;
+
+  &:hover {
+    background-color: var(--tone);
+    color: var(--background);
+  }
+
+  @media screen and (max-width: $break-small) {
+    display: block;
+    text-align: center;
+    font-size: 17px;
+    padding: 15px;
+
+    &:hover {
+      background-color: var(--background);
+      color: var(--tone);
+    }
+  }
+}
+
+.article {
+  margin-bottom: 60px;
+}
+
+.article__social {
+  margin-top: 60px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.article__social > * {
+  margin-right: 4px;
+}
+
+.article__metadata {
+  margin: 40px 0 40px;
+
+  @media screen and (max-width: $break-small) {
+    margin: 25px 0 25px;
+    text-align: left;
+  }
+}
+
+.article__title {
+  font-size: 55px;
+  letter-spacing: -0.5px;
+
+  @media screen and (max-width: $break-small) {
+    font-size: 40px;
+    text-align: left;
+  }
+}
+
+.article__pubdate {
+  color: var(--tone);
+  font-size: 14px;
+  font-weight: normal;
+  font-family: sans-serif;
+  margin-bottom: 10px;
+  border: 1px solid var(--tone);
+  display: inline-block;
+  padding: 5px 20px;
+
+  @media screen and (max-width: $break-small) {
+    margin-bottom: 15px;
+    font-size: 10pt;
+  }
+}
+
+.article__content {
+  p {
+    font-size: 20px;
+    font-weight: normal;
+    line-height: 1.666em;
+    margin: 25px 0;
+
+    @media screen and (max-width: $break-small) {
+      font-size: 20px;
+    }
+  }
+
+  ul {
+    padding-left: 20px;
+  }
+
+  li {
+    font-size: 20px;
+    line-height: 1.6em;
+  }
+
+  a {
+    color: mediumslateblue;
+  }
+
+  h1 {
+    margin: 70px 0 0px;
+    font-size: 2.5em;
+
+    @media screen and (max-width: $break-small) {
+      margin: 30px 0 15px;
+      font-size: 1.7em;
+    }
+  }
+
+  h2 {
+    margin: 35px 0 15px;
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 1.7em;
+
+    @media screen and (max-width: $break-small) {
+      margin: 20px 0 15px;
+      font-family: sans-serif;
+      font-weight: bold;
+      font-size: 1.5em;
+    }
+  }
+
+  h3 {
+    margin: 25px 0 15px;
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 1.3em;
+
+    @media screen and (max-width: $break-small) {
+      margin: 15px 0 15px;
+      font-family: sans-serif;
+      font-weight: bold;
+      font-size: 1.4em;
+    }
+  }
+
+  h4 {
+    margin: 25px 0 15px;
+    font-family: sans-serif;
+    font-weight: bold;
+
+    @media screen and (max-width: $break-small) {
+      margin: 15px 0 15px;
+      font-family: sans-serif;
+      font-weight: bold;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  blockquote {
+    border-left: 5px solid var(--accent);
+    padding-left: 20px;
+    margin: 0;
+  }
+}
+
+// Pay
+#pay {
+  font-family: sans-serif;
+
+  .monospace {
+    font-family: monospace;
+    font-weight: bold;
+    padding: 0 5px;
+    font-size: 12pt;
+    user-select: all;
+    -webkit-user-select: all;
+    -moz-user-select: all;
+  }
+
+  p {
+    padding: 10px 0;
+  }
+
+  a.button {
+    margin: 10px 0;
+    padding: 20px;
+    display: block;
+    background: var(--text);
+    color: var(--background);
+    text-align: center;
+    border-radius: 2px;
+  }
+
+  img {
+    margin: 10px 0;
+  }
+
+  section {
+    margin: 50px 0;
+  }
+}
--- a/themes/uio/source/images/apple-touch-icon.png
+++ b/themes/uio/source/images/apple-touch-icon.png
--- a/themes/uio/source/images/favicon-16x16.png
+++ b/themes/uio/source/images/favicon-16x16.png
--- a/themes/uio/source/images/favicon-32x32.png
+++ b/themes/uio/source/images/favicon-32x32.png
--- a/themes/uio/source/images/favicon.ico
+++ b/themes/uio/source/images/favicon.ico
--- a/themes/uio/source/images/logo.svg
+++ b/themes/uio/source/images/logo.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="254px" height="433px" viewBox="0 0 254 433" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>Artboard Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M254,267.220847 C254,315.224014 239.107687,350.825679 210.763391,373.605273 L209.900357,374.291639 C206.991512,376.58088 179.37875,396.150334 127.062073,433 L86.3988611,404.305579 C60.0424939,385.681667 45.9841368,375.67702 44.2237896,374.291639 C15.3188342,351.54364 0.124146603,315.708895 0.124146603,267.220847 L0.123154724,230.288122 C0.0695211447,228.80793 0.0332464874,227.313667 0.0146431467,225.805279 L0,223.422706 L0,0 L0.00840441176,0.013118731 L0.00902782822,0 L126.614331,82.0333902 L253.990915,0 L253.990662,0.0140557832 L254,0 L254,267.220847 Z" id="path-1"></path>
+    </defs>
+    <g id="Artboard-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="Path-Copy-2" fill="#000000" xlink:href="#path-1"></use>
+    </g>
+</svg>
--- a/themes/uio/source/images/safari-pinned-tab.svg
+++ b/themes/uio/source/images/safari-pinned-tab.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="254px" height="433px" viewBox="0 0 254 433" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>Artboard Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M254,267.220847 C254,315.224014 239.107687,350.825679 210.763391,373.605273 L209.900357,374.291639 C206.991512,376.58088 179.37875,396.150334 127.062073,433 L86.3988611,404.305579 C60.0424939,385.681667 45.9841368,375.67702 44.2237896,374.291639 C15.3188342,351.54364 0.124146603,315.708895 0.124146603,267.220847 L0.123154724,230.288122 C0.0695211447,228.80793 0.0332464874,227.313667 0.0146431467,225.805279 L0,223.422706 L0,0 L0.00840441176,0.013118731 L0.00902782822,0 L126.614331,82.0333902 L253.990915,0 L253.990662,0.0140557832 L254,0 L254,267.220847 Z" id="path-1"></path>
+    </defs>
+    <g id="Artboard-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="Path-Copy-2" fill="#000000" xlink:href="#path-1"></use>
+    </g>
+</svg>