feat: uniform border radii

app/assets/css/main.css

@@ -47,6 +47,10 @@
   --color-raisin-cool: #242A32;
 
   --ui-primary: var(--color-primary-900);
+
+  /* Sizing */
+  --radius: var(--radius-sm);
+  --ui-radius: var(--radius);
 }
 
 @layer theme {

app/components/AppHeader.vue

@@ -5,7 +5,7 @@ const appConfig = useAppConfig()
 <template>
   <UHeader>
     <template #title>
-      <Logo class="w-auto h-12 dark:bg-white rounded-md p-1" />
+      <Logo class="w-auto h-12 dark:bg-white rounded p-1" />
     </template>
 
     <UNavigationMenu :items="appConfig.links.header" />

app/components/content/Album.vue

@@ -18,9 +18,9 @@ const previewImage = images[0]
 <template>
   <figure class="!my-0 pt-2 cursor-pointer overflow-hidden min-w-[12rem] lg:min-w-0 flex-1" @click="$emit('selectAlbum', path, images)">
     <div class="relative w-full aspect-square">
-      <div class="absolute -top-2 h-full inset-x-2.5 rounded-md opacity-50 bg-neutral-400 border border-neutral-200 dark:border-neutral-900" />
-      <div class="absolute -top-1 h-full inset-x-1.5 rounded-md bg-neutral-400 border border-neutral-200 dark:border-neutral-900" />
-      <img :src="previewImage?.src" :alt="previewImage?.alt" class="absolute h-full w-full top-0 rounded-md m-0 object-cover border border-neutral-200 dark:border-neutral-900 ">
+      <div class="absolute -top-2 h-full inset-x-2.5 rounded opacity-50 bg-neutral-400 border border-neutral-200 dark:border-neutral-900" />
+      <div class="absolute -top-1 h-full inset-x-1.5 rounded bg-neutral-400 border border-neutral-200 dark:border-neutral-900" />
+      <img :src="previewImage?.src" :alt="previewImage?.alt" class="absolute h-full w-full top-0 rounded m-0 object-cover border border-neutral-200 dark:border-neutral-900 ">
     </div>
     <figcaption class="font-medium text-sm mt-3">
       <ProseH3 class="m-0 font-sans! text-lg">

app/components/content/Gallery.vue

@@ -30,7 +30,7 @@ function selectAlbum(path: string, images: { src: string, alt: string | undefine
     </template>
 
     <UPageColumns>
-      <img v-for="img in gallery" :key="img.src" :src="img.src" :alt="img.alt" class="w-full rounded-md border border-neutral-200 dark:border-neutral-800">
+      <img v-for="img in gallery" :key="img.src" :src="img.src" :alt="img.alt" class="w-full rounded border border-neutral-200 dark:border-neutral-800">
     </UPageColumns>
   </UPage>
 </template>

app/components/content/ImageCaption.vue

@@ -12,7 +12,7 @@ defineProps<{
     <slot name="image">
       <NuxtImg
         placeholder :src :alt :class="imgClass"
-        class="mb-1 border border-neutral-200 dark:border-neutral-800 w-96 lg:w-[28rem] group-left:min-w-full group-right:min-w-full"
+        class="mb-1 border border-neutral-200 dark:border-neutral-800 w-96 rounded lg:w-[28rem] group-left:min-w-full group-right:min-w-full"
       />
     </slot>
 

app/components/content/Maps.vue

@@ -97,7 +97,7 @@ const options = {
     :center="center"
     :zoom="16"
     :options="options"
-    class="w-full min-h-96 h-[60dvh] rounded-md overflow-hidden border border-neutral-200 dark:border-neutral-800"
+    class="w-full min-h-96 h-[60dvh] rounded overflow-hidden border border-neutral-200 dark:border-neutral-800"
   >
     <GMapCluster>
       <GMapMarker

app/pages/index.vue

@@ -44,10 +44,10 @@ useSeoMeta({
         <div class="relative">
           <img
             :src="page.hero.image?.src"
-            class="lg:block relative w-full lg:h-[360px] xl:h-[380px] 2xl:h-[420px] sm:rounded-lg aspect-[19/9] sm:aspect-[20/9] md:aspect-[21/9] lg:aspect-[7/5] xl:aspect-[16/9] object-cover md:object-[25%]"
+            class="lg:block relative w-full lg:h-[360px] xl:h-[380px] 2xl:h-[420px] sm:rounded aspect-[19/9] sm:aspect-[20/9] md:aspect-[21/9] lg:aspect-[7/5] xl:aspect-[16/9] object-cover md:object-[25%]"
             alt=""
           >
-          <div class="hidden lg:block absolute inset-2 border border-4 border-white dark:border-neutral-900 rounded-md" />
+          <div class="hidden lg:block absolute inset-2 border border-4 border-white dark:border-neutral-900 rounded" />
         </div>
       </div>
     </UPageSection>

content/index.yaml

@@ -56,7 +56,7 @@ sections:
     image:
       src: /images/home-2.jpg
       alt: Grabmale Image
-      class: 'rounded-md'
+      class: 'rounded'
   - icon: i-ph-bank-duotone
     title: Restaurierungen
     description: >
@@ -81,7 +81,7 @@ sections:
     image:
       src: /images/home-1.jpg
       alt: Restaurierungen Image
-      class: 'rounded-md'
+      class: 'rounded'
 ui:
   footer:
     wave: fill-neutral-100 dark:fill-raisin