Diffstat (limited to 'views/layouts')
| -rw-r--r-- | views/layouts/general-page.html | 54 |
1 files changed, 15 insertions, 39 deletions
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index 9220b7f..06ef625 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -213,18 +213,8 @@ var seed = cyrb128("{{ .Title }}"); var rand = sfc32(seed[0], seed[1], seed[2], seed[3]); - function calculateVmin(percent) { - const viewportWidth = window.innerWidth; - const viewportHeight = window.innerHeight; - - const smallerDimension = Math.min( - viewportWidth, - viewportHeight, - ); - - const vminValue = (smallerDimension / 100) * percent; - - return vminValue; + function calculateRem(remNum) { + return remNum * parseFloat(getComputedStyle(document.documentElement).fontSize); } const _probe = document.createElement('div'); @@ -319,7 +309,7 @@ theme = document.body.getAttribute("data-theme"); } - vmin = calculateVmin(1); + rem = calculateRem(1); var clWidth = document.documentElement.clientWidth; var clHeight = document.documentElement.clientHeight; @@ -338,11 +328,11 @@ "z-0", "absolute", ); - const x = Math.floor(rand() * clWidth); - const y = Math.floor(rand() * clHeight * 0.8); const rot = rand() * 90; const animDuration = rand() * 10 + 3; const sz = Math.floor(rand() * 8) + 12; + const x = Math.floor(rand() * clWidth - 1.42 * sz); // 1.42 ~ sqrt(2) + const y = Math.floor(rand() * clHeight * 0.8); star.style.transform = `translateX(${x}px) translateY(${y}px) rotate(${rot}deg)`; star.style.animationDuration = `${animDuration}s`; star.style.fontSize = `${sz}px`; @@ -362,14 +352,14 @@ ); let x, y; outerLoop: while (true) { - x = Math.floor(rand() * clWidth - 20 * vmin); - y = Math.floor(rand() * clHeight - 20 * vmin); + x = Math.floor(rand() * clWidth - 22.64 * rem) + 11.32 * rem; // 11.32 ~ 8 * sqrt(2) + y = Math.floor(rand() * clHeight - 22.64 * rem) + 11.32 * rem; for (j = 0; j < i - 1; j++) { const xd = frameCenters[j].x - x; const yd = frameCenters[j].y - y; if ( Math.sqrt(xd * xd + yd * yd) < - 30 * vmin + 23 * rem ) { continue outerLoop; } @@ -412,6 +402,7 @@ localStorage.setItem("theme", theme); document.body.setAttribute("data-theme", theme); switchThemeDecor(theme); + switchColorScheme(matchMedia('(prefers-color-scheme: dark)').matches); } const savedTheme = localStorage.getItem("theme") || "lilac"; @@ -637,15 +628,15 @@ class="flex flex-1 min-h-0 z-1 bg-paper bg-background shadow-elevation-3 @container/body" > <div - class="bg-paper bg-background-dark border-r-2 border-dashed border-main-hard" + class="bg-paper bg-background-dark border-r-[0.25rem] border-dashed border-main-hard" ></div> <div - class="max-h-full max-w-full flex flex-col grow bg-paper bg-background-dark relative pt-4 md:pr-4" + class="max-h-full max-w-full flex flex-col grow bg-paper bg-background-dark relative md:pr-4" > <header id="general-page-header" - class="max-xs:hidden [@media(max-height:32rem)]:hidden flex flex-col ml-8 basis-8" + class="max-xs:hidden [@media(max-height:32rem)]:hidden pt-4 flex flex-col ml-8 basis-8" >{{ .RenderedHeader }}</header> <div id="general-page-header-trigger" @@ -656,12 +647,12 @@ ></div> <hr - class="max-xs:hidden [@media(max-height:32rem)]:hidden border-t-4 border-dotted border-main-hard mb-2" + class="max-xs:hidden [@media(max-height:32rem)]:hidden border-t-[0.5rem] border-dotted border-main-hard mb-2" /> <main id="general-page-body" - class="relative flex-1 overflow-y-auto @container-size" + class="relative flex-1 overflow-y-auto @container-size inset-shadow-elevation-8" >{{ .RenderedBody }}</main> <div id="general-page-body-trigger" @@ -683,14 +674,10 @@ hx-target="#general-page-footer" hx-swap="innerHTML" ></div> - - <hr - class="border-t-4 border-dotted border-main-hard mb-2" - /> </div> <div - class="bg-paper bg-background-dark shadow-2xl border-l-2 border-dotted border-main-hard" + class="bg-paper bg-background-dark shadow-2xl border-l-[0.25rem] border-dotted border-main-hard" ></div> </div> </div> @@ -717,17 +704,6 @@ } }); - function calculateVmax(percent) { - const viewportWidth = window.innerWidth; - const viewportHeight = window.innerHeight; - - const largerDimension = Math.max(viewportWidth, viewportHeight); - - const vmaxValue = (largerDimension / 100) * percent; - - return vmaxValue; - } - function positionThemeIcons() { const sliceAngle = 360 / themeIcons.length; |