fix style regressions (code was never actually using Hack font I think..?)

and allow default theme (light or dark) to be set in Hugo config and reflected in both HTML & JS
2025-09-13 05:45:31 -04:00 · 2020-07-07 10:07:46 -04:00
parent d970c031a5
commit 48eea4ce98
7 changed files with 44 additions and 71 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -34,15 +34,17 @@ jobs:
    - uses: actions/setup-node@v1
      with:
        node-version: 12.x
-    - name: Install LHCI
-      run: npm install -g @lhci/cli
+    - name: Install Lighthouse CI
+      run: |
+        npm install -g @lhci/cli
+        lhci --version
    - name: Audit deploy preview
      if: "github.event_name == 'pull_request'"
      continue-on-error: true
      run: |
        lhci autorun --config=./.lighthouserc.json \
          --collect.url=https://deploy-preview-${{ github.event.number }}--jakejarvis.netlify.com/ \
-          --collect.url=https://deploy-preview-${{ github.event.number }}--jakejarvis.netlify.com/notes/how-to-pull-request-fork-github/ \
+          --collect.url=https://deploy-preview-${{ github.event.number }}--jakejarvis.netlify.com/notes/netlify-analytics-review/ \
          --collect.url=https://deploy-preview-${{ github.event.number }}--jakejarvis.netlify.com/notes/how-to-pull-request-fork-github/amp.html
    - name: Audit jarv.is
      if: "github.event_name == 'push' && github.ref == 'refs/heads/main'"
@@ -50,7 +52,7 @@ jobs:
      run: |
        lhci autorun --config=./.lighthouserc.json \
          --collect.url=https://jarv.is/ \
-          --collect.url=https://jarv.is/notes/how-to-pull-request-fork-github/ \
+          --collect.url=https://jarv.is/notes/netlify-analytics-review/ \
          --collect.url=https://jarv.is/notes/how-to-pull-request-fork-github/amp.html
    - name: Upload results as artifact
      uses: actions/upload-artifact@v1
--- a/assets/js/dark-mode.js
+++ b/assets/js/dark-mode.js
@@ -17,7 +17,8 @@
  var light = "light";

  // which class is <body> set to initially?
-  var default_theme = light;
+  // eslint-disable-next-line
+  var default_theme = "{{ .Site.Params.defaultTheme }}";

  // use an element with class `dark-mode-toggle` to trigger swap when clicked
  var toggle = doc.querySelector(".dark-mode-toggle");
--- a/assets/sass/components/_syntax.scss
+++ b/assets/sass/components/_syntax.scss
@@ -1,9 +1,14 @@
@charset "UTF-8";

+code,
+pre {
+  font-family: $webfont-mono;
+  font-size: 0.95em;
+  letter-spacing: normal;
+}
+
 // all code
 code {
-  font-family: $webfont-mono;
-  font-size: 0.95em;
  letter-spacing: 0;
  page-break-inside: avoid; // stylelint-disable-line plugin/no-unsupported-browser-features
 }
