fix layout in chrome

config.yaml

@@ -3,7 +3,7 @@ languageCode: en-us
 title: yequari.com
 theme: dreamcast
 params:
-  about: "I write code and occasionally blog posts."
+  # about: "I write code and occasionally blog posts."
   webmentions: https://webmention.io/yequari.com/webmention
   pingbacks: https://webmention.io/yequari.com/xmlrpc
 taxonomies:
@@ -36,27 +36,27 @@ menu:
       pageRef: /links
       weight: 60
   social:
-    - name: yequari@retro.pizza
+    - name: Mastodon
       params:
         rel: external
         icon: aero-mastodon.svg
         class: masto
       url: https://retro.pizza/@yequari
       weight: 10
-    - name: rss feed
+    - name: RSS
       params:
         icon: aero-rss.svg
         class: rss
       url: /blog/index.xml
       weight: 5
-    - name: yequari@32bit.cafe
+    - name: Email
       params:
         icon: aero-email-2.svg
         rel: external
         class: email
       url: mailto:yequari@32bit.cafe
       weight: 30
-    - name: yequari@ cardgameson.motorcycles
+    - name: XMPP
       params:
         rel: external
         icon: aero-chat.svg

content/_index.md

@@ -1,6 +1,7 @@
 ---
 title: yequari.com
 ---
-# Back at it again, for the very first time
 
-Welcome to my homepage! I like to program and tinker with computers. My other hobbies include video games, tabletop RPGs, and collecting Transformers figures. On this site I like to write about the web, games, and random thoughts I have. I also publish my notes on various topics. 
+# Hello
+
+Welcome to my homepage! I program and tinker with computers. This site is a collection of notes, ramblings, things I like, and more. My hobbies include video games, TTRPGs, and collecting Transformers figures. 

content/blog/2024/intentional-computing.md

