Rewrote colors to use variables

src/components/ceCard.astro

@@ -33,8 +33,8 @@ if(mlb === "false") {
     }
 
     article {
-        background-color: rgb(27, 27, 27);
+        background-color: var(--c-darkergray);
-        border-color: #1e1e1e;
+        border-color: var(--c-darkgray);
         padding: 20px;
         padding-top: 5px;
         width: 35%;

src/components/contactCard.astro

@@ -22,8 +22,8 @@ const { link, site } = Astro.props;
         line-height: normal;
     }
     article {
-        background-color: rgb(27, 27, 27);
+        background-color: var(--c-darkergray);
-        border-color: #1e1e1e;
+        border-color: var(--c-darkgray);
         padding: 10px;
         text-align: center;
         transition: transform var(--speed) var(--ease);

src/components/favouriteCard.astro

@@ -49,8 +49,8 @@ const img: string = `/fgosite/favourites/${image}.webp`;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
-        background-color: rgb(27, 27, 27);
+        background-color: var(--c-darkergray);
-        border-color: #1e1e1e;
+        border-color: var(--c-darkgray);
         padding: 0em 0.75em;
         width: 40%;
         height: auto;

src/components/hero.astro

@@ -12,7 +12,7 @@ This is still a work in progress and continuously expanded. Feel free to look ar
         display: flex;
         width: 100%;
         height: 5em;
-        background-color: #2e2e2e;
+        background-color: var(--c-gray);
         text-align: center;
         align-items: center;
         justify-content: center;

src/components/navbar.astro

@@ -19,7 +19,7 @@
 
 <style>
     header {
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
         display: flex;
         height: auto;
         width: 100%;
@@ -53,7 +53,7 @@
         line-height: 1.5em;
     }
     .mobile > ul {
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
         align-items: center;
         flex-wrap: wrap;
         flex-direction: column;
@@ -70,7 +70,7 @@
 
     .mobile {
         display:flex;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
         border: 0px;
         width: 100%;
         height: 64px;

src/components/navbarEntry.astro

@@ -45,9 +45,9 @@ const fulllink = `/fgosite/${slug}`;
         font-weight: bold;
     }
     li > a:hover{
-        color: #c105ff;
+        color: var(--c-purplepink);
     }
     .current {
-        color: #b86cffed;
+        color: var(--c-darkpurple);
     }
 </style>

src/components/navbuttonsTitle.astro

@@ -1,31 +0,0 @@
----
-
----
-
-<div>
-    <button>Servant Offering</button>
-    <button>TA Achievements</button>
-    <button>About</button>
-</div>
-
-
-<style>
-    div {
-        display: flex;
-        margin: 1em 0%;
-    }
-    button {
-        padding: 1em 1em;
-        margin: 0em 0.5em;
-        background-color: rgb(218, 66, 218);
-        border-radius: 0%;
-        border-width: 0;
-        text-align: center;
-        font-size: large;
-        color: black;
-        width: 10em;
-    }
-    button:active {
-        background-color: blueviolet;
-    }
-</style>

src/components/servantCard.astro

@@ -63,8 +63,8 @@ if(bond10 === "false") {
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
-        background-color: rgb(27, 27, 27);
+        background-color: var(--c-darkergray);
-        border-color: #1e1e1e;
+        border-color: var(--c-darkgray);
         padding: 0em 0.75em;
         width: 40%;
         height: auto;
@@ -113,7 +113,7 @@ if(bond10 === "false") {
     article:hover .expand-on-hover {
         transform: scaleY(1);
         transition: transform 200ms ease-in-out;
-        background-color: #242424;
+        background-color: var(--c-duskgray);
     }
 
     .bond-ce {

src/components/taCard.astro

@@ -19,8 +19,8 @@ const icon: string = `background: url('/fgosite/ta_icons/${image}.webp')`
 
 <style>
 article {
-    background-color: rgb(27, 27, 27);
+    background-color: var(--c-darkergray);
-    border-color: #1e1e1e;
+    border-color: var(--c-darkgray);
     padding: 10px;
     text-align: center;
     transition: transform var(--speed) var(--ease);
@@ -40,7 +40,7 @@ article > div {
 
 article:hover h2 {
     color: white;
-    background-color: #1e1e1e;
+    background-color: var(--c-darkgray);
     font-size: 18px;
     display: inline-block;
     vertical-align: bottom;

src/components/technologyCard.astro

@@ -19,8 +19,8 @@ const icon: string = `background-image: url('/fgosite/technologies/${image}.webp
 
 <style>
 article {
-    background-color: rgb(27, 27, 27);
+    background-color: var(--c-darkergray);
-    border-color: #1e1e1e;
+    border-color: var(--c-darkgray);
     padding: 10px;
     text-align: center;
     transition: transform var(--speed) var(--ease);
@@ -39,7 +39,7 @@ article > div {
 
 article:hover h2 {
     color: white;
-    background-color: #1e1e1e;
+    background-color: var(--c-darkgray);
     font-size: 18px;
     display: inline-block;
     vertical-align: center;

src/layouts/Layout.astro

@@ -42,9 +42,16 @@ const description: string = "A reference for all esports Servants, CEs and alrea
     	--speed: 50%;
     	--ease: 50%;
     	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+		--c-darkgray: #1e1e1e;
+		--c-duskgray: #242424;
+		--c-gray: #2e2e2e;
+		--c-lightgray: #3e3e3e;
+		--c-darkpurple: #b86cff;
+		--c-purplepink: #c105ff;
+		--c-darkergray: #1b1b1b;
 	}
 	body {
-		background: #3e3e3e;
+		background: var(--c-lightgray);
 		margin: 0px;
 	}
 </style>

src/layouts/baseSection.astro

@@ -35,7 +35,7 @@ const { title } = Astro.props;
         margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
         width: max-content;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
     }
 	@media(min-width: 512px) {	
     	div {

src/layouts/basicSection.astro

@@ -19,7 +19,7 @@ const { title } = Astro.props;
         margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
         width: max-content;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
     }
     div {
         row-gap: 1em;

src/layouts/contactSection.astro

@@ -18,7 +18,7 @@ h1 {
     margin: 0.5rem 0px 0.5rem 0.5em;
     padding: 0.25rem 0.75rem;
     width: max-content;
-    background-color: #1e1e1e;
+    background-color: var(--c-darkgray);
 }
 div {
     row-gap: 1em;

src/layouts/hometitle.astro

@@ -26,6 +26,6 @@
         font-weight: bold;
         color: white;
         font-size: 5em;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
     }
 </style>

src/layouts/taSection.astro

@@ -28,7 +28,7 @@ const { title } = Astro.props;
         margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
         width: max-content;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
     }
     h2 {
         color: white;