77 lines
1.8 KiB
Vue
77 lines
1.8 KiB
Vue
<template>
|
|
<main class="column-layout">
|
|
<div class="columns">
|
|
<lenis class="column one" instance="column-one">
|
|
<slot name="column-one" />
|
|
</lenis>
|
|
|
|
<lenis class="column two" instance="column-two">
|
|
<slot name="column-two" />
|
|
</lenis>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Lenis from './Lenis.vue'
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.column-layout {
|
|
/* padding-top: var(--header-height); */
|
|
/* height: var(--win-height); */
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
|
|
.breadcrumbs {
|
|
padding-top: desktop-vw(28px);
|
|
padding-bottom: desktop-vw(28px);
|
|
}
|
|
|
|
.columns {
|
|
grid-template-columns: desktop-vw(480px) 1fr;
|
|
display: grid;
|
|
border-top: 1px solid var(--theme-fg);
|
|
|
|
.column {
|
|
height: 100vh;
|
|
overflow: scroll;
|
|
|
|
&.one {
|
|
border-right: 1px solid var(--theme-fg);
|
|
}
|
|
&.three {
|
|
border-left: 1px solid var(--theme-fg);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include mobile {
|
|
height: auto;
|
|
margin-top: mobile-vw(20px);
|
|
|
|
.columns {
|
|
grid-template-columns: 1fr;
|
|
padding-bottom: 35vh;
|
|
|
|
.column {
|
|
height: auto;
|
|
overflow: hidden;
|
|
|
|
&.one {
|
|
border-top: 1px solid var(--theme-fg);
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 35vh;
|
|
z-index: 5;
|
|
background: var(--theme-bg);
|
|
overflow: scroll;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|