Diffstat (limited to 'views')
| -rw-r--r-- | views/layouts/general-page.html | 37 | ||||
| -rw-r--r-- | views/partials/general-page-header.html | 2 |
2 files changed, 30 insertions, 9 deletions
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index 06ef625..78c7f0c 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -213,8 +213,18 @@ var seed = cyrb128("{{ .Title }}"); var rand = sfc32(seed[0], seed[1], seed[2], seed[3]); - function calculateRem(remNum) { - return remNum * parseFloat(getComputedStyle(document.documentElement).fontSize); + function calculateVmin(percent) { + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; + + const smallerDimension = Math.min( + viewportWidth, + viewportHeight, + ); + + const vminValue = (smallerDimension / 100) * percent; + + return vminValue; } const _probe = document.createElement('div'); @@ -309,7 +319,7 @@ theme = document.body.getAttribute("data-theme"); } - rem = calculateRem(1); + vmin = calculateVmin(1); var clWidth = document.documentElement.clientWidth; var clHeight = document.documentElement.clientHeight; @@ -328,11 +338,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`; @@ -352,14 +362,14 @@ ); let x, y; outerLoop: while (true) { - 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; + x = Math.floor(rand() * clWidth - 20 * vmin); + y = Math.floor(rand() * clHeight - 20 * vmin); 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) < - 23 * rem + 30 * vmin ) { continue outerLoop; } @@ -704,6 +714,17 @@ } }); + 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; diff --git a/views/partials/general-page-header.html b/views/partials/general-page-header.html index a75d32f..ce77b5c 100644 --- a/views/partials/general-page-header.html +++ b/views/partials/general-page-header.html @@ -1,4 +1,4 @@ -<title>{{ or .PageTitle .Title }}</title> +<title>{{ .Title }} // SAYA.UZ</title> <div class="flex flex-row mb-2"> {{ block "header" . }}{{ end }} <h1 |