Rebrand!

src/components/projects/ProjectCard.astro

···
 ---
 import { Image } from "astro:assets";
-import backdrop from "@assets/backdrop.png";
+import backdrop from "@assets/backdrop.webp";
 import type { CollectionEntry } from "astro:content";
 
 export interface Props {
···
     display: flex;
     flex-direction: column;
     height: 100%;
+    color: var(--text);
     background-color: var(--secondary);
     border-radius: 5px;
   }

src/content/posts/headless_steam_remote_play.md

···
 issues that are more a Linux/NixOS thing™ than specific to this. Here's a screenshot from Portal 2
 with the overlay enabled.
 
-![Portal 2 metrics on Remote Play](../../assets/blog/steamrp_portal2.png)
+![Portal 2 metrics on Remote Play](../../assets/blog/steamrp_portal2.webp)
 
 Consistently I get <1ms input latency and ~20ms display latency in-game, which for me is perfectly
 acceptable. I'm able to have all the settings on high now without my laptop becoming a nice and

src/content/posts/wip_screen_captures.md

···
 
 With that we get a neat notification when we screenshot.
 
-![A notification that I just took a screenshot with the screenshot visible](@assets/blog/wip1_screenshot_notif.png)
+![A notification that I just took a screenshot with the screenshot visible](@assets/blog/wip1_screenshot_notif.webp)
 
 Now we need to handle each action, the chosen action is returned by notify-send, so we can match on
 that.
