Footer component created

src/components/Footer.astro

@@ -0,0 +1,48 @@
+---
+const backgroundColor = "#ffd4de";
+const disabilityPrideBlack = "#595959";
+const disabilityPrideRed =  "#cf7280";
+const disabilityPrideYellow = "#eede77";
+const disabilityPrideWhite = "#e8e8e8";
+const disabilityPrideBlue = "#7bc2e0";
+const disabilityPrideGreen = "#3bb07d";
+---
+
+<footer>
+	<span>
+		made with love and tender care by emma. get in <a href="../site/contact.php" target="_blank">touch</a>
+	</span>
+</footer>
+
+<style define:vars={{backgroundColor, disabilityPrideBlack, disabilityPrideRed, disabilityPrideYellow, disabilityPrideWhite, disabilityPrideBlue, disabilityPrideGreen}}>
+    footer {
+        background-color: var(--backgroundColor);
+        grid-row: 3/4;
+        grid-column: 1/3;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+        height: 6vh;
+        width: 80vw;
+        border-bottom-left-radius: 15px;
+        border-bottom-right-radius: 15px;
+        border-top: 10px solid;
+        border-image-slice: 1;
+        border-width: 5px;
+        border-image-source: linear-gradient(
+            to right,
+            var(--disabilityPrideBlack) 0 35%,
+            var(--disabilityPrideRed) 35% 41%,
+            var(--disabilityPrideYellow) 41% 47%,
+            var(--disabilityPrideWhite) 47% 53%,
+            var(--disabilityPrideBlue) 53% 59%,
+            var(--disabilityPrideGreen) 59% 65%,
+            var(--disabilityPrideBlack) 65% 71%
+        );
+        font-family: system-ui;
+        font-size: 1.3rem;
+        letter-spacing: 0.05rem;
+}
+</style>

src/pages/index.astro

@@ -1,6 +1,4 @@
 ---
-import Header from "../components/Header.astro";
-
 import "../styles/global.css";
 
 const pageTitle = "emma's place";

src/styles/global.css

@@ -8,12 +8,6 @@
   --link-visited: #8a2be2;
   --link-color: #4b0082;
   --border-color: #db7093;
-  --disability-pride-black-light: #595959;
-  --disability-pride-red-light: #cf7280;
-  --disability-pride-yellow-light: #eede77;
-  --disability-pride-white-light: #e8e8e8;
-  --disability-pride-blue-light: #7bc2e0;
-  --disability-pride-green-light: #3bb07d;
 }
 
 *,
@@ -73,40 +67,6 @@ main {
   padding-top: 0.5rem;
 }
 
-footer {
-  background-color: var(--background-color);
-  grid-row: 3/4;
-  grid-column: 1/3;
-  height: 6vh;
-  width: 80vw;
-  border-bottom-left-radius: 15px;
-  border-bottom-right-radius: 15px;
-  border-top: 10px solid;
-  border-image-slice: 1;
-  border-width: 5px;
-  border-image-source: linear-gradient(
-    to right,
-    var(--disability-pride-black-light) 0 35%,
-    var(--disability-pride-red-light) 35% 41%,
-    var(--disability-pride-yellow-light) 41% 47%,
-    var(--disability-pride-white-light) 47% 53%,
-    var(--disability-pride-blue-light) 53% 59%,
-    var(--disability-pride-green-light) 59% 65%,
-    var(--disability-pride-black-light) 65% 71%
-  );
-  font-family: system-ui;
-  font-size: 1.3rem;
-  letter-spacing: 0.05rem;
-}
-
-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
 section {
   width: 55vw;
 }