add Header component

src/components/Header.astro

@@ -0,0 +1,70 @@
+---
+import Image from "astro/components/Image.astro";
+import redHeartFlat from "../images/red_heart_flat.svg";
+
+const pageTitle = "emma's place";
+const motto = "a celebration of self-expression through the personal web";
+
+const backgroundColor = "#ffd4de";
+const biPridePink = "#d60270";
+const biPridePurple = "#9b4f96";
+const biPrideBlue =  "#0038a8";
+---
+
+<header>
+	<span class="logo">
+		{pageTitle} <Image src={redHeartFlat} alt="a red heart meant to symbolize love" />
+	</span>
+	<span class="motto">
+        {motto}
+	</span>
+</header>
+
+<style define:vars={{biPridePink, biPridePurple, biPrideBlue, backgroundColor}}>
+    @font-face {
+        font-family: lato-regular;
+        src: url("/lato-regular.woff2");
+    }
+
+    @font-face {
+        font-family: pacifico;
+        src: url("/pacifico.woff2");
+    }
+
+    header {
+        background-color: var(--backgroundColor);
+        grid-row: 1/2;
+        grid-column: 1/3;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+        height: 6vh;
+        width: 80vw;
+        border-top-left-radius: 15px;
+        border-top-right-radius: 15px;
+        border-bottom: 10px solid;
+        border-image-slice: 1;
+        border-width: 5px;
+        border-image-source: linear-gradient(
+            to right,
+            var(--biPridePink) 0 33%,
+            var(--biPridePurple) 33% 66%,
+            var(--biPrideBlue) 66%
+        );
+        font-size: 1.4rem;
+        margin-top: 0.43rem;
+    }
+
+    .logo {
+        font-family: pacifico;
+        font-size: 1.35rem;
+        letter-spacing: 0.1rem;
+    }
+
+    .motto {
+        font-family: lato-regular;
+        letter-spacing: 0.05rem;
+    }
+</style>

src/images/red_heart_flat.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.99987 6.00001C10.6646 3.66763 14.4999 6.50001 15.9999 8.50001C17.4999 6.5 21.3351 3.66763 25.9999 6.00001C31.9999 8.99999 30.4998 16.5 25.9998 21C23.8041 23.1958 19.9371 27.0628 17.1087 29.2137C16.4552 29.7106 15.5614 29.6884 14.9226 29.1728C12.3299 27.08 8.16491 23.165 5.99987 21C1.49986 16.5 -0.000126839 8.99999 5.99987 6.00001Z" fill="#F8312F"/>
+<path d="M15.9998 8.49998V11.5492C17.2695 8.86501 20.4252 5.28051 25.6578 5.83746C21.1482 3.80623 17.463 6.54908 15.9998 8.49998Z" fill="#CA0B4A"/>
+<path d="M11.9456 5.53691C10.2614 4.95005 8.22499 4.88745 5.99987 6.00001C-0.000126839 8.99999 1.49986 16.5 5.99987 21C8.16491 23.165 12.3299 27.08 14.9226 29.1728C15.5614 29.6884 16.4552 29.7106 17.1087 29.2137C17.3629 29.0204 17.6255 28.8132 17.8945 28.5946C15.0398 26.4524 11.0335 23.0762 8.85898 21.1325C3.90218 16.702 2.24993 9.31788 8.85898 6.36425C9.93279 5.88435 10.9667 5.62654 11.9456 5.53691Z" fill="#CA0B4A"/>
+<ellipse cx="23.4771" cy="12.5937" rx="2.83554" ry="4.78125" transform="rotate(30 23.4771 12.5937)" fill="#F37366"/>
+</svg>

src/pages/index.astro

@@ -1,4 +1,6 @@
 ---
+import Header from "../components/Header.astro";
+
 import "../styles/global.css";
 
 const pageTitle = "emma's place";
@@ -15,6 +17,12 @@ const linkColorNightMode = "#4cc9f0";
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>{pageTitle}</title>
 		<style is:global define:vars={{backgroundColor, backgroundColorNightMode, textColorNightMode, linkColorNightMode}}>
+			.status {
+				height: 120px;
+				margin-top: 0.5rem;
+				margin-bottom: 0.5rem;
+			}
+
 			.status .statuslol_container .statuslol {
   				background: var(--backgroundColor) !important;
 			}

src/styles/global.css

@@ -1,13 +1,3 @@
-@font-face {
-  font-family: lato-regular;
-  src: url("/lato-regular.woff2");
-}
-
-@font-face {
-  font-family: pacifico;
-  src: url("/pacifico.woff2");
-}
-
 :root {
   --text-color: #0c0c0c;
   --background-color: #ffd4de;
@@ -18,9 +8,6 @@
   --link-visited: #8a2be2;
   --link-color: #4b0082;
   --border-color: #db7093;
-  --bi-pride-pink-light: #d60270;
-  --bi-pride-purple-light: #9b4f96;
-  --bi-pride-blue-light: #0038a8;
   --disability-pride-black-light: #595959;
   --disability-pride-red-light: #cf7280;
   --disability-pride-yellow-light: #eede77;
@@ -86,27 +73,6 @@ main {
   padding-top: 0.5rem;
 }
 
-header {
-  background-color: var(--background-color);
-  grid-row: 1/2;
-  grid-column: 1/3;
-  height: 6vh;
-  width: 80vw;
-  border-top-left-radius: 15px;
-  border-top-right-radius: 15px;
-  border-bottom: 10px solid;
-  border-image-slice: 1;
-  border-width: 5px;
-  border-image-source: linear-gradient(
-    to right,
-    var(--bi-pride-pink-light) 0 33%,
-    var(--bi-pride-purple-light) 33% 66%,
-    var(--bi-pride-blue-light) 66%
-  );
-  font-size: 1.4rem;
-  margin-top: 0.43rem;
-}
-
 footer {
   background-color: var(--background-color);
   grid-row: 3/4;
@@ -133,7 +99,6 @@ footer {
   letter-spacing: 0.05rem;
 }
 
-header,
 footer {
   display: flex;
   justify-content: center;
@@ -146,12 +111,6 @@ section {
   width: 55vw;
 }
 
-.status {
-  height: 120px;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
 .mobile-header {
   display: none;
 }
@@ -173,14 +132,6 @@ section {
     background-color: var(--body-background-color);
     background-image: url("/stardust.png");
   }
-
-  .status .statuslol_content p {
-    color: var(--text-color);
-  }
-
-  .status .statuslol_content .statuslol_time a {
-    color: var(--link-color) !important;
-  }
 }
 
 /* @media only screen and (max-width: 600px) {
@@ -260,14 +211,6 @@ ul {
   list-style-type: none;
 }
 
-nav ul li {
-  padding-bottom: 0.5rem;
-}
-
-nav ul li a {
-  font-size: 1rem;
-}
-
 main section {
   font-size: 1rem;
 }
@@ -280,17 +223,6 @@ main section ul li {
   padding-bottom: 0.25rem;
 }
 
-.logo {
-  font-family: pacifico;
-  font-size: 1.35rem;
-  letter-spacing: 0.1rem;
-}
-
-.motto {
-  font-family: lato-regular;
-  letter-spacing: 0.05rem;
-}
-
 .picrew-gallery {
   display: flex;
   flex-wrap: wrap;