Added favourites, fixed cards, merge this for first deploy

src/components/favouriteCard.astro

@@ -0,0 +1,90 @@
+---
+export interface Props {
+	name: string;
+	origin: string;
+    image: string;
+}
+
+const {image, origin, name } = Astro.props;
+
+const img: string = `favourites/${image}.png`;
+
+---
+
+<article>
+    <div class="heading">{name}</div>
+    <img src={img} alt={name}>
+    <h2 class="subtext">
+        {origin}
+    </h2>
+</article>
+
+<style>
+    .heading {
+        display: flex;
+        height: 4rem;
+        font-size: 22px;
+        color: white;
+        max-width: 200px;
+        padding-bottom: 0.3rem;
+        font-weight: bold;
+        margin: 0px;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .servants-container {
+        row-gap: 1em;
+        column-gap: 1em;
+        justify-content: center;
+        align-self: center;
+        align-content: center;
+    }
+
+    article:hover {
+        transform: scale(var(--hover-scale));
+    }
+
+    article {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        background-color: rgb(27, 27, 27);
+        border-color: #1e1e1e;
+        padding: 0em 0.75em;
+        width: 40%;
+        height: auto;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        transition: transform var(--speed) var(--ease);
+    }
+
+    article>img {
+        padding: 0.25em;
+        width:120px;
+        height:auto;
+    }
+
+    @media(min-width: 512px) {
+        article {
+            padding: 10px 10px;
+            width: auto;
+            height: auto;
+        }
+
+        article>img {
+            padding: 1.5em;
+            width: 200px;
+            height: auto;
+        }
+    }
+
+    .subtext {
+        color: white;
+        font-size: 16px;
+        font-weight: 600;
+        margin: 5;
+        line-height: 20px;
+    }
+</style>

src/components/hero.astro

@@ -3,7 +3,7 @@
 ---
 
 <div>
-    Firq FGO Site
+This is still a work in progress and continuously expanded. Feel free to look around.
 </div>
 
 
@@ -12,9 +12,11 @@
         display: flex;
         width: 100%;
         height: 10em;
-        background-color: grey;
+        background-color: #2e2e2e;
         text-align: center;
         align-items: center;
         justify-content: center;
+        color: white;
+        font-size: 1.5em;
     }
 </style>

src/components/navbar.astro

@@ -48,8 +48,7 @@
         list-style-type: none;
         row-gap: 0.5em;
         column-gap: 0.5ch;
-        margin-block-start: 0px;
-        margin-block-end: 0px;
+        margin: 0px;
         line-height: 1.5em;
     }
     .mobile > ul {

src/components/servantCard.astro

@@ -60,12 +60,16 @@ if(bond10 === "false") {
     }
 
     article {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
         background-color: rgb(27, 27, 27);
         border-color: #1e1e1e;
         padding: 0em 0.75em;
         width: 40%;
         height: auto;
         justify-content: center;
+        align-items: center;
         text-align: center;
         transition: transform var(--speed) var(--ease);
     }