modal tweaks

src/components/DlRow.vue

@@ -23,6 +23,9 @@ const props = defineProps({ row: Object })
         a {
             @include h6;
         }
+        a {
+            text-decoration: underline;
+        }
     }
 }
 </style>

src/components/MosaicModal.vue

@@ -3,15 +3,28 @@
         class="mosaic-modal theme-dark layout-grid-inner"
         @click="emit('close')"
     >
+        <div class="meta">
             <div class="window dl" @click.stop>
                 <dl-row v-for="row in item.dl" :row="row" />
             </div>
 
+            <div class="window gif">
+                <strapi-media :image="item.image" fit="contain" />
+
+                <a
+                    class="h6"
+                    href="https://web.archive.org/web/20090831003020/http://geocities.com/aizalonl/"
+                    target="_blank"
+                    >aizaloni</a
+                >
+            </div>
+        </div>
+
         <div class="window content" @click.stop data-lenis-prevent>
             <lenis instance="mosaic-modal">
                 <h1 class="title">{{ item.title }}</h1>
 
-                <strapi-map :items="item.content" />
+                <strapi-map :items="item.content" mediaDS="42vw" />
             </lenis>
         </div>
 
@@ -21,6 +34,7 @@
 
 <script setup>
 const props = defineProps({ item: Object })
+console.log(props.item)
 
 const emit = defineEmits(['close'])
 </script>
@@ -32,29 +46,42 @@ const emit = defineEmits(['close'])
     align-items: flex-start;
     padding-top: desktop-vw(27px);
 
+    .meta {
+        grid-column: 4 / span 2;
+    }
+
     .window {
         background: var(--theme-bg);
         color: var(--theme-fg);
+        border-radius: desktop-vw(10px);
 
         &.dl {
             padding: desktop-vw(12px) desktop-vw(10px);
-            border-radius: desktop-vw(10px);
             display: flex;
             flex-direction: column;
             gap: desktop-vw(8px);
-            grid-column: 4 / span 2;
 
             .dl-row:first-child {
                 border-top: none;
                 padding-top: 0;
             }
         }
+        &.gif {
+            margin-top: var(--layout-margin);
+            padding: 1rem;
+            text-align: center;
+
+            a {
+                text-decoration: underline;
+                display: block;
+                margin-top: 1em;
+            }
+        }
         &.content {
-            border-radius: desktop-vw(10px);
             grid-column: 6 / span 7;
 
             .lenis {
-                max-height: desktop-vh(900px);
+                max-height: desktop-vh(950px);
                 overflow: auto;
                 padding: desktop-vw(34px) desktop-vw(24px);
             }
@@ -62,17 +89,15 @@ const emit = defineEmits(['close'])
                 text-align: center;
                 margin-bottom: 1em;
             }
+            .strapi-media {
+                border-radius: desktop-vw(4px);
+                overflow: hidden;
+            }
         }
         &.close {
             padding: desktop-vw(9px);
             border-radius: desktop-vw(16px);
             cursor: pointer;
-            /* position: absolute;
-            right: calc(
-                (var(--layout-column-width) * 3) +
-                    (var(--layout-column-gap) * 3) + var(--layout-margin)
-            );
-            top: desktop-vw(40px); */
             margin-right: auto;
             @include label;
         }

src/components/MosaicScroll.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import _shuffle from 'lodash/shuffle'
 import { useMosaicLayout } from '@/composables/useMosaicLayout'
 
@@ -20,12 +21,23 @@ const props = defineProps({
     items: Array,
 })
 
-// Initialize mosaic layout generator
+const itemIndex = ref(0)
+const shuffledItems = ref(_shuffle(props.items))
+
 const { generateLayout, populateCells } = useMosaicLayout()
 
 const generateCellContent = () => {
-    const itemIndex = Math.floor(Math.random() * props.items.length)
+    if (itemIndex.value >= shuffledItems.value.length - 1) {
-    return props.items[itemIndex]
+        itemIndex.value = 0
+        shuffledItems.value = _shuffle(props.items)
+        return generateCellContent()
+    }
+
+    const item = shuffledItems.value[itemIndex.value]
+
+    itemIndex.value++
+
+    return item
 }
 
 // Generate mosaic content for each viewport

src/components/strapi/Content.vue

@@ -25,5 +25,11 @@ const props = defineProps({
     > *:last-child {
         margin-bottom: 0 !important;
     }
+
+    pre {
+        background: var(--grey);
+        border-radius: desktop-vw(2px);
+        padding: desktop-vw(20px);
+    }
 }
 </style>

src/components/strapi/Map.vue

@@ -4,6 +4,8 @@
             v-for="item in items"
             v-bind="item"
             :is="MAP[item.__component]"
+            :desktopSize="mediaDS"
+            :mobileSize="mediaMS"
         />
     </div>
 </template>
@@ -19,6 +21,8 @@ const MAP = {
 
 const props = defineProps({
     items: Array,
+    mediaDS: String,
+    mediaMS: String,
 })
 </script>
 
@@ -26,6 +30,6 @@ const props = defineProps({
 .strapi-map {
     display: flex;
     flex-direction: column;
-    gap: desktop-vw(40px);
+    gap: desktop-vw(30px);
 }
 </style>

src/components/strapi/Media.vue

@@ -6,7 +6,7 @@
     >
         <div class="image-sizer">
             <img
-                :src="addURLBase(image.url)"
+                :src="image.url"
                 :srcset="srcset"
                 :sizes="sizes"
                 :alt="image.alternativeText || ''"
@@ -18,7 +18,7 @@
 
             <video
                 v-if="video?.url"
-                :src="addURLBase(video.url)"
+                :src="video.url"
                 muted
                 autoplay
                 playsinline
@@ -57,8 +57,6 @@ const props = defineProps({
     },
 })
 
-const addURLBase = (path) => `${import.meta.env.VITE_STRAPI_URL}${path}`
-
 const formats = computed(() => props.image?.formats || {})
 const ratio = computed(() => {
     if (!props.image) return 1
@@ -77,7 +75,7 @@ const aspect = computed(() => {
 const styles = computed(() => ({ '--aspect': aspect.value + '%' }))
 const srcset = computed(() =>
     Object.values(formats.value)
-        .map((f) => `${addURLBase(f.url)} ${f.width}w`)
+        .map((f) => `${f.url} ${f.width}w`)
         .join(', '),
 )
 const sizes = computed(