Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-11 23:02:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: css cleanup and style tweaks

Browse Source
This commit is contained in:
saicaca
2024-12-02 16:02:39 +08:00
parent 87e83fc601
commit 079abbc965
24 changed files with 676 additions and 751 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/layouts/Layout.astro
View File

@@ -1,9 +1,7 @@
---
import GlobalStyles from '@components/GlobalStyles.astro'
import '@fontsource/roboto/400.css'
import '@fontsource/roboto/500.css'
import '@fontsource/roboto/700.css'
import ImageWrapper from '@components/misc/ImageWrapper.astro'
import { profileConfig, siteConfig } from '@/config'
import ConfigCarrier from '@components/ConfigCarrier.astro'
@@ -110,13 +108,9 @@ const bannerOffset =
/>
))}
<style define:vars={{
configHue,
'page-width': `${PAGE_WIDTH}rem`,
}}></style> <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
<!-- Set the theme before the page is rendered to avoid a flash -->
<script is:inline define:vars={{DEFAULT_THEME, LIGHT_MODE, DARK_MODE, AUTO_MODE, BANNER_HEIGHT_EXTEND, PAGE_WIDTH}}>
<script is:inline define:vars={{DEFAULT_THEME, LIGHT_MODE, DARK_MODE, AUTO_MODE, BANNER_HEIGHT_EXTEND, PAGE_WIDTH, configHue}}>
// Load the theme from local storage
const theme = localStorage.getItem('theme') || DEFAULT_THEME;
switch (theme) {
case LIGHT_MODE:
@@ -133,17 +127,20 @@ const bannerOffset =
}
}
// Load the hue from local storage
const hue = localStorage.getItem('hue') || configHue;
document.documentElement.style.setProperty('--hue', hue);
// 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`);
// calculate the width of TOC widget
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
const mainGridWidthPx = PAGE_WIDTH * rootFontSize
const tocWidth = (window.innerWidth - mainGridWidthPx) / 2 - rootFontSize
document.documentElement.style.setProperty('--toc-width', `${tocWidth}px`);
</script>
<style define:vars={{
configHue,
'page-width': `${PAGE_WIDTH}rem`,
}}></style> <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
<slot name="head"></slot>
@@ -156,21 +153,13 @@ const bannerOffset =
data-overlayscrollbars-initialize
>
<ConfigCarrier></ConfigCarrier>
<GlobalStyles>
<slot />
</GlobalStyles>
<!-- increase the page height during page transition to prevent the scrolling animation from jumping -->
<div id="page-height-extend" class="hidden h-[300vh]"></div>
</body>
</html>
<style is:global>
:root {
--hue: var(--configHue);
}
</style>
<style is:global define:vars={{
bannerOffset,
'banner-height-home': `${BANNER_HEIGHT_HOME}vh`,
@@ -479,12 +468,6 @@ 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`);
// calculate the width of TOC widget
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
const mainGridWidthPx = PAGE_WIDTH * rootFontSize
const tocWidth = (window.innerWidth - mainGridWidthPx) / 2 - rootFontSize
document.documentElement.style.setProperty('--toc-width', `${tocWidth}px`);
}
</script>

2
src/layouts/MainGridLayout.astro
View File

@@ -90,7 +90,7 @@ const mainPanelTop = siteConfig.banner.enable ? `calc(${BANNER_HEIGHT}vh - ${MAI
</div>
<!-- The things that should be under the banner, only the TOC for now -->
<div class="absolute w-full z-0">
<div class="absolute w-full z-0 hidden 2xl:block">
<div class="relative max-w-[var(--page-width)] mx-auto">
<!-- TOC component -->
{siteConfig.toc.enable && <div id="toc-wrapper" class:list={["hidden lg:block transition absolute top-0 -right-[var(--toc-width)] w-[var(--toc-width)] flex items-center",