Changed up the wishlist image

Author: ragebflame

content/pages/wishlist.md

@@ -7,7 +7,7 @@ A list of items I'd like to obtain. An [Amazon wish list](https://www.amazon.co.
 
 📅 *Last updated: 14/05/2025*
 
-{{ gif(src="/img/wishlist.webp", alt="", position="center") }}
+{{ gif(src="/img/fry.webp", alt="", position="center") }}
 
 ### Books 📚
 

generate_webp.sh

@@ -19,7 +19,7 @@ for file in $TARGET_PATH; do
     echo  $FILE_PATH
 
     # Strip EXIF data from still images first, read image size
-    if [[ $file == *.jpg ]] || [[ $file == *.jpeg ]] || [[ $file == *.png ]] || [[ $file == *.tiff ]] || [[ $file == *.gif ]]; then
+    if [[ $file == *.jpg ]] || [[ $file == *.jpeg ]] || [[ $file == *.png ]] || [[ $file == *.tiff ]]; then
         IMAGE_SIZE=$(identify -format '%w' "$file")
         echo "Stripping EXIF from ${file}..."
         exiv2 rm "$file"
@@ -35,7 +35,7 @@ for file in $TARGET_PATH; do
     # Convert GIFs
     elif [[ $file == *.gif ]]; then
         echo "Converting ${file} --> webp"
-        gif2webp -q 90 "${file}" -o "${FILE_PATH}.webp" -mt -quiet
+        gif2webp -q 85 "${file}" -o "${FILE_PATH}.webp" -mt -quiet -mixed
     # Convert still images
     elif [[ $file == *.jpg ]] || [[ $file == *.jpeg ]] || [[ $file == *.png ]] || [[ $file == *.tiff ]]; then
         # Resize large images (Width greater than 800 pixels)

sass/main.scss

@@ -101,21 +101,32 @@ mark {
   background-color: var(--background);
   color: var(--accent);
 }
+
 strong {
-    position: relative;
-    font-weight: 500;
+  position: relative;
+  font-weight: 500;
+}
+
+strong {
+  position: relative;
+  font-weight: 500;
+  z-index: 1;
+  // Optional: add padding for better highlight appearance
+  padding: 0 2px;
 }
 
-strong::before{
-  background-color: var(--accent-alpha-20);
+strong::before {
   content: "";
   position: absolute;
-  width: calc(100% + 4px);
-  height: 100%;
-  left: -2px;
-  bottom: 0;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: var(--accent-alpha-20);
+  border-radius: 2px;
   z-index: -1;
   transform: rotate(-2deg);
+  // Make sure the highlight covers the text even when it wraps
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }
 
 

static/img/fry.webp

@@ -51,7 +51,7 @@
           <h1>Hi, I'm&nbsp;<mark>Dan</mark></h1>
         </div>
         <div class="center-text">❦</div>
-          <p>I'm currently working as a DevOps team lead in <strong>Dublin, Ireland.</strong>
+          <p>DevOps team lead in <strong>Dublin, Ireland.</strong>
             Leading a team to deliver software changes quickly while <i>hopefully</i> not breaking things.</p>
           <p>Some current tools and technologies that I enjoy using, and am currently working with:</p>
           <div class="interests">