Tweak styles to make things work nicely with "page-looking things"

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>

.gitignore

@@ -1 +1,6 @@
 **/build/*
+.DS_Store
+/.hugo_build.lock
+/.hugo_cache/
+/public/
+/resources/

assets/scss/bergamot.scss

@@ -1,174 +0,0 @@
-@import "variables.scss";
-@import "mixins.scss";
-
-.bergamot-exercise {
-    counter-increment: bergamot-exercise;
-
-    .bergamot-root {
-        border: none;
-        padding: 0;
-        margin-top: 1em;
-    }
-
-
-    .bergamot-exercise-label {
-        .bergamot-exercise-number::after {
-            content: "Exercise " counter(bergamot-exercise);
-            font-weight: bold;
-            text-decoration: underline;
-        }
-    }
-
-    .bergamot-button {
-        @include bordered-block;
-        padding: 0.25em;
-        padding-left: 1em;
-        padding-right: 1em;
-        background-color: inherit;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition: 0.25s;
-        font-family: $font-body;
-        @include var(color, text-color);
-
-        &.bergamot-hidden {
-            display: none;
-        }
-
-        .feather {
-            margin-right: 0.5em;
-        }
-    }
-
-    .bergamot-play {
-        .feather { color: $primary-color; }
-        &:hover, &:focus {
-            .feather { color: lighten($primary-color, 20%); }
-        }
-    }
-
-    .bergamot-reset {
-        .feather { color: #0099CC; }
-        &:hover, &:focus {
-            .feather { color: lighten(#0099CC, 20%); }
-        }
-
-        svg {
-            fill: none;
-        }
-    }
-
-    .bergamot-close {
-        .feather { color: tomato; }
-        &:hover, &:focus {
-            .feather { color: lighten(tomato, 20%); }
-        }
-    }
-
-    .bergamot-button-group {
-        margin-top: 1em;
-    }
-}
-
-.bergamot-root {
-    @include bordered-block;
-    padding: 1em;
-
-    .bergamot-section-heading {
-        margin-bottom: 0.5em;
-        font-family: $font-body;
-        font-style: normal;
-        font-weight: bold;
-        font-size: 1.25em;
-    }
-
-    .bergamot-section {
-        margin-bottom: 1em;
-    }
-
-    textarea {
-        display: block;
-        width: 100%;
-        height: 10em;
-        resize: none;
-    }
-
-    input[type="text"] {
-        width: 100%;
-        @include textual-input;
-    }
-
-    .bergamot-rule-list {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-
-    .bergamot-rule-list katex-expression {
-        margin-left: .5em;
-        margin-right: .5em;
-        flex-grow: 1;
-        flex-basis: 0;
-    }
-
-    .bergamot-rule-section {
-        .bergamot-rule-section-name {
-            text-align: center;
-            margin: 0.25em;
-            font-weight: bold;
-        }
-    }
-
-    .bergamot-proof-tree {
-        overflow: auto;
-    }
-
-    .bergamot-error {
-        @include bordered-block;
-        padding: 0.5rem;
-        border-color: tomato;
-        background-color: rgba(tomato, 0.25);
-        margin-top: 1rem;
-    }
-
-    .bergamot-selector {
-        button {
-            @include var(background-color, background-color);
-            @include var(color, text-color);
-            @include bordered-block;
-            padding: 0.5rem;
-            font-family: $font-body;
-            border-style: dotted;
-
-            &.active {
-                border-color: $primary-color;
-                border-style: solid;
-                font-weight: bold;
-            }
-
-            &:not(:first-child) {
-                border-bottom-left-radius: 0;
-                border-top-left-radius: 0;
-            }
-
-            &:not(:last-child) {
-                border-bottom-right-radius: 0;
-                border-top-right-radius: 0;
-                border-right-width: 0;
-            }
-        }
-
-        button.active + button {
-            border-left-color: $primary-color;
-            border-left-style: solid;
-        }
-
-        margin-bottom: 1rem;
-    }
-
-    .bergamot-no-proofs {
-        text-align: center;
-    }
-}

assets/scss/writing.scss

@@ -1,47 +0,0 @@
-@import "variables.scss";
-
-body {
-  background-color: #1c1e26;
-  --text-color: white;
-  font-family: $font-code;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  text-align: left;
-  font-family: $font-code;
-}
-
-h1::after {
-  content: "(writing)";
-  font-size: 1rem;
-  margin-left: 0.5em;
-  position: relative;
-  bottom: -0.5em;
-  color: $primary-color;
-}
-
-nav .container {
-  justify-content: flex-start;
-
-  a {
-    padding-left: 0;
-    margin-right: 1em;
-  }
-}
-
-.header-divider {
-  visibility: hidden;
-}
-
-hr {
-  height: auto;
-  border: none;
-
-  &::after {
-    content: "* * *";
-    color: $primary-color;
-    font-size: 2rem;
-    display: block;
-    text-align: center;
-  }
-}

config.toml

@@ -1,7 +1,5 @@
 baseURL = "https://danilafe.com"
 theme = "vanilla"
-pygmentsCodeFences = true
-pygmentsUseClasses = true
 summaryLength = 20
 
 defaultContentLanguage = 'en'
@@ -22,6 +20,9 @@ defaultContentLanguage = 'en'
   home = ["html","rss","toml"]
 
 [markup]
+  [markup.highlight]
+    codeFences = true
+    noClasses = false
   [markup.tableOfContents]
     endLevel = 4
     ordered = false

content/blog/06_spa_agda_cfg/index.md

@@ -130,7 +130,7 @@ by one, leading to another `suc n` in the final type. This makes sense because i
 
 Here's my definition of `Graph`s written using `Fin`:
 
-{{< codelines "Agda" "agda-spa/Language/Graphs.agda" 24 39 >}}
+{{< codelines "Agda" "agda-spa/Language/Graphs.agda" 23 38 >}}
 
 I explicitly used a `size` field, which determines how many nodes are in the
 graph, and serves as the upper bound for the edge indices. From there, an
@@ -176,7 +176,7 @@ we will connect each of the outputs of one to each of the inputs of the other.
 
 This is defined by the operation `g₁ ↦ g₂`, which sequences two graphs `g₁` and `g₂`:
 
-{{< codelines "Agda" "agda-spa/Language/Graphs.agda" 72 83 >}}
+{{< codelines "Agda" "agda-spa/Language/Graphs.agda" 71 82 >}}
 
 The definition starts out pretty innocuous, but gets a bit complicated by the
 end. The sum of the numbers of nodes in the two operands becomes the new graph
@@ -238,7 +238,7 @@ operation when combining the sub-CFGs of the "if" and "else" branches of an
 `if`/`else`, which both follow the condition, and both proceed to the code after
 the conditional.
 
-{{< codelines "Agda" "agda-spa/Language/Graphs.agda" 59 70 >}}
+{{< codelines "Agda" "agda-spa/Language/Graphs.agda" 58 69 >}}
 
 Everything here is just concatenation; we pool together the nodes, edges,
 inputs, and outputs, and the main source of complexity is the re-indexing.
@@ -250,12 +250,12 @@ from the graph for `while` loops I showed above; the reason for that is that
 I currently don't include the conditional expressions in my CFG. This is a
 limitation that I will address in future work.
 
-{{< codelines "Agda" "agda-spa/Language/Graphs.agda" 85 95 >}}
+{{< codelines "Agda" "agda-spa/Language/Graphs.agda" 84 94 >}}
 
 Given these thee operations, I construct Control Flow Graphs as follows, where
 `singleton` creates a new CFG node with the given list of simple statements:
 
-{{< codelines "Agda" "agda-spa/Language/Graphs.agda" 122 126 >}}
+{{< codelines "Agda" "agda-spa/Language/Graphs.agda" 121 125 >}}
 
 Throughout this, I've been liberal to include empty CFG nodes as was convenient.
 This is a departure from the formal definition I gave above, but it makes

content/writing/onspiders/index.md

@@ -1,7 +1,6 @@
 ---
 title: "On Spiders"
 date: 2026-03-22T01:03:00-05:00
-type: writing
 description: "Whenever I stay still, I feel the spiders weave their webs around me."
 custom_css:
 - style.scss

content/writing/pynchon/index.md

@@ -0,0 +1,144 @@
+---
+title: "Everything's Touch"
+date: 2026-05-14T18:01:27-07:00
+draft: true
+custom_css:
+- style.scss
+---
+
+{{< halfpage >}}
+
+## Everything's Touch
+
+"Do you guys have any deuterium water?", he said to a baffled lab manager.
+"You know, heavy water?"
+
+"No... We don't have that...". She didn't recognize him as a student.
+
+"Do you know where I can get some?", continued his barrage of questions,
+"What's a good chemical company? How do I go about ordering heavy water from them?"
+
+What could this guy possibly have to do with heavy water? Why is he so determined?
+When he finally turned and left empty-handed, she breathed a sigh of relief.
+
+Until, that is, another man arrived and made the same request: he wanted heavy water.
+Again, the lab manager refused him. For the rest of the day, she had
+a knot in her stomach. Having failed once, in order to remain under the radar,
+had some shadowy cabal switched representatives, and tried again to attain
+their goal?
+
+Uneasy still the lab manager had dinner, opening YouTube™ on her phone to pass
+the time. On the front page, a video was waiting for her: "the ice cube
+is too heavy!". When frozen, you see, heavy water sinks instead of floating.
+
+There was no plot. Two men, having both seen this video, had independently
+decided to replicate the trick. On the same day, believing it was their
+free will, they visited the same lab and spoke to the same lab manager.
+They felt the touch.
+
+---
+
+> Roland too became conscious of the wind, as his mortality had never allowed him.
+> Discovered it so. ...so joyful, that the arrow must veer into it.
+>
+> -- Thomas Pynchon, *Gravity's Rainbow*
+
+Today, we live amidst an invisible ocean, but not in a physical sense;
+its tides don't pull us out to sea or push us towards the shore; no
+warm undercurrents alternate with cool water as we bob in the waves.
+Standing on a hiking trail and looking out at the path ahead, the world
+might look exactly as it had forty years ago. However, the ocean is
+there, mediated by
+
+{{< /halfpage >}}
+{{< halfpage >}}
+
+electromagnetism instead of fluid. Looking up at the sky,
+nowadays we are reminded of this by the numerous hurtling dots delivering
+the internet to practically every corner of the planet.
+
+Reminded are we of its existence, too, when we hear it speak; when people talk
+about Geese and Velvet Underground; when friends repeat nearly verbatim the
+top post on /r/bald; when men show up to a teaching lab and ask for deuterium.
+Sometimes, these ideas are deliberately planted. Sometimes, they are analogous
+to your classic trends™. Sometimes, they just appear. An enormous behemoth
+stirs deep beneath the waves, and we sway with the current.
+
+---
+
+> If it is in working order, what is it meant to do? The engineers
+> who built it . . . never knew there were any further steps to be taken.
+> Their design was "finalized", and they could forget it.
+>
+> -- Thomas Pynchon, *Gravity's Rainbow*
+
+In _The Age of Surveillance Capitalism_, Shoshana Zuboff
+powerfully reframes the actions of tech giants like Google
+from the perspective of _behavioral surplus_. Google
+and Meta's gluttony for traffic patterns, written sentiment, satellite data,
+identified faces seen by smart glasses, all of it is the endless hunger of an
+influence-machine. Zuboff decries the "priests of the shadow texts",
+Skinnerian manipulators bent on seizing human agency for utopian or,
+more likely, capitalistic ends.
+
+I don't think that's the whole picture.
+
+The surveillance-manipulation machine, running at incredible scale and
+nudging us every moment we search or share or scroll, is ultimately
+unconcerned with truth. Truth is secondary to human behavior. While it
+reaches and connects a double-digit percentage of the world's population,
+the machine lacks any constraint or fundamental purpose beyond engagement.
+It's driven by unfathomably large probabilistic models entangled through
+several orders of interactions with other models.
+
+This enormous amalgamation, joined nowadays by (probably) well-intentioned
+and only-moderately-grounded-in-reality AI™ agents™, is armed with state-of-the-art
+tools and unprecedented influence. With "engagement" its only loose target,
+it ceaselessly perturbs our daily thoughts like Maxwell's demon. Whole
+cliques of people revisit old shows, "discover" a new band, and try Science™.
+
+{{< /halfpage >}}
+{{< halfpage >}}
+
+---
+
+Among _Gravity's Rainbow_'s
+numerous subjects and themes is an intricate and densely
+connected network of markets, influences, and hidden agendas that overlays
+the political conflicts of World War 2. Individuals pursued their own economic
+gains; dealers replaced cocaine with powdered milk; Phoebus intentionally limited
+the lifetimes of lightbulbs; a man dressed like a Rocket smuggled hash past
+an international gathering on behalf of one Sour Bummer. All of this, though, the whole system, took
+on the life of its own: it was the Rocket-state. It acted in ways that were
+inscrutable, mysterious, and yet behind which, in moments of panic or paranoia,
+one could suspect intent. 
+
+The Rocket-state, as Pynchon described it, may or may not have existed.
+It certainly does not exist today. However, beyond Zuboff's cycle of
+dispossession, beyond the powerful surveillance state exposed by Snowden,
+today lies the Attention-state. It is the entity stirring occasionally under
+the surface of the internet's ocean.
+
+I think this is the missing piece. Yes, Google and Meta are selling your
+Gmail inbox's contents to the highest bidder. Yes, the US government is
+in on this. Yeah, Meta's Ray-Bans™ are going to be cataloguing every face
+you encounter on the street, and yeah, the age verification laws are probably
+going to be used to further associate your identity with the rest of
+your data point-cloud. But these are just glimpses of the larger system.
+Those "priests of the shadow texts" are like GR's Freemasons: they perform
+the rituals, but the magic is elsewhere.
+
+This is the closest we've ever been to a truly "unified consciousness".
+We've built ourselves a noosphere, but it's not what we thought it would
+be. It's not _just_ the "world at our fingertips".
+It's not entirely a reflection of human minds. There is an impurity,
+an additional active force that decides which whispers are carried across
+the ocean and which shouts succumb to the inverse-square law.
+
+There it sits, this impurity, mixed in with most human knowledge, with the
+immediate awareness of nearly every event as it occurs in most of the developed
+world. It coats our facts like film, and when an acquaintance hands you
+his packaged opinion, it remains in his handprints, and your heart sinks
+like deuterium ice.
+
+{{< /halfpage >}}

content/writing/pynchon/style.scss

@@ -0,0 +1,93 @@
+@import "variables.scss";
+@import "margin.scss";
+
+body {
+  text-align: left;
+  background-color: white;
+  color: black;
+
+  /* reset to light mode */
+  @each $varName, $varDefault in $css-vars {
+      --#{$varName}: #{$varDefault};
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Times New Roman"
+}
+
+h2 {
+  font-size: 18pt;
+  margin-bottom: 0.2in;
+}
+
+.warning {
+  max-width: $container-width;
+}
+
+.halfpage {
+  width: 5.5in;
+  height: 8.5in;
+  padding: 0.25in;
+  box-sizing: border-box;
+  border: $standard-border;
+  flex-shrink: 0;
+  margin: 0.25in;
+
+  h2 {
+    display: block;
+  }
+
+  @media screen and (max-width: 5.5in) {
+    width: auto;
+    height: auto;
+    margin: 0;
+    border-left: none;
+    border-right: none;
+  }
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 0.1in;
+}
+
+html .container {
+  max-width: 12in;
+  position: static;
+
+  &:not(main) {
+    @include below-two-margins {
+      padding: 0 $container-min-padding 0 $container-min-padding;
+    }
+  }
+}
+
+main.container {
+  font-family: "Times New Roman";
+  font-size: 12pt;
+  line-height: 14pt;
+
+  display: flex;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  justify-content: left;
+
+  & > h2 {
+    display: none; /* copied title is on the page */
+  }
+
+  @media screen and (max-width: 5.5in) {
+    display: block;
+  }
+
+  @media screen and (max-width: 12in) {
+    justify-content: center;
+  }
+}
+
+hr {
+  padding-top: 0.1in;
+  padding-bottom: 0.1in;
+  line-height: 0.1in;
+}

