Improving page title component default styles

ecomplus · Jan 29, 2024 · 55ebc50 · 55ebc50
1 parent 3b55e28
commit 55ebc50
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 19 deletions.
diff --git a/functions/ssr/src/assets/style.css b/functions/ssr/src/assets/style.css
@@ -52,7 +52,7 @@ a, button, button > *, [role=button], [role=button] > * {
   @apply font-brand font-black italic;
 }
 .ui-title {
-  @apply text-3xl xl:text-5xl;
+  @apply text-3xl xl:text-5xl text-balance;
 }
 
 [class*=ui-badge] {

diff --git a/functions/ssr/src/components/PageTitle.vue b/functions/ssr/src/components/PageTitle.vue
@@ -1,21 +1,26 @@
 <template>
-  <section v-if="title" class="ui-section">
-    <div class="flex items-center gap-4">
-      <AImg
-        v-if="logo"
-        :picture="logo"
-        :alt="logo.alt || title"
-        class="h-auto max-w-[150px] xl:max-w-[200px]"
-      />
-      <h1 class="ui-title">
-        {{ title }}
-      </h1>
-    </div>
-    <div class="prose">
-      <p v-if="description">
-        {{ description }}
-      </p>
-    </div>
+  <section v-if="title" class="bg-secondary-100 py-2">
+    <article class="ui-section">
+      <div class="prose mx-auto">
+        <div class="not-prose flex items-center gap-4 md:justify-center">
+          <AImg
+            v-if="logo"
+            :picture="logo"
+            :alt="logo.alt || title"
+            class="h-auto max-w-[150px] xl:max-w-[200px]"
+          />
+          <h1 class="ui-title text-secondary-800 text-center">
+            {{ title }}
+          </h1>
+        </div>
+        <p
+          v-if="description"
+          :class="description.length < 120 && 'md:text-center'"
+        >
+          {{ description }}
+        </p>
+      </div>
+    </article>
   </section>
 </template>
 

diff --git a/functions/ssr/src/components/SearchShowcase.vue b/functions/ssr/src/components/SearchShowcase.vue
@@ -19,7 +19,8 @@
     <Fade>
       <section
         v-if="hasFiltersBar"
-        class="to-base-100 ui-section-slim sticky-header:translate-y-16 lg:sticky-header:translate-y-14 sticky top-0
+        class="to-base-100 ui-section-slim sticky-header:translate-y-16
+        lg:sticky-header:translate-y-14 sticky top-0
         z-[12] flex items-center justify-between rounded-b
         bg-white/80 px-6 py-4 shadow-sm
         backdrop-blur-sm transition-transform"