Complete rewrite

2022-07-14 12:12:30 +02:00 · 2022-07-14 12:12:30 +02:00 · a3f7c625c2
parent 8071fdf37a
commit a3f7c625c2
26 changed files with 864 additions and 158 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,3 +2,6 @@
 .jekyll-metadata
 Gemfile.lock
 _site
+source/_pages/*
+!source/_pages/index.html
+source/.jekyll-image-optim-cache
--- a/3
+++ b/3
@ -2,7 +2,10 @@

 source "https://rubygems.org"

+gem "jekyll-toc", "~> 0.17.1"
 gem "jekyll", "~> 4.2"
 gem "kramdown-math-katex", "~> 1.0"
 gem "rouge", "~> 3.27"
 gem "webrick", "~> 1.7"
+gem "image_optim", "~> 0.25"
+gem "image_optim_pack", "~> 0.5.1"
--- a/_config.yml
+++ b/_config.yml
@ -1,5 +1,39 @@
+timezone: Europe/Berlin
+
 source: 'source'
+layouts_dir: _layouts
 keep_files: ['cv.pdf']
+
+collections:
+  pages:
+    output: true
+    permalink: /:collection/:title/
+    order:
+      - Links.md
+
+defaults:
+  -
+    scope:
+      path: "_pages/*.md"
+    values:
+      layout: "page"
+      toc: true
+
+plugins:
+  - jekyll-toc
+
+toc:
+  max_level: 1
+
+jekyll_image_optim:
+  image_optim:
+    allow_lossy: true
+    advpng:
+      level: 2
+    pngout: false
+    svgo: false
+    oxipng: false
+
 kramdown:
    syntax_highlighter: rouge
    syntax_highlighter_opts:
--- a/source/404.html
+++ b/source/404.html
@ -0,0 +1,17 @@
+---
+title: Page not found
+layout: null
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {% include header.html %}
+    <link rel="stylesheet" href="/css/404.css" />
+  </head>
+
+  <body>
+    <h1>This page was lost in the vampire castle...</h1>
+    <a href="/">Return</a>
+  </body>
+</html>
--- a/source/_includes/header.html
+++ b/source/_includes/header.html
@ -0,0 +1,10 @@
+<meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<link rel="stylesheet" href="/css/common.css" />
+<link rel="shortcut icon" href="/assets/favicon.png" type="image/x-icon" />
+
+<meta name="author" content="Agatha" />
+<meta name="description" content="{{ page.title }}" />
+<meta property="og:image" itemprop="image" content="/assets/favicon.png" />
--- a/source/_layouts/page.html
+++ b/source/_layouts/page.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {% include header.html %}
+    <style>
+      @import "/css/paramount-dark.css";
+    </style>
+    <style>
+      @import "/css/paramount-light.css" (prefers-color-scheme: light);
+    </style>
+    <link rel="stylesheet" href="/css/page.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css"
+      integrity="sha256-TThEtR+XalhWKkfF383YLOrI50NGNeIqrzS+q08afrY="
+      media="print"
+      onload="this.media='all'"
+      crossorigin="anonymous"
+    />
+
+    <title>{{ page.title }}</title>
+  </head>
+
+  <body>
+    <div class="vertical">
+      <div class="contents">
+        {% if page.title%}
+        <h1 id="mainheader">{{page.title}}</h1>
+        {% endif %} {{ content | safe | inject_anchors }}
+      </div>
+      <footer>
+        <p>
+          Agatha Valentine Lovelace<br />{{ page.date | date_to_string:
+          "ordinal", "US" }}
+        </p>
+        <div>
+          <a href="/">Main Page</a>
+          <a href="/pages">All Pages</a>
+        </div>
+      </footer>
+    </div>
+    <div class="side">
+      {% capture toc %} {% toc %} {% endcapture %}
+      <!-- Only show table of contents if not empty -->
+      {% if toc contains "toc-entry" %}
+      <div class="toc-full">
+        <p><i>Contents</i></p>
+        {{ toc }}
+      </div>
+      {% endif %}
+      <div class="navigation">
+        <p><i>Other Pages</i></p>
+        <ul>
+          {% for page in site.pages %} {% if page.hide != true %}
+          <li>
+            <a href="{{ page.url }}">{{ page.title }}</a>
+          </li>
+          {% endif %} {% endfor %}
+        </ul>
+      </div>
+    </div>
+  </body>
+</html>
--- a/source/_pages/index.html
+++ b/source/_pages/index.html
@ -0,0 +1,28 @@
+---
+title: Page List
+layout: null
+hide: true
+permalink: /:collection/index.html
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {% include header.html %}
+    <link rel="stylesheet" href="/css/pageindex.css" />
+    <title>Pages</title>
+  </head>
+
+  <body>
+    <h1>Page List</h1>
+
+    <ul>
+      {% for page in site.pages %} {% if page.hide != true %} {% if page.title
+      != "Page List"%}
+      <li>
+        <a href="{{ page.url }}">{{ page.title }}</a>
+      </li>
+      {% endif %} {% endif %} {% endfor %}
+    </ul>
+  </body>
+</html>
--- a/source/_plugins/jekyll-image-optim.rb
+++ b/source/_plugins/jekyll-image-optim.rb
@ -0,0 +1,71 @@
+# Copyright 2018 Shane F. Carr
+#
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files (the "Software"), to deal
+# in the Software without restriction, including without limitation the rights
+# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+# copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+#
+# The above copyright notice and this permission notice shall be included in
+# all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+# SOFTWARE.
+
+require "digest"
+require "fileutils"
+require "image_optim"
+require "yaml"
+
+Jekyll::Hooks.register :site, :pre_render do |site|
+	# Load configuration options
+	config = YAML::load_file("_config.yml")
+	config = config["jekyll_image_optim"] || {}
+	image_optim_options = config["image_optim"] || {}
+	cache_relative_dir = config["cache_dir"] || ".jekyll-image-optim-cache"
+	cache_dir = File.join(site.source, cache_relative_dir)
+	out_dir = File.join(cache_dir, "out")
+	index_yaml_path = File.join(cache_dir, "index.yml")
+	FileUtils.mkdir_p(cache_dir)
+	FileUtils.mkdir_p(out_dir)
+	FileUtils.touch(index_yaml_path)
+	cache_index = YAML::load_file(index_yaml_path) || {}
+
+	# Exclude the cache directory from the jekyll watch
+	site.exclude << cache_relative_dir
+
+	# Process the images
+	image_optim = ImageOptim.new(image_optim_options)
+	site.static_files.map! do |static_file|
+		if not image_optim.optimizable?(static_file.path)
+			# Not an image file; no change necessary
+			next static_file
+		end
+
+		relative_path = static_file.relative_path
+		new_path = File.join(out_dir, relative_path)
+		cc = cache_index[relative_path]
+		image_md5 = Digest::MD5.file(static_file.path).hexdigest
+
+		if not cc or not File.exists?(new_path) or cc[:md5] != image_md5 or cc[:options] != image_optim_options
+			# Need to compute the optimized image
+			puts "Optimizing image: #{relative_path}"
+			FileUtils.mkdir_p(File.dirname(new_path))
+			FileUtils.cp(static_file.path, new_path)
+			image_optim.optimize_image!(new_path)
+			cache_index[relative_path] = { md5: image_md5, options: image_optim_options }
+
+			# Save the cache index file (do this for every image to allow restart after an interrupt)
+			File.open(index_yaml_path, "w") { |f| f.write(cache_index.to_yaml) }
+		end
+
+		# Replace the Jekyll::StaticFile to point to the new location
+		next Jekyll::StaticFile.new(site, out_dir, File.dirname(relative_path), File.basename(relative_path))
+	end
+end
--- a/source/_plugins/kramdown-image.rb
+++ b/source/_plugins/kramdown-image.rb
@ -0,0 +1,12 @@
+# https://github.com/gettalong/kramdown/issues/98#issuecomment-495169800
+
+require 'kramdown/converter/html'
+
+module StandaloneImages
+  def convert_p(el, indent)
+    return super unless el.children.size == 1 && (el.children.first.type == :img || (el.children.first.type == :html_element && el.children.first.value == "img"))
+    convert(el.children.first, indent)
+  end
+end
+
+Kramdown::Converter::Html.prepend StandaloneImages
--- a/source/assets/agatha-dark.png
+++ b/source/assets/agatha-dark.png
--- a/source/assets/agatha-light.png
+++ b/source/assets/agatha-light.png
--- a/source/assets/anchor-light.svg
+++ b/source/assets/anchor-light.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" class="octicon octicon-link" height="20" width="20" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#555a84"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>
--- a/source/assets/anchor.svg
+++ b/source/assets/anchor.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" class="octicon octicon-link" height="20" width="20" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#9AA6CB"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>
--- a/source/assets/bg-noise-dark.png
+++ b/source/assets/bg-noise-dark.png
--- a/source/assets/bg-noise-light.png
+++ b/source/assets/bg-noise-light.png
--- a/source/css/404.css
+++ b/source/css/404.css
@ -0,0 +1,76 @@
+body {
+  padding-left: 5em;
+  padding-top: 5em;
+  max-width: 70%;
+}
+
+h1 {
+  color: var(--accent-dark);
+  font-family: "Cinzel Decorative";
+  font-size: 40px;
+  font-weight: normal;
+  line-height: 1;
+
+  max-width: 600px;
+
+  padding-bottom: 25px;
+  margin-bottom: 30px;
+
+  border-bottom: 1px solid var(--accent);
+}
+
+h1::first-letter {
+  font-size: 55px;
+}
+
+a {
+  font-family: "Crimson";
+  font-weight: normal;
+  text-decoration: none;
+  font-size: 1.8em;
+
+  color: var(--url);
+}
+
+a::before {
+  content: "◆";
+  font-size: 0.5em;
+  padding-right: 3px;
+  position: relative;
+  bottom: 4px;
+}
+
+a:hover {
+  animation: glow 0.2s ease-in-out both;
+}
+html {
+  height: 100%;
+  box-shadow: inset 0 0 100px #02020470;
+}
+
+* {
+  filter: drop-shadow(20px 0 3px rgba(95, 95, 153, 0.36));
+}
+
+/* animations */
+
+@keyframes glow {
+  from {
+    font-weight: normal;
+  }
+
+  to {
+    filter: drop-shadow(0.5px 0.5px 2px);
+  }
+}
+
+/* small screens */
+
+@media (max-width: 600px) {
+  body {
+    padding-top: 5%;
+    padding-left: 5%;
+    padding-right: 5%;
+    max-width: unset;
+  }
+}
--- a/source/css/common.css
+++ b/source/css/common.css
@ -1,71 +1,79 @@
 /* Fonts */

