nhcarrigan/docs
2
0
Fork 0
generated from nhcarrigan/template
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add overlay video (#39)

Browse Source 
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>
This commit is contained in:
Naomi Carrigan 2024-11-28 22:22:50 +00:00 committed by Naomi the Technomancer
parent 326720da21
commit fa915b5961
1 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Footer.astro
View File

@ -3,32 +3,46 @@ 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;
}