Use now opacity syntax

dwh-outsite · Jan 4, 2025 · 66f5e27 · 66f5e27
1 parent af9fc93
commit 66f5e27
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/dwhdelft.nl/pages/education.vue b/dwhdelft.nl/pages/education.vue
@@ -94,9 +94,7 @@ const { t } = useT()
         <p v-for="paragraph in t('content.voorlichting')" :key="paragraph" class="mb-4 text-lg" v-html="paragraph" />
       </div>
 
-      <div
-        class="flex-1 rounded-lg bg-brand-100 bg-opacity-80 p-4 shadow-xl backdrop-blur xl:ml-6 xl:mt-[-14.555vw] xl:p-8"
-      >
+      <div class="flex-1 rounded-lg bg-brand-100/80 p-4 shadow-xl backdrop-blur xl:ml-6 xl:mt-[-14.555vw] xl:p-8">
         <h2 class="mb-4 text-xl font-bold uppercase tracking-wider text-brand-500" v-text="t('titles.contact')" />
 
         <p v-for="paragraph in t('content.contact')" :key="paragraph" class="mb-4 text-lg" v-html="paragraph" />

diff --git a/shared/components/layout/BaseHeader.vue b/shared/components/layout/BaseHeader.vue
@@ -45,7 +45,7 @@ const showMenu = ref(false)
         </nuxt-link>
         <div
           v-if="showMenu"
-          class="absolute top-16 z-50 w-[calc(100vw-2rem)] rounded-md bg-white bg-opacity-95 px-4 py-1 text-xl text-gray-800 shadow-xl backdrop-blur-xl lg:hidden"
+          class="absolute top-16 z-50 w-[calc(100vw-2rem)] rounded-md bg-white/95 px-4 py-1 text-xl text-gray-800 shadow-xl backdrop-blur-xl lg:hidden"
         >
           <nuxt-link
             v-for="item in menuItems"
@@ -61,13 +61,13 @@ const showMenu = ref(false)
           <slot name="mobile-menu-extension" />
         </div>
         <div
-          class="hidden rounded-full bg-white bg-opacity-10 p-1 text-lg font-semibold text-white shadow backdrop-blur-lg lg:flex"
+          class="hidden rounded-full bg-white/10 p-1 text-lg font-semibold text-white shadow backdrop-blur-lg lg:flex"
         >
           <nuxt-link
             v-for="item in menuItems"
             :key="item.url"
             :to="item.url"
-            class="flex items-center px-3 py-1 no-underline transition-all hover:rounded-full hover:bg-white hover:bg-opacity-90 hover:text-gray-800"
+            class="flex items-center px-3 py-1 no-underline transition-all hover:rounded-full hover:bg-white/90 hover:text-gray-800"
             :class="isActive(item.url) && 'bg-white/10 rounded-full'"
             :target="item.url.startsWith('http') ? '_blank' : undefined"
           >
@@ -76,7 +76,7 @@ const showMenu = ref(false)
           </nuxt-link>
         </div>
         <div class="flex items-center space-x-4">
-          <div class="rounded-full bg-white bg-opacity-10 p-2 shadow backdrop-blur-lg hover:bg-opacity-25">
+          <div class="rounded-full bg-white/10 p-2 shadow backdrop-blur-lg hover:bg-white/25">
             <div
               class="relative flex size-7 items-center justify-center overflow-hidden rounded-full border-2 border-white bg-white"
             >
@@ -89,7 +89,7 @@ const showMenu = ref(false)
             </div>
           </div>
           <slot name="menu-extension" />
-          <div class="rounded-full bg-white bg-opacity-10 p-2 shadow backdrop-blur-lg hover:bg-opacity-25 lg:hidden">
+          <div class="rounded-full bg-white/10 p-2 shadow backdrop-blur-lg hover:bg-white/25 lg:hidden">
             <div
               class="relative flex size-7 items-center justify-center overflow-hidden rounded-full border-2 border-white bg-white p-1"
               @click="showMenu = !showMenu"