Diffstat (limited to 'views/layouts/general-page.html')
| -rw-r--r-- | views/layouts/general-page.html | 119 |
1 files changed, 77 insertions, 42 deletions
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index 435ea66..d874ecf 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -7,25 +7,38 @@ <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet"> - <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lightgallery.min.css"> - <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lg-zoom.min.css"> - <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lg-thumbnail.min.css"> <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.css"> + <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/glightbox/3.3.0/css/glightbox.min.css"> <link href="/output.css" rel="stylesheet"> </head> -<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-1.1:flex-col"> +<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-[100dvh] flex flex-row ar-lt-0.8:flex-col"> + + <script> + let map = null; + </script> <script> function changeUrl(path, toAppend = false) { const urlParams = new URLSearchParams(window.location.search); const newPathname = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname; const newPath = toAppend ? `${newPathname}${path}` : `${path}`; + history.pushState({}, '', `${newPath}${urlParams.entries.length == 0 ? '' : '?' + urlParams.toString()}`); + if (location.pathname == "" || location.pathname == "/") { + return true; + } window.dispatchEvent(new Event('popstate')); + return false; }; + + function convertRemToPixels(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement).fontSize); + } </script> + <script src="https://f003.backblazeb2.com/file/sayana-static/libs/glightbox/3.3.0/js/glightbox.min.js"></script> + <script> function sfc32(a, b, c, d) { return function() { @@ -161,34 +174,44 @@ const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; </script> - <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-1.1:items-center shadow-2xl z-20 w-[5dvw] ar-lt-1.1:w-[90dvw] ar-lt-0.4:w-[100dvw] h-screen ar-lt-1.1:h-[8dvh] ar-lt-1.1:ml-[5dvw] ar-lt-0.4:ml-0"> - <div class="logo-custom ar-lt-1.1:hidden text-sidebar font-patua font-extrabold text-center relative z-20"> + <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5rem] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[8dvh]"> + <div class="logo-custom block ar-lt-0.8:hidden [@media(max-height:32rem)]:hidden text-sidebar font-patua font-extrabold text-center relative z-20"> saya.today </div> - <div class="text-[3dvw] ar-lt-1.1:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-1.1:flex-row gap-0 relative z-20"> - <i onclick="changeUrl('/{{ .Lang }}');" class="fas fa-home w-[5dvw] ar-lt-1.1:w-[8dvh] h-[5dvw] ar-lt-1.1:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> - <i onclick="changeUrl('/{{ .Lang }}/blog');" class="fas fa-search w-[5dvw] ar-lt-1.1:w-[8dvh] h-[5dvw] ar-lt-1.1:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> - <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5dvw] ar-lt-1.1:w-[8dvh] h-[5dvw] ar-lt-1.1:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> - <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5dvw] ar-lt-1.1:w-[8dvh] h-[5dvw] ar-lt-1.1:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> + <div class="text-[3rem] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20"> + <a href="/{{ .Lang }}" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]"> + <i onclick="return changeUrl('/{{ .Lang }}');" class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + </a> + <a href="/{{ .Lang }}/blog" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]"> + <i onclick="return changeUrl('/{{ .Lang }}/blog');" class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + </a> + <a href="/{{ .Lang }}/map" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]"> + <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + </a> + <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i> + <a href="./" class="hidden max-xs:block [@media(max-height:32rem)]:block w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]"> + <i onclick="return changeUrl('/../', true);" class="fas fa-circle-left flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + </a> </div> <div class="theme-wheel" id="theme-wheel"> <div class="theme-icon" data-theme="olive"></div> <div class="theme-icon" data-theme="lettuce"></div> <div class="theme-icon" data-theme="night"></div> <div class="theme-icon" data-theme="ram"></div> + <div class="theme-pin"></div> </div> </div> - <div class="bg-background-dark flex z-10 ar-lt-1.1:w-[90dvw] ar-lt-0.4:w-[100dvw] h-screen ar-lt-1.1:max-h-[92dvh] ar-lt-1.1:ml-[5dvw] ar-lt-0.4:ml-0"> - <div class="pl-[0.5vw] bg-background-dark border-r-2 border-dashed border-main-dark"></div> + <div class="bg-background-dark @container/main flex z-10 ar-lt-0.8:w-[100dvw] w-[90dvw] xs:w-[85dvw] sm:w-[80dvw] md:w-[75dvw] lg:w-[70dvw] xl:w-[65dvw] 2xl:w-[60dvw] grow-0 h-[100dvh] ar-lt-0.8:max-h-[92dvh]"> + <div class="bg-background-dark border-r-2 border-dashed border-main-dark"></div> - <div class="ar-gt-1.1:w-[100dvh] max-h-100% flex flex-col bg-background-dark relative pt-4 ml-8 pr-4"> - <div id="general-page-header" class="flex flex-col basis-8" + <div class="max-h-100% flex flex-col grow bg-background-dark relative pt-4 ml-8 pr-4"> + <div id="general-page-header" class="max-xs:hidden [@media(max-height:32rem)]:hidden flex flex-col basis-8" hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML"> </div> <div id="general-page-header-trigger" hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-header" hx-swap="innerHTML"></div> - <hr class="border-t-4 border-dotted border-main-dark mb-2"> + <hr class="max-xs:hidden [@media(max-height:32rem)]:hidden border-t-4 border-dotted border-main-dark mb-2"> <div id="general-page-body" class="flex flex-col grow overflow-y-auto" hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML"> @@ -203,14 +226,13 @@ <hr class="border-t-4 border-dotted border-main-dark mb-2"> </div> - <div class="pr-[0.5vw] bg-background-dark shadow-2xl border-l-2 border-dotted border-main-dark"></div> + <div class="pr-[0.5dvw] bg-background-dark shadow-2xl border-l-2 border-dotted border-main-dark"></div> </div> <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script> - <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/lightgallery.min.js"></script> - <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-zoom.min.js"></script> - <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-thumbnail.min.js"></script> <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script> + <script src="https://f003.backblazeb2.com/file/sayana-static/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script> + <script src="https://f003.backblazeb2.com/file/sayana-static/libs/masonry-layout/4.2.2/masonry.pkgd.min.js"></script> <div id="general-page-bottom-embeds" class="flex" hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML"> @@ -221,6 +243,7 @@ const themeWheel = document.getElementById('theme-wheel'); const themeButton = document.getElementById('theme-button'); const themeIcons = document.querySelectorAll('.theme-icon'); + const themeWheelRadius = convertRemToPixels(6); themeIcons.forEach(icon => { if (icon.getAttribute('data-theme') == savedTheme) { @@ -240,49 +263,61 @@ } function positionThemeIcons() { - const icons = themeWheel.querySelectorAll('.theme-icon'); - const iconCount = icons.length; - const vmax = calculateVmax(1); - const wheelRadius = 7.5*vmax; // Radius of the wheel - const iconRadius = 4*vmax; // Distance from center to place icons - const iconSize = 3*vmax; // Half of icon size for centering + const sliceAngle = 360 / themeIcons.length; - icons.forEach((icon, index) => { - const angle = (index * 360 / iconCount) - 90; - const angleRad = (angle * Math.PI) / 180; + themeIcons.forEach((icon, index) => { + const startAngle = index * sliceAngle; + const endAngle = (index + 1) * sliceAngle; - const x = Math.cos(angleRad) * iconRadius + wheelRadius - iconSize; - const y = Math.sin(angleRad) * iconRadius + wheelRadius - iconSize; - - icon.style.left = x + 'px'; - icon.style.top = y + 'px'; + const clipPath = createSliceClipPath(startAngle, endAngle, themeWheelRadius); + icon.style.clipPath = clipPath; }); } + function createSliceClipPath(startAngle, endAngle, radius) { + const centerX = radius; + const centerY = radius; + + let points = `${centerX}px ${centerY}px`; + + const segments = Math.max(2, Math.ceil(Math.abs(endAngle - startAngle) / 5)); + const angleStep = (endAngle - startAngle) / segments; + + for (let i = 0; i <= segments; i++) { + const angle = ((startAngle + angleStep * i - 90) * Math.PI) / 180; + const x = centerX + Math.cos(angle) * radius; + const y = centerY + Math.sin(angle) * radius; + points += `, ${x}px ${y}px`; + } + + points += `, ${centerX}px ${centerY}px`; + + return `polygon(${points})`; + } + function positionThemeWheel() { const buttonRect = themeButton.getBoundingClientRect(); const buttonCenterX = buttonRect.left + buttonRect.width / 2; const buttonCenterY = buttonRect.top + buttonRect.height / 2; - const wheelRadius = calculateVmax(7.5); - const margin = calculateVmax(1); + const margin = 0; - let wheelX = buttonCenterX - wheelRadius; - let wheelY = buttonCenterY - wheelRadius; + let wheelX = buttonCenterX - themeWheelRadius; + let wheelY = buttonCenterY - themeWheelRadius; const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; if (wheelX < margin) { wheelX = margin; - } else if (wheelX + (wheelRadius * 2) > viewportWidth - margin) { - wheelX = viewportWidth - (wheelRadius * 2) - margin; + } else if (wheelX + (themeWheelRadius * 2) > viewportWidth - margin) { + wheelX = viewportWidth - (themeWheelRadius * 2) - margin; } if (wheelY < margin) { wheelY = margin; - } else if (wheelY + (wheelRadius * 2) > viewportHeight - margin) { - wheelY = viewportHeight - (wheelRadius * 2) - margin; + } else if (wheelY + (themeWheelRadius * 2) > viewportHeight - margin) { + wheelY = viewportHeight - (themeWheelRadius * 2) - margin; } themeWheel.style.left = wheelX + 'px'; |