safari optimizations

components/CollectionDetail.vue

@@ -18,9 +18,9 @@
     <NuxtPicture
       v-if="data?.image"
       loading="lazy"
-      class="w-full h-full sm:w-fit sm:h-[50vh] max-w-full object-cover object-center"
+      class="max-sm:w-full h-full sm:h-[50vh] max-w-full object-cover object-center"
       :src="baseUrl + data.image.url"
-      :imgAttrs="{ class: 'w-full h-full sm:w-fit sm:h-[50vh] object-cover object-center' }"
+      :imgAttrs="{ class: 'h-full sm:h-[50vh] object-cover object-center' }"
     />
     <br v-if="data?.image" />
     <div v-if="data?.content">
@@ -34,9 +34,9 @@
         <NuxtPicture
           v-for="img in data.attachment"
           loading="lazy"
-          class="w-full h-fit sm:w-fit sm:h-48 object-cover object-center"
+          class="max-sm:w-full sm:h-48 object-cover object-center"
           :src="baseUrl + img.url"
-          :imgAttrs="{ class: 'w-full h-fit sm:w-fit sm:h-48 object-cover object-center' }"
+          :imgAttrs="{ class: 'max-sm:w-full sm:h-48 object-cover object-center' }"
         />
       </div>
     </div>

components/Footer.vue

@@ -1,13 +1,23 @@
 <template>
-  <div darkgray class="h-48 min-h-fit w-full px-5 py-10 flex-col justify-center items-center flex gap-2">
+  <footer darkgray class="h-48 min-h-fit w-full px-5 py-10 flex-col justify-center items-center flex gap-2">
     <div class="self-stretch py-5 justify-center items-center gap-4 md:gap-10 inline-flex flex-wrap">
-      <NuxtLink v-for="link in footer.links" :key="link.id" :to="link.URL" :target="link.target" class="text-base">
+      <div v-for="link in footer.links" :key="link.id" class="contents">
-        {{ link.text }}
+        <a v-if="link.URL.startsWith('http')" :href="link.URL" :target="link.target" class="text-base">{{
-      </NuxtLink>
+          link.text
+        }}</a>
+        <NuxtLink
+          v-else
+          :to="`${link.URL.startsWith('/') ? '' : '/'}${link.URL}`"
+          :target="link.target"
+          class="text-base"
+        >
+          {{ link.text }}
+        </NuxtLink>
+      </div>
     </div>
     <div class="text-base text-center">@Copyright {{ new Date().getFullYear() }} {{ footer.copyright }}</div>
     <div class="text-base text-center">verwaltet von {{ footer.designed_developed_by }}</div>
-  </div>
+  </footer>
 </template>
 
 <script setup lang="ts">

components/Header.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="sticky top-0 h-fit">
+  <header class="sticky top-0 h-fit">
     <div
       primary
       class="h-24 min-h-fit w-full px-4 md:px-12 py-2.5 justify-between items-center gap-5 flex overflow-hidden"
     >
       <NuxtLink to="/">
-        <img class="h-16 w-fit min-w-fit" :src="baseUrl + navbar.logo.url" />
+        <img class="h-16" :src="baseUrl + navbar.logo.url" />
       </NuxtLink>
       <div class="md:hidden">
         <svg
@@ -57,7 +57,7 @@
         {{ sublink.name }}
       </NuxtLink>
     </div>
-  </div>
+  </header>
 </template>
 
 <script setup lang="ts">

components/dynamicZone/ColumnImageText.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex flex-col md:flex-row gap-4">
+  <div class="flex flex-col md:flex-row gap-8 md:gap-4">
     <NuxtPicture
       loading="lazy"
-      class="w-full md:w-1/2 min-w-[50%] h-fit object-cover object-center"
+      class="w-full md:w-1/2 min-w-[50%] object-cover object-center"
       :class="data?.image_left ? 'order-0' : 'order-1'"
       :src="baseUrl + data?.image.url"
-      :imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
+      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
     />
     <FieldContent :data="data?.text" />
   </div>

components/dynamicZone/DualColumnText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col md:flex-row gap-4">
+  <div class="flex flex-col md:flex-row gap-8 md:gap-4">
     <FieldContent :data="data?.left_side" />
     <FieldContent :data="data?.right_side" />
   </div>

components/dynamicZone/FullImage.vue

@@ -1,9 +1,9 @@
 <template>
   <NuxtPicture
     loading="lazy"
-    class="w-full lg:w-1/2 lg:min-w-[50%] h-fit object-cover object-center mx-auto"
+    class="w-full lg:w-1/2 lg:min-w-[50%] object-cover object-center mx-auto"
     :src="baseUrl + data?.image.url"
-    :imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
+    :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
   />
 </template>
 

components/dynamicZone/Gallery.vue

@@ -3,9 +3,9 @@
     <NuxtPicture
       v-for="img in data?.images"
       loading="lazy"
-      class="w-full h-fit sm:w-fit sm:h-48 object-cover object-center"
+      class="max-sm:w-full sm:h-48 object-cover object-center"
       :src="baseUrl + img.url"
-      :imgAttrs="{ class: 'w-full h-fit sm:w-fit sm:h-48 object-cover object-center' }"
+      :imgAttrs="{ class: 'max-sm:w-full sm:h-48 object-cover object-center' }"
     />
   </div>
 </template>

components/field/Content.vue

@@ -26,8 +26,9 @@
         primary
         :to="item.children[0].text.split('->')[0]"
         class="w-fit p-2 px-3 rounded-md mx-auto mt-3"
-        >{{ item.children[0].text.split("->")[1] }}</NuxtLink
       >
+        {{ item.children[0].text.split("->")[1] }}
+      </NuxtLink>
     </div>
   </div>
 </template>

layouts/landing.vue

@@ -6,7 +6,7 @@
       :src="baseUrl + backdrop.url"
       :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
     />
-    <img class="absolute p-4 w-full h-fit sm:h-40 sm:w-fit bottom-5" :src="baseUrl + navbar.logo.url" />
+    <img class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" :src="baseUrl + navbar.logo.url" />
   </div>
   <Header />
   <slot />

nuxt.config.ts

@@ -10,7 +10,6 @@ export default defineNuxtConfig({
       meta: [
         { charset: "utf-8" },
         { name: "viewport", content: "width=device-width, initial-scale=1" },
-        { hid: "description", name: "description", content: "" },
         { name: "format-detection", content: "telephone=no" },
       ],
       link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.png" }],

package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"

types/field/content.ts

@@ -12,7 +12,7 @@ export default interface ContentField
       }
     | {
         type: "code";
-        children: Array<{ type: "list-item"; children: Array<TypeField> }>;
+        children: Array<TextField>;
         language: "plaintext";
       }
   > {}