pages/site/.vitepress/theme/Layout.vue.in
thepaperpilot e8e6e12450
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m17s
Rewrite hole so that the background can appear through it
2024-06-27 23:14:26 -05:00

57 lines
No EOL
1.9 KiB
Vue

<template>
<DefaultTheme.Layout>
<template #layout-top>
<NolebaseHighlightTargetedHeading />
<ClientOnly>
<div class="background">
<TresCanvas>
<TresOrthographicCamera :position="[0, 0, 10]" />
<TresAmbientLight :intensity="1" />
<Suspense>
<Background />
</Suspense>
</TresCanvas>
</div>
</ClientOnly>
</template>
<template #layout-bottom>
<footer class="vp-doc">
<div>CC {{ new Date().getFullYear() }} <a class="h-card" rel="me" href="/about"><img src="/me.jpg" alt="" />The Paper Pilot</a>. <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.</div>
<div>Any and all opinions listed here are my own and not representative of my employers; future, past and present.</div>
<div><a href="https://resume.incremental.social/thepaperpilot/thepaperpilot">Resume</a> (not actively seeking new opportunities).</div>
<div>Site built from <a href="COMMIT_LINK">this commit</a> on <time>COMMIT_TIME</time>. <a href="https://www.thepaperpilot.org/licenses.txt">Legal disclaimers</a>.</div>
</footer>
</template>
</DefaultTheme.Layout>
</template>
<script setup lang="tsx">
import { NolebaseHighlightTargetedHeading } from '@nolebase/vitepress-plugin-highlight-targeted-heading/client'
import { TresCanvas } from '@tresjs/core'
import '@nolebase/vitepress-plugin-highlight-targeted-heading/client/style.css'
import DefaultTheme from 'vitepress/theme'
import Background from './Background.vue'
import Camera from './Camera.vue'
import OrbitControls from './OrbitControls.vue'
import './custom.css'
</script>
<style scoped>
.background {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
overflow: hidden;
}
footer {
padding: 2em;
z-index: 26;
position: relative;
font-size: small;
background: var(--vp-c-bg-elv);
}
</style>