74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<!-- index.vue -->
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|
import Feed from '@/components/dredge/Feed/Feed.vue';
|
|
import MainHeader from '@/components/dredge/MainHeader.vue';
|
|
import Sidebar from '@/components/dredge/Sidebar/Sidebar.vue';
|
|
import Stories from '@/components/dredge/Stories/Stories.vue';
|
|
|
|
const depth = ref(0);
|
|
const maxDepth = 4000;
|
|
|
|
function onScroll() {
|
|
const scrolled = window.scrollY;
|
|
depth.value = Math.min(maxDepth, Math.round(scrolled * 3.4));
|
|
}
|
|
|
|
onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }));
|
|
onUnmounted(() => window.removeEventListener('scroll', onScroll));
|
|
</script>
|
|
|
|
<template>
|
|
<Main>
|
|
<div class="dredge">
|
|
<MainHeader />
|
|
<div class="dredge__body">
|
|
<div class="dredge__main">
|
|
<Stories />
|
|
<slot />
|
|
</div>
|
|
<Sidebar />
|
|
</div>
|
|
</div>
|
|
</Main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dredge {
|
|
--abyss: #050b14;
|
|
--midwater: #0e1f2e;
|
|
--panel: #10222f;
|
|
--line: #1c3140;
|
|
--sediment: #cdbfa4;
|
|
--sediment-dim: #8f8a78;
|
|
--haze: #6e8a96;
|
|
--bioluminum: #4ce0d2;
|
|
--rust-net: #b8663f;
|
|
|
|
background: var(--abyss);
|
|
color: var(--sediment);
|
|
min-height: 100vh;
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
}
|
|
|
|
.dredge__main {
|
|
min-width: 0;
|
|
}
|
|
|
|
.dredge__body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 640px) 320px;
|
|
gap: 2.5rem;
|
|
max-width: 1040px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1.5rem 4rem;
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.dredge__body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|