Continuing the redesign

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.2.0-pre.11",
+	"version": "0.2.0-pre.12",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",
@@ -12,11 +12,11 @@
 	},
 	"dependencies": {
 		"@astro-community/astro-embed-youtube": "^0.5.2",
-		"@astrojs/check": "^0.9.3",
+		"@astrojs/check": "^0.9.4",
-		"@astrojs/mdx": "^3.1.7",
+		"@astrojs/mdx": "^3.1.8",
-		"@astrojs/sitemap": "^3.1.6",
+		"@astrojs/sitemap": "^3.2.1",
 		"@fontsource/work-sans": "^5.0.18",
-		"astro": "^4.15.10",
+		"astro": "^4.16.6",
 		"astro-meta-tags": "^0.3.0",
 		"autoprefixer": "^10.4.19",
 		"iconoir": "^7.7.0",

src/components/cards/ceCard.astro

@@ -69,12 +69,12 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
   }
 
   .ce-crop {
-    width: 100px;
+    width: min(85%, 85px);
-    height: 100px;
+    height: auto;
   }
 
   .mlb {
-    width: 85px;
+    width: min(85%, 85px);
     height: auto;
     margin-left: auto;
     margin-right: auto;

src/components/cards/servantCard.astro

@@ -74,8 +74,8 @@ if (bond10 === false) {
     flex-direction: column;
     background-color: var(--c-darkergray);
     border: 2px var(--c-darkgray) solid;
-    padding: 0em 0.75em 0.5rem 0.75em;
+    padding: 10px;
-    width: max(40%, 100px);
+    width: max(30%, 100px);
     height: auto;
     justify-content: center;
     align-items: center;
@@ -116,9 +116,9 @@ if (bond10 === false) {
   }
 
   .bond-ce {
-    padding-top: 0.75rem;
+    padding-top: 0.25rem;
     width: auto;
-    height: 3.5rem;
+    height: 3rem;
   }
 
   .unobtained {

src/components/cards/taCard.astro

@@ -80,10 +80,9 @@ if (user !== undefined) {
 
   article {
     background-color: var(--c-darkergray);
-    border-color: var(--c-darkgray);
+    border: 2px var(--c-darkgray) solid;
     padding: 10px;
     text-align: center;
-    transition: transform var(--speed) var(--ease);
     height: auto;
     width: auto;
     max-width: 8rem;
@@ -97,7 +96,8 @@ if (user !== undefined) {
   }
 
   article:hover {
-    transform: scale(var(--hover-scale));
+    transform: scale(1);
+    border-color: var(--c-darkpurple);
   }
 
   article > .icon {
@@ -114,11 +114,12 @@ if (user !== undefined) {
     justify-content: center;
     text-align: center;
     background-color: var(--c-darkgray);
-    height: calc(var(--size-value) + 0.1rem);
+    height: var(--size-value);
-    width: calc(var(--size-value) + 0.1rem);
+    width: var(--size-value);
+    padding: 1px;
     opacity: 90%;
     border-radius: 1.25rem;
-    top: 1.1em;
+    top: calc(0.5rem + 9px);
   }
 
   article:hover .title h2 {
@@ -165,24 +166,24 @@ if (user !== undefined) {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    align-items: center;
+    align-items: top;
     justify-content: space-evenly;
-    background-color: var(--c-duskgray);
+    background-color: var(--c-darkergray);
+    border: 2px var(--c-darkpurple) solid;
+    border-top: 0px;
     z-index: 99;
     transform: scaleY(0);
     transform-origin: top;
     position: absolute;
     top: 90%;
-    left: 0px;
-    right: 0px;
     color: white;
     border-radius: 0px 0px 1.25rem 1.25rem;
+    width: 100%;
   }
 
   .expand-on-hover img {
     width: 3rem;
     height: 3rem;
-    margin-top: 0.5rem;
     margin-bottom: 0.5rem;
     border-radius: 0.5rem;
   }
@@ -194,6 +195,6 @@ if (user !== undefined) {
   article:hover .expand-on-hover {
     transform: scaleY(1);
     transition: transform 200ms ease-in-out;
-    background-color: var(--c-duskgray);
+    background-color: var(--c-darkergray);
   }
 </style>

src/components/fgotaHero.astro

@@ -1,4 +1,6 @@
 ---
+import '@fontsource/work-sans/500.css'
+
 export interface Props {
   fadeout?: boolean
 }
@@ -8,9 +10,9 @@ const display = fadeout ? "": "display: none"
 
 <div>
   <span>
-    I am currently working on a site to catalogue past and future TAs.<br/>
+    I am currently creating a site to catalogue past and future TAs for the whole community.
-    Check it out at <a href="https://fgo-ta.com">fgo-ta.com</a>
   </span>
+  <a href=`https://fgo-ta.com/`><span class="fancy">Visit fgo-ta.com &gt;&gt;</span></a>
   <div class="fade" style={display}></div>
 </div>
 
@@ -27,11 +29,24 @@ const display = fadeout ? "": "display: none"
     color: white;
     font-size: 1.5em;
     padding: 2rem 0rem 0rem 0rem;
+    font-weight: 400;
+    font-size: 1.3rem;
   }
+
   a {
-    text-align: center;
+    font-weight: 500;
+    font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
+    color: white;
+    margin: 1rem 0px 0px;
+    padding: 0.5rem 0.75rem;
     text-decoration: none;
-    color: var(--c-darkpurple);
+    background-color: var(--c-duskgray);
+    border-radius: 10px;
+    border: 2px var(--c-darkpurple) solid;
+  }
+
+  a:hover {
+    border-color: var(--c-purplepink);
   }
 
   .fade {
@@ -40,4 +55,16 @@ const display = fadeout ? "": "display: none"
     height: 2.5rem;
     width: 100%;
   }
+
+  .fancy {
+    color: var(--c-darkpurple);
+  }
+
+  @supports (background-clip: text) {
+    a:hover .fancy {
+      background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
+      background-clip: text;
+      color: transparent;
+    }
+  }
 </style>

src/layouts/baseSection.astro

@@ -52,11 +52,6 @@ const { title } = Astro.props
     }
   }
 
-  .base {
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-
   @media (min-width: 1000px) {
     .base {
       margin-left: 3rem;

src/layouts/servantSection.astro

@@ -0,0 +1,64 @@
+---
+export interface Props {
+  title: string
+}
+
+const { title } = Astro.props
+---
+
+<div class="base">
+  <h1>{title}</h1>
+  <div>
+    <slot />
+  </div>
+</div>
+
+<style>
+  .base {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .base div {
+    display: flex;
+    position: relative;
+    flex-flow: row wrap;
+    row-gap: 1em;
+    column-gap: 1em;
+    justify-content: center;
+    align-self: center;
+    padding: 1em;
+  }
+
+  .base h1 {
+    font-size: 40px;
+    line-height: 48px;
+    letter-spacing: -1px;
+    color: white;
+    margin-top: 2rem;
+    margin-bottom: 0px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0.25rem 1.5rem;
+    border-radius: 0.5rem;
+    max-width: max-content;
+    background-color: var(--c-darkgray);
+    padding-bottom: 0.5rem;
+  }
+
+  @media (min-width: 1000px) {
+    .base div {
+      margin-left: 3rem;
+      margin-right: 3rem;
+    }
+  }
+
+  @media (min-width: 1500px) {
+    .base div {
+      margin-left: 10%;
+      margin-right: 10%;
+    }
+  }
+</style>

src/pages/servants.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import BaseSection from '../layouts/baseSection.astro'
+import ServantSection from '../layouts/servantSection.astro'
 
 import ServantCard from '../components/cards/servantCard.astro'
 import servantdata from '../../static/data/_servantdata.json'
@@ -19,13 +19,13 @@ const description =
   descriptionOverride={description}
 >
   <SmallTitle maintext='TA Offering' subtext='Servants and CEs I can offer for your TAs' fadeout={true}/>
-  <BaseSection title="Servants">
+  <ServantSection title="Servants">
     {servantdata.map((item) => <ServantCard {...item} />)}
-  </BaseSection>
+  </ServantSection>
   <div class="placeholder"></div>
-  <BaseSection title="CEs">
+  <ServantSection title="CEs">
     {cedata.map((item) => <CeCard {...item} />)}
-  </BaseSection>
+  </ServantSection>
   <div class="placeholder"></div>
 </Layout>