mobile fixes

src/components/Layout.vue

@@ -31,8 +31,6 @@ const { data: global } = await useStrapiGlobal()
 const { isMobile } = useBreakpoints()
 const { height: headerHeight } = useElementSize(header)
 
-
-
 const headerCopy = computed(() => global.value?.header_copy)
 const headerDl = computed(() => global.value?.header_dl)
 const mosaicItems = computed(() => global.value?.mosaic_items || [])

src/components/MosaicModal.vue

@@ -204,6 +204,7 @@ defineExpose({ animateIn, animateOut })
 
             &.dl {
                 padding: mobile-vw(12px) mobile-vw(10px);
+                margin: 0;
             }
             &.gif {
                 .strapi-media {
@@ -214,7 +215,7 @@ defineExpose({ animateIn, animateOut })
             }
             &.content {
                 grid-column: 1/-1;
-                max-height: 100%;
+                height: 100%;
                 overflow: hidden;
                 position: relative;
 

src/components/MosaicViewport.vue

@@ -11,7 +11,7 @@
                 v-for="(cell, i) in content.cells"
                 :class="[
                     'mosaic-cell',
-                    `layout-${cell.width >= cell.height ? 'landscape' : 'portrait'}`,
+                    `layout-${cell.width * wWidth >= cell.height * wHeight ? 'landscape' : 'portrait'}`,
                 ]"
                 :style="{
                     left: cell.x * 100 + 'vw',
@@ -41,6 +41,7 @@
 <script setup>
 import { ref } from 'vue'
 import gsap from 'gsap'
+import { useWindowSize } from '@vueuse/core'
 
 const THEME_S = 90
 const THEME_L = 50
@@ -63,6 +64,8 @@ const hoverColors = ref(
     ),
 )
 
+const { width: wWidth, height: wHeight } = useWindowSize()
+
 const onMouseEnter = (i) => {
     hoverColors.value[i] =
         `hsl(${Math.random() * 360}deg ${THEME_S}% ${THEME_L}%)`
@@ -105,6 +108,7 @@ const onIntersect = (isIntersecting) => {
             &.layout-portrait {
                 .strapi-media {
                     width: 40%;
+                    aspect-ratio: 1;
                 }
             }
             &.layout-landscape {

src/components/strapi/Content.vue

@@ -33,6 +33,10 @@ const props = defineProps({
         overflow-x: auto;
     }
 
+    em {
+        font-style: italic;
+    }
+
     a {
         text-decoration: underline;
     }

src/pages/mosaic-item.vue

@@ -6,7 +6,7 @@
 
 <script setup>
 import { useStrapiGlobal } from '@/composables/useStrapi'
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()

src/styles/_font-style.scss

@@ -39,7 +39,7 @@
     font-family: var(--font-sans);
     font-weight: 400;
     line-height: 1.3;
-    @include size-font(8px, 14px);
+    @include size-font(10px, 14px);
 }
 
 @mixin label {