Add image attribution field

src/components/MosaicModal.vue

@@ -14,6 +14,15 @@
                     target="_blank"
                     >aizaloni</a
                 >
+
+                <!-- IYO https://web.archive.org/web/20091025080210/http://geocities.com/gstringacappella/listen.html -->
+                <!-- FWB https://web.archive.org/web/20090803180153/http://geocities.com/Petsburgh/Haven/5646/cp5.html -->
+                <!-- 33 https://web.archive.org/web/20090805155323/http://geocities.com/WestHollywood/Park/6064/works.html -->
+                <!-- SHVR https://web.archive.org/web/20091027131546/http://geocities.com/keat1177/thestudents.html -->
+                <!-- POLY AI https://web.archive.org/web/20091024163633/http://geocities.com/garylee5150/lostmouse.html -->
+                <!-- HIFI https://web.archive.org/web/20090807023346/http://geocities.com/charmainezoe/midi.html -->
+                <!-- COINSHIFT https://web.archive.org/web/20090820132241/http://geocities.com/jbumps/Sidebar.html -->
+                <!-- AP https://web.archive.org/web/20070623164439/http://br.geocities.com/textosecancoes/images/alexara4.gif -->
             </div>
         </div>
 
@@ -77,7 +86,7 @@ const onClose = () => router.push('/')
             }
         }
         &.content {
-            grid-column: 6 / span 7;
+            grid-column: 6 / span 9;
 
             .lenis {
                 max-height: desktop-vh(950px);

src/components/MosaicViewport.vue

@@ -30,11 +30,6 @@
 </template>
 
 <script setup>
-import { computed, watch } from 'vue'
-import { useEventListener } from '@vueuse/core'
-import useLenis from '@/composables/useLenis'
-import { useRoute, useRouter } from 'vue-router'
-
 const props = defineProps({
     viewport: {
         type: Object,
@@ -45,48 +40,6 @@ const props = defineProps({
         required: true,
     },
 })
-
-// const route = useRoute()
-// const router = useRouter()
-
-// const selectedItem = computed(() => {
-//     const { item } = route.query
-
-//     return props.content.cells.find((cell) => {
-//         return cell?.content?.slug === item
-//     })?.content
-// })
-
-// const openModal = (cellContent) => {
-//     router.push({
-//         query: {
-//             item: cellContent.slug,
-//         },
-//     })
-// }
-// const closeModal = () => {
-//     router.push({
-//         query: null,
-//     })
-// }
-
-// // Close note on Escape key
-// const handleKeydown = (event) => {
-//     if (event.key === 'Escape' && selectedItem.value) {
-//         closeModal()
-//     }
-// }
-// useEventListener('keydown', handleKeydown)
-
-// // Pause scroll when modal is open
-// const lenis = useLenis()
-// watch(selectedItem, (newItem, oldItem) => {
-//     if (newItem && !oldItem) {
-//         lenis.value.stop()
-//     } else if (oldItem && !newItem) {
-//         lenis.value.start()
-//     }
-// })
 </script>
 
 <style lang="scss">
@@ -120,6 +73,9 @@ const props = defineProps({
                     aspect-ratio: 1;
                 }
             }
+            .strapi-media {
+                mix-blend-mode: darken;
+            }
         }
     }
 }