@@ -0,0 +1,12 @@
+---
+title: "Intentional Computing"
+date: 2024-09-10T21:48:07-07:00
+---
+
+I've been using Arch Linux (btw) since the beginning of this year. It is a barebones distro, meaning you have to install every package you are going to use yourself. While not the most fun exercise in the world, it made me think about what software I need to make my computer usable. Beyond the necessary stuff like wi-fi drivers, I was forced to choose what I wanted my computing experience to be like. Rather than being given a default desktop environment and a suite of software I could opt-out of if I cared to, I instead had to deliberately opt-in to the desktop experience, text editor, and web browser. 
+
+It is certainly less convenient to do things this way. However, I'm coming to believe in the importance of [ritual and inconvenience in life](https://discourse.32bit.cafe/t/the-importance-of-inconvenience/1250/14). While I truly do understand the desire to follow the path of least resistance to get to a result (I am a programmer, after all), following that path for everything robs you of the experience of the journey. Doing things the hard way opens up your mind to different perspectives, takes you down paths that would otherwise go unexplored, and presents new opportunities for discovery. Setting up a usable Arch installation from scratch lets me take a moment to appreciate the immense amount of software that has built up the computing features I take for granted. Manually managing my music library and copying a selection of files to an mp3 player lets me think about what I love about certain songs, albums, and artists and how my tastes have changed over the years.  
+
+Tech is becoming increasingly focused on pushing us to passively consume content, whether on social media or one of a million streaming service, and making it harder to do anything else. We have incredibly powerful computers in our pockets, but the path of least resistance is to use them to check Twitter/Bluesky/Mastodon, because every other path is made to be difficult. [Using your phone to write totally sucks](https://jenson.org/text/), using it to draw requires a stylus and a lot of patience. Programming on it is totally impractical, and even if you do get around the barriers, good luck running any code on the device itself. It is more difficult to use your phone to write notes and doodle than a simple notepad, despite outclassing it by several orders of magnitude in both cost and compute power. The duopoly of phone operating systems means this is unlikely to change, unless mobile Linux somehow becomes usable during my lifetime. 
+
+All this is to say that computers are powerful tools that empower us to learn and be creative and build skills, and I aim to be more intentional in using my computer in this way. Sometimes my intention *is* entertainment, of course, but I want to choose that to be the case, instead of it being pushed on me by the software my computer runs.  

content/blog/2024/no-more-firefox/index.md

@@ -0,0 +1,13 @@
+---
+title: "No More Firefox"
+date: 2024-09-19T13:03:43-07:00
+year: "2024"
+---
+
+Mozilla is seemingly allergic to making good decisions, as shown by two recent (anti-)features it has brought to Firefox. First, is an AccuWeather widget on the new tab screen, enabled by default. On the surface, this seems mundane, but in order for this to work, Firefox is sending your "approximate" location to AccuWeather servers periodically in the background, [even if you disable the widget](https://digipres.club/@ryanfb/113125332270103817). This is the browser that tries to market itself as the go-to browser for privacy control.
+
+![](mozilla_homepage.png)
+
+Next, is Mozilla's [experimental integration with AI chatbot](https://blog.nightly.mozilla.org/2024/06/24/experimenting-with-ai-services-in-nightly/). Why? Who is asking for this? What telemetry data is being sent to the integrated services? Who knows! At least this one, in contrast to the weather widget, is opt-in, but regardless it shows how out of touch Mozilla is with its userbase. Firefox's *only* defining feature is that **it is not Chrome**, so following in Chrome's footsteps in implementing AI integration is a head-scratcher. 
+
+I have been using Firefox forever, and it makes me sad that it just gets worse and worse and worse. I'm not sure how much longer it (and by extension the Gecko rendering engine) will be around, since it is only allowed to exist because of Google donating money to avoid antitrust action. For now, I'll be switching to LibreWolf, a Firefox fork that actually delivers on the privacy promise. Hopefully Servo takes off well enough to be used as a daily driver sometime soon.

content/blog/2024/on-librewolf.md

@@ -0,0 +1,17 @@
+---
+title: "On LibreWolf"
+date: 2024-10-01T22:11:03-07:00
+year: "2024"
+---
+
+As I mentioned in my [previous post](/blog/2024/09/no-more-firefox/), I've been using LibreWolf as my daily driver browser. It's been about two weeks since then, and I had some thoughts.
+
+I originally tried to compile LibreWolf myself, which is how I found out 16GB of RAM is not enough to compile a web browser. I found this interesting since I was able to compile [Floorp](https://floorp.app/en) just fine a while back. Have browsers really gotten so complex over the past decade to require that much memory just to compile? Anyway, I just ended up installing the binary from the AUR and got up and running.
+
+One thing I really like is that new tab page is completely blank, except for a search bar. It helps me break the close reddit->new tab->open reddit cycle and generally just reduces distractions. I know this was configurable in Firefox, but having to set it up on every install meant I just stopped caring to do it after a while.
+
+Something I wish was possible is whitelisting certain sites to be able to use WebGL (and other things disabled by default as anti-fingerprinting measures), I can be pretty sure my self-hosted apps aren't fingerprinting me. I ended up disabling all of these measures because of this. 
+
+Finally, I've really enjoyed not being logged in to everything all the time. Obviously clearing cookies is configurable on Firefox, but doing it by default is not something I thought I would enjoy. When I want to go waste time on Reddit or YouTube, logging in every time is too much of hassle so I just go back to what I was doing. It's a nice incentive to browse the smallweb instead!
+
+Overall, it's been a pretty pleasant experience, and I was surprised that I actually found benefits to LibreWolf over Firefox, I was expecting the two experiences to match pretty closely.

content/now.md

@@ -6,8 +6,8 @@ date: 2023-04-17T15:00:46-07:00
 
 One day this page will pull some info from APIs to create a more interesting page but for now I just manually update it as needed.
 
-**Games I'm playing**: Cyberpunk 2077, Honkai Star Rail, Baldur's Gate 3
+**Games I'm playing**: Octopath Traveler, Vampire Survivors
 
 **Shows I'm watching**: Nothing currently
 
-**Music I'm listening to**: Kyuss, Tool, Cyberpunk 2077 Soundtrack, 100 gecs, King Crimson, breakcore
+**Music I'm listening to**: Sleep, Kyuss, Brant Bjork, Queens of the Stone Age, Monster Magnet

content/projects/_index.md

@@ -10,19 +10,13 @@ Here are some projects I'm currently working on or have worked on in the past.
 I run a few services for the amazing folks over at the [32-Bit Cafe](https://32bit.cafe).
 
   - [RSS reader](https://rss.32bit.cafe): an instance of the FreshRSS feed reader to provide an easy to use entry point for community members looking to get started with RSS.
-  - ~~Discussion boards: An instance of postmill used to share interesting links and resources to the community.~~
-  - ~~Discuss bot: A Discord bot that sends new posts from the discussion boards to a channel in the Discord server.~~
   - [32bit.cafe Discourse](https://discourse.32bit.cafe): The postmill instance has been phased out in favor of a Discourse forum. It has been awesome building this up with everyone and seeing the enthusiasm for a second primary space for the community.
 
 ## Websites
 
 - This website
-- [yequari's emporium of excellent toys](https://yeet.marigold.town): One day I will catalog my toy collection here
 - [webweav.ing tools](https://webweav.ing): Currently there is only an RSS feed generator but I intend to add several other tools to help smooth out some pain points of webmastery.
 
 ## Software
 
 - [Pynex](/projects/pynex): A terminal browser for m15o's nex protocol.
-- [lox-interpreter](/projects/lox-interpreter): Source code as I'm working through Robert Nystrom's excellent *Crafting Interpeters*.
-- [yqsh](/projects/yqsh): A toy shell written in C to learn Linux systems programming.
-- [weatherbar](/projects/weatherbar): A cli application to get current weather conditions, for use in status bar programs like i3bar, waybar, etc. 

content/transformers/store-exclusives/index.md

@@ -0,0 +1,60 @@
+---
+title: "Store Exclusives"
+date: 2024-08-11T08:53:54-07:00
+year: "2024"
+---
+
+# Transformers 00s Store Exclusives
+
+> *This page was created as an entry into the [32-Bit Cafe's Codejam #5](https://32bit.cafe/~xandra/events/codejam5/). While not necessarily a "complicated topic", it is a topic I can ramble on about for hours.*
+
+The early- to mid-2000s period of the Transformers franchise had an interesting product strategy, one that Hasbro seemed to shift away from following the success of the first live-action movie. This era was the one I grew up with, so I wanted to dive into one aspect of the toyline I find particularly interesting about this period: retailer exclusive toys.  
+
+## Some History
+
+Retailers will request exclusives from Hasbro as a way to draw customers into the store. The idea being if you go in for a specific exclusive toy, maybe you'll spend more money in the store other items while you're there, rather than getting them from a competitor. Kmart of all places actually had the first retailer-exclusive Transformers toys in 1989, which were the inner robots of the Classic Pretender toys: Bumblebee, Grimlock, Jazz, and Starscream. There were very few retailer exclusives after that until KB Toys got an entire subline named Machine Wars in 1997, containing toys made from cancelled Generation 2 molds or late Generation 1 molds that were exclusive to Europe. There were a few scattered exclusives since then in the Beast Wars and Beast Machine lines, but It wasn't until Robots in Disguise in 2001 that retailer exclusive mainline toys became a common practice. 
+
+## Exclusives for Everyone
+
+Following the success of the Robots in Disguise line, the large toy retailers of the time, Target, Walmart, Toys R Us, and KB Toys, began selling their own exclusive figures. These stores generally got pretty normal figures as exclusives, mostly repaints or value packs of mainline figures. Toys R Us got a lot of collector-oriented releases, including reissues of Generation 1 toys in the Commemerative Series line. Membership retailers Costco and Sam's Club also got some exclusives for the holiday season, which ended up being the weirder exclusive releases. 
+
+### Kmart
+
+Kmart was largely excluded from exclusives during this time, however they did get some, including an odd "Battle for the Matrix" multipack in the Transformers Armada line, containing "Powerlinx" Optimus Prime and "Powerlinx" Jetfire, along with a large assortment of Mini-cons. For context, by the second year of the Armada toyline, Hasbro was running out of toys to release to keep up with demand, so they repainted a bunch of first-year toys to represent "powered up" versions of the characters, and slapped "Powerlinx" in front of their name. Despite this labelling, neither "Powerlinx" figure in this multipack is actually the Powerlinx version released to all the retailers. Jetfire is exactly the same as the original figure, and Optimus Prime is almost the same as his original figure, except his red parts are painted gold for some reason. It...doesn't look great. To add to the confustion, it would have been possible to find the real mainline Powerlinx Optimus Prime and Jetfire next to this multipack. Wild.
+
+![Armada Optimus Prime, but red is now gold](images/800px-Armada-optimus-prime-gold-kmart.jpg "That's gold, Jerry! Gold!")
+
+### Sam's Club
+
+Sam's Club got 3 exclusives in this period, the first two in 2003 were repainted Robots in Disguise Optimus Prime and Ultra Magnus, under the Transformers Universe line. Ultra Magnus is mostly unchanged from his mainline 2001 release, except for some darker blues in his color scheme. Optimus Prime, though, is repainted in an awesome bright yellow color scheme. Why? Who knows. It is such an odd choice and I love it. Even weirder, is that Prime's die-cast chest is still painted red, a jarring contrast from everything else turning yellow. 
+
+![Robots in Disguise 2001 Optimus Prime but he's yellow](images/Universe2003toy-OptimusPrimeSuper.jpg "When life gives you lemons")
+
+The next year, Sam's Club offered an exclusive two-pack of Prowl and Starscream, which were repaints of Armada Red Alert and Armada Starscream, and included their Mini-cons. The Starscream is a fairly minor repaint, keeping a similar color scheme but with black wings and darker greys. Prowl, however, is sporting a blue and white color scheme, made to look more like Energon Prowl. I actually like this deco a lot, though I wonder why the choice was to repaint Red Alert instead of one of the million Autobot cars. 
+
+![](images/Energon-toy_2-pack_Starscream.jpg)
+![](images/Energon-toy_2-pack_Prowl.jpg)
+
+### Costco
+
+Costco got a few exclusives, the most notable one is a 2004 multipack of Armada Optimus Prime and Overload, repainted in a black, yellow, and maroon color scheme. It is very similar to the [Universe Optimus Primal](https://tfwiki.net/wiki/Optimus_Primal_(BW)/toys#Universe_.282003.29) figure. I actually like this color scheme a lot, it's pretty unique as far as Optimus Prime decos go.
+
+![](images/Energon_Costco_OptimusPrimeOverload.jpg)
+
+The following year, Costco sold a multipack of the Sam's Club versions of Robots in Disguise Optimus Prime and Ultra Magnus, except Optimus is back to being red. Interestingly, the box uses the artwork for Cybertron Optimus Prime, even though the toys don't look much alike, and box art for Ultra Magnus in the Cybertron style was specifically created for this release. I remember being somewhat disappointed about getting this set for Christmas that year because it wasn't Cybertron Optimus Prime, but I came around on them pretty quickly.
+
+![](images/Cybertrontoy_ridprime_magnus_2pack.jpg) 
+
+In 2006, Costco got a multipack of Cybertron Optimus Prime and Wing Saber with an extra DVD included. The toys were repackaged without any modification from the mainline, which actually makes it somewhat unique among the other exclusives of the time. I was very excited about getting this one for Christmas.
+
+![](images/Cybertrontoy_prime_wingsaber_2pack.jpg)
+
+## Conclusion
+
+While exclusives have certainly not gone away, after the franchise *exploded* following the release of the first live-action movie, the way exclusives were done changed. Of course we still got random repaints, but these tended to be minor characters. Hasbro became much more deliberate in its releases of big ticket toys like Optimus Prime, avoiding wacky repaints and instead going for more grounded color schemes, usually for a more "screen accurate" look, such as with Premium Edition releases. 
+
+## More info
+
+- [Exclusives - TFWiki](https://tfwiki.net/wiki/Exclusive)
+- Images sourced from the characters' respective pages on TFWiki
+

layouts/blog/list.html

@@ -0,0 +1,22 @@
+{{ define "main" }}
+<h1>{{ .Title }}</h1>
+<section class="content posts h-feed hfeed">
+    {{ range .Paginator.Pages.ByPublishDate.Reverse }}
+    <article class="h-entry">
+        <h2><a class="title u-url p-name" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+        {{ partial "post-header.html" .}}
+        {{ if .Params.Subtitle }}<p class="subtitle">{{ .Params.Subtitle }}</p>{{ end }}
+        <p class="summary">
+            {{ .Summary }}{{ if .Truncated }}...{{ end }}
+        </p>
+    </article>
+    {{ end }}
+</section>
+{{ template "_internal/pagination.html" . }}
+{{ end }}
+{{ define "sidebar" }}
+<!-- {{- partial "blog-sidebar.html" . -}} -->
+<!-- <h3>See Posts From</h3> -->
+<!-- {{- partial "posts-by-year.html" . -}} -->
+<!-- {{- partial "sidebar.html" . -}} -->
+{{ end }}

layouts/index.html

@@ -0,0 +1,20 @@
+{{ define "main" }}
+<div class="index-wrapper">
+    <div class="box index-content">
+        {{ .Content }}
+    </div>
+    <div class="box index-blog">
+        {{- partial "index-latest-blogs.html" . -}}
+    </div>
+    <div class="box index-social">
+        {{- partial "index-socials.html" . -}}
+    </div>
+    <!-- <div class="box index-banners"> -->
+    <!-- </div> -->
+    <div class="box index-recent">
+        {{- partial "index-now.html" . -}}
+    </div>
+    <!-- <div class="box index-bookmarks"> -->
+    <!-- </div> -->
+</div>
+{{ end }}

layouts/links/list.html

@@ -13,3 +13,5 @@
         </div>
     </div>
 {{ end }}
+{{ define "sidebar" }}
+{{ end }}

layouts/notes/list.html

@@ -1,26 +1,23 @@
 {{ define "main" }}
 <h1>{{ .Title }}</h1>
 {{ .Content }}
-<section class="content posts h-feed hfeed notes-list">
-    {{ $taxonomy := "tags" }}
-    {{ $section := "notes" }}
-    {{ range $term, $weightedPages := index site.Taxonomies $taxonomy }}
-        {{ $termPage := site.GetPage (printf "%s/%s" $taxonomy $term) }}
-
-        {{ $termPages := where $weightedPages "Page.Section" $section }}
-        {{ $amount := $termPages.Len }}
-        {{ if gt $amount 0 }}
-            <section class="notes-tag">
-                <h2>{{ $termPage.LinkTitle }}</h2>
-                <ul>
-                    {{ range sort $termPages "Page.Title" }}
-                        <li>
-                            <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-                        </li>
-                    {{ end }}
-                </ul>
-            </section>
+<section class="content posts h-feed hfeed">
+    <ul>
+        <li class="note-item"><h2>Title</h2><h2>Tags</h2></li>
+        {{ range (where .Site.RegularPages.ByTitle "Section" "notes") }}
+        <li class="note-item">
+            <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+            {{ $taxonomy := "tags" }}
+            {{ with .GetTerms $taxonomy }}
+            <span>
+            {{ range $k, $_ := . -}}
+            {{ if $k }}, {{ end }}
+            <a class="tag" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+            {{- end }}
+            {{ end }}
+            </span>
+        </li>
         {{ end }}
-    {{ end }}
+    </ul>
 </section>
 {{ end }}

layouts/pages/desertrock.html

@@ -0,0 +1,8 @@
+<html>
+    <head>
+        <title></title>
+    </head>
+    <body>
+{{ .Content }}
+    </body>
+    </html>

layouts/partials/avatar.html

@@ -9,5 +9,5 @@
       {{ end }}
   {{ end }}
         <span class="gloss"></span>
-        <img class="u-photo" width="100px" src="/images/avatar.jpg">
+        <img class="u-photo avatar" src="/images/avatar.jpg">
           </div>

layouts/partials/blog-sidebar.html

@@ -0,0 +1,4 @@
+<section class="sidebar">
+    <h3> See Posts From </h3>
+    {{- partial "posts-by-year.html" . -}}
+</section>

layouts/partials/footer.html

@@ -1,6 +1,9 @@
 <p>
-    {{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
-        Site last updated <time id="last-update" datetime="{{ .PublishDate.Format "2006-01-02 15:04:05 -0700" }}">{{ .PublishDate.Format "January 2, 2006" }}</time>.
+    Made without AI tools using Hugo.
+    {{ range first 1 .Site.RegularPages.ByDate.Reverse }}
+        Last updated <time id="last-update" datetime="{{ .PublishDate.Format "2006-01-02 15:04:05 -0700" }}">{{ .PublishDate.Format "January 2, 2006" }}</time>.
     {{ end }}
-    <script src="https://tinylytics.app/embed/ig7D4Y9LSxprgCWfj5e8.js" defer></script>
+</p>
+<p>
+    <button class="hidden" value="dark mode" id="theme-toggle">Button</button>
 </p>

layouts/partials/header.html

@@ -0,0 +1,4 @@
+<div class="profile h-card">
+    <a class="sitetitle u-url" rel="me" href="{{ .Site.BaseURL }}"><h1><span class="p-name">{{ .Site.Title }}</span></h1></a>
+    {{- partial "avatar.html" . -}}
+</div>

layouts/partials/index-article-recs.html

@@ -0,0 +1 @@
+<h3>Read These Articles</h3>

layouts/partials/index-latest-blogs.html

@@ -0,0 +1,9 @@
+<h3>Latest Blog Posts</h3>
+<ul>
+    {{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
+    <li>
+        <time class="dt-published" datetime="{{ .PublishDate }}">{{ .PublishDate.Format "1/2/06" }}</time>
+        <a class="title u-url p-name" href="{{ .RelPermalink }}">{{ .Title }}</a>
+    </li>
+    {{ end }}
+</ul>

layouts/partials/index-link-banners.html

@@ -0,0 +1,12 @@
+<h3>Check Out These Sites</h3>
+<div id="index-links">
+    <a href="#"><img src="/images/link-banners/manatee_banner2.png"></a>
+    <a href="#"><img src="/images/link-banners/isthisloss.png"></a>
+    <a href="#"><img src="/images/link-banners/iusearchbtw.png"></a>
+    <a href="#"><img src="/images/link-banners/poweredbymozilla.png"></a>
+    <a href="#"><img src="/images/link-banners/yqbanner.png"></a>
+    <a href="#"><img src="/images/link-banners/sendmeawebmention.png"></a>
+</div>
+<p>
+<a href="/links">/links</a> =&gt;
+</p>

layouts/partials/index-now.html

@@ -0,0 +1,6 @@
+<h3>What I'm Up To</h3>
+<ul>
+    <li>Helping out at the <a href="https://32bit.cafe">32-Bit Cafe</a></li>
+    <li>Playing <strong>Zenless Zone Zero</strong></li>
+    <li>Learning C#</li>
+</ul>

layouts/partials/index-socials.html

@@ -0,0 +1,16 @@
+<h3>Socials</h3>
+<ul class="social">
+    {{ range site.Menus.social }}
+    <li class="social">
+        <img class="social" src="/icons/{{.Params.icon}}">
+        {{ if .URL }}
+        <a rel="me" href="{{ .URL | safeURL }}">
+            {{ .Name }}
+            <!-- <span class="social {{.Params.class}}"></span> -->
+        </a>
+        {{ else }}
+        {{ .Name }}
+        {{ end }}
+    </li>
+    {{ end }}
+</ul>

layouts/partials/sidebar.html

@@ -1,38 +1,26 @@
-<section>
-    <!-- <div id="avatar-frame" class="online"> -->
-    <!--     <span class="gloss"></span> -->
-    <!--     <img class="u-photo" width="100px" src="/images/avatar.jpg"> -->
-    <!-- </div> -->
-    {{ partial "avatar.html" . }}
-    <p class="about-me">
-        I'm yequari. I like programming, tabletop games, and the Transformers.
-    </p>
+<section class="sidebar">
+    <section>
+        <!-- <div id="avatar-frame" class="online"> -->
+        <!--     <span class="gloss"></span> -->
+        <!--     <img class="u-photo" width="100px" src="/images/avatar.jpg"> -->
+        <!-- </div> -->
+        {{ partial "avatar.html" . }}
+        <!-- <p class="about-me"> -->
+        <!--     I'm yequari. I like programming, tabletop games, and the Transformers. -->
+        <!-- </p> -->
+    </section>
+    <section>
+        <!-- <div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=yequari" defer></script> -->
+        {{ partial "statuscafe.html" .}}
+    </section>
+    <section>
+        <!-- <h1>Social</h1> -->
+        {{ partial "index-socials.html" .}}
+    </section>
+    <!-- <section> -->
+    <!--     <h1>Quote of the Day</h1> -->
+    <!--     <div id="quote"> -->
+    <!--         <p id="subtitle">.</p> -->
+    <!--     </div> -->
+    <!-- </section> -->
 </section>
-<section>
-    <!-- <div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=yequari" defer></script> -->
-    {{ partial "statuscafe.html" .}}
-</section>
-<section>
-    <!-- <h1>Social</h1> -->
-    <ul class="social">
-        {{ range site.Menus.social }}
-        <li class="social">
-            <img class="social" src="/icons/{{.Params.icon}}">
-            {{ if .URL }}
-            <a rel="me" href="{{ .URL | safeURL }}">
-                {{ .Name }}
-                <!-- <span class="social {{.Params.class}}"></span> -->
-            </a>
-            {{ else }}
-            {{ .Name }}
-            {{ end }}
-        </li>
-        {{ end }}
-    </ul>
-</section>
-<!-- <section> -->
-<!--     <h1>Quote of the Day</h1> -->
-<!--     <div id="quote"> -->
-<!--         <p id="subtitle">.</p> -->
-<!--     </div> -->
-<!-- </section> -->

layouts/transformers/single.html

@@ -0,0 +1,5 @@
+{{ define "main" }}
+<article>
+    {{ .Content }}
+</article>
+{{ end }}

static/css/custom.css

@@ -1,11 +1,193 @@
-.notes-list {
-  display: flex;
-  flex-flow: row wrap;
+:root {
+    --avatar-width: 50px;
+    --avatar-padding: calc(var(--avatar-width) / 10);
 }
 
-.notes-tag {
-  flex: 1 3 300px;
-  border: 1px dotted gray;
-  margin: 10px;
-  padding: 0 10px;
+#avatar-frame {
+    width: fit-content;
+    max-height: var(--avatar-width);
+    margin: 0.5vh 0;
+    padding: var(--avatar-padding);
+    border: 1px solid #cccccf;
+    border-radius: 15%/23%;
+    position: relative;
 }
+
+#avatar-frame img {
+    max-width: var(--avatar-width);
+    border: 1px solid grey;
+    border-radius: 5px;
+}
+
+.online {
+    background: linear-gradient(#D6FFDB00 0%, #D6FFDB 30%, #66FF00 100%);
+    box-shadow: 0 5px 10px #66FF00;
+}
+
+.busy {
+    background: linear-gradient(#FF9A0000 0%, #D8820055 30%,  #fca30d 100%);
+    box-shadow: 0 5px 10px #fca30d;
+}
+
+.gloss {
+    width: 100%;
+    height: 100%;
+    /*   background: red; */
+    background: radial-gradient(ellipse 200% 120% at 50% 0%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 50%,
+    rgba(255,255,255,0) 51%);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    border-radius: 15%/23%;
+    pointer-events: none;
+}
+
+.index-wrapper {
+    display: grid;
+    grid-template-columns: repeat(10, 10% [col-start]);
+    grid-template-rows: 50% 50%;
+    grid-template-areas: 
+        "content content content content content content recent recent recent recent"
+        "interests interests interests interests blog blog blog blog social social";
+}
+
+.box {
+    /* border: 1px dotted black; */
+    padding: 2vh;
+    font-size: 1.1rem;
+}
+
+li.note-item {
+    display: flex;
+    justify-content: space-between;
+}
+
+.index-content {
+    grid-area: content;
+}
+
+.index-social {
+    grid-area: social;
+}
+
+.index-blog {
+    grid-area: blog;
+}
+
+.index-banners {
+    grid-row: 3 / 4;
+    grid-column: 1 / span 5;
+}
+
+.index-recent {
+    grid-area: recent;
+}
+
+.index-bookmarks {
+    grid-row: 3 / 4;
+    grid-column: 6 / span 5;
+}
+
+@media only screen and (max-width: 500px) {
+    .index-wrapper {
+        display: flex;
+        flex-flow: row wrap;
+    }
+}
+
+#statuscafe {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    border: 1px solid #CCCCCC;
+}
+
+#statuscafe p {
+    line-height: 1.5;
+    margin: 5px 0;
+    color: var(--secondary-text);
+    font-style: italic;
+}
+
+#statuscafe #statuscafe-timeago {
+    flex: 1 1 50%;
+    text-align: right;
+}
+
+#statuscafe #statuscafe-username {
+    flex: 1 1 50%;
+}
+
+#statuscafe #statuscafe-content {
+    flex: 1 1 100%;
+}
+
+/*
+ * Links page
+ */
+
+    #links-main {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 10px;
+    }
+
+    #links-main ul {
+        padding: 0;
+    }
+
+    #links-main li {
+        padding: 7px 0;
+        list-style-type: none;
+    }
+
+    .link-list details {
+        border: 1px dotted var(--pewter-blue);
+        padding: 0.7em 0.7em;
+        font-size: 1.1rem;
+    }
+
+    .link-list details[open] {
+        /* padding: 0.5em; */
+    }
+
+    .link-list details[open] summary {
+        border-bottom: 1px dotted var(--pewter-blue);
+        padding-bottom: 0.5em;
+        margin-bottom: 0.5em;
+    }
+
+    .link-list summary p {
+        line-height: 1;
+        /* margin: -0.5em -0.5em 0; */
+        /* padding: 0.5em; */
+    }
+
+    .links-column {
+        display: flex;
+        flex-direction: column;
+        flex: 1 3 20%;
+        overflow-wrap: break-word;
+    }
+
+    .links-column h2 {
+        text-align: center;
+    }
+
+    /* webmention box */
+
+    .send-webmention {
+        margin: 55px 25px;
+        max-width: fit-content;
+        border: 1px dotted var(--primary-text);
+        padding: 0 20px 20px;
+    }
+
+    .send-webmention p {
+        font-size: 1.3rem;
+    }
+
+    #webmentions img { max-height: 1.2em; margin-right: -1ex; }

themes/dreamcast/layouts/_default/baseof.html

@@ -10,9 +10,8 @@
                 {{- partial "nav.html" . -}}
             </nav>
             <div class="main-sidebar">
-                <section class="sidebar">
-                    {{- partial "sidebar.html" . -}}
-                </section>
+                {{- block "sidebar" . }}
+                {{ end }}
                 <main>
                     {{- block "main" . }}{{- end }}
                 </main>

themes/dreamcast/layouts/_default/list.html

@@ -12,3 +12,5 @@
     {{ end }}
 </section>
 {{ end }}
+{{ define "sidebar" }}
+{{ end }}

themes/dreamcast/layouts/_default/single.html

@@ -1,3 +1,5 @@
 {{ define "main" }}
 {{ .Content }}
 {{ end }}
+{{ define "sidebar" }}
+{{ end }}

themes/dreamcast/layouts/blog/list.html

@@ -13,6 +13,4 @@
     {{ end }}
 </section>
 {{ template "_internal/pagination.html" . }}
-<h3>See Posts From</h3>
-{{- partial "posts-by-year.html" . -}}
 {{ end }}

themes/dreamcast/layouts/blog/single.html

@@ -13,3 +13,5 @@
         </div>
     </article>
 {{ end }}
+{{ define "sidebar" }}
+{{ end }}

themes/dreamcast/layouts/index.html

@@ -7,3 +7,6 @@
     {{ end }}
     </ul>
 {{ end }}
+{{ define "sidebar" }}
+  {{- partial "sidebar.html" . -}}
+{{ end }}

themes/dreamcast/layouts/partials/head.html

@@ -12,6 +12,7 @@
     <link rel="icon" type="image/png" href="/favicon.png">
     <link rel="webmention" href="{{ .Site.Params.Webmentions }}" />
     <link rel="pingback" href="{{ .Site.Params.Pingbacks }}" />
+    <script src="/js/main.js" defer></script>
     {{ range .AlternativeOutputFormats -}}
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
 {{ end -}}

themes/dreamcast/layouts/partials/posts-by-year.html

@@ -1,4 +1,6 @@
+<ul>
 {{ range $index,$element := .Site.Taxonomies.year -}}
-{{if ne $index "2022"}},{{end}}
-<a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
+<!-- {{if ne $index "2022"}},{{end}} -->
+<li><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a></li>
 {{- end -}}
+</ul>

themes/dreamcast/static/css/main.css

@@ -1,86 +1,87 @@
-@import url(https://fonts.bunny.net/css?family=ibm-plex-mono:400|noto-sans:400,500,600,700|m-plus-1:400,500,600,700|audiowide:400);
+@import url(https://fonts.bunny.net/css?family=ibm-plex-mono:400|noto-sans:400,500,600,700|m-plus-1:400,500,600,700|audiowide:400|koulen:400|catamaran:400,700);
 /* CSS HEX */
 :root {
-    --jet: #353535ff;
-    --chinese-red: #aa3322ff;
-    --pale-silver: #c4bbafff;
-    --space-cadet: #292640ff;
-    --xiketic: #0f101aff;
-    --blue-ryb: #4056f4ff;
-    --raisin-black: #241e1edd;
-    --dim-gray: #756b6bff;
-    --pewter-blue: #93A8ACff;
-
-    --celestial-blue: #5299D3;
-    --white-smoke: #F1EDEE;
-    --midnight-blue: #18206F;
-    --penn-blue: #17255A;
-    --eerie-black: #172121;
-    --vista-blue: #8EA4D2;
-
-    --dark-purple: #331832;
-    --fairy-tale: #FFC6D9;
-    --english-violet: #694D75;
-    --platinum: #D0DDD7;
-    --non-photo-blue: #8AC6D0;
-
-    --night: #121113;
-    --tea-green: #E2F1AF;
-    --anti-flash-white: #EEF0F2;
-    --zaffre: #0D21A1;
-    --saffron: #EEC643;
-    --purple: #7B1E7A;
-    --raspberry-rose: #B33F62;
-    --tufts-blue: #3C91E6;
-    --pale-purple: #F3E0EC;
-    --timberwolf: #DDCECD;
     --isabelline: #EEE5E5;
-    --verdigris: #28AFB0;
-    --fandango: #AF4D98;
-    --risd-blue: #4242FF;
 
-    --charcoal: #364958;
-    --cornflower-blue: #758BFD;
-    --tropical-indigo: #9D8DF1;
+    --bg: #0046de;
+    --brown: #896D2E;
+    --orange: #DE9B00;
+    --blue-gray: #2F3E5E;
+    --blue: #284D9E;
+    --black: #342F23;
 
-    /* solarized dark colors */
-    --base00: #657b83;
-    --base01: #586e75;
-    --base02: #073642;
-    --base03: #002b36;
-    --base0: #839496;
-    --base1: #93a1a1;
-    --base2: #eee8d5;
-    --base3: #fdf6e3;
+    --russian-violet: #1f0949;
+    --tea-rose: #f8c7cc;
+    --periwinkle: #BEB7DF;
+    --rose-quartz: #ABA9BF;
+    --eerie-black: #1D1E18;
+    --lavender: #E1E2EF;
+    --mardi-gras: #320F76;
 
-    --yellow: #b58900;
-    --orange: #cb4b16;
-    --red: #dc322f;
-    --magenta: #d33682;
-    --violet: #6c71c4;
-    --blue: #268bd2;
-    --cyan: #2aa198;
-    --green: #859900;
-
-    --main-bg: var(--dark-purple);
+    --main-bg: linear-gradient(#0045df, #00d4ff);
     --content-bg: var(--isabelline);
-    --primary-text: var(--night);
-    --secondary-text: var(--charcoal);
-    --nav-link: var(--fairy-tale);
-    --primary-link: var(--risd-blue);
-    --primary-link-hover: var(--chinese-red);
-    --secondary-link: var(--verdigris);
-    --secondary-link-hover: var(--tropical-indigo);
-    --ternary-link: var(--zaffre);
-    --ternary-link-hover: var(--chinese-red);
+    --primary-text: var(--black);
+    --secondary-text: var(--blue-gray);
+    --header: var(--orange);
+    --nav-link: var(--orange);
+    --primary-link: var(--brown);
+    --primary-link-hover: var(--blue);
+    --secondary-link: var(--blue);
+    --secondary-link-hover: var(--brown);
+    --ternary-link: var(--blue);
+    --ternary-link-hover: var(--brown);
+    --shadow: #2F3E5E55;
+
+    --heading-1: 2.75rem;
+    --heading-2: 2.25rem;
+    --heading-3: 1.75rem;
+    --heading-4: 1.25rem;
+    --heading-5: 0.75rem;
+    --heading-6: 0.25rem;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --main-bg: linear-gradient(#28164B, 70%, #825ECA );
+        --content-bg: #1A181B;
+        --primary-text: #DCCBFF;
+        --secondary-text: #B89AF5;
+        --header: #825ECA;
+        --nav-link: #B89AF5;
+        --primary-link: #B89AF5;
+        --primary-link-hover: #E3D5FF;
+        --secondary-link: #E3D5FF;
+        --secondary-link-hover: #B89AF5;
+        --ternary-link: var(--blue);
+        --ternary-link-hover: var(--brown);
+        --shadow: #00000088;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --main-bg: linear-gradient(#0045df, #00d4ff);
+        --content-bg: var(--isabelline);
+        --primary-text: var(--black);
+        --secondary-text: var(--blue-gray);
+        --header: var(--orange);
+        --nav-link: var(--orange);
+        --primary-link: var(--brown);
+        --primary-link-hover: var(--blue);
+        --secondary-link: var(--blue);
+        --secondary-link-hover: var(--brown);
+        --ternary-link: var(--blue);
+        --ternary-link-hover: var(--brown);
+        --shadow: #2F3E5E55;
+    }
 }
 
 body {
-    background: fixed no-repeat url('/images/waves.svg') #00c2f6;
+    background: fixed no-repeat url('/images/waves-nobg.svg'), fixed no-repeat var(--main-bg);
     background-size: cover;
     color: var(--primary-text);
     font-size: medium;
-    font-family: 'Noto Sans', sans-serif;
+    font-family: 'Catamaran', serif;
     scrollbar-width: none;
     padding: 0;
     margin: 0;
@@ -92,20 +93,43 @@ body::-webkit-scrollbar {
 
 h1,h2,h3,h4,h5,h6 {
     color: var(--secondary-text);
-    font-family: 'M PLUS 1', sans-serif;
-    text-transform: capitalize;
+    font-family: 'Koulen', sans-serif;
+}
+
+h1 {
+    font-size: var(--heading-1);
+}
+
+h2 {
+    font-size: var(--heading-2);
+}
+h3 {
+    font-size: var(--heading-3);
+}
+h5 {
+    font-size: var(--heading-5);
+}
+h6 {
+    font-size: var(--heading-6);
 }
 
 p {
+    font-size: 1.1rem;
     line-height: 1.8;
 }
 
 p.subtitle {
     color: var(--secondary-text);
-    font-size: 1.1rem;
     font-style: italic;
-    margin-top: -10px;
-    margin-bottom: -5px;
+}
+
+p.about {
+    line-height: 0;
+    color: var(--fairy-tale);
+}
+
+p.context {
+    font-style: italic;
 }
 
 a:link, a:visited {
@@ -117,21 +141,30 @@ a:hover, a:active {
     text-decoration: underline;
 }
 
-a.tag {
+article a.title:link, article a.title:visited {
     color: var(--secondary-link);
+}
+
+article a.title:hover, article a.title:active {
+    color: var(--secondary-link-hover);
+}
+
+a.tag {
+    color: var(--primary-link);
     text-decoration: none;
 }
 
 a.tag:hover, a.tag:active {
+    color: var(--primary-link-hover);
     text-decoration: underline;
 }
 
 a.category {
-    color: var(--ternary-link)
+    color: var(--primary-link)
 }
 
 a.category:hover, a.category:active {
-    color: var(--ternary-link-hover)
+    color: var(--primary-link-hover)
 }
 
 a.permalink {
@@ -145,7 +178,7 @@ a.summary {
 header h1 {
     font-family: 'Audiowide', display;
     /* font-size: 1rem; */
-    color: var(--fairy-tale);
+    color: var(--header);
     display: inline;
     text-transform: uppercase;
 }
@@ -164,6 +197,10 @@ img.social {
     width: 16px;
 }
 
+header {
+    font-family: 'Noto Sans', sans-serif;
+}
+
 header a.sitetitle {
     text-decoration: none;
 }
@@ -173,20 +210,14 @@ header .profile {
     flex-flow: row wrap;
     justify-content: space-between;
     margin: 10px;
+    text-shadow: 3px 3px 5px var(--shadow);
 }
 
 header .profile img {
     display: inline-block;
 }
 
-p.about {
-    line-height: 0;
-    color: var(--fairy-tale);
-}
 
-p.context {
-    font-style: italic;
-}
 
 .wrapper {
     max-width: 1024px;
@@ -194,85 +225,151 @@ p.context {
 }
 
 nav {
-    /* From https://css.glass */
-    background: rgba(255, 255, 255, 0.13);
-    border-radius: 16px;
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(5px);
-    -webkit-backdrop-filter: blur(5px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-
-    text-align: center;
-    padding: 0;
-    border-radius: 15px;
-    margin-bottom: 10px;
+  /* From https://css.glass */
+  background: rgba(255, 255, 255, 0.13);
+  border-radius: 16px;
+  box-shadow: 3px 3px 5px var(--shadow);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  text-align: center;
+  padding: 0;
+  border-radius: 15px;
+  margin-bottom: 10px;
 }
 
 nav ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  background: radial-gradient(
+    circle at calc((var(--mouse-x, 50) * 75%)) calc(var(--mouse-y, 50) * 100%),
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0.05) 20%,
+    rgba(255, 255, 255, 0) 30%
+  );
+  border-radius: 15px;
 }
 
 nav li {
-    display: inline;
+  display: inline-block;
+  border-radius: 15px;
+  transition: box-shadow 0.3s;
+}
+
+nav li:hover,
+nav li:active {
+  animation: 0.2s ease-in 1 forwards spotlight;
+  outline: 1px solid rgba(255, 255, 255, 0.2);
+  background-clip: border-box;
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
 }
 
 nav li a {
-    display: inline-block;
-    padding: 20px;
-    /* font-size: 1.1rem; */
-    transition: box-shadow 0.3s;
-    text-transform: uppercase;
+  display: inline-block;
+  padding: 20px;
+  font-size: 1.1rem;
+
+  text-transform: uppercase;
+  font-family: "Noto Sans", sans-serif;
+  font-weight: 500;
+  border-radius: 15px;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
 }
 
-nav li a:link, nav li a:visited {
-    color: var(--nav-link);
-    text-decoration: none;
+nav li a:link,
+nav li a:visited {
+  color: var(--nav-link);
+  text-decoration: none;
+  border-left: 1px solid rgba(255, 255, 255, 0);
+  border-right: 1px solid rgba(255, 255, 255, 0);
 }
 
-nav li a:hover, nav li a:active {
-    animation: 0.2s ease-in 1 forwards gradient;
-    outline: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 0 10px white;
+nav li a:hover,
+nav li a:active {
+  background: radial-gradient(
+    ellipse 425% 100% at top,
+    rgba(255, 255, 255, 0.25) 0%,
+    rgba(255, 255, 255, 0.05) 30%,
+    rgba(255, 255, 255, 0) 32%
+  );
+/*   background: linear-gradient(
+    rgba(255, 255, 255, 0.13) 0%,
+    rgba(255, 255, 255, 0.1) 30%,
+    rgba(255, 255, 255, 0) 31%
+  ); */
+  border-left: 1px solid rgba(255, 255, 255, 0.05);
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
 }
 
-@keyframes gradient {
-    0% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.00) 10%, rgba(255,255,255,0) 20%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.0) 41%); 
-    }
-    20% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0) 30%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
-    }
-    40% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0) 35%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
-    }
-    60% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 45%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
-    }
-    80% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.20) 25%, rgba(255,255,255,0) 50%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
-    }
-    100% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0) 50%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
-    }
+@keyframes spotlight {
+  0% {
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0) 10%,
+      rgba(255, 255, 255, 0) 20%
+    );
+  }
+  20% {
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.05) 0%,
+      rgba(255, 255, 255, 0.03) 20%,
+      rgba(255, 255, 255, 0) 30%
+    );
+  }
+  40% {
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0.07) 25%,
+      rgba(255, 255, 255, 0) 45%
+    );
+  }
+  60% {
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.15) 0%,
+      rgba(255, 255, 255, 0.13) 25%,
+      rgba(255, 255, 255, 0) 50%
+    );
+  }
+  80% {
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.15) 25%,
+      rgba(255, 255, 255, 0) 50%
+    );
+  }
+  100% {
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.15) 25%,
+      rgba(255, 255, 255, 0) 50%
+    );
+  }
 }
 
