v0.17.1 (#43)v0.17.1

- fix: stars & camel frames getting out of screen
- fix: opening glightbox doesn't shrink a page now

1 files changed, 8 insertions, 29 deletions

diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 78c7f0c..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;
                                     }
@@ -714,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;