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
+
+
+Expand for more :)
+
+Amet luctus venenatis lectus magna fringilla urna porttitor. Ultricies mi quis hendrerit dolor.
+
+
+
+## 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 .
+
+*,
+*::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 @@
+
+
+
+
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 @@
-
\ No newline at end of file
+
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 @@
-
+
@@ -14,11 +14,11 @@
-
+
-
+
@@ -36,6 +36,6 @@
-
+
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 @@
+
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 @@
+
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 @@
+
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 @@
+
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 @@
- #
+#
\ 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 @@
-