@font-face {
-    font-family: "Cinzel Decorative";
-    src: url(../fonts/CinzelDecorative-Regular.ttf);
-    font-weight: normal;
+  font-family: "Cinzel Decorative";
+  src: url(../fonts/CinzelDecorative-Regular.ttf);
+  font-weight: normal;
 }

@font-face {
-    font-family: "Cinzel Decorative";
-    src: url(../fonts/CinzelDecorative-Bold.ttf);
-    font-weight: bold;
+  font-family: "Cinzel Decorative";
+  src: url(../fonts/CinzelDecorative-Bold.ttf);
+  font-weight: bold;
 }

@font-face {
-    font-family: "Crimson";
-    src: url(../fonts/Crimson-Roman.otf);
-    font-weight: normal;
-    font-style: normal;
+  font-family: "Crimson";
+  src: url(../fonts/Crimson-Roman.otf);
+  font-weight: normal;
+  font-style: normal;
 }

@font-face {
-    font-family: "Crimson";
-    src: url(../fonts/Crimson-Bold.otf);
-    font-weight: bold;
-    font-style: normal;
+  font-family: "Crimson";
+  src: url(../fonts/Crimson-Bold.otf);
+  font-weight: bold;
+  font-style: normal;
 }

@font-face {
-    font-family: "Crimson";
-    src: url(../fonts/Crimson-Italic.otf);
-    font-weight: normal;
-    font-style: italic;
+  font-family: "Crimson";
+  src: url(../fonts/Crimson-Italic.otf);
+  font-weight: normal;
+  font-style: italic;
 }

