From 2af3d4fc8702875b6fbc336c1ec52203c447569b Mon Sep 17 00:00:00 2001 From: pronist Date: Mon, 8 Jul 2024 20:33:04 +0900 Subject: [PATCH] Improve header performance --- app.pug | 1 + tailwind.config.js | 3 ++- views/Main/Cover.pug | 2 +- views/Main/Header.pug | 4 +-- views/Main/Post/Permalink/Post/Header.pug | 33 ++++++++++------------- views/Main/Protected.pug | 4 +-- 6 files changed, 22 insertions(+), 25 deletions(-) diff --git a/app.pug b/app.pug index 1186cad..0cba2d9 100644 --- a/app.pug +++ b/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 diff --git a/tailwind.config.js b/tailwind.config.js index b6e3584..4383bb6 100644 --- a/tailwind.config.js +++ b/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' diff --git a/views/Main/Cover.pug b/views/Main/Cover.pug index 0249583..d00ac54 100644 --- a/views/Main/Cover.pug +++ b/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 diff --git a/views/Main/Header.pug b/views/Main/Header.pug index 0417138..2386247 100644 --- a/views/Main/Header.pug +++ b/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_##] diff --git a/views/Main/Post/Permalink/Post/Header.pug b/views/Main/Post/Permalink/Post/Header.pug index 3ba2438..0f6173a 100644 --- a/views/Main/Post/Permalink/Post/Header.pug +++ b/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; + } } } diff --git a/views/Main/Protected.pug b/views/Main/Protected.pug index f196b5c..951f563 100644 --- a/views/Main/Protected.pug +++ b/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_##]