Image sizes

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.2.0-pre.16",
+	"version": "0.2.0-pre.17",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",

src/components/cards/contactCard.astro

@@ -25,7 +25,7 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
   aria-label=`${site} - new window`
 >
   <article class="contact do-hover">
-    <Image src={loadedLogoImage} alt={logoAltText} loading={'eager'}/>
+    <Image src={loadedLogoImage} alt={logoAltText} loading={'eager'} width={100} height={100} quality={100}/>
     <div>
       <h2>{site}</h2>
     </div>

src/components/cards/favouriteCard.astro

@@ -34,7 +34,9 @@ const loadedImage = plsLoadImage(images, imagePath)
 <style>
   .heading {
     display: flex;
-    height: 2.5rem;
+    height: fit-content;
+    min-height: 2.5rem;
+    line-height: 1.75rem;
     font-size: 24px;
     color: white;
     max-width: 200px;
@@ -51,8 +53,8 @@ const loadedImage = plsLoadImage(images, imagePath)
     flex-wrap: wrap;
     flex-direction: column;
     background-color: var(--c-darkergray);
-    padding: 0em 0.5em;
-    width: max(40%, 200px);
+    padding: 0em 0.25em;
+    width: max(40%, 128px);
     height: auto;
     justify-content: center;
     align-items: center;
@@ -66,7 +68,7 @@ const loadedImage = plsLoadImage(images, imagePath)
     }
 
     img {
-      width: min(90%, 160px);
+      width: min(90%, 100px);
       margin: 0px 0.5rem;
       height: auto;
       border-radius: 1rem;

src/components/cards/servantCard.astro

@@ -30,7 +30,7 @@ if (bond10 === false) {
 ---
 
 <article>
-  <Image src={loadedServantImage} alt={name} />
+  <Image src={loadedServantImage} width={128} height={128} alt={name} quality={100} />
   <h2 class="subtext">
     Level {level}<br />
     {skills}<br />

src/components/cards/technologyCard.astro

@@ -10,7 +10,6 @@ export interface Props {
 }
 
 const { imageFile, link, title } = Astro.props
-const logoAltText = `${title} Logo`
 const imagePath = `/src/assets/technologies/${imageFile}`
 const images_logos = import.meta.glob<GlobImage>(
   '/src/assets/technologies/*.{png,webp}'
@@ -20,12 +19,12 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
 
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
-    <Image src={loadedImage} alt={logoAltText} loading={'eager'}/>
+    <Image src={loadedImage} alt={title} loading={'eager'} width={100} height={100} quality={100}/>
     <div>
       <h2>{title}</h2>
     </div>
   </article>
-  <span class="visually-hidden">{logoAltText}</span>
+  <span class="visually-hidden">{title}</span>
 </a>
 
 <style>