takerofnotes/takerofnotes-website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

detail page port

Browse Source
This commit is contained in:
nicwands
2026-05-29 11:22:56 -04:00
parent b85d28c142
commit e22d75c50a
65 changed files with 7006 additions and 4044 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
components/ColumnLayout.vue Normal file
View File

@@ -0,0 +1,76 @@
<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>