Small project updates and styling tweaks

content/IsEarthStillWarming.md

@@ -8,9 +8,9 @@ image: isearthstillwarming
 thumbnail: fire
 thumbnailBorder: true
 excerpt: A website offering up-to-date global warming data and a high-level overview of its causes and effects.
-tags: [react, nodedotjs]
+tags: [astro, react, nodedotjs]
 ---
 
-The goal of this webpage is to provide a high-level overview of what global warming is: how it's caused, how much the Earth has warmed, and its observed and predicted effects. Made with <a target="_blank" rel="noopener noreferrer" href="https://github.com/nozzle/react-static">React Static</a>, a static-site generator for React, IsEarthStillWarming.com fetches up-to-date climate data from NASA and NOAA servers and displays the data as charts to provide a visualization of how global warming is progressing.
+The goal of this webpage is to provide a high-level overview of what global warming is: how it's caused, how much the Earth has warmed, and its observed and predicted effects. Made with <a target="_blank" rel="noopener noreferrer" href="https://astro.build/">Astro</a>, a static-site generator compatible with React, IsEarthStillWarming.com fetches up-to-date climate data from NASA and NOAA servers and displays the data as charts to provide a visualization of how global warming is progressing.
 
 The webpage has a summary of the current state of global warming, with references provided for each piece of information. The website fetches its data and generates the webpages at build time, and on runtime it simply serves the already generated webpages. I chose this approach because retrieving and parsing the climate data takes some time. The servers we fetch data from are fairly slow, and the data comes in as a CSV which needs to be parsed into JSON in order to be used in a JavaScript application.

content/rust-fractals.md

@@ -7,7 +7,7 @@ website: https://mandelbrot.site
 thumbnail: mandelbrot-thumb
 image: rust-mandelbrot
 excerpt: An interactive application that lets you explore the Mandelbrot set fractal and generate high resolution images.
-tags: [rust, webassembly, typescript]
+tags: [rust, webassembly, typescript, pwa]
 ---
 
 Mandelbrot.site is a web-based viewer that allows users to explore the fascinating world of the Mandelbrot set, a complex mathematical fractal. The project leverages cutting-edge web technologies, including Rust, WebAssembly (Wasm), TypeScript, and Leaflet.js, to create a high-performance, interactive, and visually captivating experience.

package.json

@@ -23,17 +23,17 @@
   },
   "browserslist": "last 5 years or ie>=11 or >0.2%",
   "devDependencies": {
-    "@babel/core": "^7.25.8",
-    "@babel/eslint-parser": "^7.25.8",
-    "@iconify/json": "^2.2.260",
-    "@playwright/test": "^1.48.0",
-    "@sveltejs/adapter-netlify": "^4.3.5",
-    "@sveltejs/kit": "2.7.0",
+    "@babel/core": "^7.26.0",
+    "@babel/eslint-parser": "^7.26.5",
+    "@iconify/json": "^2.2.297",
+    "@playwright/test": "^1.49.1",
+    "@sveltejs/adapter-netlify": "^4.4.0",
+    "@sveltejs/kit": "^2.7.0",
     "@types/apca-w3": "^0.1.3",
-    "@types/chroma-js": "^2.4.4",
-    "@types/cssnano": "^5.1.0",
-    "@types/dateformat": "^5.0.2",
-    "@types/imagemin": "^9.0.0",
+    "@types/chroma-js": "^3.1.0",
+    "@types/cssnano": "^5.1.3",
+    "@types/dateformat": "^5.0.3",
+    "@types/imagemin": "^9.0.1",
     "@types/imagemin-webp": "^7.0.3",
     "@types/lodash-es": "^4.17.12",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
@@ -47,38 +47,38 @@
     "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-svelte": "^2.44.1",
-    "eslint-plugin-unicorn": "^56.0.0",
+    "eslint-plugin-prettier": "^5.2.2",
+    "eslint-plugin-svelte": "^2.46.1",
+    "eslint-plugin-unicorn": "^56.0.1",
     "hsluv-sass": "^2.0.1",
     "hsluv-ts": "^1.0.1",
     "imagemin": "^9.0.0",
     "imagemin-webp": "^8.0.0",
-    "isbot": "^5.1.17",
+    "isbot": "^5.1.21",
     "lodash-es": "^4.17.21",
     "markdown-json": "^1.6.1",
-    "npm-check-updates": "^17.1.3",
-    "postcss-html": "^1.7.0",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.7",
-    "sass": "^1.79.5",
-    "simple-icons": "^13.14.0",
+    "npm-check-updates": "^17.1.14",
+    "postcss-html": "^1.8.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "sass": "^1.83.4",
+    "simple-icons": "^14.2.0",
     "slugify": "^1.6.6",
-    "stylelint": "^16.10.0",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "svelte": "^5.0.0-next.0",
-    "svelte-check": "^4.0.5",
-    "svelte-meta-tags": "^3.1.4",
+    "stylelint": "^16.13.2",
+    "stylelint-config-standard-scss": "^14.0.0",
+    "svelte": "^5.19.0",
+    "svelte-check": "^4.1.4",
+    "svelte-meta-tags": "^4.1.0",
     "svelte-preprocess": "^6.0.3",
     "svelte-select": "^5.8.3",
     "svelte-wrap-balancer": "^0.0.4",
-    "tsx": "^4.19.1",
-    "typescript": "^5.6.3",
-    "universal-cookie": "^7.2.1",
-    "unplugin-icons": "^0.19.3",
-    "vite": "5.4.9",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.3",
+    "universal-cookie": "^7.2.2",
+    "unplugin-icons": "^22.0.0",
+    "vite": "^5.4.9",
     "wireit": "^0.14.9",
     "xml-formatter": "^3.6.3"
   },

src/lib/components/Tag.svelte

