src/components/favouriteCard.astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from 'astro:assets';
+import { Image } from 'astro:assets'
 import type { GlobImage } from '../types/generic'
 import { plsLoadImage } from '../utils/tools'
 
@@ -12,11 +12,18 @@ export interface Props {
 
 const { link, imageFile, origin, name } = Astro.props
 const imagePath = `/src/assets/favourites/${imageFile}`
-const images = import.meta.glob<GlobImage>('/src/assets/favourites/*.{png,webp}')
+const images = import.meta.glob<GlobImage>(
+  '/src/assets/favourites/*.{png,webp}'
+)
 const loadedImage = plsLoadImage(images, imagePath)
 ---
 
-<a href={link} target="_blank" rel="noopener noreferrer" aria-label=`${name} - new window`>
+<a
+  href={link}
+  target="_blank"
+  rel="noopener noreferrer"
+  aria-label=`${name} - new window`
+>
   <div class="heading">{name}</div>
   <Image src={loadedImage} alt={name} />
   <h2 class="subtext">
@@ -38,10 +45,6 @@ const loadedImage = plsLoadImage(images, imagePath)
     align-items: center;
   }
 
-  a:hover {
-    transform: scale(var(--hover-scale));
-  }
-
   a {
     border-radius: 1rem;
     display: flex;
@@ -57,25 +60,27 @@ const loadedImage = plsLoadImage(images, imagePath)
     text-align: center;
     transition: transform var(--speed) var(--ease);
     text-decoration: none;
+
+    &:hover {
+      transform: scale(var(--hover-scale));
     }
 
-  a > img {
+    img {
       padding: 0px 0.25em;
       width: 90%;
       height: auto;
     }
+  }
 
   @media (min-width: 512px) {
     a {
       padding: 10px 10px;
       width: auto;
       height: auto;
-    }
+      img {
-
-    a > img {
         padding: 0px 1.5em;
         width: 200px;
-      height: auto;
+      }
     }
   }
 

src/pages/404.astro

@@ -17,7 +17,7 @@ const description = "Error. This shouldn't happen :/"
       <Image src={sadshishou} alt="Sad Shishou" />
       <h2>Well ... you were not supposed to end up here.</h2>
       <a href="/" aria-label="Home" rel="noopener noreferrer">
-        <i class="iconoir-fast-arrow-left"></i>Go back home
+        &lt;&lt; Go back home
       </a>
     </div>
   </BaseSection>
@@ -50,11 +50,11 @@ const description = "Error. This shouldn't happen :/"
     text-decoration: none;
     font-size: 1.5rem;
     font-weight: bold;
-  }
 
-  a:hover {
+    &:hover {
       color: var(--c-darkpurple);
     }
+  }
 
   img {
     width: 256px;