Redesign

.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

.gitignore

@@ -1,3 +1,4 @@
 public/
 .idea/
 *.DS_Store
+/static/syntax-theme-*.css

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]

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"

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"

content/pages/_index.md

@@ -1,4 +1,4 @@
 +++
 redirect_to = "/"
-insert_anchor_links = "right"
-+++
+insert_anchor_links = "left"
++++

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

content/posts/_index.md

@@ -1,4 +1,4 @@
 +++
 redirect_to = "/"
-insert_anchor_links = "right"
+insert_anchor_links = "left"
 +++

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;
+ }
+}

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"); }