content/writing/spirits/index.md

@@ -1,7 +1,6 @@
 ---
 title: "Persistence of Vision"
 date: 2026-04-18T23:26:00-07:00
-type: writing
 description: "Humid air swirls with colorful spirits."
 custom_css:
 - style.scss

content/writing/thevoid/index.md

@@ -1,7 +1,6 @@
 ---
 title: "Untitled Short Story"
 date: 2024-08-01T20:31:18-07:00
-type: writing
 description: "The Everpresent Void was first discovered at a children's birthday party."
 custom_css:
 - style.scss

data/submodules.json

@@ -1,5 +1,5 @@
 {
-  "agda-spa": "https://dev.danilafe.com/DanilaFe/agda-spa/src/commit/828b652d3b9266e27ef7cf5a8a7fb82e3fd3133f",
+  "agda-spa": "https://dev.danilafe.com/DanilaFe/agda-spa/src/commit/913121488069a20cdfd40777a8777eb3744c415e",
   "aoc-2020": "https://dev.danilafe.com/Advent-of-Code/AdventOfCode-2020/src/commit/7a8503c3fe1aa7e624e4d8672aa9b56d24b4ba82",
   "blog-static-flake": "https://dev.danilafe.com/Nix-Configs/blog-static-flake/src/commit/67b47d9c298e7476c2ca211aac5c5fd961637b7b",
   "compiler": "https://dev.danilafe.com/DanilaFe/bloglang/src/commit/137455b0f4365ba3fd11c45ce49781cdbe829ec3",

layouts/_partials/spiderweb.html

@@ -0,0 +1,4 @@
+<svg class="spiderweb" viewBox="0 0 197.21727 106.16592">
+    {{ $spiderweb := resources.Get "svg/spiderweb.svg" | resources.Fingerprint }}
+    <use href="{{ $spiderweb.Permalink }}#mainlayer"></use>
+</svg>

layouts/_shortcodes/donate_css.html

@@ -0,0 +1,2 @@
+{{ $style := resources.Get "scss/donate.scss" | css.Sass | resources.Minify | resources.Fingerprint }}
+<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">

layouts/_shortcodes/gmachine_css.html

@@ -0,0 +1,2 @@
+{{ $style := resources.Get "scss/gmachine.scss" | css.Sass | resources.Minify | resources.Fingerprint }}
+<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">

layouts/_shortcodes/halfpage.html

@@ -0,0 +1,3 @@
+<div class="halfpage">
+    {{ .Inner | markdownify }}
+</div>

layouts/_shortcodes/stack_css.html

@@ -0,0 +1,2 @@
+{{ $style := resources.Get "scss/stack.scss" | css.Sass | resources.Minify | resources.Fingerprint }}
+<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">

layouts/partials/spiderweb.html

@@ -1,3 +0,0 @@
-<svg class="spiderweb" viewBox="0 0 197.21727 106.16592">
-    <use href="{{ (resources.Get "svg/spiderweb.svg").Permalink }}#mainlayer"></use>
-</svg>

layouts/shortcodes/donate_css.html

@@ -1,2 +0,0 @@
-{{ $style := resources.Get "scss/donate.scss" | css.Sass | resources.Minify }}
-<link rel="stylesheet" href="{{ $style.Permalink }}">

layouts/shortcodes/gmachine_css.html

@@ -1,2 +0,0 @@
-{{ $style := resources.Get "scss/gmachine.scss" | css.Sass | resources.Minify }}
-<link rel="stylesheet" href="{{ $style.Permalink }}">

layouts/shortcodes/stack_css.html

@@ -1,2 +0,0 @@
-{{ $style := resources.Get "scss/stack.scss" | css.Sass | resources.Minify }}
-<link rel="stylesheet" href="{{ $style.Permalink }}">

layouts/writing/baseof.html

@@ -1,25 +0,0 @@
-{{- /* Note: changing the baseof template because the title, tags, etc. of a regular post are still valid. */ -}}
-<!DOCTYPE html>
-<html lang="{{ .Site.Language.Lang }}">
-    {{- partial "head.html" . -}}
-    <body>
-        {{ with .Params.body_start_partial }}
-            {{ partial . $ }}
-        {{ end }}
-
-
-        {{ $writingcss := resources.Get "scss/writing.scss" | css.Sass | resources.Minify }}
-        <link rel="stylesheet" href="{{ $writingcss.Permalink }}">
-        {{- partial "header.html" . -}}
-        <div class="container"><hr class="header-divider"></div>
-        <main class="container">
-
-        {{- if .Draft -}}
-        {{- partial "warning.html" (i18n "postDraft") -}}
-        {{- end -}}
-
-        {{- block "main" . }}{{- end }}
-        </main>
-        {{- block "after" . }}{{- end }}
-    </body>
-</html>