chore(release): 3.22.0 [skip ci]

# [3.22.0](https://gitea.alexlebens.dev/alexlebens/site-profile/compare/3.21.0...3.22.0) (2026-05-22)

### Features

* move script load to base layout ([12ad6e3](12ad6e315a))
* slight adjustment to background ([366f7a8](366f7a834e))

CHANGELOG.md

@@ -1,3 +1,11 @@
+# [3.22.0](https://gitea.alexlebens.dev/alexlebens/site-profile/compare/3.21.0...3.22.0) (2026-05-22)
+
+
+### Features
+
+* move script load to base layout ([12ad6e3](https://gitea.alexlebens.dev/alexlebens/site-profile/commit/12ad6e315a5b0875140bd4bba8adfb1e07085ab7))
+* slight adjustment to background ([366f7a8](https://gitea.alexlebens.dev/alexlebens/site-profile/commit/366f7a834e58246b060aed0cab2c65f682e31249))
+
 # [3.21.0](https://gitea.alexlebens.dev/alexlebens/site-profile/compare/3.20.2...3.21.0) (2026-05-22)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "site-profile",
   "type": "module",
-  "version": "3.21.0",
+  "version": "3.22.0",
   "homepage": "https://www.alexlebens.dev",
   "bugs": {
     "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",

src/components/sections/ExperienceSection.astro

@@ -166,7 +166,3 @@ const experiences = ((await directus.request(
     })}
   </ul>
 </section>
-
-<script>
-  import "@preline/collapse/index.js";
-</script>

src/layouts/BaseLayout.astro

@@ -62,12 +62,6 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
       window.localStorage.setItem('theme', theme);
     </script>
 
-    <!-- Preline -->
-    <script
-      src="/vendor/preline/collapse2.1.0.min.js"
-      is:inline
-    ></script>
-
     <!-- Rybbit Tracking Snippet -->
     <script
       src="https://rybbit.alexlebens.dev/api/script.js"
@@ -101,6 +95,20 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
       </main>
     </div>
 
+    <!-- Load Preline -->
+    <script>
+      import "preline";
+      if (window.HSStaticMethods) {
+        window.HSStaticMethods.autoInit();
+      }
+      document.addEventListener("swup:page:view", () => {
+        if (window.HSStaticMethods) {
+          window.HSStaticMethods.autoInit();
+        }
+      });
+    </script>
+
+
   </body>
 </html>
 

src/styles/global.css

@@ -50,8 +50,8 @@
   --color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-mist-900) 20%, transparent));
   --color-background-card: light-dark(color-mix(in srgb, var(--color-mist-100) 80%, transparent), color-mix(in srgb, var(--color-mist-900) 40%, transparent));
 
-  --color-background-1: light-dark(color-mix(in srgb, var(--color-mist-200) 75%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 95%, var(--color-mist-950)));
+  --color-background-1: light-dark(color-mix(in srgb, var(--color-mist-200) 75%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 75%, var(--color-mist-950)));
-  --color-background-2: light-dark(color-mix(in srgb, var(--color-mist-400) 10%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 80%, var(--color-mist-950)));
+  --color-background-2: light-dark(color-mix(in srgb, var(--color-mist-400) 10%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 50%, var(--color-mist-900)));
   --color-background-3: light-dark(color-mix(in srgb, var(--color-mist-200) 85%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 85%, var(--color-mist-950)));
 
   /* Object colors */