msc: migrate back to default css lvh (#28)

app.vue

@@ -1,6 +1,5 @@
 <template>
 	<div id="app" lang="en" class="bg-mono-950 text-mono-50">
-		<LvhMeasure />
 		<DynamicHeading />
 		<NuxtPage
 			:transition="{
@@ -23,8 +22,6 @@
 </template>
 
 <script lang="ts" setup>
-import type LvhMeasure from './components/LvhMeasure.vue'
-
 const store = useGlobalStore()
 const loaderMounted = ref(true)
 const isLoading = ref(true)

components/CardProject.vue

@@ -2,9 +2,6 @@
 	<div
 		data-info="project-card"
 		class="relative flex w-full justify-self-center"
-		:style="{
-			height: props.opened ? `${store.lvh * 0.6}px` : '100%',
-		}"
 	>
 		<Video
 			class="h-full w-full"
@@ -45,7 +42,6 @@
 
 <script setup lang="ts">
 // props
-const store = useGlobalStore()
 const props = defineProps({
 	projectData: {
 		type: Object as PropType<contentProject>,

components/Rotor/Swiper.client.vue

@@ -1,20 +1,17 @@
 <template>
 	<ScrollPromptAuto />
 	<div
-		class="swiper bottom-0 w-lvw overflow-clip"
+		class="swiper bottom-0 h-lvh w-lvw overflow-clip"
 		:class="{
 			absolute: !props.fixed,
 			fixed: props.fixed,
 			'wheel-offline': !wheelControl,
 		}"
-		:style="{
-			height: `${store.lvh}px`,
-		}"
 	>
 		<div class="swiper-wrapper">
 			<div v-for="slide in props.slides" class="swiper-slide">
 				<RotorWorkLink :link-active="linksActive" :to="slide._path">
-					<CardProject :projectData="slide" />
+					<CardProject class="h-full" :projectData="slide" />
 				</RotorWorkLink>
 			</div>
 			<div class="swiper-slide">
@@ -30,7 +27,6 @@ import Swiper from 'swiper'
 import { Mousewheel, Keyboard } from 'swiper/modules'
 import type { PropType } from 'vue'
 
-const store = useGlobalStore()
 const props = defineProps({
 	slides: {
 		type: Array as PropType<contentProject[]>,

components/Rotor/index.vue

@@ -2,8 +2,7 @@
 	<div
 		data-info="rotor-wrapper"
 		ref="rotorWrap"
-		class="relative col-span-full w-lvw justify-self-center overflow-visible"
-		:style="{ height: `${store.lvh}px` }"
+		class="relative col-span-full h-lvh w-lvw justify-self-center overflow-visible"
 	>
 		<RotorSwiper
 			ref="swiperInstance"
@@ -83,11 +82,6 @@ function alignSwiper() {
 	})
 }
 
-//
-// watchImmediate(isFixed, (val) => {
-// 	console.log('log, isFixed:', val)
-// })
-
 //
 store.addSegmentCallback('getRotorButtons', () => {
 	if (store.activeSegment.buttons?.length == 0) return

components/ScrollPrompt/Auto.vue

@@ -1,14 +1,10 @@
 <template>
 	<div class="absolute right-1/2 z-front -translate-y-1/2">
-		<ScrollPromptBase
-			:style="{ height: `${store.lvh * 0.08}px` }"
-			:active="promptScroll"
-		/>
+		<ScrollPromptBase class="h-[8lvh]" :active="promptScroll" />
 	</div>
 </template>
 
 <script setup lang="ts">
-const store = useGlobalStore()
 const { y } = useWindowScroll()
 let timeout: NodeJS.Timeout
 

components/content/ProjectHeader.vue

@@ -2,7 +2,7 @@
 	<CardProject
 		:projectData="projectData"
 		:opened="true"
-		class="col-span-full w-lvw"
+		class="col-span-full h-[72lvh] w-lvw md:h-[56lvh] lg:h-[64lvh]"
 	/>
 	<div class="col-span-3 hidden md:block lg:col-span-4">
 		<div data-info="project-title" class="col-span-full text-mono-50">
@@ -57,4 +57,6 @@ const projectData = computed(() => {
 	} as contentProject
 })
 const { flatUnwrap } = useUnwrap()
+
+onMounted(() => {})
 </script>

pages/index.vue

@@ -18,10 +18,7 @@
 					</div>
 
 					<div
-						class="col-span-full flex flex-col pb-12 md:col-span-6"
-						:style="{
-							minHeight: `${store.lvh * 0.64}px`,
-						}"
+						class="col-span-full flex h-[64lvh] flex-col pb-12 md:col-span-6"
 					>
 						<div datainfo="spacer-title" class="col-span-full h-40" />
 						<div
@@ -43,10 +40,7 @@
 				<ScrollSegment :pageSegment="content.segments[2]">
 					<div
 						data-info="cta-wrapper"
-						class="col-span-full flex items-end pt-12 lg:items-center"
-						:style="{
-							minHeight: `${store.lvh * 0.4}px`,
-						}"
+						class="col-span-full flex h-[40lvh] items-end pt-12 lg:items-center"
 					>
 						<BlockTextCTA
 							:content="content.bundle.closer.cta"
@@ -90,7 +84,7 @@ function cbRotorComplete() {
 	next()
 	if (device.value === 'touch')
 		window.scrollTo({
-			top: window.scrollY + store.lvh,
+			top: window.scrollY + window.innerHeight,
 			behavior: 'smooth',
 		})
 }