Mainly accessibility tweaks

.gitignore

@@ -1,3 +1,5 @@
+.nvimlog
 .direnv/
 themes/
 public/
+result

config.toml

@@ -38,6 +38,6 @@ menu = [
     { name = "/posts", url = "@/posts/_index.md" },
     { name = "/projects", url = "@/projects.md" },
     { name = "/about", url = "@/about.md" },
-    { name = "git", url = "https://git.mat.services/explore/repos", external = true },
+    { name = "git", url = "https://git.mat.services/mat", external = true },
 ]
 

content/about.md

@@ -3,7 +3,7 @@ title = "about me"
 path = "about"
 +++
 
-# matthew ess (they/them)
+## matthew ess (they/them)
 i'm a 'software engineer'/'code monkey' by trade, currently employed by yelp inc in the engineering effectiveness department. my work is focused on improving the tooling used by other engineers at yelp to develop python services.
 
 [you can look at my resume here](/resume).

content/projects.md

@@ -3,10 +3,14 @@ title = "selected projects"
 path = "projects"
 +++
 
-# gemini for rust
+## gemini for rust
 
 `gemini` is a rust crate providing a small set of types useful for working with the Gemini protocol
 
 [`gemini` on crates.io](https://crates.io/crates/gemini)
 
 [`gemini` source on the pijul nest](https://nest.pijul.com/mat/gemini-projects:main/5II6T7YETYWUI.BEAAA)
+
+## other projects
+
+i am in the process of moving my active git-managed projects to a ["self"-hosted gitea instance](https://git.mat.services/mat), but currently some of my projects still live on [github](https://github.com/matthewess) or [gitlab](https://gitlab.com/matthewess). i occasionally work on projects using [pijul](https://pijul.org), which can be found on [the pijul nest](https://nest.pijul.com/mat). 

content/resume.md

@@ -3,8 +3,8 @@ title = "resume"
 path = "resume"
 +++
 
-# skills
+## skills
-## professional 
+### professional 
 * python
 * relational databases
   * redshift
@@ -12,26 +12,26 @@ path = "resume"
 * apache spark
 * flink
 
-## personal
+### personal
 * nix package manager
 * rust
 * haskell
 * java
 
-# experience
+## experience
-## yelp inc, 2017-present
+### yelp inc, 2017-present
-### 2022-present
+#### 2022-present
 _software engineer, core services team_
 
-### 2019-2022
+#### 2019-2022
 _software engineer, marketplace data observability team_
 
-### 2018-2019
+#### 2018-2019
 _software engineer, food ordering experience team_
 
-### 2017
+#### 2017
 _software engineering intern, transactions team_
 
-# education
+## education
-## purdue university, 2014-2018
+### purdue university, 2014-2018
 _bachelor of science, computer science_

flake.nix

@@ -23,16 +23,17 @@
           pname = "personal-site";
           version = "2022-08-07";
           src = ./.;
-          nativeBuildInputs = [ pkgs.zola ];
+          nativeBuildInputs = with pkgs; [ scour zola ];
           configurePhase = ''
             mkdir -p "themes/${themeName}"
             cp -r ${theme}/* "themes/${themeName}"
+            scour -i static/favicon-unoptimized.svg -o static/favicon.svg
           '';
           buildPhase = "zola build";
           installPhase = "cp -r public $out";
         };
         devShells.default = pkgs.mkShell {
-          packages = [ pkgs.zola ];
+          packages = with pkgs; [ zola ];
           shellHook = ''
             mkdir -p themes
             ln -sn "${theme}" "themes/${themeName}"

sass/style/main.scss

@@ -1,9 +1,9 @@
-@import "../themes/apollo/sass/parts/_code.scss";
+@import "parts/_code.scss";
-@import "../themes/apollo/sass/parts/_header.scss";
+@import "../../themes/apollo/sass/parts/_header.scss";
-@import "../themes/apollo/sass/parts/_image.scss";
+@import "../../themes/apollo/sass/parts/_image.scss";
-@import "../themes/apollo/sass/parts/misc.scss";
+@import "../../themes/apollo/sass/parts/misc.scss";
-@import "../themes/apollo/sass/parts/table.scss";
+@import "../../themes/apollo/sass/parts/table.scss";
-@import "../themes/apollo/sass/parts/tags.scss";
+@import "../../themes/apollo/sass/parts/tags.scss";
 
 :root {
   /* Used for: block comment, hr, ... */
@@ -96,14 +96,25 @@ footer {
 
 footer {
   margin: 2em;
-  color: grey;
+  color: var(--text-1);
   font-size: 0.75em;
+
+  code {
+    color: var(--text-0);
+  }
 }
 
 // Different sized headers
-h1 {
+.page-header {
-  font-size: 1.5rem;
+  font-size: 2.5em;
-  margin-top: 1.5em;
+  font-weight: 400;
+  line-height: 100%;
+  font-family: var(--header-font);
+  margin: 4rem 0px 1rem 0px;
+}
+
+.page-header::before {
+  content: "";
 }
 
 h2 {
@@ -164,3 +175,14 @@ ul.tags {
 .header-dot {
   font-size: 1.6em;
 }
+
+// Meta
+.meta a:hover {
+  color: white;
+}
+
+// Fixup grays
+.meta,
+time {
+  color: var(--text-1);
+}

sass/style/parts/_code.scss

@@ -0,0 +1,107 @@
+code {
+  background-color: var(--bg-1);
+  padding: 0.1em 0.2em;
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+}
+
+pre {
+  /* Rounded border */
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+
+  line-height: 1.4;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+pre code {
+  background-color: transparent;
+  color: inherit;
+  font-size: 100%;
+  padding: 0;
+
+  // We only want a border around `code` and not `pre code` blocks.
+  border: 0;
+}
+
+pre {
+  font-family: var(--code-font);
+  position: relative;
+}
+
+pre code[class*="language-"]::before {
+  background: black;
+  border-radius: 0 0 0.25rem 0.25rem;
+  color: white;
+  font-size: 12px;
+  letter-spacing: 0.025rem;
+  padding: 0.1rem 0.5rem;
+  position: absolute;
+  right: 0.1rem;
+  margin-top: 0.1rem;
+  text-align: right;
+  text-transform: uppercase;
+  top: 0;
+}
+
+pre code[class="language-javaScript"]::before,
+pre code[class="language-js"]::before {
+  content: "js";
+  background: #f7df1e;
+  color: black;
+}
+
+pre code[class*="language-yml"]::before,
+pre code[class*="language-yaml"]::before {
+  content: "yaml";
+  background: #f71e6a;
+  color: white;
+}
+
+pre code[class*="language-shell"]::before,
+pre code[class*="language-bash"]::before,
+pre code[class*="language-sh"]::before {
+  content: "shell";
+  background: green;
+  color: white;
+}
+
+pre code[class*="language-json"]::before {
+  content: "json";
+  background: dodgerblue;
+  color: #000000;
+}
+
+pre code[class*="language-python"]::before,
+pre code[class*="language-py"]::before {
+  content: "py";
+  background: blue;
+  color: yellow;
+}
+
+pre code[class*="language-css"]::before {
+  content: "css";
+  background: cyan;
+  color: black;
+}
+
+pre code[class*="language-go"]::before {
+  content: "Go";
+  background: cyan;
+  color: royalblue;
+}
+
+pre code[class*="language-md"]::before,
+pre code[class*="language-md"]::before {
+  content: "Markdown";
+  background: royalblue;
+  color: whitesmoke;
+}
+
+pre code[class*="language-rust"]::before,
+pre code[class*="language-rs"]::before {
+  content: "rust";
+  background: #fff8f6;
+  color: #ff4647;
+}

static/image/favicon.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+<svg id="svg_document" width="512px" height="512px" style="zoom:1" baseProfile="full" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+ <!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
+ <title id="svg_document_title">Untitled.svg</title>
+ <defs id="svg_document_defs">
+  <clipPath id="halfCircle">
+   <rect id="rect1" x="50%" width="50%" height="100%"/>
+  </clipPath>
+  <clipPath id="smallHalfCircle">
+   <rect id="rect2" y="50%" width="100%" height="100%"/>
+  </clipPath>
+ </defs>
+ <g id="main_group">
+  <rect id="background_rect" x="8" y="8" width="496px" height="496px" rx="64" ry="64" fill="none" stroke="#f08080" stroke-linejoin="round" stroke-width="16"/>
+  <circle id="circle1" cx="256px" cy="256px" r="40%" clip-path="url(#halfCircle)" fill="#f08080"/>
+  <circle id="circle2" cx="256px" cy="256px" r="40%" clip-path="url(#smallHalfCircle)" fill="#f08080"/>
+ </g>
+</svg>

templates/macros/macros.html

@@ -55,21 +55,20 @@
 {% endmacro tags %}
 
 {% macro page_header(title) %}
-<div class="page-header">
+<h1 class="page-header">
   {{ title }}<span class="primary-color header-dot">.</span>
-</div>
+</h1>
 {% endmacro content %}
 
 {% macro content(page) %}
 <main>
   <article>
     <div class="title">
-      {#<h1 class="title">{{ page.title }}</h1>#}
       {{ post_macros::page_header(title=page.title) }}
 
       {% if page.date %}
       <div class="meta">
-        Posted on {{ page.date | date(format="%Y-%m-%d") }}
+        Posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
 
         {% if page.draft %}
         <span class="draft-label">DRAFT</span>
@@ -77,7 +76,7 @@
       </div>
       {% if page.updated %}
       <div class="meta">
-        Updated on {{ page.updated | date(format="%Y-%m-%d") }}
+        Updated on <time>{{ page.updated | date(format="%Y-%m-%d") }}</time>
       </div>
       {% endif %}
       <div class="meta">
@@ -138,7 +137,6 @@
           {% for tag in page.taxonomies.tags %}
           <li><a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">{{ tag }}</a></li>
           {% endfor %}
-          {# {{ post_macros::tags(page=page) }} #}
         </ul>
       </nav>
     </div>

templates/partials/header.html

@@ -2,7 +2,6 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   {# Site title #}
@@ -29,7 +28,7 @@
   <link href={{ cdn.url }} rel="stylesheet" integrity="sha384-{{ cdn.hash }}" crossorigin="anonymous">
   {% endfor %}
   {% else %}
-  <link href="{{ get_url(path='fonts.css') }}" rel="stylesheet" />
+  <link href="{{ get_url(path='style/fonts.css', cachebust=true) }}" rel="stylesheet" />
   {% endif %}
 
   {# RSS #}
@@ -37,16 +36,16 @@
     href="{{ get_url(path='atom.xml', trailing_slash=false) }}">
 
   {# Theme #}
-  <link rel="stylesheet" type="text/css" href="{{ get_url(path='theme/light.css') }}" />
+  <link rel="stylesheet" type="text/css" href="{{ get_url(path='style/theme/light.css', cachebust=true) }}" />
-  <link rel="stylesheet" type="text/css" href="{{ get_url(path='theme/dark.css') }}"
+  <link rel="stylesheet" type="text/css" href="{{ get_url(path='style/theme/dark.css', cachebust=true) }}"
     media="(prefers-color-scheme: dark)" />
 
-  <link rel="stylesheet" type="text/css" media="screen" href="{{ get_url(path='main.css') }}" />
+  <link rel="stylesheet" type="text/css" media="screen" href="{{ get_url(path='style/main.css', cachebust=true) }}" />
 
 
   {% if config.extra.stylesheets %}
   {% for stylesheet in config.extra.stylesheets %}
-  <link rel="stylesheet" href="{{ get_url(path=stylesheet) }}">
+  <link rel="stylesheet" href="{{ get_url(path=stylesheet, cachebust=true) }}">
   {% endfor %}
   {% endif %}
 </head>

templates/partials/nav.html

@@ -1,6 +1,6 @@
 <header>
   <div class="main brand">
-    <a href={{ config.base_url }}><img class=logo src="/favicon.svg" alt=logo />{{ config.title }}</a>
+    <a href={{ config.base_url }}><img class=logo src="/favicon.svg" alt="" />{{ config.title }}</a>
   </div>
 
   <nav>