Updated README, hopefully fixed mobile design, refactored and refined desktop design

README.md

@@ -1,38 +1,45 @@
-# Welcome to [Astro](https://astro.build)
+# Welcome to Firqs FGO Site
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+This is build using [Astro](https://astro.build)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/withastro/astro/tree/latest/examples/basics)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
 
 
 ## 🚀 Project Structure
 
-Inside of your Astro project, you'll see the following folders and files:
-
 ```
 /
-├── public/
+├── static/
-│   └── favicon.svg
+│   ├── favicon.svg
+│   └── other files ...
+│
 ├── src/
 │   ├── components/
-│   │   └── Card.astro
+│   │   ├── servantCard.astro
+│   │   ├── ceCard.astro
+│   │   ├── contactCard.astro
+│   │   └── taCard.astro
+│   │
 │   ├── layouts/
+│   │   ├── customFooter.astro
+│   │   ├── baseSection.astro
+│   │   ├── taSection.astro
+│   │   ├── contactSection.astro
 │   │   └── Layout.astro
+│   │
 │   └── pages/
 │       └── index.astro
+│
+├── .gitlab-ci.yml
+├── astro.config.mjs
 └── package.json
 ```
 
 Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
 
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+More routes will follow soon
 
-Any static assets, like images, can be placed in the `public/` directory.
+Any static assets, like images, can be placed in the `static/` directory.
 
-## 🧞 Commands
+## 🧞 Astro-Specific Commands
 
 All commands are run from the root of the project, from a terminal:
 
@@ -45,6 +52,3 @@ All commands are run from the root of the project, from a terminal:
 | `npm run astro ...`    | Run CLI commands like `astro add`, `astro preview` |
 | `npm run astro --help` | Get help using the Astro CLI                       |
 
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

src/components/ceCard.astro

@@ -16,11 +16,9 @@ if(mlb === "false") {
 ---
 
 <article>
-    <div class="heading-center">
+    <div class="heading-center">{name}</div>
-        <h1>{name}</h1>
-    </div>
     <div>
-        <img class="ce-crop" src={ce_img} alt="A Fragment of 2030">
+        <img class="ce-crop" src={ce_img} alt={name}>
     </div>
     <div class={mlb_image}>
         <img class="mlb" src="ce/mlb.png" alt="Max-limit broken"/>
@@ -38,16 +36,15 @@ if(mlb === "false") {
         border-color: #1e1e1e;
         padding: 20px;
         padding-top: 5px;
-        width: 7em;
+        width: 35%;
         height: auto;
         justify-content: center;
         text-align: center;
         transition: transform var(--speed) var(--ease);
-        overflow: hidden;
         margin: 0px;
         display: grid;
-        grid-template-columns: auto;
+        grid-template-columns: 100%;
-        grid-template-rows: auto 11em 3em;
+        grid-template-rows: auto auto 3em;
         gap: 0px 0px;
         grid-auto-flow: row;
         grid-template-areas:
@@ -65,22 +62,20 @@ if(mlb === "false") {
     }
 
     img {
-        display: block;
+        display: flex;
         margin-left: auto;
         margin-right: auto;
     }
 
     .heading-center {
-        display: table;
+        display: flex;
         height: 4rem;
-    }
+        width: 100%;
-
+        align-items: center;
-    .heading-center > h1 {
+        justify-content: center;
         font-size: 1.25em;
         color: white;
-        width: 12rem;
+        font-weight: bold;
-        display: table-cell;
-        vertical-align: middle;
     }
 
     .ce-crop {
@@ -90,26 +85,30 @@ if(mlb === "false") {
         object-position: 0% 0%;
     }
 
-    @media (min-width: 512px) {
-        .ce-crop {
-            width: 10em;
-            height: 10em;
-        }
-        article {
-            width: auto;
-        }
-    }
-
     .mlb {
-        width: 60%;
+        width: 100%;
         margin-left: auto;
         margin-right: auto;
     }
 
     .mlbalign {
-        width: 10em;
         display: flex;
         justify-items: center;
         align-items: center;
     }
+
+    @media (min-width: 512px) {
+        .ce-crop {
+            width: 7.5em;
+            height: 7.5em;
+        }
+        article {
+            width: 10em;
+            grid-template-columns: auto;
+            grid-template-rows: auto auto 3em;
+        }
+        .mlbalign {
+            width: 7.5em;
+        }
+    }
 </style>

src/components/servantCard.astro

@@ -22,9 +22,7 @@ if(bond10 === "false") {
 ---
 
 <article>
-    <div class="heading-center">
+    <div class="heading">{name}</div>
-        <h1 class="servantname">{name}</h1>
-    </div>
     <img src={servant_img} alt={name}>
     <h2 class="subtext">
         Level {level}<br>
@@ -32,15 +30,22 @@ if(bond10 === "false") {
         NP {np}</h2>
     <div class="expand-on-hover">
         <img class={bondce_css} src={bondce_img} alt="">
-        <h2 class="subtext">Mana Loading: {ml === "Not Unlocked" && <br>}{ml}</h2>
+        <h2 class="subtext">Mana Loading: {ml === "Not Unlocked" && <br/>}{ml}</h2>
     </div>
 </article>
 
 <style>
-    .heading-center {
+    .heading {
-        display: table;
+        display: flex;
+        height: 4rem;
         width: 100%;
-        height: 4.5rem;
+        align-items: center;
+        justify-content: center;
+        font-size: 22px;
+        color: white;
+        max-width: 200px;
+        padding-bottom: 0.3rem;
+        font-weight: bold;
     }
 
     .servants-container {
@@ -58,7 +63,7 @@ if(bond10 === "false") {
         background-color: rgb(27, 27, 27);
         border-color: #1e1e1e;
         padding: 0em 0.75em;
-        width: auto;
+        width: 40%;
         height: auto;
         justify-content: center;
         text-align: center;
@@ -91,15 +96,6 @@ if(bond10 === "false") {
         line-height: 20px;
     }
 
-    .servantname {
-        font-size: 22px;
-        color: white;
-        max-width: 200px;
-        padding-bottom: 0.3rem;
-        display: table-cell;
-        vertical-align: middle;
-    }
-
     .expand-on-hover {
         z-index: 99;
         transform: scaleY(0);