feat: release 2.18.1

Reviewed-on: #361

Dockerfile

@@ -22,7 +22,7 @@ WORKDIR /app
 COPY --from=prod-deps /app/node_modules /app/node_modules
 COPY --from=build /app/dist /app/dist
 
-LABEL version="2.17.0"
+LABEL version="2.18.1"
 LABEL description="Astro based personal website"
 
 ENV HOST=0.0.0.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "site-profile",
   "type": "module",
-  "version": "2.17.0",
+  "version": "2.18.1",
   "homepage": "https://www.alexlebens.dev",
   "bugs": {
     "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
@@ -37,7 +37,7 @@
     "@giscus/react": "^3.1.0",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/pajamas": "^1.2.15",
-    "@iconify-json/simple-icons": "^1.2.71",
+    "@iconify-json/simple-icons": "^1.2.72",
     "@playform/compress": "^0.2.1",
     "@swup/astro": "^1.8.0",
     "@tailwindcss/postcss": "^4.2.1",
@@ -49,13 +49,13 @@
     "marked": "^17.0.3",
     "marked-shiki": "^1.2.1",
     "mdast-util-to-string": "^4.0.0",
-    "preline": "^4.1.1",
+    "preline": "^4.1.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "reading-time": "^1.5.0",
     "sharp": "^0.34.5",
     "sharp-ico": "^0.1.5",
-    "shiki": "^3.23.0",
+    "shiki": "^4.0.1",
     "tailwindcss": "^4.2.1",
     "ultrahtml": "^1.6.0"
   },

src/components/images/ImageTheme.astro

@@ -4,12 +4,11 @@ import { Image } from 'astro:assets';
 const { srcLight, srcDark, alt, style, width, height } = Astro.props;
 ---
 
-<div class="themed-image-container">
+<div class="grid grid-cols-1 grid-rows-1">
   <Image
     src={srcLight}
     alt={alt}
-    class={`light-logo ${style}`}
+    class:list={['col-start-1 row-start-1 transition-all duration-400 ease-in-out opacity-100 scale-100 dark:opacity-0 dark:scale-65', style]}
-    inferSize={true}
     width={width}
     height={height}
     inferSize={true}
@@ -18,29 +17,9 @@ const { srcLight, srcDark, alt, style, width, height } = Astro.props;
   <Image
     src={srcDark}
     alt={alt}
-    class={`dark-logo ${style}`}
+    class:list={['col-start-1 row-start-1 transition-all duration-400 ease-in-out opacity-0 scale-65 dark:opacity-100 dark:scale-100', style]}
-    inferSize={true}
     width={width}
     height={height}
     inferSize={true}
   />
 </div>
-
-<style>
-  .themed-image-container {
-    display: grid;
-    grid-template-areas: "stack";
-  }
-
-  .themed-image-container :global(img) {
-    grid-area: stack;
-  }
-
-  :global(.dark) .light-logo {
-    display: none !important;
-  }
-
-  :global(.dark) .dark-logo {
-    display: block !important;
-  }
-</style>

src/layouts/BaseLayout.astro

@@ -133,23 +133,23 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
 
   /* Background that creates the "glimmer" effect */
   .bg {
-    animation: slide 20s ease-in-out infinite alternate;
+    animation: slide 25s ease-in-out infinite alternate;
-    background-image: linear-gradient(-60deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
+    background-image: linear-gradient(-55deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
-    filter: blur(80px);
+    filter: blur(40px);
     top: 0;
     bottom: 0;
-    left: -50%;
+    left: -70%;
-    right: -50%;
+    right: -70%;
     opacity: .5;
     position: fixed;
     z-index: -1;
     --bg-primary: #e5e5e5;
-    --bg-secondary: #d9d9d9;
+    --bg-secondary: #dce3eb;
-    --bg-tertiary: #ededed;
+    --bg-tertiary: #f4f6f8;
   }
 
   :global(.dark) .bg {
-    --bg-primary: #292524;
+    --bg-primary: #332f2e;
     --bg-secondary: #44403c;
     --bg-tertiary: #57534e;
   }
@@ -160,15 +160,15 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
   }
 
   .bg3 {
-    animation-duration: 25s;
+    animation-duration: 20s;
   }
 
   @keyframes slide {
     0% {
-      transform:translateX(-25%);
+      transform: translateX(-30%);
     }
     100% {
-      transform:translateX(25%);
+      transform: translateX(30%);
     }
   }
 </style>

src/styles/global.css

@@ -39,10 +39,10 @@
 
   /* Object colors */
   --color-background: light-dark(var(--color-neutral-200), var(--color-stone-700));
-  --color-background-accent: light-dark(color-mix(in srgb, var(--color-neutral-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
+  --color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
   --color-background-card: light-dark(color-mix(in srgb, var(--color-neutral-100) 80%, transparent), color-mix(in srgb, var(--color-neutral-800) 60%, transparent));
 
-  --color-divider: light-dark(color-mix(in srgb, var(--color-neutral-400) 50%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
+  --color-divider: light-dark(color-mix(in srgb, var(--color-slate-400) 40%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
 }
 
 @layer base {