Apply patch

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@firq/fgosite",
-	"version": "0.2.0-pre.73",
+	"version": "0.2.0-pre.75",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@firq/fgosite",
-			"version": "0.2.0-pre.73",
+			"version": "0.2.0-pre.75",
 			"dependencies": {
 				"@astro-community/astro-embed-youtube": "^0.5.6",
 				"@astrojs/check": "^0.9.4",

package.json

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

src/components/placeholder.astro

@@ -0,0 +1,16 @@
+---
+export interface Props {
+  height?: string
+}
+const { height } = Astro.props
+const ph_height = height || "5rem"
+---
+<div class="placeholder"></div>
+
+<style define:vars={{ph_height}}>
+  .placeholder {
+    visibility: hidden;
+    width: 100%;
+    height: var(--ph_height);
+  }
+</style>

src/pages/about.astro

@@ -7,6 +7,7 @@ import CustomFooter from '@layouts/customFooter.astro'
 import TechnologyCard from '@components/cards/technologyCard.astro'
 import technologydata from '@datafiles/technologydata.json'
 import SmallTitle from '@components/titles/smallTitle.astro'
+import Placeholder from '@components/placeholder.astro'
 
 const description =
   "A summary of the technologies used as well as my contact information. You'll also find disclaimers and thank you notes for the people that helped me."
@@ -26,6 +27,7 @@ const subtext =
   <ContactSection title="Disclaimers">
     <CustomFooter />
   </ContactSection>
+  <Placeholder height="1.5rem"/>
 </Layout>
 
 <style></style>

src/pages/fgo.astro

@@ -1,6 +1,7 @@
 ---
 import FavouriteCard from '@components/cards/favouriteCard.astro'
 import ProjectCard from '@components/cards/projectCard.astro'
+import Placeholder from '@components/placeholder.astro'
 import SmallTitle from '@components/titles/smallTitle.astro'
 import favouritesdata from '@datafiles/favouritesdata.json'
 import BaseSection from '@layouts/baseSection.astro'
@@ -39,16 +40,11 @@ data.map((item) => { item.origin = "First 120 on NA" })
   <BaseSection title="Highlights">
     {data.map((item) => <FavouriteCard {...item} />)}
   </BaseSection>
-  <div class="placeholder"></div>
+  <Placeholder height="1.5rem"/>
   <BaseSection title="Infos" titleHidden={true}>
     {projects.map((item) => <ProjectCard {...item} />)}
   </BaseSection>
+  <Placeholder height="1.5rem"/>
 </Layout>
 
-<style>
-  .placeholder {
-    visibility: hidden;
-    width: 100%;
-    height: 1.5rem;
-  }
-</style>
+<style></style>

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import AboutText from '@components/aboutText.astro'
 import FavouriteCard from '@components/cards/favouriteCard.astro'
+import Placeholder from '@components/placeholder.astro'
 import Hi from '@components/titles/title.astro'
 import favouritesdata from '@datafiles/favouritesdata.json'
 import Layout from '@layouts/Layout.astro'
@@ -22,6 +23,7 @@ const description =
   <BaseSection title="Favourites">
     {favouritesdata.map((item) => <FavouriteCard {...item} />)}
   </BaseSection>
+  <Placeholder height="1.5rem"/>
 </Layout>
 
 <style></style>

src/pages/projects.astro

@@ -4,6 +4,7 @@ import ProjectCard from '@components/cards/projectCard.astro'
 import projects from '@datafiles/projectdata.json'
 import SmallTitle from '@components/titles/smallTitle.astro'
 import BaseSection from '@layouts/baseSection.astro'
+import Placeholder from '@components/placeholder.astro'
 
 const description =
   "My personal projects I am currently working on. Some of them are born from necessity, while others are for uni or similar."
@@ -21,6 +22,7 @@ const subtext =
   <BaseSection title="Projects" titleHidden={true}>
     {projects.map((item) => <ProjectCard {...item} />)}
   </BaseSection>
+  <Placeholder height="1.5rem"/>
 </Layout>
 
 <style></style>

src/pages/servants.astro

@@ -1,14 +1,13 @@
 ---
+import CeCard from '@components/cards/ceCard.astro'
+import ServantCard from '@components/cards/servantCard.astro'
+import Placeholder from '@components/placeholder.astro'
+import SmallTitle from '@components/titles/smallTitle.astro'
+import cedata from '@datafiles/cedata.json'
+import servantdata from '@datafiles/servantdata.json'
 import Layout from '@layouts/Layout.astro'
 import ServantSection from '@layouts/servantSection.astro'
 
-import ServantCard from '@components/cards/servantCard.astro'
-import servantdata from '@datafiles/servantdata.json'
-
-import CeCard from '@components/cards/ceCard.astro'
-import cedata from '@datafiles/cedata.json'
-import SmallTitle from '@components/titles/smallTitle.astro'
-
 const description =
   'A list of all the servants and ces that Firq can offer up on support for TA.'
 ---
@@ -22,17 +21,11 @@ const description =
   <ServantSection title="Servants">
     {servantdata.map((item, index) => <ServantCard {...item} index={index} />)}
   </ServantSection>
-  <div class="placeholder"></div>
+  <Placeholder height="2.5rem"/>
   <ServantSection title="CEs">
     {cedata.map((item) => <CeCard {...item} />)}
   </ServantSection>
-  <div class="placeholder"></div>
+  <Placeholder height="2.5rem"/>
 </Layout>
 
-<style>
-  .placeholder {
-    visibility: hidden;
-    width: 100%;
-    height: 2.5rem;
-  }
-</style>
+<style></style>

src/pages/ta-collection.astro

@@ -12,6 +12,7 @@ import TaCard from '@components/cards/taCard.astro'
 import tadata from '@datafiles/tadata.json'
 import featured_data from '@datafiles/featureddata.json'
 import FgotaHero from '@components/fgotaHero.astro'
+import Placeholder from '@components/placeholder.astro'
 import SmallTitle from '@components/titles/smallTitle.astro'
 
 const important_data = tadata.filter(function (el) {
@@ -52,13 +53,7 @@ const description = 'A collection of TAs previously completed be Firq.'
   >
     {featured_data.map((item) => <TaCard {...item} />)}
   </TaSection>
-  <div class="placeholder"></div>
+  <Placeholder height="5rem"/>
 </Layout>
 
-<style>
-  .placeholder {
-    visibility: hidden;
-    width: 100%;
-    height: 5rem;
-  }
-</style>
+<style></style>