@font-face {
-    font-family: "Crimson";
-    src: url(../fonts/Crimson-BoldItalic.otf);
-    font-weight: bold;
-    font-style: italic;
+  font-family: "Crimson";
+  src: url(../fonts/Crimson-BoldItalic.otf);
+  font-weight: bold;
+  font-style: italic;
 }

 /* Colors */

+html {
+  scrollbar-color: var(--accent) var(--bg);
+  background: url(../assets/bg-noise-dark.png) repeat;
+  background-color: var(--bg);
+}
+
 :root {
-    --bg: #19121F;
-    --accent: #9AA6CB;
-    --accent-dark: #747E9D;
-    --text: #D5D6E8;
-    --url: #F5E8C9;
+  --bg: #16121f;
+  --bg-code: #110e18;
+  --accent: #9aa6cb;
+  --accent-dark: #747e9d;
+  --text: #d5d6e8;
+  --url: var(--accent);
 }

@media (prefers-color-scheme: light) {
-    :root {
+  :root {
+    --bg: #b6b7d4;
+    --bg-code: #a5a6c5;
+    --accent: #555a84;
+    --accent-dark: #464b73;
+    --text: #16121f;
+    --url: var(--accent);
+  }

-    }
-
-    html {
-
-    }
-}
-
-html {
-    background: url(../assets/bg-noise-dark.png) repeat;
+  html {
+    background: url(../assets/bg-noise-light.png);
    background-color: var(--bg);
+  }
 }

 ::selection {
-    color: var(--bg);
-    background: var(--accent);
-}
+  color: var(--bg);
+  background: var(--accent);
+}
--- a/source/css/index.css
+++ b/source/css/index.css
@ -1,185 +1,187 @@
 .centered {
-    position: absolute;
-    display: flex;
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
+  position: absolute;
+  display: flex;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
 }

 .text {
-    margin-top: 5em;
-    width: 400px;
+  margin-top: 5em;
+  width: 400px;
 }

 h1 {
-    font-family: 'Cinzel Decorative';
-    color: var(--accent);
-    width: min-content;
-    font-size: 55px;
-    font-weight: normal;
-    line-height: 1;
-    margin-bottom: 0;
+  font-family: "Cinzel Decorative";
+  color: var(--accent);
+  width: min-content;
+  font-size: 55px;
+  font-weight: normal;
+  line-height: 1;
+  margin-bottom: 0;
 }

 h1 span {
-    font-size: 75px;
+  font-size: 75px;
 }