@@ -115,7 +115,7 @@
 
     background-color: var(--color-panel-background);
     color: var(--color-subtitle);
-    border-radius: var(--border-radius-m);
+    border-radius: var(--border-radius-s);
     border: 1px solid var(--color-border);
     font-size: var(--font-size-2xs);
   }
@@ -131,8 +131,8 @@
     align-items: center;
 
     border: 1px solid var(--color-border);
-    border-top-left-radius: var(--border-radius-m);
-    border-bottom-left-radius: var(--border-radius-m);
+    border-top-left-radius: var(--border-radius-s);
+    border-bottom-left-radius: var(--border-radius-s);
 
     &.transition-colors {
       /* taken from global.scss .transition-colors */
@@ -152,8 +152,8 @@
   }
 
   .tag.active .logo-wrapper {
-    border-bottom-right-radius: var(--border-radius-m);
-    border-top-right-radius: var(--border-radius-m);
+    border-bottom-right-radius: var(--border-radius-s);
+    border-top-right-radius: var(--border-radius-s);
     /* 2px accounts for negative margin + border */
     width: calc(100% + 2px);
 

src/lib/components/ThemeSwitcher.svelte

@@ -57,7 +57,7 @@
     --background="var(--color-panel-background)"
     --border-focused="1px solid var(--color-border)"
     --border-hover="1px solid var(--color-border)"
-    --border-radius="var(--border-radius-m)"
+    --border-radius-s="var(--border-radius-s)"
     --border="1px solid var(--color-border)"
     --chevron-color="var(--color-subtitle)"
     --chevron-height="var(--spacing-2xl)"
@@ -71,7 +71,7 @@
     --item-is-active-color="var(--color-foreground)"
     --item-padding="0 var(--spacing-m)"
     --list-background="var(--color-background)"
-    --list-border-radius="var(--border-radius-m)"
+    --list-border-radius="var(--border-radius-s)"
     --list-border="1px solid var(--color-border)"
     --padding="0"
     --selected-item-padding="0 0 0 var(--spacing-s)"

src/lib/components/YearLabel.svelte

@@ -87,7 +87,7 @@
       color: var(--color-heading);
       background-color: var(--color-panel-background);
       height: 2.2rem;
-      border-radius: var(--border-radius-m);
+      border-radius: var(--border-radius-s);
       width: 4.5rem;
       border: 1px solid var(--color-border);
       display: flex;

src/lib/components/filters/FilterButton.svelte

@@ -59,7 +59,7 @@
     position: relative;
     background-color: var(--color-panel-background);
     border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-m);
+    border-radius: var(--border-radius-s);
     height: 1.8rem;
     font-size: var(--font-size-xs);
     display: inline-flex;

src/lib/components/post-stub/PostStub.svelte

@@ -154,7 +154,7 @@
       padding: var(--spacing-s);
       background-color: var(--color-panel-background);
       border: 1px solid var(--color-border);
-      border-radius: var(--border-radius-m);
+      border-radius: var(--border-radius-l);
       margin: var(--spacing-s) 0;
       position: relative;
 

src/lib/styles/design-system.scss

@@ -2,7 +2,7 @@
 
 // Colors
 
-$theme-hue: 253;
+$theme-hue: 245;
 $work-hue: 135;
 $project-hue: 272;
 $other-hue: 12;
@@ -23,7 +23,11 @@ $other-hue: 12;
     )};
   --color-other: #{hsluv($other-hue, $category-saturation, $category-lightness)};
 
-  --color-work-marker: #{hsluv($work-hue, $marker-saturation, $marker-lightness)};
+  --color-work-marker: #{hsluv(
+      $work-hue,
+      $marker-saturation,
+      $marker-lightness
+    )};
   --color-project-marker: #{hsluv(
       $project-hue,
       $marker-saturation,
@@ -240,6 +244,6 @@ div.app-wrapper[data-theme="black"] {
   --spacing-4xl: 5rem;
 
   // Border radius
-  --border-radius-s: 0.25rem;
-  --border-radius-m: 0.5rem;
+  --border-radius-s: 0.5rem;
+  --border-radius-l: 0.75rem;
 }

src/lib/styles/global.scss

@@ -154,7 +154,6 @@ h3 {
 code {
   background-color: var(--color-panel-background) !important;
   border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-s);
   padding: 0 var(--spacing-2xs);
   display: inline-block;
   font-size: var(--font-size-2xs) !important;

src/lib/tags.ts

@@ -9,6 +9,7 @@ export const tagLabels: Record<string, string> = {
   nodedotjs: "Node",
   postgresql: "Postgres",
   prosemirror: "ProseMirror",
+  pwa: "PWA",
   raspberrypi: "Raspberry Pi",
   rubyonrails: "Rails",
   tensorflow: "TensorFlow",

src/routes/+layout.svelte

@@ -38,7 +38,7 @@
         `
         background-color: ${getCssVariable("color-panel-background")};
         border: 1px solid ${getCssVariable("color-border")};
-        border-radius: ${getCssVariable("border-radius-m")};
+        border-radius: ${getCssVariable("border-radius-l")};
         color: ${getCssVariable("color-foreground")};
         display: inline-block;
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;

src/routes/item/[slug]/+page.svelte

@@ -204,7 +204,7 @@
       margin: var(--spacing-2xl) auto;
       display: block;
       border: 1px solid var(--color-border);
-      border-radius: var(--border-radius-m);
+      border-radius: var(--border-radius-l);
     }
 
     div.embed-wrapper {
@@ -217,7 +217,7 @@
         padding-bottom: 56.25%;
         overflow: hidden;
         border: 1px solid var(--color-border);
-        border-radius: var(--border-radius-m);
+        border-radius: var(--border-radius-l);
       }
     }
   }