summaryrefslogtreecommitdiffci
path: root/views/layouts
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
Diffstat (limited to 'views/layouts')
-rw-r--r--views/layouts/general-page.html100
1 files changed, 47 insertions, 53 deletions
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 2d125ae..06ef625 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -14,7 +14,7 @@
{{end}}
/>
{{- if eq .Property "og:title" }}
- <title>{{.Content}} // SAYA.UZ</title>
+ <title>{{.Content}}</title>
{{- end }} {{- if eq .Property "og:description" }}
<meta name="description" content="{{.Content}}" />
{{- end }} {{- if eq .Property "og:url" }}
@@ -22,15 +22,23 @@
{{- end }} {{- end }}
<link
rel="stylesheet"
- href="{{ .StaticStorageBaseUrl }}/fonts/fonts.css"
+ href="{{ .StaticStorage.BaseUrl }}/fonts/fonts.css"
/>
<link
rel="stylesheet"
- href="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.css"
+ href="{{ .StaticStorage.BaseUrl }}/libs/leaflet/1.9.4/leaflet.css"
/>
<link
rel="stylesheet"
- href="{{ .StaticStorageBaseUrl }}/libs/glightbox/3.3.0/css/glightbox.min.css"
+ href="{{ .StaticStorage.BaseUrl }}/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"
+ />
+ <link
+ rel="stylesheet"
+ href="{{ .StaticStorage.BaseUrl }}/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"
+ />
+ <link
+ rel="stylesheet"
+ href="{{ .StaticStorage.BaseUrl }}/libs/glightbox/3.3.0/css/glightbox.min.css"
/>
<link rel="stylesheet" href="/output.css" />
<link
@@ -55,6 +63,11 @@
{{ . }}
</script>
{{- end }}
+ <script src="{{ .StaticStorage.BaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
+ <script src="{{ .StaticStorage.BaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
+ <script src="{{ .StaticStorage.BaseUrl }}/libs/protomaps-leaflet/5.0.0/dist/protomaps-leaflet.js"></script>
+ <script src="{{ .StaticStorage.BaseUrl }}/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
+ <script src="{{ .StaticStorage.BaseUrl }}/libs/glightbox/3.3.0/js/glightbox.min.js"></script>
</head>
<body
@@ -160,8 +173,6 @@
}
</script>
- <script src="{{ .StaticStorageBaseUrl }}/libs/glightbox/3.3.0/js/glightbox.min.js"></script>
-
<script>
function sfc32(a, b, c, d) {
return function () {
@@ -202,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');
@@ -308,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;
@@ -327,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`;
@@ -342,7 +343,7 @@
const frameCenters = new Array(4);
for (i = 1; i <= 4; i++) {
let frame = document.createElement("img");
- frame.src = `{{ .StaticStorageBaseUrl }}/themes/ram/ram-frame${i}.webp`;
+ frame.src = `{{ .StaticStorage.BaseUrl }}/themes/ram/ram-frame${i}.webp`;
frame.classList.add(
"ram-frame",
"theme-decor",
@@ -351,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;
}
@@ -401,21 +402,28 @@
localStorage.setItem("theme", theme);
document.body.setAttribute("data-theme", theme);
switchThemeDecor(theme);
- if (theme == "ram" || theme == "night") {
+ switchColorScheme(matchMedia('(prefers-color-scheme: dark)').matches);
+ }
+
+ const savedTheme = localStorage.getItem("theme") || "lilac";
+ switchTheme(savedTheme);
+
+ function switchColorScheme(isNightMode) {
+ if (isNightMode) {
makeMultitoneOklch('multitone', 4, '--color-background-dark', '--color-accent-light', '--color-background-light');
} else {
makeMultitoneOklch('multitone', 4, '--color-background-light', '--color-accent-light', '--color-background-dark');
}
}
- const savedTheme = localStorage.getItem("theme") || "lilac";
- switchTheme(savedTheme);
+ const mq = matchMedia('(prefers-color-scheme: dark)');
+ switchColorScheme(mq.matches);
+ mq.addEventListener('change', (e) => switchColorScheme(e.matches));
</script>
- <script src="{{ .StaticStorageBaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
- <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
- <script src="{{ .StaticStorageBaseUrl }}/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
- <script src="{{ .StaticStorageBaseUrl }}/libs/packery/3.0.0/dist/packery.pkgd.min.js"></script>
+ <script src="{{ .StaticStorage.BaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
+ <script src="{{ .StaticStorage.BaseUrl }}/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
+ <script src="{{ .StaticStorage.BaseUrl }}/libs/packery/3.0.0/dist/packery.pkgd.min.js"></script>
<script>
// Enable fitWidth-like attribute for Packery. Source: https://codepen.io/desandro/pen/kVmLYz
@@ -620,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"
@@ -639,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"
@@ -652,6 +660,7 @@
hx-trigger="popstate from:window"
hx-target="#general-page-body"
hx-swap="innerHTML"
+ hx-include="#general-page-body .htmx-exit-trigger"
></div>
<footer
@@ -665,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>
@@ -699,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;
generated by cgitext v1.3.1+17 (git 2.54.0) at 2026-09-08 11:19:30 +0000