+
 .main-sidebar {
     background-color: var(--content-bg);
     border-radius: 15px;
     z-index: 1;
     display: flex;
     flex-flow: row wrap;
-    box-shadow: 10px 5px 5px #00000066;
-    padding: 30px 0 0 0; 
-    margin-bottom: 100px;
+    box-shadow: 3px 3px 5px var(--shadow);
+    padding: 0; 
+    margin-bottom: 10vh;
 }
 
 .sidebar {
     flex: 0 1 20%;
-    border-right: 1px solid black;
-    padding: 0 25px;
+    border-right: 1px solid #c7c7c7;
+    padding: 30px 25px;
 }
 
 .sidebar h1 {
@@ -284,86 +381,18 @@ nav li a:hover, nav li a:active {
     text-align: center;
 }
 
-.sidebar #avatar-frame {
-    width: fit-content;
-    height: 100px;
-    margin: 0 auto 25px auto;
-    padding: 8px 8px;
-    border: 1px solid #cccccf;
-    border-radius: 16px/24px;
-    position: relative;
-}
-
-.sidebar #avatar-frame img {
-    max-width: 100px;
-    border: 1px solid grey;
-    border-radius: 5px;
-}
-
-#statuscafe {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    /* border: 1px solid #CCCCCC; */
-}
-
-#statuscafe p {
-    line-height: 1.5;
-    margin: 5px 0;
-    color: var(--secondary-text);
-    font-style: italic;
-}
-
-#statuscafe #statuscafe-timeago {
-    flex: 1 1 50%;
-    text-align: right;
-}
-
-#statuscafe #statuscafe-username {
-    flex: 1 1 50%;
-}
-
-#statuscafe #statuscafe-content {
-    flex: 1 1 100%;
-}
-
-.online {
-  background: linear-gradient(#D6FFDB00 0%, #D6FFDB 30%, #66FF00 100%);
-  box-shadow: 0 5px 10px #66FF00;
-}
-
-.busy {
-  background: linear-gradient(#FF9A0000 0%, #D8820055 30%,  #fca30d 100%);
-  box-shadow: 0 5px 10px #fca30d;
-}
-
-.gloss {
-  width: 100%;
-  height: 100%;
-/*   background: red; */
-  background: radial-gradient(ellipse 200px 140px at 50% 0%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 50%,
-  rgba(255,255,255,0) 51%);
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  border-radius: 16px/24px;
-  pointer-events: none;
-}
-
 main {
     flex: 1 3 70%;
-    padding: 0 25px;
+    padding: 2vh 4vw;
 }
 
 main li {
     padding: 0.2em 0;
 }
 
-
 article p.context {
-    margin-top: -25px;
-    padding-left: 25px;
+    margin-top: 0;
+    padding-left: 1vw;
 }
 
 article p {
@@ -372,9 +401,9 @@ article p {
 
 article img {
     display: block;
-    max-width: 400px;
+    width: 85%;
+    object-fit: scale-down;
     margin: 8px auto;
-    text-align: center;
 }
 
 article figcaption {
@@ -399,21 +428,10 @@ blockquote {
     border-left: 3px solid #ccc;
 }
 
-code {
-    background-color: black;
-    overflow-x: scroll;
-    padding: 0 5px;
-    color: white;
-    font-family: 'IBM Plex Mono', monospace;
-}
-
 pre {
-}
-
-pre code{
-    padding: 15px;
-    display: block;
-    max-width: 640px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    padding: 1vh 2vw;
 }
 
 ul.pagination {
@@ -427,26 +445,28 @@ li.page-item {
 }
 
 footer {
+    border-top: 1px dotted var(--secondary-text);
     text-align: center;
     color: var(--secondary-text);
     flex: 1 1 100%;
 }
 
+footer p {
+    font-size: 0.8rem;
+}
+
+#theme-toggle {
+    background: var(--content-bg);
+    color: var(--primary-text);
+}
+
 .metadata {
     display: flex;
     flex-flow: row;
     justify-content: space-between;
-    margin-top: 30px;
-    margin-bottom: -15px;
+    margin-top: 1vh;
 }
 
-h3.index {
-    margin-bottom: 10px;
-    /* margin: 10px 0; */
-}
-
-#webmentions img { max-height: 1.2em; margin-right: -1ex; }
-
 .hidden {
     display: none;
 }
@@ -458,92 +478,3 @@ h3.index {
 .lowercase {
     text-transform: lowercase;
 }
-
-/* Index page blog posts */
-.title-date {
-    display: flex;
-    flex-flow: row;
-    justify-content: space-between;
-    align-items: center;
-}
-
-
-/*
- * Links page
- */
-
-#links-main {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 10px;
-}
-
-#links-main ul {
-    padding: 0;
-}
-
-#links-main li {
-    padding: 7px 0;
-    list-style-type: none;
-}
-
-.link-list details {
-    border: 1px dotted var(--pewter-blue);
-    padding: 0.7em 0.7em;
-}
-
-.link-list details[open] {
-    /* padding: 0.5em; */
-}
-
-.link-list details[open] summary {
-    border-bottom: 1px dotted var(--pewter-blue);
-    padding-bottom: 0.5em;
-    margin-bottom: 0.5em;
-}
-
-.link-list summary p {
-    line-height: 1;
-    /* margin: -0.5em -0.5em 0; */
-    /* padding: 0.5em; */
-}
-
-.links-column {
-    display: flex;
-    flex-direction: column;
-    flex: 1 3 20%;
-    overflow-wrap: break-word;
-}
-
-.links-column h2 {
-    text-align: center;
-}
-
-/* webmention box */
-
-.send-webmention {
-    margin: 55px 25px;
-    max-width: fit-content;
-    border: 1px dotted var(--primary-text);
-    padding: 0 20px 20px;
-}
-
-.send-webmention p {
-    font-size: 1.3rem;
-}
-
-@media only screen and (max-width: 700px) {
-    .sidebar {
-        border: none;
-    }
-
-    article img {
-        max-width: 200px;
-    }
-    
-    .main-sidebar {
-        flex-flow: row wrap-reverse;
-    }
-}

themes/dreamcast/static/js/main.js

@@ -0,0 +1,93 @@
+const root = document.querySelector(':root');
+const themeToggle = document.getElementById('theme-toggle');
+let mouseX = 0;
+let mouseY = 0;
+
+const darkMode = {
+  mainBg: "linear-gradient(#28164B, 70%, #825ECA )",
+  contentBg: "#1A181B",
+  primaryText: "#DCCBFF",
+  secondaryText: "#B89AF5",
+  header: "#825ECA",
+  navLink: "#B89AF5",
+  primaryLink: "#B89AF5",
+  primaryLinkHover: "#E3D5FF",
+  secondaryLink: "#E3D5FF",
+  secondaryLinkHover: "#B89AF5",
+  ternaryLink: "var(--blue)",
+  ternaryLinkHover: "var(--brown)",
+  shadow: "#00000088"
+}
+
+const lightMode = {
+  mainBg: "linear-gradient(#0045df, #00d4ff)",
+  contentBg: "#EEE5E5",
+  primaryText: "#342F23",
+  secondaryText: "#2F3E5E",
+  header: "#DE9B00",
+  navLink: "#DE9B00",
+  primaryLink: "#896D2E",
+  primaryLinkHover: "#284D9E",
+  secondaryLink: "#284D9E",
+  secondaryLinkHover: "#896D2E",
+  ternaryLink: "#284D9E",
+  ternaryLinkHover: "#896D2E",
+  shadow: "#2F3E5E55"
+}
+
+const applyTheme = (theme) => {
+  root.style.setProperty("--main-bg", theme.mainBg);
+  root.style.setProperty("--content-bg", theme.contentBg);
+  root.style.setProperty("--primary-text", theme.primaryText);
+  root.style.setProperty("--secondary-text", theme.secondaryText);
+  root.style.setProperty("--header", theme.header);
+  root.style.setProperty("--nav-link", theme.navLink);
+  root.style.setProperty("--primary-link", theme.primaryLink);
+  root.style.setProperty("--primary-link-hover", theme.primaryLinkHover);
+  root.style.setProperty("--secondary-link", theme.secondaryLink);
+  root.style.setProperty("--secondary-link-hover", theme.secondaryLinkHover);
+  root.style.setProperty("--ternary-link", theme.ternaryLink);
+  root.style.setProperty("--ternary-link-hover", theme.ternaryLinkHover);
+  root.style.setProperty("--shadow", theme.shadow);
+}
+
+const enableDarkMode = () => {
+  applyTheme(darkMode);
+  localStorage.setItem('theme', 'dark');
+  themeToggle.innerText = 'Light Mode';
+}
+
+const disableDarkMode = () => {
+  applyTheme(lightMode);
+  localStorage.setItem('theme', 'light');
+  themeToggle.innerText = 'Dark Mode';
+}
+
+const detectTheme = () => {
+  let theme = 'light';
+  let themeObj = lightMode;
+
+  if (localStorage.getItem('theme')) {
+    theme = localStorage.getItem('theme');
+  }
+  else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    theme = 'dark';
+  }
+
+  theme === 'dark' ? enableDarkMode() : disableDarkMode();
+}
+
+document.addEventListener("mousemove", (evt) => {
+  mouseX = evt.clientX / innerWidth;
+  mouseY = evt.clientY / innerHeight;
+
+  root.style.setProperty("--mouse-x", `${mouseX}`);
+  root.style.setProperty("--mouse-y", `${mouseY}`);
+});
+
+themeToggle.className = "";
+detectTheme();
+
+themeToggle.addEventListener('click', () => {
+  localStorage.getItem('theme') === 'light' ? enableDarkMode() : disableDarkMode();
+});