From 031d0578117a51caf80b1299e4f6ab3633c53f00 Mon Sep 17 00:00:00 2001
From: Firq <firelp42@gmail.com>
Date: Tue, 22 Oct 2024 21:15:24 +0200
Subject: [PATCH] Image sizes

---
 package.json                              |  2 +-
 src/components/cards/contactCard.astro    |  2 +-
 src/components/cards/favouriteCard.astro  | 10 ++++++----
 src/components/cards/servantCard.astro    |  2 +-
 src/components/cards/technologyCard.astro |  5 ++---
 5 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 0240871..6b3f413 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/cards/contactCard.astro b/src/components/cards/contactCard.astro
index cda9638..2b9b8c1 100644
--- a/src/components/cards/contactCard.astro
+++ b/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>
diff --git a/src/components/cards/favouriteCard.astro b/src/components/cards/favouriteCard.astro
index f1478a7..7d7ada7 100644
--- a/src/components/cards/favouriteCard.astro
+++ b/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;
diff --git a/src/components/cards/servantCard.astro b/src/components/cards/servantCard.astro
index a024423..608cdd6 100644
--- a/src/components/cards/servantCard.astro
+++ b/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 />
diff --git a/src/components/cards/technologyCard.astro b/src/components/cards/technologyCard.astro
index 5e783b8..a8ba49b 100644
--- a/src/components/cards/technologyCard.astro
+++ b/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>