Colors and other stuff

package-lock.json

@@ -2360,7 +2360,7 @@
 				"@types/estree-jsx": "^1.0.0",
 				"@types/hast": "^3.0.0",
 				"@types/mdx": "^2.0.0",
-				"collapse-white-space": "^2.0.0",
+				"collapse-var(--c-primary-text)-space": "^2.0.0",
 				"devlop": "^1.0.0",
 				"estree-util-build-jsx": "^3.0.0",
 				"estree-util-is-identifier-name": "^3.0.0",
@@ -3535,9 +3535,9 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/collapse-white-space": {
+		"node_modules/collapse-var(--c-primary-text)-space": {
 			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
+			"resolved": "https://registry.npmjs.org/collapse-var(--c-primary-text)-space/-/collapse-var(--c-primary-text)-space-2.1.0.tgz",
 			"integrity": "sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==",
 			"funding": {
 				"type": "github",
@@ -4297,7 +4297,7 @@
 				"devlop": "^1.0.0",
 				"estree-util-attach-comments": "^3.0.0",
 				"estree-util-is-identifier-name": "^3.0.0",
-				"hast-util-whitespace": "^3.0.0",
+				"hast-util-var(--c-primary-text)space": "^3.0.0",
 				"mdast-util-mdx-expression": "^2.0.0",
 				"mdast-util-mdx-jsx": "^3.0.0",
 				"mdast-util-mdxjs-esm": "^2.0.0",
@@ -4321,7 +4321,7 @@
 				"@types/unist": "^3.0.0",
 				"ccount": "^2.0.0",
 				"comma-separated-tokens": "^2.0.0",
-				"hast-util-whitespace": "^3.0.0",
+				"hast-util-var(--c-primary-text)space": "^3.0.0",
 				"html-void-elements": "^3.0.0",
 				"mdast-util-to-hast": "^13.0.0",
 				"property-information": "^6.0.0",
@@ -4345,7 +4345,7 @@
 				"comma-separated-tokens": "^2.0.0",
 				"devlop": "^1.0.0",
 				"estree-util-is-identifier-name": "^3.0.0",
-				"hast-util-whitespace": "^3.0.0",
+				"hast-util-var(--c-primary-text)space": "^3.0.0",
 				"mdast-util-mdx-expression": "^2.0.0",
 				"mdast-util-mdx-jsx": "^3.0.0",
 				"mdast-util-mdxjs-esm": "^2.0.0",
@@ -4406,9 +4406,9 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
-		"node_modules/hast-util-whitespace": {
+		"node_modules/hast-util-var(--c-primary-text)space": {
 			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+			"resolved": "https://registry.npmjs.org/hast-util-var(--c-primary-text)space/-/hast-util-var(--c-primary-text)space-3.0.0.tgz",
 			"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
 			"dependencies": {
 				"@types/hast": "^3.0.0"
@@ -5201,7 +5201,7 @@
 				"micromark-factory-label": "^2.0.0",
 				"micromark-factory-space": "^2.0.0",
 				"micromark-factory-title": "^2.0.0",
-				"micromark-factory-whitespace": "^2.0.0",
+				"micromark-factory-var(--c-primary-text)space": "^2.0.0",
 				"micromark-util-character": "^2.0.0",
 				"micromark-util-chunked": "^2.0.0",
 				"micromark-util-classify-character": "^2.0.0",
@@ -5530,9 +5530,9 @@
 				"micromark-util-types": "^2.0.0"
 			}
 		},
-		"node_modules/micromark-factory-whitespace": {
+		"node_modules/micromark-factory-var(--c-primary-text)space": {
 			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz",
+			"resolved": "https://registry.npmjs.org/micromark-factory-var(--c-primary-text)space/-/micromark-factory-var(--c-primary-text)space-2.0.0.tgz",
 			"integrity": "sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==",
 			"funding": [
 				{
@@ -9505,7 +9505,7 @@
 				"@types/estree-jsx": "^1.0.0",
 				"@types/hast": "^3.0.0",
 				"@types/mdx": "^2.0.0",
-				"collapse-white-space": "^2.0.0",
+				"collapse-var(--c-primary-text)-space": "^2.0.0",
 				"devlop": "^1.0.0",
 				"estree-util-build-jsx": "^3.0.0",
 				"estree-util-is-identifier-name": "^3.0.0",
@@ -10343,9 +10343,9 @@
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
 			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
 		},
-		"collapse-white-space": {
+		"collapse-var(--c-primary-text)-space": {
 			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
+			"resolved": "https://registry.npmjs.org/collapse-var(--c-primary-text)-space/-/collapse-var(--c-primary-text)-space-2.1.0.tgz",
 			"integrity": "sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw=="
 		},
 		"color": {
@@ -10865,7 +10865,7 @@
 				"devlop": "^1.0.0",
 				"estree-util-attach-comments": "^3.0.0",
 				"estree-util-is-identifier-name": "^3.0.0",
-				"hast-util-whitespace": "^3.0.0",
+				"hast-util-var(--c-primary-text)space": "^3.0.0",
 				"mdast-util-mdx-expression": "^2.0.0",
 				"mdast-util-mdx-jsx": "^3.0.0",
 				"mdast-util-mdxjs-esm": "^2.0.0",
@@ -10885,7 +10885,7 @@
 				"@types/unist": "^3.0.0",
 				"ccount": "^2.0.0",
 				"comma-separated-tokens": "^2.0.0",
-				"hast-util-whitespace": "^3.0.0",
+				"hast-util-var(--c-primary-text)space": "^3.0.0",
 				"html-void-elements": "^3.0.0",
 				"mdast-util-to-hast": "^13.0.0",
 				"property-information": "^6.0.0",
@@ -10905,7 +10905,7 @@
 				"comma-separated-tokens": "^2.0.0",
 				"devlop": "^1.0.0",
 				"estree-util-is-identifier-name": "^3.0.0",
-				"hast-util-whitespace": "^3.0.0",
+				"hast-util-var(--c-primary-text)space": "^3.0.0",
 				"mdast-util-mdx-expression": "^2.0.0",
 				"mdast-util-mdx-jsx": "^3.0.0",
 				"mdast-util-mdxjs-esm": "^2.0.0",
@@ -10956,9 +10956,9 @@
 				"unist-util-find-after": "^5.0.0"
 			}
 		},
-		"hast-util-whitespace": {
+		"hast-util-var(--c-primary-text)space": {
 			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+			"resolved": "https://registry.npmjs.org/hast-util-var(--c-primary-text)space/-/hast-util-var(--c-primary-text)space-3.0.0.tgz",
 			"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
 			"requires": {
 				"@types/hast": "^3.0.0"
@@ -11506,7 +11506,7 @@
 				"micromark-factory-label": "^2.0.0",
 				"micromark-factory-space": "^2.0.0",
 				"micromark-factory-title": "^2.0.0",
-				"micromark-factory-whitespace": "^2.0.0",
+				"micromark-factory-var(--c-primary-text)space": "^2.0.0",
 				"micromark-util-character": "^2.0.0",
 				"micromark-util-chunked": "^2.0.0",
 				"micromark-util-classify-character": "^2.0.0",
@@ -11731,9 +11731,9 @@
 				"micromark-util-types": "^2.0.0"
 			}
 		},
-		"micromark-factory-whitespace": {
+		"micromark-factory-var(--c-primary-text)space": {
 			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz",
+			"resolved": "https://registry.npmjs.org/micromark-factory-var(--c-primary-text)space/-/micromark-factory-var(--c-primary-text)space-2.0.0.tgz",
 			"integrity": "sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==",
 			"requires": {
 				"micromark-factory-space": "^2.0.0",

package.json

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

src/components/cards/blogCard.astro

@@ -41,21 +41,21 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
     width: 100%;
   }
   p {
-    color: white;
+    color: var(--c-primary-text);
     text-align: left;
     font-size: 1.1em;
     margin: 0.5em;
   }
   article > h2 {
     margin: 0.3rem 0.5rem;
-    color: var(--c-darkpurple);
+    color: var(--c-accent-1);
     font-size: 1.5rem;
     line-height: normal;
     text-decoration: none;
   }
   article > h3 {
     margin: 0.2em 0.5rem;
-    color: white;
+    color: var(--c-primary-text);
     font-size: 1rem;
     line-height: normal;
     text-decoration: none;
@@ -68,19 +68,13 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
     align-items: center;
     align-content: center;
     justify-content: center;
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
     padding: 10px;
     text-align: center;
-    transition: transform var(--speed) var(--ease);
     min-height: 100%;
     border-radius: 1.25rem;
   }
 
-  a:hover > article {
-    transform: scaleY(102.5%) scaleX(101%);
-    transition: transform var(--speed) var(--ease);
-  }
-
   @media (min-width: 900px) {
     .circle {
       margin: 1rem 0.5rem 1rem 0.5rem;
@@ -89,12 +83,12 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
       visibility: visible;
       height: 1rem;
       width: 1rem;
-      background-color: var(--c-darkpurple);
+      background-color: var(--c-accent-1);
       border-style: solid;
       border-width: 0.25rem;
-      border-color: var(--c-lightgray);
+      border-color: var(--c-secondary-background);
       border-radius: 40%;
-      transition: transform var(--speed) var(--ease);
+      transition: all var(--a-time-short) var(--a-animation-1);
     }
 
     a:hover > .circle {
@@ -105,14 +99,14 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
     }
 
     a:hover article {
-      border-color: var(--c-darkpurple);
+      border-color: var(--c-accent-1);
       transform: none;
     }
 
     article {
       border-style: solid;
       border-width: 2px;
-      border-color: var(--c-darkergray);
+      border-color: var(--c-primary-background);
       align-items: flex-start;
       align-content: flex-start;
       margin-left: 0.5rem;

src/components/cards/ceCard.astro

@@ -35,8 +35,8 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
 
   article {
     border-radius: 1.25rem;
-    border: 2px var(--c-darkgray) solid;
+    border: 2px var(--c-primary-background) solid;
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
     width: 35%;
     height: auto;
     justify-content: center;
@@ -53,7 +53,7 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
   }
 
   article:hover {
-    border: 2px var(--c-darkpurple) solid;
+    border: 2px var(--c-accent-1) solid;
   }
 
   article div {

src/components/cards/contactCard.astro

@@ -10,7 +10,6 @@ export interface Props {
 }
 
 const { imageFile, link, site } = Astro.props
-const logoAltText = `${site} Logo`
 const imagePath = `/src/assets/social/${imageFile}`
 const images_logos = import.meta.glob<GlobImage>(
   '/src/assets/social/*.{png,webp}'
@@ -25,12 +24,12 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
   aria-label=`${site} - new window`
 >
   <article class="contact do-hover">
-    <Image src={loadedLogoImage} alt="" loading={'eager'} width={150} height={150} quality={100}/>
+    <Image src={loadedLogoImage} alt="" loading={'eager'} width={128} height={128} quality={100}/>
     <div>
       <h2>{site}</h2>
     </div>
   </article>
-  <span class="visually-hidden">{logoAltText}</span>
+  <span class="visually-hidden">{site}</span>
 </a>
 
 <style>
@@ -39,64 +38,52 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
   }
 
   article {
-    --size-value: 6.25rem;
-    border-radius: 1.25rem;
     display: flex;
-    justify-content: center;
+    position: relative;
     align-items: center;
-    background-color: var(--c-darkergray);
+    justify-content: center;
-    border-color: var(--c-darkgray);
-    padding: 10px;
     text-align: center;
-    transition: transform var(--speed) var(--ease);
+    background-color: var(--c-primary-background);
+    border: 2px solid var(--c-primary-background);
+    border-radius: 1.25rem;
+    padding: 6px;
     height: auto;
     width: auto;
-    position: relative;
   }
 
   article img {
     border-radius: 1.25rem;
-    width: var(--size-value);
+    width: 80px;
-    height: var(--size-value);
+    height: auto;
-  }
-
-  article:hover div {
-    border-radius: 1.25rem;
-    padding: 0 0.5rem;
-    margin: unset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    background-color: var(--c-darkgray);
-    height: calc(var(--size-value));
-    width: calc(var(--size-value) - 1rem);
-    opacity: 90%;
-    border-style: solid;
-    border-width: 10px;
-    border-color: var(--c-darkgray);
-    z-index: 100;
-    position: absolute;
-  }
-
-  article:hover h2 {
-    margin: 0;
-    display: inline-flex;
-    font-weight: bold;
-    color: white;
-    font-size: 18px;
-  }
-
-  article h2 {
-    position: absolute;
-    display: none;
   }
 
   article div {
     display: none;
   }
 
-  a:hover {
+  article:hover {
-    transform: scale(var(--hover-scale));
+    border-color: var(--c-accent-1);
+  }
+
+  article:hover div {
+    display: flex;
+    position: absolute;
+    margin: unset;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: var(--c-primary-background);
+    border-radius: 1.25rem;
+    width: 80px;
+    height: 80px;
+    opacity: 90%;
+    z-index: 100;
+  }
+
+  article:hover h2 {
+    display: inline-flex;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--c-primary-text);
   }
 </style>

src/components/cards/favouriteCard.astro

@@ -38,7 +38,7 @@ const loadedImage = plsLoadImage(images, imagePath)
     min-height: 2.5rem;
     line-height: 1.75rem;
     font-size: 24px;
-    color: white;
+    color: var(--c-primary-text);
     max-width: 200px;
     padding-bottom: 0.3rem;
     font-weight: bold;
@@ -52,19 +52,18 @@ const loadedImage = plsLoadImage(images, imagePath)
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
     padding: 0em 0.25em;
     width: max(40%, 128px);
     height: auto;
     justify-content: center;
     align-items: center;
     text-align: center;
-    transition: transform var(--speed) var(--ease);
     text-decoration: none;
-    border: 2px var(--c-darkgray) solid;
+    border: 2px var(--c-primary-background) solid;
 
     &:hover {
-      border: 2px var(--c-darkpurple) solid;
+      border: 2px var(--c-accent-1) solid;
     }
 
     img {
@@ -87,7 +86,7 @@ const loadedImage = plsLoadImage(images, imagePath)
   }
 
   .subtext {
-    color: white;
+    color: var(--c-primary-text);
     font-size: 16px;
     font-weight: 600;
     margin: 0.5rem;

src/components/cards/servantCard.astro

@@ -48,15 +48,15 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
 <style>
   article:hover {
     transform: scale(1);
-    border-color: var(--c-darkpurple);
+    border-color: var(--c-accent-1);
   }
 
   article {
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
-    border: 2px var(--c-darkgray) solid;
+    border: 2px var(--c-primary-background) solid;
     padding: 10px;
     width: max(30%, 100px);
     height: auto;
@@ -73,7 +73,7 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
     margin-top: 0.75rem;
   }
   .subtext {
-    color: white;
+    color: var(--c-primary-text);
     font-size: 16px;
     font-weight: 600;
     margin: 5;
@@ -81,8 +81,8 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
   }
 
   .expand-on-hover {
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
-    border: 2px var(--c-darkpurple) solid;
+    border: 2px var(--c-accent-1) solid;
     border-top: 0px;
     z-index: 99;
     transform: scaleY(0);
@@ -95,7 +95,7 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
 
   article:hover .expand-on-hover {
     transform: scaleY(1);
-    transition: transform 200ms ease-in-out;
+    transition: all var(--a-time-default) var(--a-animation-1);
   }
 
   .bond-ce {

src/components/cards/taCard.astro

@@ -62,8 +62,8 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
-    border: 2px var(--c-darkgray) solid;
+    border: 2px var(--c-primary-background) solid;
     padding: 10px;
     text-align: center;
     width: max(30%, 100px);
@@ -76,7 +76,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
 
   a:hover {
     transform: scale(1);
-    border-color: var(--c-darkpurple);
+    border-color: var(--c-accent-1);
     z-index: 10;
   }
 
@@ -98,11 +98,11 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
     align-items: center;
     justify-content: center;
     text-align: center;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
     width: 100%;
     height: 100%;
     opacity: 90%;
-    box-shadow: 0px 0px 0px 1px var(--c-darkgray);
+    box-shadow: 0px 0px 0px 1px var(--c-primary-background);
     border-radius: 1.25rem;
   }
 
@@ -110,7 +110,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
     margin: 4px;
     display: inline-flex;
     font-weight: 500;
-    color: white;
+    color: var(--c-primary-text);
     font-size: 1rem;
     line-height: 150%;
   }
@@ -128,7 +128,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
     align-items: center;
     line-height: 100%;
     text-decoration: none;
-    color: white;
+    color: var(--c-primary-text);
     font-size: 1rem;
     font-weight: 400;
     margin: 0.5rem 0px 0.25rem 0px;
@@ -140,8 +140,8 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
     flex-wrap: wrap;
     align-items: top;
     justify-content: space-evenly;
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
-    border: 2px var(--c-darkpurple) solid;
+    border: 2px var(--c-accent-1) solid;
     border-top: 0px;
     z-index: 99;
     transform: scaleY(0);
@@ -150,7 +150,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
     top: 90%;
     padding-top: 0.5rem;
     margin-top: 0.2rem;
-    color: white;
+    color: var(--c-primary-text);
     border-radius: 0px 0px 1.25rem 1.25rem;
     width: 100%;
   }
@@ -168,8 +168,8 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
 
   a:hover .expand-on-hover {
     transform: scaleY(1);
-    transition: transform 200ms ease-in-out;
+    transition: transform var(--a-time-default) var(--a-animation-1);
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
   }
 
   @media (min-width: 512px) {

src/components/cards/technologyCard.astro

@@ -31,64 +31,54 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
   a {
     text-decoration: none;
   }
+
   article {
-    --size-value: 6.25rem;
-    background-color: var(--c-darkergray);
-    border-color: var(--c-darkgray);
-    padding: 10px;
     display: flex;
-    justify-content: center;
+    position: relative;
     align-items: center;
+    justify-content: center;
     text-align: center;
-    transition: transform var(--speed) var(--ease);
+    background-color: var(--c-primary-background);
+    border: 2px solid var(--c-primary-background);
+    border-radius: 1.25rem;
+    padding: 6px;
     height: auto;
     width: auto;
-    line-height: 100px;
-    border-radius: 1.25rem;
-    position: relative;
-  }
-  article:hover {
-    transform: scale(var(--hover-scale));
-  }
-  article > img {
-    border-radius: 1.25rem;
-    width: var(--size-value);
-    height: var(--size-value);
   }
 
-  article:hover div {
+  article img {
     border-radius: 1.25rem;
-    padding: 0 0.5rem;
+    width: 80px;
-    display: flex;
+    height: auto;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    background-color: var(--c-darkgray);
-    height: calc(var(--size-value));
-    width: calc(var(--size-value) - 1rem);
-    opacity: 90%;
-    z-index: 100;
-    position: absolute;
-    border-style: solid;
-    border-width: 10px;
-    border-color: var(--c-darkgray);
-  }
-
-  article:hover h2 {
-    margin: 0;
-    position: absolute;
-    display: inline-flex;
-    font-weight: bold;
-    color: white;
-    font-size: 18px;
-    line-height: 150%;
-  }
-
-  article h2 {
-    display: none;
   }
 
   article div {
     display: none;
   }
+
+  article:hover {
+    border-color: var(--c-accent-1);
+  }
+
+  article:hover div {
+    display: flex;
+    position: absolute;
+    margin: unset;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: var(--c-primary-background);
+    border-radius: 1.25rem;
+    width: 80px;
+    height: 80px;
+    opacity: 90%;
+    z-index: 100;
+  }
+
+  article:hover h2 {
+    display: inline-flex;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--c-primary-text);
+  }
 </style>

src/components/fgotaHero.astro

@@ -10,7 +10,7 @@ const display = fadeout ? "": "display: none"
   <span>
     I am currently creating a site to catalogue past and future TAs for the whole community.
   </span>
-  <a href=`https://fgo-ta.com/`><span class="fancy">Visit fgo-ta.com &gt;&gt;</span></a>
+  <a href=`https://fgo-ta.com/` target="_blank" rel="noopener noreferrer"><span class="fancy">Visit fgo-ta.com &gt;&gt;</span></a>
   <div class="fade" style={display}></div>
 </div>
 
@@ -20,11 +20,11 @@ const display = fadeout ? "": "display: none"
     width: 100%;
     flex-wrap: nowrap;
     flex-flow: column;
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
     text-align: center;
     align-items: center;
     justify-content: center;
-    color: white;
+    color: var(--c-primary-text);
     font-size: 1.5em;
     padding: 2rem 0rem 0rem 0rem;
     font-weight: 400;
@@ -34,33 +34,33 @@ const display = fadeout ? "": "display: none"
   a {
     font-weight: 500;
     font-family: 'Work Sans Variable', sans-serif;
-    color: white;
+    color: var(--c-primary-text);
     margin: 1rem 0px 0px;
     padding: 0.5rem 0.75rem;
     text-decoration: none;
-    background-color: var(--c-duskgray);
+    background-color: var(--c-secondary-background);
     border-radius: 10px;
-    border: 2px var(--c-darkpurple) solid;
+    border: 2px var(--c-accent-1) solid;
   }
 
   a:hover {
-    border-color: var(--c-purplepink);
+    border-color: var(--c-accent-1-alt);
   }
 
   .fade {
     margin-top: 3rem;
-    background: linear-gradient(to bottom, transparent, var(--c-lightgray));
+    background: linear-gradient(to bottom, transparent, var(--c-secondary-background));
     height: 2.5rem;
     width: 100%;
   }
 
   .fancy {
-    color: var(--c-darkpurple);
+    color: var(--c-accent-1);
   }
 
   @supports (background-clip: text) {
     a:hover .fancy {
-      background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
+      background: linear-gradient(125deg, var(--c-accent-1), var(--c-accent-1-alt), var(--c-accent-2) );
       background-clip: text;
       color: transparent;
     }

src/components/hero.astro

@@ -12,11 +12,11 @@
     display: flex;
     width: 100%;
     height: 5em;
-    background-color: var(--c-gray);
+    background-color: var(--c-secondary-background);
     text-align: center;
     align-items: center;
     justify-content: center;
-    color: white;
+    color: var(--c-primary-text);
     font-size: 1.5em;
   }
 </style>

src/components/navbar/navbar.astro

@@ -33,13 +33,13 @@ const hamburger_src_url = `url("${hamburger.src}")`
     z-index: 1000;
     position: sticky;
     top: 0px;
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
     display: flex;
     height: auto;
     width: 100%;
     align-items: flex-start;
     line-height: 1.5em;
-    border-bottom: 2px solid var(--c-darkpurple) ;
+    border-bottom: 2px solid var(--c-accent-1) ;
   }
   header > a {
     margin-left: 16px;
@@ -68,7 +68,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
     line-height: 1.5em;
   }
   .mobile > ul {
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
     align-items: center;
     flex-wrap: wrap;
     flex-direction: column;
@@ -85,7 +85,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
 
   .mobile {
     display: flex;
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
     border: 0px;
     width: 100%;
     height: 64px;
@@ -116,7 +116,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
   .hamburger-menu {
     mask: var(--hamburger_src_url) no-repeat center;
     mask-size: cover;
-    background-color: white;
+    background-color: var(--c-primary-text);
     width: 2.25rem;
     height: 2.25rem;
     position: static;

src/components/navbar/navbarEntry.astro

@@ -49,7 +49,7 @@ let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
 
   li > a {
     display: inline-flex;
-    color: white;
+    color: var(--c-primary-text);
     text-decoration: none;
     justify-content: center;
     align-items: center;
@@ -60,24 +60,24 @@ let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
   }
 
   li > a:hover {
-    color: var(--c-purplepink) !important;
+    color: var(--c-accent-1-alt) !important;
   }
 
   li > a:hover > .icon {
-    background-color: var(--c-purplepink) !important;
+    background-color: var(--c-accent-1-alt) !important;
   }
 
   .current {
-    color: var(--c-darkpurple) !important;
+    color: var(--c-accent-1) !important;
   }
 
   .current > .icon {
-    background-color: var(--c-darkpurple) !important;
+    background-color: var(--c-accent-1) !important;
   }
 
   .icon {
     mask: var(--icon_src_url) no-repeat center;
-    background-color: white;
+    background-color: var(--c-primary-text);
     width: 1.4em;
     height: 1.4em;
   }

src/components/titles/smallTitle.astro

@@ -22,20 +22,20 @@ const displayBackButton = returnbutton ? "": "display: none"
   a {
     font-weight: 500;
     font-family: 'Work Sans Variable', sans-serif;
-    color: white;
+    color: var(--c-primary-text);
     margin: 1rem 0px 0px;
     padding: 0.5rem 0.75rem;
     text-decoration: none;
-    background-color: var(--c-lightgray);
+    background-color: var(--c-secondary-background);
     border-radius: 10px;
     border-style: solid;
     border-width: 2px;
-    border-color: var(--c-lightgray);
+    border-color: var(--c-secondary-background);
     text-transform: capitalize;
   }
 
   a:hover {
-    border-color: var(--c-darkpurple);
+    border-color: var(--c-accent-1);
   }
 
   .wrap {
@@ -46,13 +46,13 @@ const displayBackButton = returnbutton ? "": "display: none"
     align-items: center;
     flex-wrap: wrap;
     flex-direction: column;
-    color: var(--c-lighter);
+    color: var(--c-primary-text);
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
   }
 
   .fade {
     margin-top: 2rem;
-    background: linear-gradient(to bottom, transparent, var(--c-lightgray));
+    background: linear-gradient(to bottom, transparent, var(--c-secondary-background));
     height: 2.5rem;
     width: 100%;
   }
@@ -73,12 +73,12 @@ const displayBackButton = returnbutton ? "": "display: none"
   }
 
   .head {
-    color: var(--c-darkpurple);
+    color: var(--c-accent-1);
   }
 
   @supports (background-clip: text) {
     .head {
-      background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
+      background: linear-gradient(125deg, var(--c-accent-1), var(--c-accent-1-alt), var(--c-accent-2) );
       background-clip: text;
       color: transparent;
     }

src/components/titles/title.astro

@@ -16,13 +16,13 @@
     align-items: center;
     flex-wrap: wrap;
     flex-direction: column;
-    color: var(--c-lighter);
+    color: var(--c-primary-text);
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
   }
 
   .fade {
     margin-top: 1.5rem;
-    background: linear-gradient(to bottom, transparent, var(--c-lightgray));
+    background: linear-gradient(to bottom, transparent, var(--c-secondary-background));
     height: 2.5rem;
     width: 100%;
   }
@@ -41,12 +41,12 @@
   }
 
   .fancy {
-    color: var(--c-darkpurple);
+    color: var(--c-accent-1);
   }
 
   @supports (background-clip: text) {
     .fancy {
-      background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
+      background: linear-gradient(125deg, var(--c-accent-1), var(--c-accent-1-alt), var(--c-accent-2) );
       background-clip: text;
       color: transparent;
     }

src/components/youtubeEmbed.astro

@@ -44,7 +44,7 @@ const { id, thumbnail } = Astro.props
   .warningtext {
     display: flex;
     justify-content: center;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
     width: 640px;
     height: 360px;
   }

src/layouts/Layout.astro

@@ -107,22 +107,28 @@ const mapped_navdata = navdata.map((item) => ({
 </html>
 <style is:global>
   :root {
-    --hover-scale: 1.05;
+    /* Animations */
-    --speed: 50%;
+    --a-time-default: 200ms;
-    --ease: 50%;
+    --a-time-short: 100ms;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    --a-time-slow: 1000ms;
-    --c-darkgray: #1e1e1e;
+    --a-animation-1: ease-in-out;
-    --c-duskgray: #242424;
+
-    --c-gray: #2e2e2e;
+    /* Fonts */
-    --c-lighter: #eee;
+    --f-default: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    --c-lightgray: #3e3e3e;
+    --f-title: 'Work Sans Variable', sans-serif;
-    --c-darkpurple: #b86cff;
+
-    --c-purplepink: #c105ff;
+    font-family: var(--f-default);
-    --c-darkergray: #1b1b1b;
+
-    --c-reddish: #ff0077;
+    /* Colors */
+    --c-primary-background: #1b1b1b;
+    --c-secondary-background: #333;
+    --c-primary-text: #eee;
+    --c-accent-1: #b86cff;
+    --c-accent-1-alt: #c105ff;
+    --c-accent-2: #ff0077;
   }
   body {
-    background: var(--c-lightgray);
+    background: var(--c-secondary-background);
     margin: 0px;
   }
 

src/layouts/baseSection.astro

@@ -34,7 +34,7 @@ const { title } = Astro.props
     font-size: 40px;
     line-height: 48px;
     letter-spacing: -1px;
-    color: white;
+    color: var(--c-primary-text);
     margin-top: 2rem;
     margin-bottom: 0px;
     margin-left: auto;
@@ -42,7 +42,7 @@ const { title } = Astro.props
     padding: 0.25rem 1.5rem;
     border-radius: 0.5rem;
     max-width: max-content;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
     padding-bottom: 0.5rem;
   }
   @media (min-width: 512px) {

src/layouts/blogPost.astro

@@ -33,8 +33,8 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
     justify-content: center;
     width: 100%;
     text-align: center;
-    color: white;
+    color: var(--c-primary-text);
-    background-color: var(--c-gray);
+    background-color: var(--c-secondary-background);
     padding: 0.5rem 0px;
     margin-bottom: 2rem;
     text-decoration: none;
@@ -43,31 +43,31 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
     font-size: 34px;
     line-height: 40px;
     letter-spacing: -1px;
-    color: white;
+    color: var(--c-primary-text);
     margin: 0.5rem 3rem 0.5rem 3rem;
     padding: 0.25rem 0.75rem;
     max-width: max-content;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
     padding: 0.25rem 1rem;
     border-radius: 0.5rem;
     padding-bottom: 0.5rem;
   }
   p {
-    color: white;
+    color: var(--c-primary-text);
     margin: 0.5rem 3rem 0.5rem 3rem;
     padding: 0.25rem 0.75rem;
     max-width: max-content;
-    background-color: var(--c-gray);
+    background-color: var(--c-secondary-background);
     border-radius: 0.5rem;
     padding-bottom: 0.5rem;
   }
   article :global(h2) {
     margin-right: 3rem;
     word-wrap: normal;
-    color: white;
+    color: var(--c-primary-text);
     padding: 0.25rem 0.75rem;
     max-width: max-content;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
     padding: 0.25rem 1rem;
     border-radius: 0.5rem;
     padding-bottom: 0.5rem;
@@ -77,10 +77,10 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
     margin-bottom: 0.5rem;
     margin-right: 3rem;
     word-wrap: normal;
-    color: white;
+    color: var(--c-primary-text);
     padding: 0.25rem 0.75rem;
     max-width: max-content;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
     padding: 0.25rem 1rem;
     border-radius: 0.5rem;
     padding-bottom: 0.5rem;
@@ -90,10 +90,10 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
     margin-bottom: 0.5rem;
     margin-right: 3rem;
     word-wrap: normal;
-    color: white;
+    color: var(--c-primary-text);
     padding: 0.25rem 0.75rem;
     max-width: max-content;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
     padding: 0.25rem 1rem;
     border-radius: 0.5rem;
     padding-bottom: 0.5rem;
@@ -104,9 +104,10 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
     font-style: italic;
   }
   article {
-    color: white;
+    color: var(--c-primary-text);
     margin: 0.5rem 3rem 0.5rem 3rem;
     font-size: 1.1em;
+    text-align: justify;
     padding-bottom: 5rem;
   }
   article :global(.astro-code) {
@@ -120,31 +121,16 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
 
   @media (min-width: 1000px) {
     article {
-      margin-left: 10rem;
+      margin-left: 22.5%;
-      margin-right: 10rem;
+      margin-right: 22.5%;
     }
     h1 {
-      margin-left: 10rem;
+      margin-left: 20%;
-      margin-right: 10rem;
+      margin-right: 20%;
     }
     p {
-      margin-left: 10rem;
+      margin-left: 20%;
-      margin-right: 10rem;
+      margin-right: 20%;
-    }
-  }
-
-  @media (min-width: 1500px) {
-    article {
-      margin-left: 20rem;
-      margin-right: 20rem;
-    }
-    h1 {
-      margin-left: 20rem;
-      margin-right: 20rem;
-    }
-    p {
-      margin-left: 20rem;
-      margin-right: 20rem;
     }
   }
 </style>

src/layouts/blogSection.astro

@@ -42,7 +42,7 @@ const line = displayLine ? "flex" : "none"
     bottom: -5rem;
     border-radius: 0% 50% 50% 50%;
     transform: rotate(45deg);
-    background-color: var(--c-darkpurple);
+    background-color: var(--c-accent-1);
   }
 
   .start {
@@ -50,8 +50,8 @@ const line = displayLine ? "flex" : "none"
     border-radius: 40%;
     border-style: solid;
     border-width: 0.25rem;
-    border-color: var(--c-lightgray);
+    border-color: var(--c-secondary-background);
-    background-color: var(--c-darkpurple);
+    background-color: var(--c-accent-1);
   }
 
   .line {
@@ -62,7 +62,7 @@ const line = displayLine ? "flex" : "none"
     right: 0;
     margin-left: auto;
     margin-right: auto;
-    background-color: var(--c-darkpurple);
+    background-color: var(--c-accent-1);
     height: calc(100% + 5rem);
     translate: 0% 2rem;
     width: 0.25rem;
@@ -71,14 +71,14 @@ const line = displayLine ? "flex" : "none"
   h1 {
     line-height: 48px;
     letter-spacing: -1px;
-    color: white;
+    color: var(--c-primary-text);
     font-size: 1.6rem;
     margin-top: 1rem;
     margin-bottom: 0;
     margin-left: auto;
     margin-right: auto;
     max-width: max-content;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
     padding: 0.25rem 1.5rem;
     border-radius: 0.5rem;
     padding-bottom: 0.5rem;
@@ -96,7 +96,7 @@ const line = displayLine ? "flex" : "none"
     align-content: center;
     justify-content: space-around;
     padding: 1em;
-    color: white;
+    color: var(--c-primary-text);
     font-size: 1em;
     position: relative;
   }
@@ -115,10 +115,10 @@ const line = displayLine ? "flex" : "none"
       font-size: 1.85rem;
     }
   }
-  @media (min-width: 1500px) {
+  @media (min-width: 1100px) {
     .wrapper {
-      margin-left: 15rem;
+      margin-left: 20%;
-      margin-right: 15rem;
+      margin-right: 20%;
       flex-direction: row;
     }
     section {

src/layouts/contactSection.astro

@@ -15,14 +15,14 @@ const { title } = Astro.props
 
 <style>
   h1 {
-    color: white;
+    color: var(--c-primary-text);
     font-size: 26px;
     line-height: 32px;
     letter-spacing: -1px;
     margin: 0.5rem 0px 0.5rem 0.5em;
     padding: 0.25rem 0.75rem;
     width: max-content;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
     padding: 0.25rem 1rem;
     border-radius: 0.5rem;
     padding-bottom: 0.5rem;

src/layouts/customFooter.astro

@@ -88,11 +88,11 @@ const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/
 
 <style>
   footer {
-    color: white;
+    color: var(--c-primary-text);
     bottom: 0;
   }
   footer > div > a {
-    color: white;
+    color: var(--c-primary-text);
   }
   .sticky-image-wrapper {
     position: fixed;
@@ -108,7 +108,7 @@ const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/
     bottom: -100px;
     height: 64px;
     width: 64px;
-    transition: transform 1s ease-in-out;
+    transition: transform var(--a-time-slow) var(--a-animation-1);
     transform: translateX(-50%);
   }
 </style>

src/layouts/servantSection.astro

@@ -36,7 +36,7 @@ const { title } = Astro.props
     font-size: 40px;
     line-height: 48px;
     letter-spacing: -1px;
-    color: white;
+    color: var(--c-primary-text);
     margin-top: 2rem;
     margin-bottom: 0px;
     margin-left: auto;
@@ -44,7 +44,7 @@ const { title } = Astro.props
     padding: 0.25rem 1.5rem;
     border-radius: 0.5rem;
     max-width: max-content;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
     padding-bottom: 0.5rem;
   }
 

src/layouts/taSection.astro

@@ -37,20 +37,20 @@ if (abovetext === undefined) {
     font-size: 40px;
     line-height: 48px;
     letter-spacing: -1px;
-    color: white;
+    color: var(--c-primary-text);
     margin-top: 2rem;
     margin-bottom: 0;
     margin-left: auto;
     margin-right: auto;
     padding: 0.25rem 0.75rem;
     max-width: max-content;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
     padding: 0.25rem 1.5rem;
     border-radius: 0.5rem;
     padding-bottom: 0.5rem;
   }
   h2 {
-    color: white;
+    color: var(--c-primary-text);
     font-size: 16px;
     font-weight: 600;
     margin: 5;

src/pages/404.astro

@@ -33,7 +33,7 @@ const description = "Error. This shouldn't happen :/"
   h2 {
     font-family: 'Work Sans Variable', sans-serif;
     font-weight: 500;
-    color: white;
+    color: var(--c-primary-text);
     font-size: 1.25rem;
     margin-top: 1rem;
     max-width: max-content;
@@ -46,20 +46,20 @@ const description = "Error. This shouldn't happen :/"
     width: fit-content;
     font-weight: 500;
     font-family: 'Work Sans Variable', sans-serif;
-    color: white;
+    color: var(--c-primary-text);
     margin: 1rem 0px 0px;
     padding: 0.5rem 0.75rem;
     text-decoration: none;
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
     border-radius: 10px;
     border-style: solid;
     border-width: 2px;
-    border-color: var(--c-darkergray);
+    border-color: var(--c-primary-background);
     text-transform: capitalize;
   }
 
   a:hover {
-    border-color: var(--c-darkpurple);
+    border-color: var(--c-accent-1);
   }
 
   img {