-h3, p {
-    font-family: 'Crimson';
-    font-weight: normal;
+h3,
+p {
+  font-family: "Crimson";
+  font-weight: normal;
 }

 h3 {
-    color: var(--accent-dark);
-    font-size: 30px;
-    margin-top: 0.2em;
+  color: var(--accent-dark);
+  font-size: 30px;
+  margin-top: 0.2em;
 }

 p {
-    margin-top: 2em;
-    font-size: 25px;
-    line-height: 1.1;
-    color: var(--text);
+  margin-top: 2em;
+  font-size: 25px;
+  line-height: 1.1;
+  color: var(--text);
 }

 abbr {
-    text-decoration: none;
-    font-style: italic;
-    animation: blink 5s linear infinite;
+  text-decoration: none;
+  font-style: italic;
+  animation: blink 5s linear infinite;
 }

 picture img {
-    height: 700px;
+  height: 700px;
 }

 /* Links menu */

 details {
-    margin-top: 1.5em;
-    width: max-content;
+  margin-top: 1.5em;
+  width: max-content;
 }

 details a {
-    opacity: 0;
-    margin: 0 8px;
+  opacity: 0;
+  margin: 0 8px;
 }

 details * {
-    display: inline-block;
+  display: inline-block;
 }

 details[open] a {
-    opacity: 100;
-    transition: opacity 0.2s ease-in-out;
+  opacity: 100;
+  transition: opacity 0.2s ease-in-out;
 }

-details, details * {
-    font-family: 'Crimson';
-    font-weight: normal;
-    font-size: 26px;
-    text-decoration: none;
+details,
+details * {
+  font-family: "Crimson";
+  font-weight: normal;
+  font-size: 26px;
+  text-decoration: none;

-    color: var(--url);
+  color: var(--url);

-    height: min-content;
-    cursor: pointer;
-    user-select: none;
+  height: min-content;
+  cursor: pointer;
+  user-select: none;
 }

 details summary::before {
-    content: '⦿ ';
-    filter: drop-shadow(0 0 5px);
+  content: "⦿ ";
+  filter: drop-shadow(0 0 5px);
 }

 details[open] > summary {
-    visibility: hidden;
-    font-size: 0;
+  visibility: hidden;
+  font-size: 0;
 }

 details[open] > summary::after {
-    content: '←';
-    visibility: visible;
-    font-size: 26px;
+  content: "←";
+  visibility: visible;
+  font-size: 26px;

-    position: relative;
-    top: -2px;
+  position: relative;
+  top: -2px;
 }

 details *:hover {
-    animation: glow 0.2s ease-in-out both;
+  animation: glow 0.2s ease-in-out both;
 }

 /* animations */

@keyframes glow {
-    from {
-        font-weight: normal;
-    }
-    to {
-        filter: drop-shadow(0.5px 0.5px 2px) ;
-    }
+  from {
+    font-weight: normal;
+  }
+  to {
+    filter: drop-shadow(0.5px 0.5px 2px);
+  }
 }

@keyframes blink {
-    80% {
-        filter: drop-shadow(0 0 1px) opacity(80%);
-    }
+  80% {
+    filter: drop-shadow(0 0 1px) opacity(80%);
+  }
 }

 /* mobile screens */

@media (max-width: 880px) {
-    .centered {
-        display: block;
-        top: -20px;
-        -webkit-transform: translate(-50%, 0);
-        transform: translate(-50%, 0);
-    }
+  .centered {
+    display: block;
+    top: -20px;
+    -webkit-transform: translate(-50%, 0);
+    transform: translate(-50%, 0);
+  }

-    .text {
-        margin-top: unset;
-        position: absolute;
-        left: 50%;
-        -webkit-transform: translate(-50%, -60%);
-        transform: translate(-50%, -60%);
+  .text {
+    margin-top: unset;
+    position: absolute;
+    left: 50%;
+    -webkit-transform: translate(-50%, -60%);
+    transform: translate(-50%, -60%);

-        width: 320px;
-        padding-bottom: 4em;
-    }
-    h1 {
-        filter: drop-shadow(5px 5px 5px var(--bg));
-    }
+    width: 320px;
+    padding-bottom: 4em;
+  }
+  h1 {
+    filter: drop-shadow(5px 5px 5px var(--bg));
+  }
 }

@media (max-width: 500px) {
-    picture img {
-        max-width: 100vw;
-        height: auto;
-    }
+  picture img {
+    max-width: 100vw;
+    height: auto;
+  }
 }

@media (max-width: 360px) {
-    .text {
-        position: unset;
-        left: unset;
-        -webkit-transform: translate(0, -60%);
-        transform: translate(0, -60%);
+  .text {
+    position: unset;
+    left: unset;
+    -webkit-transform: translate(0, -60%);
+    transform: translate(0, -60%);

-        width: fit-content;
-        margin-left: 2em;
-    }
+    width: fit-content;
+    margin-left: 2em;
+  }

-    h1 {
-        font-size: 40px;
-    }
+  h1 {
+    font-size: 40px;
+  }

-    h1 span {
-        font-size: 60px;
-    }
+  h1 span {
+    font-size: 60px;
+  }

-    details {
-        width: fit-content;
-    }
-}
+  details {
+    width: fit-content;
+  }
+}
--- a/source/css/page.css
+++ b/source/css/page.css
@ -0,0 +1,295 @@
+@font-face {
+  font-family: "Iosevka Gothic";
+  src: url(../fonts/iosevka-gothic-regular.woff2);
+  font-weight: normal;
+}
+
+body {
+  position: absolute;
+  display: flex;
+  left: 50%;
+  -webkit-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+
+  padding-top: 2em;
+  padding-bottom: 2em;
+}
+
+/* headers */
+
+#mainheader {
+  font-size: 2.6em;
+}
+
+#mainheader::first-letter {
+  font-size: 1.2em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--accent);
+  font-family: "Cinzel Decorative";
+  font-weight: normal;
+  line-height: 1;
+}
+
+h1 {
+  font-size: 35px;
+}
+
+h1::first-letter {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 25px;
+}
+
+h3 {
+  font-size: 20px;
+}
+
+/* common text */
+
+p,
+ul,
+ol,
+table {
+  color: var(--text);
+  font-family: "Crimson", serif;
+  font-size: 1.2rem;
+  max-width: 1000px;
+}
+
+strong {
+  font-weight: bolder;
+  text-shadow: 0 0.5px;
+}
+
+/* why'd you leave the keys upon the table */
+
+table {
+  border-collapse: collapse;
+  max-width: 700px;
+  padding: 5px;
+  border: 2px solid var(--border);
+}
+
+td {
+  border: 2px solid var(--border);
+  padding: 0 5px;
+}
+
+/* code blocks */
+
+code * {
+  font-size: 1rem;
+  font-family: "Iosevka Gothic";
+}
+
+:not(pre) > code {
+  padding: 2px;
+  border-radius: 3px;
+  font-family: "Iosevka Gothic";
+}
+
+img {
+  display: block;
+  margin: 5px auto;
+  border-radius: 2px;
+  border: 15px solid var(--bg-code);
+  filter: drop-shadow(0 0 5px var(--bg));
+}
+
+pre {
+  overflow-x: auto;
+}
+
+.lineno {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.highlight {
+  padding: 0 5px;
+  border-radius: 5px;
+  background-color: var(--bg-code);
+}
+
+/* header anchors */
+
+a[class="anchor"]::before {
+  display: none;
+}
+
+a[class="anchor"] span {
+  content: url(../assets/anchor.svg);
+  margin-right: 5px;
+  margin-left: -25px;
+  margin-bottom: 2px;
+  opacity: 0%;
+  transition: opacity 0.2s ease-in-out;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+@media (prefers-color-scheme: light) {
+  a[class="anchor"] span {
+    content: url(../assets/anchor-light.svg);
+  }
+}
+
+:is(h1, h2, h3, h4, h5, h6):hover a[class="anchor"] span {
+  opacity: 80%;
+  transition: opacity 0.2s ease-in-out;
+}
+
+a {
+  font-family: "Crimson";
+  font-weight: normal;
+  text-decoration: none;
+
+  color: var(--url);
+}
+
+.contents a::before {
+  content: "◆";
+  font-size: 0.5em;
+  padding-right: 3px;
+  position: relative;
+  bottom: 4px;
+}
+
+a:hover {
+  animation: glow 0.2s ease-in-out both;
+}
+
+/* animations */
+
+@keyframes glow {
+  from {
+    font-weight: normal;
+  }
+
+  to {
+    filter: drop-shadow(0.5px 0.5px 2px);
+  }
+}
+
+/* sidebar */
+
+.side p {
+  font-size: 1.5em;
+  margin-bottom: 0;
+}
+
+.side a,
+footer a {
+  color: var(--text);
+  filter: brightness(90%);
+  text-decoration: none;
+}
+
+.side a:hover {
+  animation: none;
+  text-decoration: underline;
+}
+
+.side ul {
+  padding-left: 18px;
+  margin-top: 6px;
+}
+
+.side li {
+  list-style: none;
+}
+
+#toc {
+  padding-bottom: 20px;
+  width: 85%;
+  border-bottom: 1px solid var(--text);
+}
+
+.contents {
+  min-height: calc(100vh - 230px);
+}
+
+footer {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 2em;
+  padding-top: 0.5em;
+  border-top: 1px solid var(--text);
+}
+
+footer > * {
+  font-size: 1.2em;
+  margin-top: 1em;
+}
+
+footer div {
+  display: grid;
+  height: min-content;
+}
+
+/* large screens */
+
+@media (min-width: 1330px) {
+  .contents {
+    max-width: 700px;
+  }
+
+  img {
+    max-width: 95%;
+  }
+
+  .side {
+    left: 100%;
+    margin-left: 2em;
+    margin-top: 100px;
+    position: absolute;
+    width: 270px;
+  }
+}
+
+/* small screens */
+
+@media (max-width: 1330px) {
+  body {
+    display: unset;
+    max-width: 800px;
+  }
+
+  img {
+    width: 90%;
+  }
+
+  footer {
+    display: none;
+  }
+}
+
+/* smaller screens */
+
+@media (max-width: 830px) {
+  body {
+    width: 90%;
+  }
+
+  .side {
+    height: auto;
+    margin: auto;
+    position: relative;
+    width: 90%;
+  }
+
+  a[class="anchor"] {
+    float: right;
+    margin-left: 21px;
+  }
+}
--- a/source/css/pageindex.css
+++ b/source/css/pageindex.css
@ -0,0 +1,87 @@
+body {
+  padding-left: 5em;
+  padding-top: 5em;
+  max-width: 70%;
+}
+
+h1 {
+  color: var(--accent-dark);
+  font-family: "Cinzel Decorative";
+  font-size: 40px;
+  font-weight: normal;
+  line-height: 1;
+
+  max-width: 600px;
+
+  padding-bottom: 25px;
+  margin-bottom: 30px;
+
+  border-bottom: 1px solid var(--accent);
+}
+
+h1::first-letter {
+  font-size: 60px;
+}
+
+p,
+ul,
+ol {
+  color: var(--text);
+  font-family: "Crimson", serif;
+  font-size: 1.2rem;
+  max-width: 1000px;
+}
+
+ul {
+  list-style: none;
+  padding: unset;
+  margin: unset;
+}
+
+strong {
+  font-weight: bolder;
+  text-shadow: 0 0.5px;
+}
+
+a {
+  font-family: "Crimson";
+  font-weight: normal;
+  text-decoration: none;
+
+  color: var(--url);
+}
+
+a::before {
+  content: "◆";
+  font-size: 0.5em;
+  padding-right: 3px;
+  position: relative;
+  bottom: 4px;
+}
+
+a:hover {
+  animation: glow 0.2s ease-in-out both;
+}
+
+/* animations */
+
+@keyframes glow {
+  from {
+    font-weight: normal;
+  }
+
+  to {
+    filter: drop-shadow(0.5px 0.5px 2px);
+  }
+}
+
+/* small screens */
+
+@media (max-width: 600px) {
+  body {
+    padding-top: 5%;
+    padding-left: 5%;
+    padding-right: 5%;
+    max-width: unset;
+  }
+}
--- a/source/css/paramount-light.css
+++ b/source/css/paramount-light.css
@ -5,7 +5,7 @@ td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5
 span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
 .highlight .hll { background-color: #ffffcc }
 .highlight { background: #ffffff; }
-.highlight .c { color: #a8a8a8; font-style: italic } /* Comment */
+.highlight .c { color: #797979; font-style: italic } /* Comment */
 .highlight .err { color: #ffffff; background-color: #c30771 } /* Error */
 .highlight .g { color: #767676 } /* Generic */
 .highlight .k { color: #767676 } /* Keyword */
--- a/source/fonts/iosevka-gothic-bold.woff2
+++ b/source/fonts/iosevka-gothic-bold.woff2
--- a/source/fonts/iosevka-gothic-bolditalic.woff2
+++ b/source/fonts/iosevka-gothic-bolditalic.woff2
--- a/source/fonts/iosevka-gothic-italic.woff2
+++ b/source/fonts/iosevka-gothic-italic.woff2
--- a/source/fonts/iosevka-gothic-regular.woff2
+++ b/source/fonts/iosevka-gothic-regular.woff2
--- a/source/index.html
+++ b/source/index.html
@ -1,22 +1,18 @@
+---
+---
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/css/common.css">
+    {% include header.html %}
    <link rel="stylesheet" href="/css/index.css">
-    <link rel="shortcut icon" href="/assets/favicon.png" type="image/x-icon">
-
-    <meta name="author" content="Agatha">
-    
    
    <title>Agatha V. Lovelace</title>
 </head>
 <body>
    <div class="centered">
        <picture>
-            <!-- <source srcset="/assets/agatha-light.png" --> 
-            <!--         media="(prefers-color-scheme: light)"> -->
+            <source srcset="/assets/agatha-light.png"
+                media="(prefers-color-scheme: light)">
            <img src="/assets/agatha-dark.png"
                 alt="A picture of Agatha wearing glasses and a tank top. The edges fade out">
        </picture>
@ -27,10 +23,9 @@
            <p>Programmer, <abbr title="Electric Guitar, Synths, Violin, Graphic Design">Artist</abbr>,<br> Trans Woman</p>

            <details>
-                <!-- TODO: replace the links once the rest of the site is ready -->
                <summary>Links</summary>
-                <a href="https://agatharose.dev/pages/Links">Contact</a>
-                <!-- <a href="#">Posts</a> -->
+                <a href="/pages/Links/">Contact</a>
+                <a href="/pages/">Posts</a>
                <a href="/cv.pdf">Hire Me</a>
            </details>
        </div>
				`@ -0,0 +1 @@`
				<svg aria-hidden="true" class="octicon octicon-link" height="20" width="20" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#555a84"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>