feat: optimize post header & layout styles

WRXinYue · Jan 24, 2025 · 11d8e18 · 11d8e18
1 parent e9d247b
commit 11d8e18
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/theme/components/SakuraPageHeader.vue b/theme/components/SakuraPageHeader.vue
@@ -8,11 +8,13 @@ defineProps<{
 
 <template>
   <header class="sakura-page-header space-y-1" :class="fm.cover && `has-cover`" flex="~ center items-end justify-center">
-    <SakuraImageCard v-if="fm.cover" :src="fm.cover" h="full" w="full" />
-    <div class="sakura-header-container">
+    <SakuraImageCard v-if="fm.cover" :src="fm.cover" h="full" w="full" absolute="!" z="-1" />
+    <div class="sakura-safe-padding sakura-header-container pb-25px">
       <slot name="title">
-        <div class="sakura-header-title" flex="~ items-center" :class="!fm.cover && 'sakura-braced-text flex-center'">
-          <div v-if="fm.icon" class="icon" m="r-1" inline-flex align-top :class="fm.icon" />
+        <div class="sakura-header-title" flex="~ items-center" :class="!fm.cover && 'sakura-braced-text flex-center mx-6%'">
+          <slot name="icon">
+            <div v-if="fm.icon" class="icon" m="r-1" inline-flex align-top :class="fm.icon" />
+          </slot>
           <span>{{ fm.title }}</span>
           <span v-if="fm.subTitle"> · {{ fm.subTitle }}</span>
         </div>
@@ -23,18 +25,24 @@ defineProps<{
 </template>
 
 <style lang="scss" scoped>
+@use 'valaxy/client/styles/mixins/index.scss' as *;
+
 .sakura-page-header {
   margin-top: var(--sakura-navbar-height);
   width: 100%;
   position: relative;
 
   .sakura-header-title {
-    font-size: 2.3rem;
+    font-size: 1.8rem;
+    font-weight: 700;
+
+    @include screen('sm') {
+      font-size: 2.3rem;
+    }
   }
 
   &:not(.has-cover) {
     margin-top: var(--sakura-navbar-spacing);
-    height: 150px;
 
     .sakura-header-title {
       color: var(--sakura-color-text-deep);
@@ -50,10 +58,7 @@ defineProps<{
   }
 
   .sakura-header-container {
-    position: absolute;
     color: white;
-    font-weight: 700;
-    bottom: 25px;
   }
 }
 </style>
diff --git a/theme/components/SakuraPost.vue b/theme/components/SakuraPost.vue
@@ -75,7 +75,7 @@ useSchemaOrg(
 .sakura-post {
   .sakura-page-content {
     max-width: 800px;
-    padding: 24px 10px;
+    padding-block: 24px;
   }
 
   .sakura-triple-columns {

diff --git a/theme/styles/common/text.scss b/theme/styles/common/text.scss
@@ -10,17 +10,26 @@
 }
 
 .sakura-braced-text {
+  position: relative;
+  padding-inline: calc(1rem + 6px);
+  word-break: break-all;
+  hyphens: auto;
+
   &::before {
     content: '{';
     color: var(--sakura-color-primary);
-    margin-right: 6px;
     font-family: Helvetica, sans-serif;
+    position: absolute;
+    left: 0;
+    top: 0;
   }
 
   &::after {
     content: '}';
     color: var(--sakura-color-primary);
-    margin-left: 6px;
     font-family: Helvetica, sans-serif;
+    position: absolute;
+    right: 0;
+    bottom: 0;
   }
 }