Improve header performance

app.pug

@@ -29,6 +29,7 @@ html#hELLO(
         --h-pem: [##_var_width_##]px; /* permalink */
         --h-s: 256px; /* sidebar */
         --h-c: calc(100% - var(--h-s)); /* content */
+        --h-h: 256px; /* header */
       }
 
     style

tailwind.config.js

@@ -34,7 +34,8 @@ module.exports = {
         idx: 'var(--h-idx)',
         pem: 'var(--h-pem)',
         s: 'var(--h-s)',
-        c: 'var(--h-c)'
+        c: 'var(--h-c)',
+        h: 'var(--h-h)'
       },
       fontSize: {
         xxs: '0.625rem'

views/Main/Cover.pug

@@ -7,7 +7,7 @@ mixin cover(mode)
 
 mixin coverHeader()
   header.header
-    h1.tit(class='flex items-center font-bold h-64 text-3xl text-h-800 dark:text-h-200 empty:hidden') [##_cover_title_##]
+    h1.tit(class='h-h min-h-[theme(spacing.h)] flex items-center font-bold text-3xl text-h-800 dark:text-h-200 empty:hidden') [##_cover_title_##]
 
 mixin coverItem()
   s_cover_item

views/Main/Header.pug

@@ -1,5 +1,5 @@
 mixin header(title)
-  header.header(class='flex justify-center items-center border-b border-b-solid border-b-h-300 mb-10 lg:mb-16 h-64 dark:border-b-h-600')
-    .info(class='flex flex-col gap-y-1 items-center text-center text-h-800 dark:text-h-200')
+  header.header(class='border-b border-b-solid border-b-h-300 mb-10 lg:mb-16 dark:border-b-h-600')
+    .info(class='h-h min-h-[theme(spacing.h)] flex flex-col justify-center items-center text-center gap-y-1 text-h-800 dark:text-h-200')
       h1.tit(class='font-bold text-3xl')=title
       span.desc(class='font-bold text-sm') [##_title_##]

views/Main/Post/Permalink/Post/Header.pug

@@ -1,16 +1,13 @@
 header#header(
-  x-data='{ mode: "simple" }'
-  :data-mode='mode'
-  class='flex justify-center items-center border-b border-b-solid border-b-h-300 mb-10 lg:mb-16 dark:border-b-h-600')
+  data-mode='[##_var_mode_##]'
+  class='border-b border-b-solid border-b-h-300 mb-10 lg:mb-16 dark:border-b-h-600')
   #{`s_${type}_rep_thumbnail`}
-    .img(
-      x-init='mode = skinOptions.mode'
-      class='absolute right-0 top-0 w-full before:content-[""] before:absolute before:right-0 before:top-0 before:w-full before:bg-h-900/20 before:z-10')
+    .img(class='absolute right-0 top-0 w-full before:content-[""] before:absolute before:right-0 before:top-0 before:w-full before:bg-h-900/20 before:z-10')
       img.thumb(
         src=`[##_${type}_rep_thumbnail_url_##]`
         alt=''
         class='absolute right-0 top-0 w-full h-full z-0 object-cover')
-  .info(class='flex flex-col items-center gap-y-1 mx-4 relative z-20 lg:mx-0')
+  .info(class='min-h-[theme(spacing.h)] flex flex-col justify-center items-center gap-y-1 mx-4 relative z-20 text-h-800 dark:text-h-200 lg:mx-0')
     h1.tit(class='text-center font-bold text-3xl') #{`[##_${type}_rep_title_##]`}
     .desc(class='flex gap-x-1 text-sm')
       time.date #{`[##_${type}_rep_date_##]`}
@@ -27,41 +24,39 @@ header#header(
 style(once='header-simple')
   :postcss
     #header[data-mode=simple] {
-      @apply h-64 before:h-64;
-
       .img {
         @apply hidden;
       }
 
       .info {
-        @apply text-h-800 dark:text-h-200;
+        @apply h-h;
       }
     }
 
 style(once='header-thumbnail')
   :postcss
     #header[data-mode=thumbnail] {
-      @apply relative h-64 before:h-64;
+      @apply relative;
 
       .img {
-        @apply h-64 before:h-64;
-      }
+        @apply h-h before:h-h;
 
-      .info {
-        @apply text-h-200;
+        &+.info {
+          @apply h-h text-h-200;
+        }
       }
     }
 
 style(once='header-screen')
   :postcss
     #header[data-mode=screen] {
-      @apply h-screen before:h-screen;
+      @apply relative;
 
       .img {
         @apply h-screen before:h-screen;
-      }
 
-      .info {
-        @apply text-h-200;
+        &+.info {
+          @apply h-screen text-h-200;
+        }
       }
     }

views/Main/Protected.pug

@@ -1,8 +1,8 @@
 s_article_protected
   s_permalink_article_rep
     #protected-permalink.permalink
-      header.header(class='h-64 mb-10 flex justify-center items-center border-b border-b-solid border-b-h-300 dark:border-b-h-600 lg:mb-16')
-        .info(class='flex flex-col items-center gap-y-1 z-20 relative mx-4 dark:text-h-200 lg:mx-0')
+      header.header(class='border-b border-b-solid border-b-h-300 mb-10 lg:mb-16 dark:border-b-h-600')
+        .info(class='h-h min-h-[theme(spacing.h)] flex flex-col justify-center items-center gap-y-1 z-20 relative mx-4 dark:text-h-200 lg:mx-0')
           h1.tit(class='text-center font-bold text-3xl text-h-800 dark:text-h-200') [##_article_rep_title_##]
           .desc(class='flex gap-x-1 text-sm')
             time.date [##_article_rep_date_##]