rober/blog-robertops-v2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fix blurry text caused by translate

Browse Source
This commit is contained in:
saicaca 2024-10-28 03:19:25 +08:00
parent 1b652f686d
commit 18fcf6dd83
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/layouts/Layout.astro
View File

@ -109,7 +109,7 @@ const bannerOffset =
/> />
))} ))}
<!-- Set the theme before the page is rendered to avoid a flash --> <!-- Set the theme before the page is rendered to avoid a flash -->
<script is:inline define:vars={{DEFAULT_THEME: DEFAULT_THEME, LIGHT_MODE: LIGHT_MODE, DARK_MODE: DARK_MODE, AUTO_MODE: AUTO_MODE}}> <script is:inline define:vars={{DEFAULT_THEME, LIGHT_MODE, DARK_MODE, AUTO_MODE, BANNER_HEIGHT_EXTEND}}>
const theme = localStorage.getItem('theme') || DEFAULT_THEME; const theme = localStorage.getItem('theme') || DEFAULT_THEME;
switch (theme) { switch (theme) {
case LIGHT_MODE: case LIGHT_MODE:
@ -125,6 +125,11 @@ const bannerOffset =
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
} }
} }
// calculate the --banner-height-extend, which needs to be a multiple of 4 to avoid blurry text
let offset = Math.floor(window.innerHeight * (BANNER_HEIGHT_EXTEND / 100));
offset = offset - offset % 4;
document.documentElement.style.setProperty('--banner-height-extend', `${offset}px`);
</script> </script>
<slot name="head"></slot> <slot name="head"></slot>
@ -160,7 +165,6 @@ const bannerOffset =
bannerOffset, bannerOffset,
'banner-height-home': `${BANNER_HEIGHT_HOME}vh`, 'banner-height-home': `${BANNER_HEIGHT_HOME}vh`,
'banner-height': `${BANNER_HEIGHT}vh`, 'banner-height': `${BANNER_HEIGHT}vh`,
'banner-height-extend': `${BANNER_HEIGHT_EXTEND}vh`
}}> }}>
@tailwind components; @tailwind components;
@layer components { @layer components {
@ -459,6 +463,13 @@ function scrollFunction() {
} }
window.onscroll = scrollFunction window.onscroll = scrollFunction
// calculate the --banner-height-extend, which needs to be a multiple of 4 to avoid blurry text
window.onresize = () => {
let offset = Math.floor(window.innerHeight * (BANNER_HEIGHT_EXTEND / 100));
offset = offset - offset % 4;
document.documentElement.style.setProperty('--banner-height-extend', `${offset}px`);
}
</script> </script>
<script> <script>