···
 let action = notify-send --app-name=simplescreenrecorder --icon=simplescreenrecorder -t 7500 --action=open=Open --action=folder="Show In Folder" --action=delete=Delete "Recording finished" $"File saved to ($out_name)"
 ```
 
-![A notification that I just took a screen recording with a video camera icon visible](@assets/blog/wip1_screenrec_notif.png)
+![A notification that I just took a screen recording with a video camera icon visible](@assets/blog/wip1_screenrec_notif.webp)
 
 Most arguments are the same here as the screenshot script, the only difference is the icon and app
 name. The actions are also basically the same, so I'll leave out the explanation and just show the

src/content/projects/asl-research.mdx

···
   - flask
 links:
   github: amiruzzaman/ASL_research
-image: ./asl-research.png
+image: ./asl-research.webp
 ---
 
 This project is part of an ongoing research project at West Chester University. I'm working on the web interface which uses the models created in the research to provide translation of ASL to/from English.

src/content/projects/bctc-projects.mdx

···
   - school
 links:
   github: Bwc9876/BCTC-Projects
-image: ./bctc-projects.png
+image: ./bctc-projects.webp
 ---
 
 This repo is a sort-of catch-all for any project I did during my time at Berks

src/content/projects/berks-dental.mdx

···
   - school
 links:
   github: Bwc9876/BerksDental
-image: ./berks-dental.png
+image: ./berks-dental.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/cloud-box.mdx

···
   - webssh
 links:
   github: Bwc9876/CloudBox
-image: ./cloud-box.png
+image: ./cloud-box.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/coop-scheduler.mdx

···
   - school
 links:
   github: Bwc9876/Coop-Schedule
-image: ./coop-scheduler.png
+image: ./coop-scheduler.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/djazztro.mdx

···
       url: https://pypi.org/project/django-djazztro/
       icon: pypi
       iconPackOverride: file-icons
-image: ./djazztro.png
+image: ./djazztro.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/do-thing.mdx

···
   - kotlin
 links:
   github: Bwc9876/DoThingServer
-image: ./do-thing.png
+image: ./do-thing.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/enigma-machine.mdx

···
     - label: Website
       url: https://bwc9876.github.io/Enigma-Machine-Site/index.html
       icon: globe
-image: ./enigma-machine.jpeg
+image: ./enigma-machine.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/gh-grader-preview.mdx

···
   - github
 links:
   github: Bwc9876/gh-grader-preview
-image: ./gh-grader-preview.png
+image: ./gh-grader-preview.webp
 ---
 
 A simple CLI that ran the GitHub autograder for me.

src/content/projects/nh-config-editor.mdx

···
   - outer-wilds
 links:
   github: Outer-Wilds-New-Horizons/nh-config-editor
-image: ./nh-config-editor.png
+image: ./nh-config-editor.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/opal-health.mdx

···
   - school
 links:
   github: ElderMicrobe889/Opal-Health
-image: ./opal-health.png
+image: ./opal-health.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/ow-mod-man.mdx

···
       url: https://flathub.org/apps/com.outerwildsmods.owmods_gui
       icon: flathub
       iconPackOverride: simple-icons
-image: ./ow-mod-man.png
+image: ./ow-mod-man.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/ow-save-editor.mdx

···
   other:
     - label: Mods Website
       url: https://outerwildsmods.com/mods/saveeditor/
-image: ./ow-save-editor.png
+image: ./ow-save-editor.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/ow-time-saver.mdx

···
   other:
     - label: Mods Website
       url: https://outerwildsmods.com/mods/timesaver/
-image: ./ow-time-saver.png
+image: ./ow-time-saver.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/portfolio-site.mdx

···
     - label: Website
       url: https://bwc9876.dev/
       icon: globe
-image: ./portfolio-site.png
+image: ./portfolio-site.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/quick-wheel.mdx

···
   - tkinter
 links:
   github: Bwc9876/QuickWheel
-image: ./quick-wheel.png
+image: ./quick-wheel.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/qwerty.mdx

···
   - sympy
 links:
   github: Bwc9876/Qwerty
-image: ./qwerty.png
+image: ./qwerty.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/tech-trends.mdx

···
     - label: Website
       url: https://bwc9876.github.io/TechTrends2022/
       icon: globe
-image: ./tech-trends.png
+image: ./tech-trends.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/transhuh.mdx

···
   - dbus
 links:
   github: Bwc9876/transhuh
-image: ./transhuh.png
+image: ./transhuh.webp
 ---
 
 This tool came from frustration with the bus system my school provides. We _do_ get a live map of the entire route but what I want is a way to know when a bus is nearby so I know when to leave!

src/content/projects/unity-webgl.mdx

···
   other:
     - label: Example Site
       url: https://bwc9876.github.io/UnityWebGL/
-image: ./unity-webgl.png
+image: ./unity-webgl.webp
 ---
 
 import ExtLink from "@components/ExtLink.astro";

src/content/projects/wayland-mpris-idle-inhibit.mdx

···
   - wayland
 links:
   github: Bwc9876/wayland-mpris-idle-inhibit
-image: ./wayland-mpris-idle-inhibit.png
+image: ./wayland-mpris-idle-inhibit.webp
 ---
 
 A simple project that let me keep my computer on while it was playing media.

src/content/projects/wcpc.mdx

···
   - astro
 links:
   github: Bwc9876/WCPCI/tree/dev
-image: ./wcpc.png
+image: ./wcpc.webp
 ---
 
 An Online Judging system (often shortened to OJ) is a tool used for programming competitions. It handles taking user submissions and scoring them based on their output. Usually this involves running the submission against a series of test cases.

src/layouts/Layout.astro

···
 ---
 import { Image, getImage } from "astro:assets";
 
-import defaultOg from "@assets/default-og.png";
-import cow from "@assets/cow.png";
+import defaultOg from "@assets/default-og.webp";
+import cow from "@assets/cow.webp";
 import Socials from "@components/Socials.astro";
 import IconLink from "@components/IconLink.astro";
 import "@styles/style.css";
···
             alt="Ben C's Avatar"
             src={cow}
           />
-          <span><b class="gradient-text">Bwc9876</b>.dev</span>
+          <span style="color: var(--text);"><b class="gradient-text">Bwc9876</b>.dev</span>
         </a>
         <span>
           <a href="/projects">Projects</a>
···
     min-height: 100vh;
     width: 100vw;
     overflow-x: hidden;
-    --section-border: 1px solid var(--accent);
   }
 
   header {
···
 
   nav a {
     text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   nav > a:first-child {

src/pages/blog/[...slug].astro

···
 </style>
 
 <style is:global>
-  pre {
-    padding: var(--small);
-    border-radius: 5px;
-    box-sizing: border-box;
-    background-color: var(--background-950) !important;
-    box-shadow: inset color(from var(--background-100) srgb r g b / 0.2) 0 0 6px;
-    overflow-x: auto;
-    width: 100%;
-  }
+  main {
+    pre {
+      padding: var(--small);
+      border-radius: 5px;
+      box-sizing: border-box;
+      background-color: color(
+        from var(--background) srgb calc(r / 2) calc(g / 2) calc(b / 2)
+      ) !important;
+      overflow-x: auto;
+      width: 100%;
+    }
 
-  img {
-    box-sizing: border-box;
-    border-radius: 5px;
-    max-width: 100%;
-    height: auto;
-    box-shadow: color(from var(--accent) srgb r g b / 0.2) 0 0 6px;
+    img {
+      box-sizing: border-box;
+      border-radius: 5px;
+      max-width: 100%;
+      height: auto;
+      box-shadow: color(from var(--accent) srgb r g b / 0.2) 0 0 6px;
+    }
   }
 </style>

src/pages/blog/index.astro

···
 
 blogEntries.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 
-const options = {
+const options: Intl.DateTimeFormatOptions = {
   weekday: "long",
   year: "numeric",
   month: "long",
···
   article p:nth-child(2) {
     margin: 0;
     font-size: var(--2);
-  }
-
-  h2 > a {
-    text-decoration: none !important;
   }
 </style>

src/pages/index.astro

···
 ---
 import ProjectGrid from "@components/projects/ProjectGrid.astro";
 import Layout from "@layouts/Layout.astro";
-import cow from "@assets/cow.png";
+import cow from "@assets/cow.webp";
 import { Image } from "astro:assets";
 ---
 
···
         <a href="/projects/menagerie">websites</a> and
         <a href="/projects/ow-mod-man">desktop apps</a>.<br /> I enjoy every aspect of software development.
       </p>
-      <div class="ctas">
-        <a href="/projects" role="button" class="secondary">View My Projects</a>
-        <a href="/blog" role="button" class="primary">Read My Blog</a>
-      </div>
     </div>
     <div class="hero-image">
       <Image width={150} height={150} format="webp" alt="Ben C's Avatar" src={cow} />
···
       gap: var(--2);
       justify-content: space-between;
       align-items: center;
-    }
-
-    .hero .ctas {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--1);
-      margin: var(--5) 0;
-      font-weight: bold;
     }
 
     @keyframes glow {

src/styles/style.css

···
 
 /* Color Definitions */
 :root {
-  --text: #daf1ef;
-  --background: #080609;
-  --primary: #53d164;
+  --text: #cecece;
+  --background: #110f12;
+  --primary: #0ee19b;
   --secondary: #012d1e;
-  --accent: #0ee19b;
-
-  --text-50: #edf8f7;
-  --text-100: #daf1ef;
-  --text-200: #b5e3df;
-  --text-300: #90d5cf;
-  --text-400: #6bc7bf;
-  --text-500: #46b9af;
-  --text-600: #38948c;
-  --text-700: #2a6f69;
-  --text-800: #1c4a46;
-  --text-900: #0e2523;
-  --text-950: #071212;
-
-  --background-50: #f3f0f5;
-  --background-100: #e7e0eb;
-  --background-200: #cfc2d6;
-  --background-300: #b8a3c2;
-  --background-400: #a085ad;
-  --background-500: #886699;
-  --background-600: #6d527a;
-  --background-700: #523d5c;
-  --background-800: #36293d;
-  --background-900: #1b141f;
-  --background-950: #0e0a0f;
-
-  --primary-50: #ebfaed;
-  --primary-100: #d7f4db;
-  --primary-200: #aeeab6;
-  --primary-300: #86df92;
-  --primary-400: #5ed46e;
-  --primary-500: #36c949;
-  --primary-600: #2ba13b;
-  --primary-700: #20792c;
-  --primary-800: #15511d;
-  --primary-900: #0b280f;
-  --primary-950: #051407;
-
-  --secondary-50: #e6fef6;
-  --secondary-100: #cdfeee;
-  --secondary-200: #9bfddc;
-  --secondary-300: #69fccb;
-  --secondary-400: #37fbba;
-  --secondary-500: #05faa8;
-  --secondary-600: #04c887;
-  --secondary-700: #039665;
-  --secondary-800: #026443;
-  --secondary-900: #013222;
-  --secondary-950: #011911;
-
-  --accent-50: #e7fdf6;
-  --accent-100: #cffced;
-  --accent-200: #9ff9db;
-  --accent-300: #6ff6c9;
-  --accent-400: #3ff3b7;
-  --accent-500: #0ff0a5;
-  --accent-600: #0cc084;
-  --accent-700: #099063;
-  --accent-800: #066042;
-  --accent-900: #033021;
-  --accent-950: #021810;
+  --accent: #53d164;
 }
 
 /* Color Aliases */
···
 /* Spacing Scale, Major Third */
 :root {
   /* 1rem = 16px */
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 125%;
+  font-family: sans-serif;
   --scale: 1.25;
   --small: calc(1rem * pow(var(--scale), -1));
   --half: calc(1rem * pow(var(--scale), -0.5));
···
 }
 
 a {
-  color: var(--accent-600);
+  color: var(--accent);
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 button,
 button.primary,
 [role="button"] {
-  --bg: var(--primary-400);
-  --hover-bg: var(--primary-500);
-  --active-bg: var(--primary-300);
-  --disabled-bg: var(--primary-600);
-
   padding: var(--component-padding);
   color: var(--text);
   border-radius: 10px;
   border: solid 2px transparent;
-  background-color: var(--bg);
+  background-color: var(--secondary);
   cursor: pointer;
   transition: background-color 100ms linear;
-  color: var(--background-800);
   text-decoration: none;
 }
 
-button.secondary,
-.secondary[role="button"] {
-  --bg: var(--secondary-500);
-  --hover-bg: var(--secondary-400);
-  --active-bg: var(--secondary-600);
-  --disabled-bg: var(--secondary-700);
-}
-
-button.accent,
-.accent[role="button"] {
-  --bg: var(--accent-400);
-  --hover-bg: var(--accent-500);
-  --active-bg: var(--accent-300);
-  --disabled-bg: var(--accent-600);
-}
-
 button:active,
 [role="button"]:active {
-  background-color: var(--active-bg);
+  filter: hue-rotate(50deg);
 }
 
 button:hover,
 [role="button"]:hover {
-  background-color: var(--hover-bg);
-}
-
-button:disabled,
-[role="button"]:disabled {
-  background-color: var(--disabled-bg);
-  color: var(--text-disabled);
-}
-
-button:disabled:hover,
-[role="button"]:disabled:hover {
-  cursor: default;
-}
-
-input {
-  padding: var(--component-padding);
-  color: var(--text);
-  border-radius: var(--1);
-  border: solid 2px var(--accent-200);
-  background-color: var(--background-raised);
-}
-
-body {
-  font-weight: 400;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  font-weight: 700;
+  filter: saturate(150%);
 }
 
 .gradient-text {
···
     overflow: hidden;
     transform: translate(-50%, -0.25rem);
     border-radius: 5px;
-    background: var(--accent-800);
+    background: var(--secondary);
     content: attr(data-tooltip);
     color: var(--text);
     font-style: normal;
···
     border-radius: 0;
     background-color: transparent;
     content: "";
-    color: var(--accent-800);
+    color: var(--secondary);
   }
 
   &[data-placement="bottom"] {