From fa915b59613310d8d6707679b557f2f78923f0b0 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Thu, 28 Nov 2024 22:22:50 +0000
Subject: [PATCH] feat: add overlay video (#39)

Reviewed-on: https://codeberg.org/nhcarrigan/docs/pulls/39
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
---
 src/components/Footer.astro | 58 +++++++++++++++++++++++--------------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index f5c4fcb..8f9d8f6 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -3,33 +3,47 @@ import LastUpdated from "@astrojs/starlight/components/LastUpdated.astro";
 import EditLink from "@astrojs/starlight/components/EditLink.astro";
 import Pagination from "@astrojs/starlight/components/Pagination.astro";
 ---
+
 <footer class="sl-flex">
-	<div class="meta sl-flex">
-		<EditLink {...Astro.props} />
-		<LastUpdated {...Astro.props} />
-	</div>
-	<Pagination {...Astro.props} />
+  <div class="meta sl-flex">
+    <EditLink {...Astro.props} />
+    <LastUpdated {...Astro.props} />
+  </div>
+  <Pagination {...Astro.props} />
   <div id="tree-nation-offset-website"></div>
-<script>TreeNationOffsetWebsite({code: 'a17464e0cd351220', lang: 'en', theme: 'dark'}).render('#tree-nation-offset-website');</script>
+  <script>
+    TreeNationOffsetWebsite({
+      code: "a17464e0cd351220",
+      lang: "en",
+      theme: "dark",
+    }).render("#tree-nation-offset-website");
+  </script>
+  <video
+    autoplay={true}
+    loop={true}
+    muted={true}
+    playsinline={true}
+    src="https://cdn.nhcarrigan.com/overlay.webm"
+    style={{ pointerEvents: "none", position: "fixed", top: 0, left: 0, opacity: 0.25, zIndex:100, width: "100vw", height: "100vh"}}></video>
 </footer>
 
 <style>
-	footer {
-		flex-direction: column;
-		gap: 1.5rem;
-	}
-	.meta {
-		gap: 0.75rem 3rem;
-		justify-content: space-between;
-		flex-wrap: wrap;
-		margin-top: 3rem;
-		font-size: var(--sl-text-sm);
-		color: var(--sl-color-gray-3);
-	}
-	.meta > :global(p:only-child) {
-		margin-inline-start: auto;
-	}
+  footer {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+  .meta {
+    gap: 0.75rem 3rem;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 3rem;
+    font-size: var(--sl-text-sm);
+    color: var(--sl-color-gray-3);
+  }
+  .meta > :global(p:only-child) {
+    margin-inline-start: auto;
+  }
   #tree-nation-offset-website {
     margin: auto;
   }
-</style>
\ No newline at end of file
+</style>