@@ -25,15 +30,15 @@ code {

 // code fences
 div.highlight {
-  font-size: 0.975em;
-  line-height: 1.7;
+  line-height: 1.6;
  max-width: 100%;
  overflow-x: scroll;
  margin: 1em 0;
  border: 1px solid;

  pre {
-    padding-left: 1.7em;
+    padding-left: 1.5em;
+    margin: 1em 0;
  }
 }

--- a/config.toml
+++ b/config.toml
@@ -26,11 +26,12 @@ disableAliases = true
  description = "Hi there! I'm a frontend web developer based in Boston, Massachusetts specializing in the JAMstack, modern JavaScript frameworks, and progressive web apps."
  image = "img/logo.png"  # must be in assetDir
  mainSection = "notes"  # reflected in RSS, Atom, AMP
+  defaultTheme = "light"  # "light" or "dark" theme
  maxWidth = 940  # px
  githubRepo = "jakejarvis/jarv.is"
-  facebookAppID = "3357248167622283"
+  facebookAppID = 3357248167622283
  webmentionIO = "jarv.is"  # webmention.io username
-  copyrightFirstYear = "2001"
+  copyrightFirstYear = 2001
  license = "CC-BY-4.0"
  licenseFull = "Creative Commons Attribution 4.0 International"

@@ -42,11 +43,11 @@ disableAliases = true
  github = "jakejarvis"
  keybase = "jakejarvis"
  twitter = "jakejarvis"
-  twitterID = "229769022"
+  twitterID = 229769022
  medium = "jakejarvis"
  linkedin = "jakejarvis"
  facebook = "jakejarvis"
-  facebookID = "1329090853"
+  facebookID = 1329090853
  instagram = "jakejarvis"
  mastodon = "mastodon.social/@jakejarvis"

--- a/content/_index.md
+++ b/content/_index.md
@@ -1,6 +1,6 @@
 ---
 title: "Jake Jarvis – Front-End Web Developer in Boston, MA"
-date: 2020-07-03 10:34:05-0400
+date: 2020-07-07 09:59:03-0400
 type: home
 sitemap:
  changefreq: weekly
--- a/content/notes/presidential-candidates-404-pages/index.md
+++ b/content/notes/presidential-candidates-404-pages/index.md
@@ -17,113 +17,85 @@ Ever since [President Obama injected technology](https://arstechnica.com/informa

 More recently, though, little-known hidden Easter eggs on ["404 Not Found"](https://en.wikipedia.org/wiki/HTTP_404) pages have become an outlet for the candidates' overworked web designers to let out some humor in a sea of otherwise serious policy pages. Below are the 404 pages on each of the current candidate's websites, along with my ranking of them — setting politics aside, for once.

---
-
-# 1. Elizabeth Warren — [elizabethwarren.com](https://elizabethwarren.com/asdfasdf404) {#warren}
+## 1. Elizabeth Warren — [elizabethwarren.com](https://elizabethwarren.com/asdfasdf404) {#warren}

 I'm a _huge_ sucker for Kate McKinnon's spot-on impression of Warren on Saturday Night Live. And [unfortunately](https://twitter.com/realdonaldtrump/status/1097116612279316480), seeing a campaign embrace SNL is like a breath of fresh air these days. [Watch all of the Kate McWarren videos so far here; you won't regret it.](https://www.nbc.com/saturday-night-live/cast/kate-mckinnon-15056/impersonation/elizabeth-warren-287903)

 {{< image src="images/warren.png" alt="Elizabeth Warren" />}}

---
-
-# 2. Bernie Sanders — [berniesanders.com](https://berniesanders.com/asdfasdf404/) {#sanders}
+## 2. Bernie Sanders — [berniesanders.com](https://berniesanders.com/asdfasdf404/) {#sanders}

 Although the designer who selected this GIF likely had _thousands_ of choices when searching "[Bernie finger wagging GIF](https://www.google.com/search?q=Bernie+finger+wagging+GIF&tbm=isch&tbs=itp:animated)," the text beside it is well-written and funny — even though we both know putting a page at [berniesanders.com/zxcliaosid](https://berniesanders.com/zxcliaosid/) probably won't be a top priority of a President Sanders.

 {{< video mp4="images/sanders.mp4" height="346" webm="images/sanders.webm" autoplay="1" loop="1" nocontrols="1" >}}

---
-
-# 3. Joe Biden — [joebiden.com](https://joebiden.com/asdfasdf404) {#biden}
+## 3. Joe Biden — [joebiden.com](https://joebiden.com/asdfasdf404) {#biden}

 Uncle Joe has a nice and simple 404 page. I like it, along with the Ray-Bans and his choice of vanilla ice cream.

 {{< image src="images/biden.png" alt="Joe Biden" />}}

---
-
-# 4. Beto O'Rourke — [betoorourke.com](https://betoorourke.com/asdfasdf404) {#orourke}
+## 4. Beto O'Rourke — [betoorourke.com](https://betoorourke.com/asdfasdf404) {#orourke}

 A ballsy move, considering Beto's infamous [DUI arrest](https://www.politifact.com/texas/statements/2019/mar/14/club-growth/beto-orourke-arrested-dwi-flee-scene/) in the '90s — but still a clever ask for a donation and a great use of a GIF, even if it's left over from his Senate campaign.

 {{< video mp4="images/orourke.mp4" height="467" webm="images/orourke.webm" autoplay="1" loop="1" nocontrols="1" >}}

---
-
-# 5. Kamala Harris — [kamalaharris.org](https://kamalaharris.org/asdfasdf404) {#harris}
+## 5. Kamala Harris — [kamalaharris.org](https://kamalaharris.org/asdfasdf404) {#harris}

 Another clean and simple page with a top-notch GIF. It injected some emotion into visiting [kamalaharris.com/alskdjf](https://kamalaharris.com/alskdjf).

 {{< video mp4="images/harris.mp4" height="512" webm="images/harris.webm" autoplay="1" loop="1" nocontrols="1" >}}

---
-
-# 6. Pete Buttigeg — [peteforamerica.com](https://peteforamerica.com/asdfasdf404/) {#buttigeg}
+## 6. Pete Buttigeg — [peteforamerica.com](https://peteforamerica.com/asdfasdf404/) {#buttigeg}

 I love, love, _love_ Pete's design for his whole campaign, and his beautiful 404 page is no exception. In case you didn't know, Pete for America has an entire ["Design Toolkit"](https://design.peteforamerica.com/) publicly available for all to view and use, with really cool and in-depth explanations for all of their choices — even their [color palette](https://design.peteforamerica.com/colors). Very progressive indeed.

 {{< image src="images/buttigeg.png" alt="Pete Buttigeg" />}}

---
-
-# 7. Cory Booker — [corybooker.com](https://corybooker.com/asdfasdf404/) {#booker}
+## 7. Cory Booker — [corybooker.com](https://corybooker.com/asdfasdf404/) {#booker}

 Love the photo choice. But although pains me to go against my Senator from my home state, I still _cannot stand_ his choice of font. Oh well, I guess that's now a criterion for running for president in 2020.

 {{< image src="images/booker.png" alt="Cory Booker" />}}

---
-
-# 8. Andrew Yang — [yang2020.com](https://www.yang2020.com/asdfasdf404) {#yang}
+## 8. Andrew Yang — [yang2020.com](https://www.yang2020.com/asdfasdf404) {#yang}

 Not sure if donating to Yang 2020 will help put a page at [yang2020.com/alsdjfzoif](https://www.yang2020.com/alsdjfzoif) — the actual URL I visited to grab this screenshot — but the Bitmoji Andrew looks pretty chill.

 {{< image src="images/yang.png" alt="Andrew Yang" />}}

---
-
-# 9. Amy Klobuchar — [amyklobuchar.com](https://amyklobuchar.com/asdfasdf404) {#klobuchar}
+## 9. Amy Klobuchar — [amyklobuchar.com](https://amyklobuchar.com/asdfasdf404) {#klobuchar}

 This is the 404 page of someone who won't forget the [Midwestern roots](https://en.wikipedia.org/wiki/Uff_da) she comes from once she moves into the White House...or writes a memoir about her campaign from her Minnesota home.

 {{< image src="images/klobuchar.png" alt="Amy Klobuchar" />}}

---
-
-# 10. Steve Bullock — [stevebullock.com](https://stevebullock.com/asdfasdf404) {#bullock}
+## 10. Steve Bullock — [stevebullock.com](https://stevebullock.com/asdfasdf404) {#bullock}

 I'll never publicly say anything against a good Dad joke. This is no exception.

 {{< image src="images/bullock.png" alt="Steve Bullock" />}}

---
-
-# 11. Michael Bennet — [michaelbennet.com](https://michaelbennet.com/asdfasdf404) {#bennet}
+## 11. Michael Bennet — [michaelbennet.com](https://michaelbennet.com/asdfasdf404) {#bennet}

 Another quality Dad joke here.

 {{< image src="images/bennet.png" alt="Michael Bennet" />}}

---
-
-# 12. John Delaney — [johndelaney.com](https://www.johndelaney.com/asdfasdf404) {#delaney}
+## 12. John Delaney — [johndelaney.com](https://www.johndelaney.com/asdfasdf404) {#delaney}

 Yet another Dad joke? I honestly had the hardest time ranking these three.

 {{< image src="images/delaney.png" alt="John Delaney" />}}

---
-
-# 13. Marianne Williamson — [marianne2020.com](https://www.marianne2020.com/asdfasdf404) {#williamson}
+## 13. Marianne Williamson — [marianne2020.com](https://www.marianne2020.com/asdfasdf404) {#williamson}

 A 404 page only a motivational author and speaker running for president could envision.

 {{< image src="images/williamson.png" alt="Marianne Williamson" />}}

---
-
-# 14. The Donald — [donaldjtrump.com](https://donaldjtrump.com/asdfasdf404) {#trump}
+## 14. The Donald — [donaldjtrump.com](https://donaldjtrump.com/asdfasdf404) {#trump}

 I guess this would be slightly humorous...four years ago. Time to move on from your middle-school crush, Donny.

@@ -131,30 +103,22 @@ I guess this would be slightly humorous...four years ago. Time to move on from y

 ---

-# _Disqualified Candidates..._
+## Disqualified Candidates...

 These candidates haven't configured a custom 404 page, settling for the default Drupal or WordPress text. Do they _really_ think they can run the free world with their websites in this shape? 🙄 _&lt;/s&gt;_

---
-
-# 15. Julián Castro — [julianforthefuture.com](https://www.julianforthefuture.com/asdfasdf404) {#castro}
+### 15. Julián Castro — [julianforthefuture.com](https://www.julianforthefuture.com/asdfasdf404) {#castro}

 {{< image src="images/castro.png" alt="Julián Castro" />}}

---
-
-# 16. Wayne Messam — [wayneforusa.com](https://wayneforusa.com/asdfasdf404) {#messam}
+### 16. Wayne Messam — [wayneforusa.com](https://wayneforusa.com/asdfasdf404) {#messam}

 {{< image src="images/messam.png" alt="Wayne Messam" />}}

---
-
-# 17. Tulsi Gabbard — [tulsi2020.com](https://www.tulsi2020.com/asdfasdf404) {#gabbard}
+### 17. Tulsi Gabbard — [tulsi2020.com](https://www.tulsi2020.com/asdfasdf404) {#gabbard}

 {{< image src="images/gabbard.png" alt="Tulsi Gabbard" />}}

---
-
-# 18. Joe Sestak — [joesestak.com](https://www.joesestak.com/asdfasdf404) {#sestak}
+### 18. Joe Sestak — [joesestak.com](https://www.joesestak.com/asdfasdf404) {#sestak}

 {{< image src="images/sestak.png" alt="Joe Sestak" />}}
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -6,7 +6,7 @@
  <head>
 {{ partial "head/_head" . }}
  </head>
-  <body class="{{ .Page.Kind }} light">
+  <body class="{{ .Page.Kind }} {{ .Site.Params.defaultTheme }}">
 {{ partialCached "page/header" . }}
 <main>
 {{ block "main" . }}{{ end }}