diff --git a/.editorconfig b/.editorconfig
index 951e49ee1..7497be7b3 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,3 +1,9 @@
[*.{md,mkdn}]
trim_trailing_whitespace = false
indent_style = space
+
+[anchor-link.html]
+insert_final_newline = false
+
+[*.scss]
+trim_trailing_whitespace = true
diff --git a/.gitignore b/.gitignore
index 0036b599a..8f7764dc0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
public/
.idea/
*.DS_Store
+/static/syntax-theme-*.css
diff --git a/config.toml b/config.toml
index 5fc7bd5cc..bdc0ff804 100644
--- a/config.toml
+++ b/config.toml
@@ -8,6 +8,11 @@ feed_filenames = ["rss.xml"]
[markdown]
highlight_code = true
+highlight_theme = "css"
+highlight_themes_css = [
+ { theme = "base16-ocean-dark", filename = "syntax-theme-dark.css" },
+ { theme = "OneHalfLight", filename = "syntax-theme-light.css" },
+]
smart_punctuation = true
[extra]
diff --git a/content/blog/_index.md b/content/blog/_index.md
index 05fe8455c..db31cbbef 100644
--- a/content/blog/_index.md
+++ b/content/blog/_index.md
@@ -1,6 +1,6 @@
+++
title = "Blog Posts"
-insert_anchor_links = "right"
+insert_anchor_links = "left"
template = "posts.html"
page_template = "post.html"
sort_by = "date"
diff --git a/content/news/_index.md b/content/news/_index.md
index ce2a8e498..93f94b8f5 100644
--- a/content/news/_index.md
+++ b/content/news/_index.md
@@ -1,6 +1,6 @@
+++
title = "News"
-insert_anchor_links = "right"
+insert_anchor_links = "left"
template = "posts.html"
page_template = "post.html"
sort_by = "date"
diff --git a/content/pages/_index.md b/content/pages/_index.md
index 0b49d669a..cd9dfc385 100644
--- a/content/pages/_index.md
+++ b/content/pages/_index.md
@@ -1,4 +1,4 @@
+++
redirect_to = "/"
-insert_anchor_links = "right"
-+++
\ No newline at end of file
+insert_anchor_links = "left"
++++
diff --git a/content/pages/markdown-showcase.md b/content/pages/markdown-showcase.md
new file mode 100644
index 000000000..4c5f5f213
--- /dev/null
+++ b/content/pages/markdown-showcase.md
@@ -0,0 +1,76 @@
++++
+title = "Markdown"
+description = "Here goes a short description or subtitle for this page"
+draft = true
++++
+
+## Formatting Examples
+**Lorem** _ipsum_ [dolor sit](https://example.com) ~~amet~~, `consectetur`[^1] adipiscing elit, sed do eiusmod tempor incididunt[^2] ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+---
+
+Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Amet luctus venenatis lectus magna fringilla urna porttitor. Ultricies mi quis hendrerit dolor. Risus in hendrerit gravida rutrum quisque non. Eleifend mi in nulla posuere sollicitudin aliquam.
+
+## H2
+
+Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Amet luctus venenatis lectus magna fringilla urna porttitor. Ultricies mi quis hendrerit dolor. Risus in hendrerit gravida rutrum quisque non. Eleifend mi in nulla posuere sollicitudin aliquam.
+
+### H3
+Duis ut diam quam nulla porttitor massa id neque. Pharetra convallis posuere morbi leo urna molestie. Nunc mattis enim ut tellus elementum. In iaculis nunc sed augue lacus viverra vitae congue eu. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Lacinia at quis risus sed vulputate odio. Commodo odio aenean sed adipiscing diam donec. Morbi tristique senectus et netus et. Ut eu sem integer vitae justo eget.
+
+## Code
+```python
+print('Hello World')
+```
+
+## Quote
+> Don't believe everything you read on the internet.
+> - Nikola Tesla
+
+## Ordered List
+1. One
+2. Two
+ 1. Nested
+ 2. Things
+3. Three
+
+## Unordered List
+* Foo
+* Bar
+* Baz
+
+## Details
+
+<details>
+<summary>Expand for more :)</summary>
+
+Amet luctus venenatis lectus magna fringilla urna porttitor. Ultricies mi quis hendrerit dolor.
+
+</details>
+
+## Table
+
+| Terminal | Iterations | min | max | mean |
+|---------------------|------------|--------------|---------------|--------------|
+| foot | 10000 | 26.130 µs | 248.260 µs | 31.825 µs |
+| XTerm | 10000 | 33.550 µs | 295.990 µs | 39.926 µs |
+| Konsole | 10000 | 34.110 µs | 3.652145 ms | 38.094 µs |
+| Alacritty | 10000 | 40.340 µs | 414.961 µs | 57.569 µs |
+| IntelliJ IDEA | 10000 | 71.267 µs | 2.453094 ms | 154.491 µs |
+| Terminal.app | 10000 | 196.143 µs | 25.064408 ms | 241.916 µs |
+| Hyper | 10000 | 16.287473 ms | 57.534790 ms | 20.040066 ms |
+| GNOME Console (vte) | 10000 | 8.157828 ms | 56.823240 ms | 20.656316 ms |
+| VSCode | 10000 | 24.164008 ms | 140.036258 ms | 26.061349 ms |
+| iTerm2 | 10000 | 4.065856 ms | 49.872777 ms | 28.259948 ms |
+
+
+## Title with `code`
+
+# H1
+## H2
+### H3
+Notice that there is no extra space between these nested headings.
+
+[^1]: Here comes the footnote
+
+[^2]: Aaaand a second footnote
diff --git a/content/posts/_index.md b/content/posts/_index.md
index e9429090f..cd9dfc385 100644
--- a/content/posts/_index.md
+++ b/content/posts/_index.md
@@ -1,4 +1,4 @@
+++
redirect_to = "/"
-insert_anchor_links = "right"
+insert_anchor_links = "left"
+++
diff --git a/sass/_anchor.scss b/sass/_anchor.scss
new file mode 100644
index 000000000..dd836f478
--- /dev/null
+++ b/sass/_anchor.scss
@@ -0,0 +1,40 @@
+// Anchors are by default on the right
+// but if there's enough space they get moved to the left
+// and hang off into the empty space.
+
+@mixin has-anchor {
+ .anchor {
+ position: absolute;
+ transition: opacity 125ms;
+ opacity: .5;
+
+ &:is(:hover, :focus) { opacity: 1; }
+ &:hover { text-decoration: none; }
+ }
+
+ @media (hover: hover) {
+ &:not(:is(:focus-within, :hover)) .anchor { opacity: 0; }
+ }
+}
+
+@mixin has-anchor-right {
+ &:has(.anchor) {
+ padding-right: 1.5ch;
+ }
+
+ .anchor {
+ right: 0;
+ }
+}
+
+@mixin has-anchor-left {
+ &:has(.anchor) {
+ padding-left: 1.5ch;
+ margin-left: -1.5ch;
+ }
+
+ .anchor {
+ left: 0;
+ right: auto;
+ }
+}
diff --git a/sass/_extra.scss b/sass/_extra.scss
deleted file mode 100644
index 2f4ebe628..000000000
--- a/sass/_extra.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-hr {
- border: 0;
- height: 1px;
- margin: 32px 0;
- background-color: #bfbfbf;
-}
-
-li {
- // For consistency with other elements.
- margin: 15px 0;
-}
-
-pre>code {
- // To avoid grey background on code blocks.
- background-color: inherit;
-}
-
-.site-header {
- // To avoid a thick black line on top of the page.
- border-top: none;
-
- // To center the site's title.
- text-align: center;
-}
-
-.site-title {
- // To center the site's title.
- float: none;
- padding: 0;
-}
-
-.intro {
- color: #ffffff;
- background-color: $brand-color;
- margin-top: -30px;
- padding: 32px 0;
- border-bottom: 1px solid #e8e8e8;
- text-align: center;
-
- .intro-icons svg {
- width: 92px;
- height: 92px;
- }
-
- .intro-lead {
- font-weight: bold;
- font-size: 1.5em;
- }
-
- a {
- color: white;
- font-weight: bold;
- }
-}
-
-.home {
- margin-top: 32px;
-}
-
-.social-links {
- list-style: none;
- margin: 0;
-
- li {
- margin-bottom: 4px;
-
- a {
- color: $grey-color;
- }
- }
-}
-
-.anchor {
- visibility: hidden;
-}
-
-h1:hover .anchor,
-h2:hover .anchor,
-h3:hover .anchor,
-h4:hover .anchor,
-h5:hover .anchor,
-h6:hover .anchor {
- visibility: visible;
-}
-
-.post-content p img,
-.post-content figure img,
-.post-content figure video {
- display: block;
- box-sizing: border-box;
- padding: 8px;
- border: 1px solid #e8e8e8;
-}
-
-.post-content p img {
- margin: 16px auto;
-}
-
-.post-content figure img,
-.post-content figure video {
- margin: 0 auto;
-}
-
-.post-link {
- display: inline-block;
-}
-
-.post-list li h3 {
- margin-bottom: 0;
-}
-
-input,
-button {
- font-size: inherit;
-}
-
-input {
- min-width: 0; // Allow the input to shrink on small devices.
-}
-
-a.btn,
-// Trick to increase the specificity and win against rules such as a:visited
-.btn {
- text-decoration: none;
- border-radius: 3px;
- font-weight: 600;
- border: none;
- box-sizing: border-box;
- display: inline-block;
- padding: 0.4em 2em;
- transition: background-color 125ms;
-
- background-color: $brand-color;
- color: $background-color;
- border-color: $background-color;
-
- &:hover {
- color: lighten($background-color, 10);
- background-color: lighten($brand-color, 5);
- }
-
- &:active {
- background-color: darken($brand-color, 5);
- }
-}
-
-input[type=email] {
- border-radius: 3px;
- border: 1px solid $brand-color;
- box-sizing: border-box;
- padding: .4em;
-}
-
-figcaption {
- display: block;
- text-align: center;
- color: #595959;
- font-size: inherit;
- margin-top: .5em;
-}
-
-video {
- max-width: 100%;
-}
-
-.email-form {
- display: grid;
- margin-top: $spacing-unit;
- grid-template-columns: auto auto;
- justify-content: center;
- gap: .6em 1em;
- background-color: color-mix(in oklab, $brand-color 20%, #fff);
- padding: $spacing-unit * .5;
- align-items: center;
- border-radius: 3px;
-
- .email-form__icon {
- width: 5em;
- height: 5em;
- --icon-stroke-color: #{$brand-color};
- --icon-fill-color: rgba(255, 255, 255, .4);
- }
-
- .email-form__description {
- max-width: 18em;
- }
-
- .email-form__input {
- grid-column: 1 / 3;
- }
-}
-
-.email-input {
- display: grid;
- grid-template-columns: repeat(2, auto);
- gap: 5px;
-
- label {
- grid-column: 1 / 3;
- font-size: .8em;
- }
-}
diff --git a/sass/_fonts.scss b/sass/_fonts.scss
new file mode 100644
index 000000000..dcba06b60
--- /dev/null
+++ b/sass/_fonts.scss
@@ -0,0 +1,18 @@
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/inter/Inter-Thin.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("fonts/inter/Inter-ThinItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/inter/Inter-ExtraLight.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("fonts/inter/Inter-ExtraLightItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/inter/Inter-Light.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/inter/Inter-LightItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter/Inter-Regular.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/inter/Inter-Italic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter/Inter-Medium.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/inter/Inter-MediumItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter/Inter-SemiBold.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter/Inter-Bold.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/inter/Inter-BoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/inter/Inter-ExtraBold.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/inter/Inter-ExtraBoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/inter/Inter-Black.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/inter/Inter-BlackItalic.woff2") format("woff2"); }
diff --git a/sass/_form.scss b/sass/_form.scss
new file mode 100644
index 000000000..df086f7e0
--- /dev/null
+++ b/sass/_form.scss
@@ -0,0 +1,36 @@
+.email-form {
+ display: grid;
+ margin-top: var(--section-gap);
+ grid-template-columns: auto auto;
+ justify-content: center;
+ gap: var(--block-gap);
+ background-color: var(--bg-1-color);
+ padding: var(--block-gap);
+ align-items: center;
+ border-radius: var(--box-rounding);
+
+ .email-form__icon {
+ width: 5em;
+ height: 5em;
+ --icon-stroke-color: var(--fg-color);
+ }
+
+ .email-form__description {
+ max-width: 18em;
+ }
+
+ .email-form__input {
+ grid-column: 1 / 3;
+ }
+}
+
+.email-input {
+ display: grid;
+ grid-template-columns: repeat(2, auto);
+ gap: 5px;
+
+ label {
+ grid-column: 1 / 3;
+ font-size: .8em;
+ }
+}
diff --git a/sass/_layout.scss b/sass/_layout.scss
new file mode 100644
index 000000000..1fd6bfbb4
--- /dev/null
+++ b/sass/_layout.scss
@@ -0,0 +1,64 @@
+body {
+ display: grid;
+ min-height: 100vh;
+ grid-template-columns: 1fr minmax(0, $content-max-width) 1fr;
+ grid-template-rows: auto 1fr auto;
+ grid-row-gap: var(--section-gap);
+}
+
+.site-header {
+ grid-column: 1 / 4;
+ display: grid;
+ grid-template-columns: subgrid;
+ border-bottom: 2px solid var(--border-color);
+
+ > .wrapper {
+ grid-column: 2;
+ padding: .5rem var(--content-padding);
+ }
+}
+
+.page-content {
+ grid-column: 2;
+}
+
+.site-footer {
+ grid-column: 1 / 4;
+ display: grid;
+ grid-template-columns: subgrid;
+ justify-items: center;
+ background-color: var(--bg-1-color);
+ font-size: .9em;
+ --block-gap: .5rem;
+ --ferris-height: 1.5rem;
+ padding-top: var(--ferris-height);
+
+ &:before {
+ content: "";
+ transform: translateY(calc(-50% - var(--ferris-height)));
+ position: absolute;
+ height: var(--ferris-height);
+ aspect-ratio: var(--ferris-aspect-ratio);
+ background-color: var(--fg-color);
+ mask-image: var(--ferris-image);
+ mask-size: contain;
+ }
+
+ @media (prefers-contrast: no-preference) and (hover: hover) {
+ transition: opacity 125ms;
+
+ &:not(:is(:focus-within, :hover, :has(:active))) {
+ opacity: .4;
+ }
+ }
+
+ .wrapper {
+ grid-column: 2;
+ padding: var(--content-padding);
+ max-width: 35rem;
+ }
+
+ p {
+ margin-bottom: var(--block-gap);
+ }
+}
diff --git a/sass/_minima.scss b/sass/_minima.scss
deleted file mode 100644
index 8fd6902ca..000000000
--- a/sass/_minima.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-@charset "utf-8";
-
-// Define defaults for each variable.
-
-$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$base-font-size: 16px !default;
-$base-font-weight: 400 !default;
-$small-font-size: $base-font-size * 0.875 !default;
-$base-line-height: 1.5 !default;
-
-$spacing-unit: 30px !default;
-
-$text-color: #111 !default;
-$background-color: #fdfdfd !default;
-$brand-color: #2a7ae2 !default;
-
-$grey-color: #828282 !default;
-$grey-color-light: lighten($grey-color, 40%) !default;
-$grey-color-dark: darken($grey-color, 25%) !default;
-$orange-color: #f66a0a !default;
-$table-text-align: left !default;
-
-// Width of the content area
-$content-width: 800px !default;
-
-$on-palm: 600px !default;
-$on-laptop: 800px !default;
-
-$on-medium: $on-palm !default;
-$on-large: $on-laptop !default;
-
-// Use media queries like this:
-// @include media-query($on-palm) {
-// .wrapper {
-// padding-right: $spacing-unit / 2;
-// padding-left: $spacing-unit / 2;
-// }
-// }
-// Notice the following mixin uses max-width, in a deprecated, desktop-first
-// approach, whereas media queries used elsewhere now use min-width.
-@mixin media-query($device) {
- @media screen and (max-width: $device) {
- @content;
- }
-}
-
-@mixin relative-font-size($ratio) {
- font-size: $base-font-size * $ratio;
-}
-
-// Import partials.
-@import
- "minima/base",
- "minima/layout",
- "minima/syntax-highlighting"
-;
diff --git a/sass/_palette.scss b/sass/_palette.scss
new file mode 100644
index 000000000..7a7509509
--- /dev/null
+++ b/sass/_palette.scss
@@ -0,0 +1,17 @@
+:root {
+ --accent-color: #e33b26;
+ --bg-0-color: #fff;
+ --bg-1-color: color-mix(in oklab, var(--accent-color), var(--bg-0-color) 90%);
+ --text-color: #000;
+ --fg-color: oklch(from var(--accent-color) 0.5 C H);
+ --icon-fill-color: oklch(from var(--accent-color) 0.9 C H);
+ --border-color: oklch(from var(--accent-color) 0.7 0.1 H);
+
+ @media (prefers-color-scheme: dark) {
+ --bg-0-color: #181818;
+ --text-color: #fff;
+ --fg-color: oklch(from var(--accent-color) 0.7 C H);
+ --icon-fill-color: oklch(from var(--accent-color) 0.3 C H);
+ --border-color: oklch(from var(--accent-color) 0.5 0.1 H);
+ }
+}
diff --git a/sass/_post-content.scss b/sass/_post-content.scss
new file mode 100644
index 000000000..5b3efc2e6
--- /dev/null
+++ b/sass/_post-content.scss
@@ -0,0 +1,52 @@
+.post-header {
+ margin-bottom: var(--section-gap);
+
+ h1 {
+ // This should visually match up
+ // with the gap between lines in the heading.
+ margin-bottom: 0.2em;
+ }
+}
+
+.post-content {
+ // Block level elements get some space after
+ h1, h2, h3, h4, p, ul, ol, blockquote {
+ margin-bottom: var(--block-gap);
+ }
+
+ // Headings create a new "section" so we want space between the sections
+ // ... but not between a section and a direct subsection
+ :is(h1, h2, h3, h4):not(:is(h1 + h2, h2 + h3, h3 + h4)) {
+ margin-top: var(--section-gap);
+ }
+
+ figure {
+ margin-bottom: calc(1.5 * var(--block-gap));
+ }
+
+ hr {
+ margin: var(--section-gap) 0;
+ }
+
+ .footnote-definition {
+ margin-top: var(--section-gap);
+ --block-gap: .5rem;
+ }
+
+ .footnote-definition + .footnote-definition {
+ margin-top: 0;
+ }
+
+ blockquote :last-child,
+ :is(ol, ul) :is(ol, ul) {
+ margin-bottom: 0;
+ }
+
+ // We only want the anchor hanging off to the left side
+ // if there's enough room available.
+ @media (width > ($content-max-width + 2rem)) {
+ :is(h1, h2, h3, h4) {
+ @include has-anchor-left;
+ }
+ }
+}
diff --git a/sass/_reset.scss b/sass/_reset.scss
new file mode 100644
index 000000000..a4f0b632c
--- /dev/null
+++ b/sass/_reset.scss
@@ -0,0 +1,49 @@
+// This is partially based on <https://piccalil.li/blog/a-more-modern-css-reset/>.
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+// Prevent font size inflation
+:root {
+ -moz-text-size-adjust: none;
+ -webkit-text-size-adjust: none;
+ text-size-adjust: none;
+}
+
+// More sensible line heights
+:root {
+ line-height: 1.5;
+}
+
+h1, h2, h3, h4 {
+ line-height: 1.3;
+}
+
+// Remove default margin in favour of better control in authored CSS
+body, h1, h2, h3, h4, p,
+figure, blockquote, dl, dd {
+ margin: 0;
+}
+
+// Inherit fonts for inputs and buttons
+input,
+button,
+textarea,
+select {
+ font-family: inherit;
+ font-size: inherit;
+}
+
+// Remove border in favour of custom styling
+hr {
+ color: inherit;
+ border: none;
+}
+
+// Make images and videos easier to work with
+img, picture, video {
+ max-width: 100%;
+}
diff --git a/sass/_typography.scss b/sass/_typography.scss
new file mode 100644
index 000000000..99f985d66
--- /dev/null
+++ b/sass/_typography.scss
@@ -0,0 +1,143 @@
+// Basic styling rules that apply everywhere (even outside articles).
+// This notably excludes layout things (e.g. spacing between elements).
+
+h1, h2, h3, h4 {
+ font-weight: bold;
+ text-wrap: balance;
+ text-wrap: pretty; // relatively new, so we have balance as fallback.
+ position: relative;
+
+ @include has-anchor;
+ @include has-anchor-right;
+}
+
+h1 {
+ font-size: 2em;
+}
+
+h2 {
+ font-size: 1.5em;
+}
+
+h3 {
+ font-size: 1.2em;
+}
+
+a {
+ color: var(--fg-color);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+pre {
+ padding: 1em;
+}
+
+hr {
+ --ferris-height: 1em;
+ --ferris-width: calc(var(--ferris-height) * var(--ferris-aspect-ratio));
+ --line-width: 2em;
+ --line-thickness: 2px;
+ --line-gap: 1em;
+ --line-offset: calc(var(--ferris-width) + var(--line-gap));
+
+ background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
+ background-position: calc(50% - var(--line-offset)) 50%, calc(50% + var(--line-offset)) 50%;
+ background-size: var(--line-width) var(--line-thickness), var(--line-width) var(--line-thickness);
+ background-repeat: no-repeat;
+
+ &::before {
+ content: "";
+ margin: auto;
+ display: block;
+ height: var(--ferris-height);
+ aspect-ratio: var(--ferris-aspect-ratio);
+ background-color: currentColor;
+ mask-image: var(--ferris-image);
+ mask-size: contain;
+ }
+}
+
+time {
+ font-variant-numeric: tabular-nums slashed-zero;
+}
+
+code {
+ font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
+ // We don't want long identifiers such as 'package.metadata.playdate.options'
+ // introducing a scroll bar on small screens.
+ overflow-wrap: break-word;
+}
+
+ul {
+ padding-inline-start: 1.5ch;
+}
+
+ol {
+ padding-inline-start: 2ch;
+}
+
+:is(ul, ol)._semantic {
+ list-style-type: none;
+ padding-inline-start: 0;
+}
+
+blockquote {
+ font-style: italic;
+ background-color: var(--bg-1-color);
+ padding: var(--block-gap);
+ border-left: 4px solid var(--border-color);
+}
+
+table {
+ border-collapse: collapse;
+ font-variant-numeric: tabular-nums;
+ overflow: hidden;
+
+ // border-radius and border-collapse: collapse don't
+ // work together, so we fake the border using box shadow
+ border-radius: var(--box-rounding);
+ border-style: hidden;
+ box-shadow: 0 0 0 1px var(--border-color);
+
+ tr:first-child :is(td, th):first-child {
+ border-top-left-radius: var(--box-rounding);
+ }
+}
+
+td, th {
+ border: 1px solid var(--border-color);
+ padding: 6px 12px;
+}
+
+tr:nth-child(2n) td {
+ background-color: var(--bg-1-color);
+}
+
+.footnote-definition {
+ font-size: .8em;
+
+ &::before {
+ content: '';
+ border-top: 2px solid var(--border-color);
+ display: block;
+ width: 100%;
+ max-width: 300px;
+ margin-bottom: var(--block-gap);
+ }
+
+ & > sup {
+ float: left;
+ margin-right: 1ch;
+ }
+}
+
+.footnote-definition + .footnote-definition {
+ &::before {
+ content: none;
+ }
+}
diff --git a/sass/minima/_base.scss b/sass/minima/_base.scss
deleted file mode 100644
index db7d5a108..000000000
--- a/sass/minima/_base.scss
+++ /dev/null
@@ -1,256 +0,0 @@
-/**
- * Reset some basic elements
- */
-body, h1, h2, h3, h4, h5, h6,
-p, blockquote, pre, hr,
-dl, dd, ol, ul, figure {
- margin: 0;
- padding: 0;
-
-}
-
-
-
-/**
- * Basic styling
- */
-body {
- font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
- color: $text-color;
- background-color: $background-color;
- -webkit-text-size-adjust: 100%;
- -webkit-font-feature-settings: "kern" 1;
- -moz-font-feature-settings: "kern" 1;
- -o-font-feature-settings: "kern" 1;
- font-feature-settings: "kern" 1;
- font-kerning: normal;
- display: flex;
- min-height: 100vh;
- flex-direction: column;
-}
-
-
-
-/**
- * Set `margin-bottom` to maintain vertical rhythm
- */
-h1, h2, h3, h4, h5, h6,
-p, blockquote, pre,
-ul, ol, dl, figure,
-%vertical-rhythm {
- margin-bottom: $spacing-unit / 2;
-}
-
-
-
-/**
- * `main` element
- */
-main {
- display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
-}
-
-
-
-/**
- * Images
- */
-img {
- max-width: 100%;
- vertical-align: middle;
-}
-
-
-
-/**
- * Figures
- */
-figure > img {
- display: block;
-}
-
-figcaption {
- font-size: $small-font-size;
-}
-
-
-
-/**
- * Lists
- */
-ul, ol {
- margin-left: $spacing-unit;
-}
-
-li {
- > ul,
- > ol {
- margin-bottom: 0;
- }
-}
-
-
-
-/**
- * Headings
- */
-h1, h2, h3, h4, h5, h6 {
- font-weight: $base-font-weight;
-}
-
-
-
-/**
- * Links
- */
-a {
- color: $brand-color;
- text-decoration: none;
-
- &:visited {
- color: darken($brand-color, 15%);
- }
-
- &:hover {
- color: $text-color;
- text-decoration: underline;
- }
-
- .social-media-list &:hover {
- text-decoration: none;
-
- .username {
- text-decoration: underline;
- }
- }
-}
-
-
-/**
- * Blockquotes
- */
-blockquote {
- color: $grey-color;
- border-left: 4px solid $grey-color-light;
- padding-left: $spacing-unit / 2;
- @include relative-font-size(1.125);
- letter-spacing: -1px;
- font-style: italic;
-
- > :last-child {
- margin-bottom: 0;
- }
-}
-
-
-
-/**
- * Code formatting
- */
-pre,
-code {
- @include relative-font-size(0.9375);
- border: 1px solid $grey-color-light;
- border-radius: 3px;
- background-color: #eef;
-}
-
-code {
- padding: 1px 5px;
-}
-
-pre {
- padding: 8px 12px;
- overflow-x: auto;
-
- > code {
- border: 0;
- padding-right: 0;
- padding-left: 0;
- }
-}
-
-
-
-/**
- * Wrapper
- */
-.wrapper {
- max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
- max-width: calc(#{$content-width} - (#{$spacing-unit}));
- margin-right: auto;
- margin-left: auto;
- padding-right: $spacing-unit / 2;
- padding-left: $spacing-unit / 2;
- @extend %clearfix;
-
- @media screen and (min-width: $on-large) {
- max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
- max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
- padding-right: $spacing-unit;
- padding-left: $spacing-unit;
- }
-}
-
-
-
-/**
- * Clearfix
- */
-%clearfix:after {
- content: "";
- display: table;
- clear: both;
-}
-
-
-
-/**
- * Icons
- */
-
-.orange {
- color: $orange-color;
-}
-
-.grey {
- color: $grey-color;
-}
-
-.svg-icon {
- width: 16px;
- height: 16px;
- display: inline-block;
- fill: currentColor;
- padding: 5px 3px 2px 5px;
- vertical-align: text-bottom;
-}
-
-
-/**
- * Tables
- */
-table {
- margin-bottom: $spacing-unit;
- width: 100%;
- text-align: $table-text-align;
- color: lighten($text-color, 18%);
- border-collapse: collapse;
- border: 1px solid $grey-color-light;
- tr {
- &:nth-child(even) {
- background-color: lighten($grey-color-light, 6%);
- }
- }
- th, td {
- padding: ($spacing-unit / 3) ($spacing-unit / 2);
- }
- th {
- background-color: lighten($grey-color-light, 3%);
- border: 1px solid darken($grey-color-light, 4%);
- border-bottom-color: darken($grey-color-light, 12%);
- }
- td {
- border: 1px solid $grey-color-light;
- }
-}
diff --git a/sass/minima/_layout.scss b/sass/minima/_layout.scss
deleted file mode 100644
index a86045140..000000000
--- a/sass/minima/_layout.scss
+++ /dev/null
@@ -1,300 +0,0 @@
-/**
- * Site header
- */
-.site-header {
- border-top: 5px solid $grey-color-dark;
- border-bottom: 1px solid $grey-color-light;
- min-height: $spacing-unit * 1.865;
- line-height: $base-line-height * $base-font-size * 2.25;
-
- // Positioning context for the mobile navigation icon
- position: relative;
-}
-
-.site-title {
- @include relative-font-size(1.625);
- font-weight: 300;
- letter-spacing: -1px;
- margin-bottom: 0;
- float: left;
-
- @include media-query($on-palm) {
- padding-right: 45px;
- }
-
- &,
- &:visited {
- color: $grey-color-dark;
- }
-}
-
-.site-nav {
- position: absolute;
- top: 9px;
- right: $spacing-unit / 2;
- background-color: $background-color;
- border: 1px solid $grey-color-light;
- border-radius: 5px;
- text-align: right;
-
- .nav-trigger {
- display: none;
- }
-
- .menu-icon {
- float: right;
- width: 36px;
- height: 26px;
- line-height: 0;
- padding-top: 10px;
- text-align: center;
-
- > svg path {
- fill: $grey-color-dark;
- }
- }
-
- label[for="nav-trigger"] {
- display: block;
- float: right;
- width: 36px;
- height: 36px;
- z-index: 2;
- cursor: pointer;
- }
-
- input ~ .trigger {
- clear: both;
- display: none;
- }
-
- input:checked ~ .trigger {
- display: block;
- padding-bottom: 5px;
- }
-
- .page-link {
- color: $text-color;
- line-height: $base-line-height;
- display: block;
- padding: 5px 10px;
-
- // Gaps between nav items, but not on the last one
- &:not(:last-child) {
- margin-right: 0;
- }
- margin-left: 20px;
- }
-
- @media screen and (min-width: $on-medium) {
- position: static;
- float: right;
- border: none;
- background-color: inherit;
-
- label[for="nav-trigger"] {
- display: none;
- }
-
- .menu-icon {
- display: none;
- }
-
- input ~ .trigger {
- display: block;
- }
-
- .page-link {
- display: inline;
- padding: 0;
-
- &:not(:last-child) {
- margin-right: 20px;
- }
- margin-left: auto;
- }
- }
-}
-
-
-
-/**
- * Site footer
- */
-.site-footer {
- border-top: 1px solid $grey-color-light;
- padding: $spacing-unit 0;
-}
-
-.footer-heading {
- @include relative-font-size(1.125);
- margin-bottom: $spacing-unit / 2;
-}
-
-.contact-list,
-.social-media-list {
- list-style: none;
- margin-left: 0;
-}
-
-.footer-col-wrapper {
- @include relative-font-size(0.9375);
- color: $grey-color;
- margin-left: -$spacing-unit / 2;
- @extend %clearfix;
-}
-
-.footer-col {
- width: -webkit-calc(100% - (#{$spacing-unit} / 2));
- width: calc(100% - (#{$spacing-unit} / 2));
- margin-bottom: $spacing-unit / 2;
- padding-left: $spacing-unit / 2;
-}
-
-.footer-col-1,
-.footer-col-2 {
- width: -webkit-calc(50% - (#{$spacing-unit} / 2));
- width: calc(50% - (#{$spacing-unit} / 2));
-}
-
-.footer-col-3 {
- width: -webkit-calc(100% - (#{$spacing-unit} / 2));
- width: calc(100% - (#{$spacing-unit} / 2));
-}
-
-@media screen and (min-width: $on-large) {
- .footer-col-1 {
- width: -webkit-calc(35% - (#{$spacing-unit} / 2));
- width: calc(35% - (#{$spacing-unit} / 2));
- }
-
- .footer-col-2 {
- width: -webkit-calc(20% - (#{$spacing-unit} / 2));
- width: calc(20% - (#{$spacing-unit} / 2));
- }
-
- .footer-col-3 {
- width: -webkit-calc(45% - (#{$spacing-unit} / 2));
- width: calc(45% - (#{$spacing-unit} / 2));
- }
-}
-
-@media screen and (min-width: $on-medium) {
- .footer-col {
- float: left;
- }
-}
-
-
-
-/**
- * Page content
- */
-.page-content {
- padding: $spacing-unit 0;
- flex: 1 0 auto;
-}
-
-.page-heading {
- @include relative-font-size(2);
-}
-
-.post-list-heading {
- @include relative-font-size(1.75);
-}
-
-.post-list {
- margin-left: 0;
- list-style: none;
-
- > li {
- margin-bottom: $spacing-unit;
- }
-}
-
-.post-meta {
- font-size: $small-font-size;
- color: $grey-color;
-}
-
-.post-link {
- display: block;
- @include relative-font-size(1.5);
-}
-
-
-
-/**
- * Posts
- */
-.post-header {
- margin-bottom: $spacing-unit;
-}
-
-.post-title,
-.post-content h1 {
- @include relative-font-size(2.625);
- letter-spacing: -1px;
- line-height: 1;
-
- @media screen and (min-width: $on-large) {
- @include relative-font-size(2.625);
- }
-}
-
-.post-content {
- margin-bottom: $spacing-unit;
-
- h2 {
- @include relative-font-size(1.75);
-
- @media screen and (min-width: $on-large) {
- @include relative-font-size(2);
- }
- }
-
- h3 {
- @include relative-font-size(1.375);
-
- @media screen and (min-width: $on-large) {
- @include relative-font-size(1.625);
- }
- }
-
- h4 {
- @include relative-font-size(1.125);
-
- @media screen and (min-width: $on-large) {
- @include relative-font-size(1.25);
- }
- }
-}
-
-
-.social-media-list {
- display: table;
- margin: 0 auto;
- li {
- float: left;
- margin: 0 5px;
- &:first-of-type { margin-left: 0 }
- &:last-of-type { margin-right: 0 }
- a {
- display: block;
- padding: $spacing-unit / 4;
- border: 1px solid $grey-color-light
- }
- &:hover .svg-icon { fill: currentColor; }
- }
-}
-
-
-/**
- * Grid helpers
- */
-@media screen and (min-width: $on-large) {
- .one-half {
- width: -webkit-calc(50% - (#{$spacing-unit} / 2));
- width: calc(50% - (#{$spacing-unit} / 2));
- }
-}
diff --git a/sass/minima/_syntax-highlighting.scss b/sass/minima/_syntax-highlighting.scss
deleted file mode 100644
index bccdb8995..000000000
--- a/sass/minima/_syntax-highlighting.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Syntax highlighting styles
- */
-.highlight {
- background: #fff;
- @extend %vertical-rhythm;
-
- .highlighter-rouge & {
- background: #eef;
- }
-
- .c { color: #998; font-style: italic } // Comment
- .err { color: #a61717; background-color: #e3d2d2 } // Error
- .k { font-weight: bold } // Keyword
- .o { font-weight: bold } // Operator
- .cm { color: #998; font-style: italic } // Comment.Multiline
- .cp { color: #999; font-weight: bold } // Comment.Preproc
- .c1 { color: #998; font-style: italic } // Comment.Single
- .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
- .gd { color: #000; background-color: #fdd } // Generic.Deleted
- .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
- .ge { font-style: italic } // Generic.Emph
- .gr { color: #a00 } // Generic.Error
- .gh { color: #999 } // Generic.Heading
- .gi { color: #000; background-color: #dfd } // Generic.Inserted
- .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
- .go { color: #888 } // Generic.Output
- .gp { color: #555 } // Generic.Prompt
- .gs { font-weight: bold } // Generic.Strong
- .gu { color: #aaa } // Generic.Subheading
- .gt { color: #a00 } // Generic.Traceback
- .kc { font-weight: bold } // Keyword.Constant
- .kd { font-weight: bold } // Keyword.Declaration
- .kp { font-weight: bold } // Keyword.Pseudo
- .kr { font-weight: bold } // Keyword.Reserved
- .kt { color: #458; font-weight: bold } // Keyword.Type
- .m { color: #099 } // Literal.Number
- .s { color: #d14 } // Literal.String
- .na { color: #008080 } // Name.Attribute
- .nb { color: #0086B3 } // Name.Builtin
- .nc { color: #458; font-weight: bold } // Name.Class
- .no { color: #008080 } // Name.Constant
- .ni { color: #800080 } // Name.Entity
- .ne { color: #900; font-weight: bold } // Name.Exception
- .nf { color: #900; font-weight: bold } // Name.Function
- .nn { color: #555 } // Name.Namespace
- .nt { color: #000080 } // Name.Tag
- .nv { color: #008080 } // Name.Variable
- .ow { font-weight: bold } // Operator.Word
- .w { color: #bbb } // Text.Whitespace
- .mf { color: #099 } // Literal.Number.Float
- .mh { color: #099 } // Literal.Number.Hex
- .mi { color: #099 } // Literal.Number.Integer
- .mo { color: #099 } // Literal.Number.Oct
- .sb { color: #d14 } // Literal.String.Backtick
- .sc { color: #d14 } // Literal.String.Char
- .sd { color: #d14 } // Literal.String.Doc
- .s2 { color: #d14 } // Literal.String.Double
- .se { color: #d14 } // Literal.String.Escape
- .sh { color: #d14 } // Literal.String.Heredoc
- .si { color: #d14 } // Literal.String.Interpol
- .sx { color: #d14 } // Literal.String.Other
- .sr { color: #009926 } // Literal.String.Regex
- .s1 { color: #d14 } // Literal.String.Single
- .ss { color: #990073 } // Literal.String.Symbol
- .bp { color: #999 } // Name.Builtin.Pseudo
- .vc { color: #008080 } // Name.Variable.Class
- .vg { color: #008080 } // Name.Variable.Global
- .vi { color: #008080 } // Name.Variable.Instance
- .il { color: #099 } // Literal.Number.Integer.Long
-}
diff --git a/sass/style.scss b/sass/style.scss
index 6a36fd776..90d67e5db 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,7 +1,121 @@
-// Some of the default colors do not meet the WCAG 2.0 accessibility
-// guidelines for contrast.
-$grey-color: #595959;
-$brand-color: #06C;
+@import '_fonts.scss';
+@import '_reset.scss';
+@import '_palette.scss';
-@import "minima";
-@import "extra";
+$content-max-width: 50rem;
+
+:root {
+ --block-gap: 1rem;
+ --section-gap: 2.4rem;
+ --box-rounding: 1rem;
+ --content-padding: 1rem;
+ --ferris-image: url(./8bit-ferris.svg);
+ --ferris-aspect-ratio: 1.5;
+}
+
+:root {
+ font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+ accent-color: var(--accent-color);
+ color-scheme: light dark;
+ color: var(--text-color);
+ background-color: var(--bg-0-color);
+
+ @media (prefers-reduced-motion: no-preference) {
+ scroll-behavior: smooth;
+ }
+}
+
+::selection {
+ // TODO: use relative color syntax for min/max lightness in oklab
+ color: color-mix(in oklab, var(--accent-color), #000 80%);
+ background-color: color-mix(in oklab, var(--accent-color), #fff 80%);
+
+ @media (prefers-color-scheme: dark) {
+ color: color-mix(in oklab, var(--accent-color), #fff 90%);
+ background-color: color-mix(in oklab, var(--accent-color), #000 40%);
+ }
+}
+
+@import '_anchor.scss';
+@import '_typography.scss';
+@import '_layout.scss';
+@import '_post-content.scss';
+@import '_form.scss';
+
+body {
+ display: grid;
+ grid-template-columns: 1fr minmax(0, $content-max-width) 1fr;
+}
+
+.skip-link {
+ --skip-link-offset: 0.5rem;
+ position: absolute;
+ top: var(--skip-link-offset);
+ left: var(--skip-link-offset);
+ background-color: color-mix(in oklab, var(--accent-color), var(--background-color) 90%);
+ padding: .5em 1em;
+ border-radius: .5em;
+
+ &:not(:focus) {
+ transform: translateY(calc(-100% - var(--skip-link-offset)));
+ }
+}
+
+.site-title {
+ --fg-color: var(--text-color);
+ font-size: 1.2em;
+ display: flex;
+ align-items: center;
+ gap: .5em;
+ max-width: max-content;
+}
+
+main {
+ padding: 0 var(--content-padding);
+}
+
+pre, img, video {
+ border-radius: var(--box-rounding);
+}
+
+figure {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ a {
+ display: contents; // TODO: remove and enable minify_html instead
+ }
+
+ figcaption {
+ margin-top: calc(0.5 * var(--block-gap));
+ font-size: 0.8em;
+ font-style: italic;
+ }
+}
+
+.svg-icon {
+ width: 1em;
+ height: 1em;
+ // See: https://tonsky.me/blog/centering/#what-can-be-done-web-developers
+ // > [...] Now that we have that sorted, aligning icons is not that hard too.
+ // > You set `vertical-align: baseline` and then move them down by `(iconHeight - capHeight) / 2`.
+ // This works because we use Inter, a font that follows
+ // the rule `ascender − cap-height = descender`, yayy :)
+ vertical-align: baseline;
+ transform: translateY(calc((1em - 1cap) / 2));
+}
+
+.social-links {
+ display: grid;
+ grid-template-columns: repeat(2, auto);
+ gap: 0.2em 1.5em;
+
+ @media (width <= 35rem) {
+ grid-template-columns: auto;
+ }
+}
+
+.link-with-icon {
+ svg { margin-right: .5ch; }
+}
diff --git a/static/8bit-ferris.svg b/static/8bit-ferris.svg
new file mode 100644
index 000000000..5d53f8831
--- /dev/null
+++ b/static/8bit-ferris.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="79.375mm"
+ height="52.916668mm"
+ viewBox="0 0 79.375 52.916668"
+ version="1.1"
+ id="svg1"
+ xml:space="preserve"
+ inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+ sodipodi:docname="8bit-ferris.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+ id="namedview1"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ inkscape:document-units="px"
+ showguides="true"
+ inkscape:zoom="1.4677327"
+ inkscape:cx="242.55098"
+ inkscape:cy="165.90215"
+ inkscape:window-width="2560"
+ inkscape:window-height="1371"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1" /><defs
+ id="defs1" /><g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"><path
+ id="rect1"
+ style="fill:#ff5400;fill-opacity:1;stroke:none;stroke-width:1;stroke-linejoin:round;paint-order:markers stroke fill"
+ d="M 0,0 V 5.2916667 10.583333 15.875 h 5.2916667 v 5.291667 5.291666 H 10.583333 V 21.166667 15.875 10.583333 H 5.2916667 V 5.2916667 0 Z M 10.583333,10.583333 H 15.875 V 5.2916667 0 h -5.291667 v 5.2916667 z m 0,15.875 V 31.75 37.041667 H 15.875 v 5.291666 h 5.291667 V 47.625 H 26.458333 31.75 37.041667 42.333333 47.625 52.916667 58.208333 V 42.333333 H 63.5 v -5.291666 h 5.291667 V 31.75 26.458333 H 63.5 V 21.166667 H 58.208333 V 15.875 H 52.916667 V 10.583333 H 47.625 42.333333 37.041667 31.75 26.458333 V 15.875 h -5.291666 v 5.291667 H 15.875 v 5.291666 z m 58.208334,0 h 5.291666 V 21.166667 15.875 H 79.375 V 10.583333 5.2916667 0 H 74.083333 V 5.2916667 10.583333 H 68.791667 V 15.875 21.166667 Z m 0,-15.875 V 5.2916667 0 H 63.5 v 5.2916667 5.2916663 z m 0,26.458334 v 5.291666 5.291667 5.291667 h 5.291666 V 47.625 42.333333 37.041667 Z M 58.208333,47.625 v 5.291667 H 63.5 V 47.625 Z m -37.041666,0 H 15.875 v 5.291667 h 5.291667 z M 10.583333,37.041667 H 5.2916667 V 42.333333 47.625 52.916667 H 10.583333 V 47.625 42.333333 Z M 31.75,26.458333 h 5.291667 V 31.75 H 31.75 Z m 10.583333,0 H 47.625 V 31.75 H 42.333333 Z M 31.75,37.041667 h 5.291667 5.291666 5.291667 v 5.291666 H 42.333333 37.041667 31.75 Z" /></g></svg>
diff --git a/static/fonts/inter/Inter-Black.woff2 b/static/fonts/inter/Inter-Black.woff2
new file mode 100644
index 000000000..18b35db75
Binary files /dev/null and b/static/fonts/inter/Inter-Black.woff2 differ
diff --git a/static/fonts/inter/Inter-BlackItalic.woff2 b/static/fonts/inter/Inter-BlackItalic.woff2
new file mode 100644
index 000000000..02c9d8ecc
Binary files /dev/null and b/static/fonts/inter/Inter-BlackItalic.woff2 differ
diff --git a/static/fonts/inter/Inter-Bold.woff2 b/static/fonts/inter/Inter-Bold.woff2
new file mode 100644
index 000000000..0f1b15763
Binary files /dev/null and b/static/fonts/inter/Inter-Bold.woff2 differ
diff --git a/static/fonts/inter/Inter-BoldItalic.woff2 b/static/fonts/inter/Inter-BoldItalic.woff2
new file mode 100644
index 000000000..bc50f24c8
Binary files /dev/null and b/static/fonts/inter/Inter-BoldItalic.woff2 differ
diff --git a/static/fonts/inter/Inter-ExtraBold.woff2 b/static/fonts/inter/Inter-ExtraBold.woff2
new file mode 100644
index 000000000..b1133688a
Binary files /dev/null and b/static/fonts/inter/Inter-ExtraBold.woff2 differ
diff --git a/static/fonts/inter/Inter-ExtraBoldItalic.woff2 b/static/fonts/inter/Inter-ExtraBoldItalic.woff2
new file mode 100644
index 000000000..a5b76ca8d
Binary files /dev/null and b/static/fonts/inter/Inter-ExtraBoldItalic.woff2 differ
diff --git a/static/fonts/inter/Inter-ExtraLight.woff2 b/static/fonts/inter/Inter-ExtraLight.woff2
new file mode 100644
index 000000000..1d77ae8d0
Binary files /dev/null and b/static/fonts/inter/Inter-ExtraLight.woff2 differ
diff --git a/static/fonts/inter/Inter-ExtraLightItalic.woff2 b/static/fonts/inter/Inter-ExtraLightItalic.woff2
new file mode 100644
index 000000000..8c6849209
Binary files /dev/null and b/static/fonts/inter/Inter-ExtraLightItalic.woff2 differ
diff --git a/static/fonts/inter/Inter-Italic.woff2 b/static/fonts/inter/Inter-Italic.woff2
new file mode 100644
index 000000000..4c24ce281
Binary files /dev/null and b/static/fonts/inter/Inter-Italic.woff2 differ
diff --git a/static/fonts/inter/Inter-Light.woff2 b/static/fonts/inter/Inter-Light.woff2
new file mode 100644
index 000000000..dbe61437a
Binary files /dev/null and b/static/fonts/inter/Inter-Light.woff2 differ
diff --git a/static/fonts/inter/Inter-LightItalic.woff2 b/static/fonts/inter/Inter-LightItalic.woff2
new file mode 100644
index 000000000..a40d04215
Binary files /dev/null and b/static/fonts/inter/Inter-LightItalic.woff2 differ
diff --git a/static/fonts/inter/Inter-Medium.woff2 b/static/fonts/inter/Inter-Medium.woff2
new file mode 100644
index 000000000..0fd2ee737
Binary files /dev/null and b/static/fonts/inter/Inter-Medium.woff2 differ
diff --git a/static/fonts/inter/Inter-MediumItalic.woff2 b/static/fonts/inter/Inter-MediumItalic.woff2
new file mode 100644
index 000000000..96767155d
Binary files /dev/null and b/static/fonts/inter/Inter-MediumItalic.woff2 differ
diff --git a/static/fonts/inter/Inter-Regular.woff2 b/static/fonts/inter/Inter-Regular.woff2
new file mode 100644
index 000000000..b8699af29
Binary files /dev/null and b/static/fonts/inter/Inter-Regular.woff2 differ
diff --git a/static/fonts/inter/Inter-SemiBold.woff2 b/static/fonts/inter/Inter-SemiBold.woff2
new file mode 100644
index 000000000..95c48b184
Binary files /dev/null and b/static/fonts/inter/Inter-SemiBold.woff2 differ
diff --git a/static/fonts/inter/Inter-SemiBoldItalic.woff2 b/static/fonts/inter/Inter-SemiBoldItalic.woff2
new file mode 100644
index 000000000..ddfe19e83
Binary files /dev/null and b/static/fonts/inter/Inter-SemiBoldItalic.woff2 differ
diff --git a/static/fonts/inter/Inter-Thin.woff2 b/static/fonts/inter/Inter-Thin.woff2
new file mode 100644
index 000000000..07909608c
Binary files /dev/null and b/static/fonts/inter/Inter-Thin.woff2 differ
diff --git a/static/fonts/inter/Inter-ThinItalic.woff2 b/static/fonts/inter/Inter-ThinItalic.woff2
new file mode 100644
index 000000000..a7bf21380
Binary files /dev/null and b/static/fonts/inter/Inter-ThinItalic.woff2 differ
diff --git a/static/logo.svg b/static/logo.svg
index e5b3b15dc..f8d88b598 100644
--- a/static/logo.svg
+++ b/static/logo.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="106" height="106"><defs><mask id="b"><path fill="#fff" d="M-60-60H60V60H-60z"/><circle id="a" cx="0" cy="-40" r="3"/><use xlink:href="#a" transform="rotate(72)"/><use xlink:href="#a" transform="rotate(144)"/><use xlink:href="#a" transform="rotate(-144)"/><use xlink:href="#a" transform="rotate(-72)"/></mask></defs><g style="display:inline;mix-blend-mode:normal"><g mask="url(#b)" transform="translate(53 53)"><circle r="43" fill="none" stroke="#000" stroke-width="9"/><path id="c" stroke="#000" stroke-linejoin="round" stroke-width="3" d="m51 0-5-3v6z"/><use xlink:href="#c" transform="rotate(11.25)"/><use xlink:href="#c" transform="rotate(22.5)"/><use xlink:href="#c" transform="rotate(33.75)"/><use xlink:href="#c" transform="rotate(45)"/><use xlink:href="#c" transform="rotate(56.25)"/><use xlink:href="#c" transform="rotate(67.5)"/><use xlink:href="#c" transform="rotate(78.75)"/><use xlink:href="#c" transform="rotate(90)"/><use xlink:href="#c" transform="rotate(101.25)"/><use xlink:href="#c" transform="rotate(112.5)"/><use xlink:href="#c" transform="rotate(123.75)"/><use xlink:href="#c" transform="rotate(135)"/><use xlink:href="#c" transform="rotate(146.25)"/><use xlink:href="#c" transform="rotate(157.5)"/><use xlink:href="#c" transform="rotate(168.75)"/><use xlink:href="#c" transform="scale(-1)"/><use xlink:href="#c" transform="rotate(-168.75)"/><use xlink:href="#c" transform="rotate(-157.5)"/><use xlink:href="#c" transform="rotate(-146.25)"/><use xlink:href="#c" transform="rotate(-135)"/><use xlink:href="#c" transform="rotate(-123.75)"/><use xlink:href="#c" transform="rotate(-112.5)"/><use xlink:href="#c" transform="rotate(-101.25)"/><use xlink:href="#c" transform="rotate(-90)"/><use xlink:href="#c" transform="rotate(-78.75)"/><use xlink:href="#c" transform="rotate(-67.5)"/><use xlink:href="#c" transform="rotate(-56.25)"/><use xlink:href="#c" transform="rotate(-45)"/><use xlink:href="#c" transform="rotate(-33.75)"/><use xlink:href="#c" transform="rotate(-22.5)"/><use xlink:href="#c" transform="rotate(-11.25)"/><path id="d" stroke="#000" stroke-linejoin="round" stroke-width="6" d="m0-35 7-7H-7z"/><use xlink:href="#d" transform="rotate(72)"/><use xlink:href="#d" transform="rotate(144)"/><use xlink:href="#d" transform="rotate(-144)"/><use xlink:href="#d" transform="rotate(-72)"/></g><g style="display:inline;mix-blend-mode:normal"><path d="M258.444 46.408a4.9 4.9 0 0 1 2 .373c3.587 1.481 7.324 7.713 9.76 13.166s3.57 10.13 3.677 14.527c.107 4.399-.814 8.518-2.826 10.577s-5.113 2.052-7.683-.106-4.561-6.368-8.024-8.992-8.073-3.424-12.85-3.424-9.444.8-12.937 3.424-5.484 6.835-8.055 8.992-5.671 2.164-7.683.106-2.933-6.178-2.826-10.577c.107-4.398 1.241-9.073 3.677-14.527s6.174-11.685 9.762-13.166 7.026 1.788 10.002 3.68 5.247 2.357 8.002 2.357c2.754 0 5.147-.49 8.062-2.369 2.37-1.527 5.083-3.973 7.942-4.041m-33.172 7.44a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5m35.793 1.3h-2.492a.15.15 0 0 0-.15.15v4.647a.15.15 0 0 1-.151.15h-4.645a.15.15 0 0 0-.15.15v2.493c0 .083.067.15.15.15h4.645a.15.15 0 0 1 .15.15v4.645c0 .084.068.15.15.15h2.493a.15.15 0 0 0 .15-.15v-4.656a.15.15 0 0 1 .15-.15h4.645q.018 0 .035.004a.15.15 0 0 0 .116-.143v-2.492a.15.15 0 0 0-.15-.15h-4.646a.15.15 0 0 1-.15-.15v-4.647a.15.15 0 0 0-.15-.15m-30.816 3.623a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5m-9.952 0a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5m4.975 4.948a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5m24.55 1.04h-4.675a.155.155 0 0 0-.156.157v2.605c0 .087.069.159.156.159h4.676a.157.157 0 0 0 .156-.159v-2.605a.155.155 0 0 0-.156-.156m-10.09 0h-4.675a.157.157 0 0 0-.158.157v2.605c0 .087.071.159.158.159h4.676a.157.157 0 0 0 .156-.159v-2.605a.155.155 0 0 0-.156-.156" style="display:inline;opacity:1;fill:#000;fill-opacity:1;stroke-width:5.31402" transform="matrix(-1 0 0 1 295.395 -13.492)"/></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 106 106" id="logo"><defs><mask id="b"><path fill="#fff" d="M-60-60H60V60H-60z"/><circle id="a" cx="0" cy="-40" r="3"/><use xlink:href="#a" transform="rotate(72)"/><use xlink:href="#a" transform="rotate(144)"/><use xlink:href="#a" transform="rotate(-144)"/><use xlink:href="#a" transform="rotate(-72)"/></mask></defs><g style="display:inline;mix-blend-mode:normal"><g mask="url(#b)" transform="translate(53 53)"><circle r="43" fill="none" stroke="currentColor" stroke-width="9"/><path id="c" stroke="currentColor" stroke-linejoin="round" stroke-width="3" d="m51 0-5-3v6z"/><use xlink:href="#c" transform="rotate(11.25)"/><use xlink:href="#c" transform="rotate(22.5)"/><use xlink:href="#c" transform="rotate(33.75)"/><use xlink:href="#c" transform="rotate(45)"/><use xlink:href="#c" transform="rotate(56.25)"/><use xlink:href="#c" transform="rotate(67.5)"/><use xlink:href="#c" transform="rotate(78.75)"/><use xlink:href="#c" transform="rotate(90)"/><use xlink:href="#c" transform="rotate(101.25)"/><use xlink:href="#c" transform="rotate(112.5)"/><use xlink:href="#c" transform="rotate(123.75)"/><use xlink:href="#c" transform="rotate(135)"/><use xlink:href="#c" transform="rotate(146.25)"/><use xlink:href="#c" transform="rotate(157.5)"/><use xlink:href="#c" transform="rotate(168.75)"/><use xlink:href="#c" transform="scale(-1)"/><use xlink:href="#c" transform="rotate(-168.75)"/><use xlink:href="#c" transform="rotate(-157.5)"/><use xlink:href="#c" transform="rotate(-146.25)"/><use xlink:href="#c" transform="rotate(-135)"/><use xlink:href="#c" transform="rotate(-123.75)"/><use xlink:href="#c" transform="rotate(-112.5)"/><use xlink:href="#c" transform="rotate(-101.25)"/><use xlink:href="#c" transform="rotate(-90)"/><use xlink:href="#c" transform="rotate(-78.75)"/><use xlink:href="#c" transform="rotate(-67.5)"/><use xlink:href="#c" transform="rotate(-56.25)"/><use xlink:href="#c" transform="rotate(-45)"/><use xlink:href="#c" transform="rotate(-33.75)"/><use xlink:href="#c" transform="rotate(-22.5)"/><use xlink:href="#c" transform="rotate(-11.25)"/><path id="d" stroke="currentColor" stroke-linejoin="round" stroke-width="6" d="m0-35 7-7H-7z"/><use xlink:href="#d" transform="rotate(72)"/><use xlink:href="#d" transform="rotate(144)"/><use xlink:href="#d" transform="rotate(-144)"/><use xlink:href="#d" transform="rotate(-72)"/></g><g style="display:inline;mix-blend-mode:normal"><path d="M258.444 46.408a4.9 4.9 0 0 1 2 .373c3.587 1.481 7.324 7.713 9.76 13.166s3.57 10.13 3.677 14.527c.107 4.399-.814 8.518-2.826 10.577s-5.113 2.052-7.683-.106-4.561-6.368-8.024-8.992-8.073-3.424-12.85-3.424-9.444.8-12.937 3.424-5.484 6.835-8.055 8.992-5.671 2.164-7.683.106-2.933-6.178-2.826-10.577c.107-4.398 1.241-9.073 3.677-14.527s6.174-11.685 9.762-13.166 7.026 1.788 10.002 3.68 5.247 2.357 8.002 2.357c2.754 0 5.147-.49 8.062-2.369 2.37-1.527 5.083-3.973 7.942-4.041m-33.172 7.44a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5m35.793 1.3h-2.492a.15.15 0 0 0-.15.15v4.647a.15.15 0 0 1-.151.15h-4.645a.15.15 0 0 0-.15.15v2.493c0 .083.067.15.15.15h4.645a.15.15 0 0 1 .15.15v4.645c0 .084.068.15.15.15h2.493a.15.15 0 0 0 .15-.15v-4.656a.15.15 0 0 1 .15-.15h4.645q.018 0 .035.004a.15.15 0 0 0 .116-.143v-2.492a.15.15 0 0 0-.15-.15h-4.646a.15.15 0 0 1-.15-.15v-4.647a.15.15 0 0 0-.15-.15m-30.816 3.623a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5m-9.952 0a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5m4.975 4.948a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5m24.55 1.04h-4.675a.155.155 0 0 0-.156.157v2.605c0 .087.069.159.156.159h4.676a.157.157 0 0 0 .156-.159v-2.605a.155.155 0 0 0-.156-.156m-10.09 0h-4.675a.157.157 0 0 0-.158.157v2.605c0 .087.071.159.158.159h4.676a.157.157 0 0 0 .156-.159v-2.605a.155.155 0 0 0-.156-.156" style="display:inline;opacity:1;fill:currentColor;fill-opacity:1;stroke-width:5.31402" transform="matrix(-1 0 0 1 295.395 -13.492)"/></g></g></svg>
diff --git a/static/minima-social-icons.svg b/static/minima-social-icons.svg
index 9f4016e70..a972bcc33 100644
--- a/static/minima-social-icons.svg
+++ b/static/minima-social-icons.svg
@@ -6,7 +6,7 @@
<symbol id="flickr" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 8c0 2.05 1.662 3.71 3.71 3.71 2.05 0 3.713-1.66 3.713-3.71S5.76 4.29 3.71 4.29C1.663 4.29 0 5.95 0 8zm8.577 0c0 2.05 1.662 3.71 3.712 3.71C14.33 11.71 16 10.05 16 8s-1.662-3.71-3.71-3.71c-2.05 0-3.713 1.66-3.713 3.71z"/></symbol>
-<symbol id="github" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8"/></symbol>
+<symbol id="github" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8" fill="currentColor"/></symbol>
<symbol id="instagram" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.05 3.233c-.04.78-.17 1.203-.28 1.485-.15.374-.32.64-.6.92-.28.28-.55.453-.92.598-.28.11-.71.24-1.49.276-.85.038-1.1.047-3.24.047s-2.39-.01-3.24-.05c-.78-.04-1.21-.17-1.49-.28-.38-.15-.64-.32-.92-.6-.28-.28-.46-.55-.6-.92-.11-.28-.24-.71-.28-1.49-.03-.84-.04-1.1-.04-3.23s.01-2.39.04-3.24c.04-.78.17-1.21.28-1.49.14-.38.32-.64.6-.92.28-.28.54-.46.92-.6.28-.11.7-.24 1.48-.28.85-.03 1.1-.04 3.24-.04zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"/></symbol>
@@ -14,11 +14,11 @@
<symbol id="pinterest" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.582 0 0 3.582 0 8c0 3.39 2.108 6.285 5.084 7.45-.07-.633-.133-1.604.028-2.295.146-.625.938-3.977.938-3.977s-.24-.48-.24-1.188c0-1.11.646-1.943 1.448-1.943.683 0 1.012.513 1.012 1.127 0 .687-.436 1.713-.662 2.664-.19.797.4 1.445 1.185 1.445 1.42 0 2.514-1.498 2.514-3.662 0-1.91-1.376-3.25-3.342-3.25-2.276 0-3.61 1.71-3.61 3.47 0 .69.263 1.43.593 1.83.066.08.075.15.057.23-.06.25-.196.8-.223.91-.035.15-.115.18-.268.11C3.516 10.46 2.89 9 2.89 7.82c0-2.52 1.834-4.84 5.287-4.84 2.774 0 4.932 1.98 4.932 4.62 0 2.76-1.74 4.98-4.16 4.98-.81 0-1.57-.42-1.84-.92l-.5 1.9c-.18.698-.67 1.57-1 2.1.75.23 1.54.357 2.37.357 4.41 0 8-3.58 8-8s-3.59-8-8-8z" fill-rule="nonzero"/></symbol>
-<symbol id="rss" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M12.8 16C12.8 8.978 7.022 3.2 0 3.2V0c8.777 0 16 7.223 16 16h-3.2zM2.194 11.61c1.21 0 2.195.985 2.195 2.196 0 1.21-.99 2.194-2.2 2.194C.98 16 0 15.017 0 13.806c0-1.21.983-2.195 2.194-2.195zM10.606 16h-3.11c0-4.113-3.383-7.497-7.496-7.497v-3.11c5.818 0 10.606 4.79 10.606 10.607z"/></symbol>
+<symbol id="rss" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M12.8 16C12.8 8.978 7.022 3.2 0 3.2V0c8.777 0 16 7.223 16 16h-3.2zM2.194 11.61c1.21 0 2.195.985 2.195 2.196 0 1.21-.99 2.194-2.2 2.194C.98 16 0 15.017 0 13.806c0-1.21.983-2.195 2.194-2.195zM10.606 16h-3.11c0-4.113-3.383-7.497-7.496-7.497v-3.11c5.818 0 10.606 4.79 10.606 10.607z" fill="currentColor"/></symbol>
<symbol id="stackoverflow" class="svg-icon" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M12.658 14.577v-4.27h1.423V16H1.23v-5.693h1.42v4.27h10.006zm-8.583-1.423h7.16V11.73h-7.16v1.424zm.173-3.235l6.987 1.46.3-1.38L4.55 8.54l-.302 1.38zm.906-3.37l6.47 3.02.602-1.3-6.47-3.02-.602 1.29zm1.81-3.19l5.478 4.57.906-1.08L7.87 2.28l-.9 1.078zM10.502 0L9.338.863l4.27 5.735 1.164-.862L10.5 0z"/></symbol>
-<symbol id="twitter" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero"/></symbol>
+<symbol id="twitter" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero" fill="currentColor"/></symbol>
<symbol id="youtube" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 7.345c0-1.294.16-2.59.16-2.59s.156-1.1.636-1.587c.608-.637 1.408-.617 1.764-.684C3.84 2.36 8 2.324 8 2.324s3.362.004 5.6.166c.314.038.996.04 1.604.678.48.486.636 1.588.636 1.588S16 6.05 16 7.346v1.258c0 1.296-.16 2.59-.16 2.59s-.156 1.102-.636 1.588c-.608.638-1.29.64-1.604.678-2.238.162-5.6.166-5.6.166s-4.16-.037-5.44-.16c-.356-.067-1.156-.047-1.764-.684-.48-.487-.636-1.587-.636-1.587S0 9.9 0 8.605v-1.26zm6.348 2.73V5.58l4.323 2.255-4.32 2.24z"/></symbol>
@@ -36,6 +36,6 @@
</symbol>
<symbol id="discord" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" viewBox="0 0 448 512">
- <path d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z"></path>
+ <path d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z" fill="currentColor"></path>
</symbol>
</svg>
diff --git a/static/social/discord.svg b/static/social/discord.svg
new file mode 100644
index 000000000..988c1ebbf
--- /dev/null
+++ b/static/social/discord.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="icon"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" fill="currentColor"/></svg>
diff --git a/static/social/github.svg b/static/social/github.svg
new file mode 100644
index 000000000..7c0ab1d92
--- /dev/null
+++ b/static/social/github.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="icon"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" fill="currentColor"/></svg>
diff --git a/static/social/rss.svg b/static/social/rss.svg
new file mode 100644
index 000000000..bd9abfe01
--- /dev/null
+++ b/static/social/rss.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="icon"><title>RSS</title><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z" fill="currentColor"/></svg>
diff --git a/static/social/twitter.svg b/static/social/twitter.svg
new file mode 100644
index 000000000..5566ea7c3
--- /dev/null
+++ b/static/social/twitter.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="icon"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z" fill="currentColor"/></svg>
diff --git a/templates/anchor-link.html b/templates/anchor-link.html
index 5a76e1cb3..918a82175 100644
--- a/templates/anchor-link.html
+++ b/templates/anchor-link.html
@@ -1 +1 @@
- <a class="anchor" href="#{{ id }}" aria-hidden="true">#</a>
+<a class="anchor" href="#{{ id }}" aria-hidden="true">#</a>
\ No newline at end of file
diff --git a/templates/includes/footer.html b/templates/includes/footer.html
index b9fb06da0..9a2f3ff65 100644
--- a/templates/includes/footer.html
+++ b/templates/includes/footer.html
@@ -1,35 +1,14 @@
-<footer class="site-footer h-card">
- <data class="u-url" href="{{ get_url(path='/') }}"></data>
-
+<footer class="site-footer" role="contentinfo">
<div class="wrapper">
+ {% if config.description %}
+ <p>{{ config.description }}</p>
+ {% endif %}
- <div class="footer-col-wrapper">
- <div class="footer-col one-half">
- <h2 class="footer-heading">{{ config.title | default(value="Minima") }}</h2>
- {% if config.extra.author or config.extra.email %}
- <ul class="contact-list">
- <li class="p-name">
- {% if config.extra.author %}
- {{ config.extra.author }}
- {% endif %}
- </li>
- {% if config.extra.email %}
- <li>
- <a class="u-email" href="mailto:{{ config.extra.email }}">{{ config.extra.email }}</a>
- </li>
- {% endif %}
- </ul>
- {% endif %}
- {% if config.description %}
- <p>{{ config.description }}</p>
- {% endif %}
- </div>
-
- <div class="footer-col one-half">
- {% include "includes/social.html" %}
- </div>
- </div>
+ <p>
+ Want something in the next newsletter?
+ <a href="https://github.com/rust-gamedev/rust-gamedev.github.io">Send us a pull request</a>
+ </p>
+ {% include "includes/social.html" %}
</div>
-
</footer>
diff --git a/templates/includes/header.html b/templates/includes/header.html
index 537f71ca4..66bddaa94 100644
--- a/templates/includes/header.html
+++ b/templates/includes/header.html
@@ -1,30 +1,10 @@
<header class="site-header">
<div class="wrapper">
- <a class="site-title" rel="author" href="/">
- <img src="{{ get_url(path='logo.svg') }}" width="48" height="48" alt="" />
- {{ config.title | default(value="Minima") }}
+ <a class="site-title" rel="author" href="{{ get_url(path='/') }}">
+ <svg style="width: 2.6em; height: 2.6em" aria-label="Rust GameDev Logo">
+ <use href="{{ get_url(path='logo.svg') }}#logo" aria-hidden="true"></use>
+ </svg>
+ {{ config.title }}
</a>
-
- {% set pages = get_section(path="pages/_index.md") %}
- {% if pages and pages.pages | length > 0 %}
- <nav class="site-nav">
- <input type="checkbox" id="nav-trigger" class="nav-trigger" />
- <label for="nav-trigger">
- <span class="menu-icon">
- <svg viewBox="0 0 18 15" width="18px" height="15px">
- <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
- </svg>
- </span>
- </label>
-
- <div class="trigger">
- {% for page in pages.pages %}
- {% if page.title %}
- <a class="page-link" href="{{ page.permalink }}">{{ page.title }}</a>
- {% endif %}
- {% endfor %}
- </div>
- </nav>
- {% endif %}
</div>
</header>
diff --git a/templates/includes/home.html b/templates/includes/home.html
index fd33ea712..d29e57372 100644
--- a/templates/includes/home.html
+++ b/templates/includes/home.html
@@ -15,9 +15,9 @@
</p>
<p>
Join us on
- <a href="https://github.com/{{ social.github | urlencode }}/wg"><svg class="svg-icon"><use xlink:href="{{ get_url(path='minima-social-icons.svg#github') }}"></use></svg> GitHub</a>
+ <a href="https://github.com/{{ social.github | urlencode }}/wg" class="link-with-icon"><svg class="svg-icon" aria-hidden="true"><use xlink:href="{{ get_url(path='social/github.svg#icon') }}"></use></svg><span>GitHub</span></a>
or
- <a href="https://discord.gg/{{ social.discord | urlencode }}"><svg class="svg-icon"><use xlink:href="{{ get_url(path='minima-social-icons.svg#discord') }}"></use></svg> Discord</a>,
+ <a href="https://discord.gg/{{ social.discord | urlencode }}" class="link-with-icon"><svg class="svg-icon" aria-hidden="true"><use xlink:href="{{ get_url(path='social/discord.svg#icon') }}"></use></svg><span>Discord</span></a>,
and help shape the future of game development in Rust!
</p>
</div>
@@ -39,7 +39,7 @@ <h2 class="post-list-heading">{{ section.title | default(value="Latest Blog Post
<a class="btn" id="all-blog-posts" href="{{ get_url(path='blog/') }}">All Blog Posts</a>
<a href="{{ get_url(path='rss.xml') }}">
<svg class="svg-icon orange"><use xlink:href="{{ get_url(path='minima-social-icons.svg#rss') }}"></use></svg><span>Subscribe</span>
- </a>
+ </a>
{% include "includes/email_signup.html" %}
</p>
</div>
diff --git a/templates/includes/post_list.html b/templates/includes/post_list.html
index 6d3227875..a66bce93a 100644
--- a/templates/includes/post_list.html
+++ b/templates/includes/post_list.html
@@ -1,6 +1,6 @@
{% macro post_list(posts, placeholder) %}
{% if posts | length > 0 %}
- <ul class="post-list">
+ <ul class="post-list _semantic">
{% for post in posts %}
<li>
<h3>
@@ -10,7 +10,9 @@ <h3>
</h3>
{% if post.date %}
{% set date_format = config.extra.date_format | default(value="%b %-d, %Y") %}
- <span class="post-meta">{{ post.date | date(format=date_format) }}</span>
+ <time datetime="{{ post.date | date(format='%+') }}" class="post-meta">
+ {{ post.date | date(format=date_format) }}
+ </time>
{% endif %}
{% if config.extra.posts.show_summaries %}
diff --git a/templates/includes/social.html b/templates/includes/social.html
index 7fe6169c0..dbcce93fc 100644
--- a/templates/includes/social.html
+++ b/templates/includes/social.html
@@ -1,19 +1,8 @@
{% set social = config.extra.social_links -%}
-<ul class="social-links">
- {% if social.dribbble %}<li><a href="https://dribbble.com/{{ social.dribbble | urlencode }}" title="{{ social.dribbble }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#dribbble') }}"></use></svg></a></li>{% endif %}
- {% if social.facebook %}<li><a href="https://www.facebook.com/{{ social.facebook | urlencode }}" title="{{ social.facebook }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#facebook') }}"></use></svg></a></li>{% endif %}
- {% if social.flickr %}<li><a href="https://www.flickr.com/photos/{{ social.flickr | urlencode }}" title="{{ social.flickr }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#flickr') }}"></use></svg></a></li>{% endif %}
- {% if social.github %}<li><a href="https://github.com/{{ social.github | urlencode }}" title="{{ social.github }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#github') }}"></use></svg> GitHub (rust-gamedev)</a></li>{% endif %}
- {% if social.instagram %}<li><a href="https://www.instagram.com/{{ social.instagram | urlencode }}" title="{{ social.instagram }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#instagram') }}"></use></svg></a></li>{% endif %}
- {% if social.linkedin %}<li><a href="https://www.linkedin.com/in/{{ social.linkedin | urlencode }}" title="{{ social.linkedin }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#linkedin') }}"></use></svg></a></li>{% endif %}
- {% if social.pinterest %}<li><a href="https://www.pinterest.com/{{ social.pinterest | urlencode }}" title="{{ social.pinterest }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#pinterest') }}"></use></svg></a></li>{% endif %}
- {% if social.mastodon %}{% for mst in social.mastodon %}{% if mst.username and mst.instance %}<li><a rel="me" href="https://{{ mst.instance | urlencode}}/@{{ mst.username | urlencode }}" title="{{ mst.username }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#mastodon') }}"></use></svg></a></li>{% endif %}{% endfor %}{% endif %}
- {% if social.twitter %}<li><a href="https://twitter.com/{{ social.twitter | urlencode }}" title="{{ social.twitter }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#twitter') }}"></use></svg> Twitter (rust_gamedev)</a></li>{% endif %}
- {% if social.youtube %}<li><a href="https://www.youtube.com/{{ social.youtube | urlencode }}" title="{{ social.youtube }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#youtube') }}"></use></svg></a></li>{% endif %}
- {% if social.youtube_chanel -%}<li><a href="https://www.youtube.com/channel/{{ social.youtube_channel | urlencode }}" title="{{ social.youtube_channel_name | urlencode | default(value='YouTube') }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#youtube') }}"></use></svg></a></li>{% endif %}
- {% if social.telegram %}<li><a href="https://t.me/{{ social.telegram | urlencode }}" title="{{ social.telegram }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#telegram') }}"></use></svg></a></li>{% endif %}
- {% if social.microdotblog %}<li><a rel="me" href="https://micro.blog/{{ social.microdotblog | urlencode }}" title="{{ social.microdotblog }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#microdotblog') }}"></use></svg></a></li>{% endif %}
- {% if social.discord %}<li><a href="https://discord.gg/{{ social.discord | urlencode }}" title="Discord"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#discord') }}"></use></svg> Discord (#wg-gamedev)</a></li>{% endif %}
- {% if social.rss %}<li><a href="{{ get_url(path='rss.xml') }}" title="{{ social.rss }}"><svg class="svg-icon grey"><use xlink:href="{{ get_url(path='minima-social-icons.svg#rss') }}"></use></svg> RSS feed</a></li>{% endif %}
+<ul class="social-links _semantic">
+ {% if social.github %}<li><a href="https://github.com/{{ social.github | urlencode }}" class="link-with-icon"><svg class="svg-icon" title="GitHub" aria-label="GitHub" role="img"><use xlink:href="{{ get_url(path='social/github.svg#icon') }}" aria-hidden="true"></use></svg><span>rust-gamedev</span></a></li>{% endif %}
+ {% if social.twitter %}<li><a href="https://twitter.com/{{ social.twitter | urlencode }}" class="link-with-icon"><svg class="svg-icon" title="Twitter" aria-label="Twitter" role="img"><use xlink:href="{{ get_url(path='social/twitter.svg#icon') }}" aria-hidden="true"></use></svg><span>rust_gamedev</span></a></li>{% endif %}
+ {% if social.discord %}<li><a href="https://discord.gg/{{ social.discord | urlencode }}" class="link-with-icon"><svg class="svg-icon" title="Discord" aria-label="Discord" role="img"><use xlink:href="{{ get_url(path='social/discord.svg#icon') }}" aria-hidden="true"></use></svg>#wg-gamedev</span></a></li>{% endif %}
+ {% if social.rss %}<li><a href="{{ get_url(path='rss.xml') }}" class="link-with-icon"><svg class="svg-icon" title="RSS" aria-label="RSS" role="img"><use xlink:href="{{ get_url(path='social/rss.svg#icon') }}" aria-hidden="true"></use></svg><span>gamedev.rs</span></a></li>{% endif %}
</ul>
diff --git a/templates/index.html b/templates/index.html
index 270cd5003..5371e7aac 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,6 +6,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="color-scheme" content="dark light">
{% block seo %}
<title>{{ config.title | default(value="Minima") }}</title>
@@ -28,7 +29,8 @@
<meta property="og:image:height" content="200">
<meta property="og:site_name" content="{{ config.title | default(value="Minima") }}">
- <link rel="stylesheet" href="{{ get_url(path="style.css") }}">
+ <link rel="stylesheet" href="{{ get_url(path="style.css", cachebust=true) }}">
+
<link rel="apple-touch-icon" sizes="180x180" href="{{ get_url(path='apple-touch-icon.png') }}">
<link rel="icon" type="image/svg+xml" href="{{get_url(path="favicon.svg")}}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ get_url(path="favicon-32x32.png") }}">
@@ -42,12 +44,18 @@
{% if config.extra.google_analytics %}
{% include "includes/google-analytics.html" %}
{% endif-%}
+
+ {# Syntax Theme #}
+ <link rel="stylesheet" type="text/css" href="{{ get_url(path="syntax-theme-dark.css") }}" media="(prefers-color-scheme: dark)">
+ <link rel="stylesheet" type="text/css" href="{{ get_url(path="syntax-theme-light.css") }}" media="(prefers-color-scheme: light)">
</head>
<body>
+ <a href="#main" tabindex="0" class="skip-link">Skip to content</a>
+
{% include "includes/header.html" %}
- <main class="page-content" aria-label="Content">
+ <main class="page-content" aria-label="Content" id="main">
{% block content %}
{% include "includes/home.html" %}
{% endblock content %}
diff --git a/templates/post.html b/templates/post.html
index 55ff390ad..6d60491af 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -18,17 +18,12 @@
<article class="post h-entry wrapper" itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header">
<h1 class="post-title p-name" itemprop="name headline">{{ page.title }}</h1>
- <p class="post-meta">
- {% if page.date %}
- <time class="dt-published" datetime="{{ page.date | date(format='%+') }}" itemprop="datePublished">
- {% set date_format = config.extra.date_format | default(value="%b %-d, %Y") %}
- {{ page.date | date(format=date_format) }}
- </time>
- {% endif %}
- {% if page.author %}
- • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
- {% endif %}
- </p>
+ {% if page.date %}
+ <time class="dt-published" datetime="{{ page.date | date(format='%+') }}" itemprop="datePublished">
+ {% set date_format = config.extra.date_format | default(value="%b %-d, %Y") %}
+ {{ page.date | date(format=date_format) }}
+ </time>
+ {% endif %}
</header>
<div class="post-content e-content" itemprop="articleBody">
diff --git a/templates/shortcodes/image_figure.html b/templates/shortcodes/image_figure.html
index 1e8b69b1c..64e3bb0df 100644
--- a/templates/shortcodes/image_figure.html
+++ b/templates/shortcodes/image_figure.html
@@ -40,7 +40,7 @@
<figure>
{% if link %}<a href="{{link}}">{% endif %}
- <img src="{{get_url(path=page.colocated_path ~ src)}}" alt="{{alt}}">
+ <img src="{{get_url(path=page.colocated_path ~ src)}}" alt="{{alt}}">
{% if link %}</a>{% endif %}
{% if caption %}