chore style

components/Carousel.vue

@@ -28,6 +28,7 @@ onMounted(() => {
 
     <div class="absolute top-0 z-10 h-full w-full flex items-center justify-center text-shadow">
       <Typography
+        scale-135
         text-color="white"
         :topic="$t(carousels[pages].title)" :description="$t(carousels[pages].description)" :link="{
           ...carousels[pages].link,

components/ImageHover.vue

@@ -12,20 +12,20 @@ $defineProps<{
     class="group relative h-full w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
   >
     <img :src="img" class="h-full w-full" style="object-fit: cover;">
-    <div class="mask-img opacity-0 group-hover:opacity-100">
-      <div class="text-h6 w-full">
-        <p :title="$t(topic)" class="w-90% truncate text-white">
+    <div class="mask-img h-50px bg-dark-700/70 transition-all group-hover:(h-full)">
+      <div class="text-h6 flex-grow">
+        <p :title="$t(topic)" class="line-clamp-1 w-full text-white group-hover:(line-clamp-3 h-full)">
           {{ $t(topic) }}
         </p>
       </div>
-      <div i-solar-arrow-right-linear stroke-3 font-bold text-white />
+      <div i-solar-arrow-right-linear mx-2 stroke-3 font-bold text-white />
     </div>
   </NuxtLink>
 </template>
 
 <style scoped>
 .mask-img{
-    --uno:'absolute bottom-0 left-0 z-1 flex h-50px w-full items-center justify-center border-t-2px border-dark-50/10 bg-black/15 p-2 px-10 backdrop-blur-md transition ';
+    --uno:'absolute bottom-0 left-0 z-1 flex w-full items-center justify-center border-t-2px border-dark-50/10 p-2 px-10 backdrop-blur-md transition ';
     box-shadow: 0 -5px 25px rgba(0,0,0,0.4);
   }
 </style>

components/Typography.vue

@@ -25,7 +25,7 @@ $defineProps<{
       }}
     </p>
     <NuxtLink v-if="link" :href="link?.href">
-      <ABtn>
+      <ABtn variant="light" class="group" color="white" icon="  i-solar-arrow-right-linear transition-all group-hover:px-4">
         {{ link?.name }}
       </ABtn>
     </NuxtLink>

components/section/GradientCard.vue

@@ -21,7 +21,7 @@ const colors = [
 <template>
   <Section>
     <Typography :topic="$t(topic)" />
-    <div class="grid-row gap-0 pt-20 md:(grid-cols-2)" :class="`lg:grid-cols-${content.length}`">
+    <div class="grid-row gap-10 pt-20 md:(grid-cols-2)" :class="`lg:grid-cols-${content.length}`">
       <div
         v-for="(col, i) in content"
         :key="i"
@@ -30,21 +30,9 @@ const colors = [
         <h2 :title="$t(col.title)" class="text-h2 w-full text-center text-7xl font-bold text-transparent" :class="colors[i]">
           {{ $t(col.title) }}
         </h2>
-      </div>
-      <div
-        v-for="(col, i) in content"
-        :key="i"
-        class="h-full w-full flex flex-col items-center justify-center"
-      >
         <h5 :title="$t(col.subtext)" class="text-h4 text-h5 mt-3 text-center">
           {{ $t(col.subtext) }}
         </h5>
-      </div>
-      <div
-        v-for="(col, i) in content"
-        :key="i"
-        class="h-full w-full flex flex-col items-center justify-center"
-      >
         <p :title="$t(col.description)" class="text-h6 mt-1 text-center">
           {{ $t(col.description) }}
         </p>

nuxt.config.ts

@@ -36,6 +36,10 @@ export default defineNuxtConfig({
           danger: hex2hsl(colors.rose[500]).toString(),
           info: hex2hsl(colors.blue[500]).toString(),
         },
+        cssVars: {
+          // 'base-c': hex2hsl(colors.white).toString(),
+          'body-bg-c': hex2hsl(colors.white).toString(),
+        },
       },
       // @ts-expect-error
       dark: {
@@ -46,6 +50,9 @@ export default defineNuxtConfig({
           danger: hex2hsl(colors.rose[500]).toString(),
           info: hex2hsl(colors.blue[500]).toString(),
         },
+        cssVars: {
+          'body-bg-c': hex2hsl(colors.dark[900]).toString(),
+        },
       },
     },
   },

pages/blog.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

pages/blog/[id].vue

@@ -2,7 +2,7 @@
 const route = useRoute()
 const { locale } = useI18n()
 
-const path = `/${locale.value}${route.path.split('blog')[1]}`
+const path = `/${locale.value}/${route.params.id}`
 
 const { data } = await useAsyncData(`content-${path}`, () => {
   return queryContent().where({ _path: path }).findOne()
@@ -10,8 +10,8 @@ const { data } = await useAsyncData(`content-${path}`, () => {
 </script>
 
 <template>
-  <Banner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" />
-  <main class="m-auto prose">
+  <SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
+  <main class="m-auto prose xl:max-w-900px">
     <ContentRenderer v-if="data" :value="data" />
   </main>
 </template>

pages/blog/index.vue

@@ -0,0 +1,3 @@
+<template>
+  sdf
+</template>

pages/index.vue

@@ -71,7 +71,9 @@ const sectionNine = useSectionNine()
       </div>
     </div>
     <LocaleNuxtLink :href="sectionThree.link.href">
-      <ABtn>{{ $t(sectionThree.link.name) }}</ABtn>
+      <ABtn variant="light">
+        {{ $t(sectionThree.link.name) }}
+      </ABtn>
     </LocaleNuxtLink>
   </Section>