121 lines
No EOL
2.9 KiB
Svelte
121 lines
No EOL
2.9 KiB
Svelte
<script lang="ts">
|
|
import "../../app.css";
|
|
import Header from "./header.svelte";
|
|
import Footer from "./footer.svelte";
|
|
import { onMount } from 'svelte';
|
|
import { dev } from '$app/environment'
|
|
|
|
let { children } = $props();
|
|
|
|
let scrollObserver = $state(true);
|
|
|
|
onMount(()=>{
|
|
let observer = new IntersectionObserver(
|
|
(entries)=>{scrollObserver = entries[0].isIntersecting},
|
|
{rootMargin: "25px",threshold: 0}
|
|
);
|
|
observer.observe(document.getElementById('scroll')!)
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta name="theme-color" content="#a1cc66" media="(prefers-color-scheme: light)">
|
|
<meta name="theme-color" content="teal" media="(prefers-color-scheme: dark)">
|
|
</svelte:head>
|
|
|
|
<div id="root">
|
|
<div id="scroll"></div>
|
|
{#if dev}
|
|
<div id='devTicker'>DEV DUILD</div>
|
|
{/if}
|
|
|
|
<div class="headerContainer">
|
|
<header class:hide={!scrollObserver}>
|
|
<Header />
|
|
</header>
|
|
</div>
|
|
|
|
<div class="mainContainer">
|
|
<main>
|
|
{@render children()}
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
|
|
<div class="u320"></div>
|
|
</div>
|
|
|
|
<style>
|
|
#root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--back-color);
|
|
transition: background-color 1s;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
#devTicker {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 6px;
|
|
color: yellow;
|
|
background-color: #0008;
|
|
z-index: 10;
|
|
}
|
|
|
|
.headerContainer {
|
|
position: sticky;
|
|
top: 0;
|
|
height: 80px;
|
|
z-index: 1;
|
|
@media(width<1000px) {
|
|
height: 40px;
|
|
}
|
|
|
|
& header {
|
|
background-color: var(--theme-color);
|
|
height: 100%;
|
|
transition: height .4s, transform .4s, background-color 1s;
|
|
&.hide {
|
|
height: 40px;
|
|
@media(width<1000px) {
|
|
transform: translate(0px,-50px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mainContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
main {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
@media(width<320px) {
|
|
.u320 {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
background: no-repeat center/25% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAgCAAAAADC94zaAAAAiklEQVQoz62RQQ7EMAgDxxH/f3LdQ9MmNGQPq3JBwsLYRkYUZQIZv+dCFgUAQgFIKxcEoJXN0NhVG8SpD8Sd0g/1s2OlPu107cNDmz2kOGIyoeQ5Xv5KRBmN5BtUKOjaFtXrtbhEbbI+XCUqXEet/Rfitp+u6/4pHEpS/eedb5GdABwbTPzMQDVyAtNNK05J5lfeAAAAAElFTkSuQmCC);
|
|
background-color: white;
|
|
image-rendering: pixelated;
|
|
color: black;
|
|
&::after {
|
|
content: 'This site supports screen sizes larger than 320px';
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (scripting: none) {
|
|
.headerContainer{height:40px !important;}
|
|
}
|
|
</style> |