summaryrefslogtreecommitdiff
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
Diffstat
-rw-r--r--internal/glightbox/html_renderer.go28
-rw-r--r--static/input.css70
-rw-r--r--views/layouts/general-page.html62
-rw-r--r--views/pages/blog-page.html5
-rw-r--r--views/pages/global-map.html64
5 files changed, 83 insertions, 146 deletions
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index aad7984..44fbd4c 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -110,19 +110,19 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
anchorlessCaptionHTML := r.anchorMatchRe.ReplaceAll(captionHTML, []byte("<span class=\"linklike\" $1 $3>$4</span>"))
elements = append(elements, fmt.Sprintf(`
- <a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox grid-item %s grid-item-%s p-1"
- data-gallery="gallery" data-title="%s" %s>
+ <a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item %s grid-item-%s p-1"
+ data-gallery="gallery-%s" data-title="%s" %s>
<picture>
- <source media="(width < 800px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" />
- <source media="(width < 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp" />
- <source media="(width < 3200px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" />
- <source media="(width < 4000px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1200p/%s.webp" />
- <source media="(width >= 4000px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp" />
- <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp" />
+ <source media="(width < 640px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" />
+ <source media="(width < 1120px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp" />
+ <source media="(width < 1600px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" />
+ <source media="(width < 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1200p/%s.webp" />
+ <source media="(width >= 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp" />
+ <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" />
</picture>
<span class="grid-tooltip-text"><p>%s</p></span>
<span class="grid-item-index">%d</span>
- </a>`, img.URL, strings.Join(tagClassList, " "), galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, anchorlessCaptionHTML, i+1))
+ </a>`, img.URL, galleryID, strings.Join(tagClassList, " "), galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, anchorlessCaptionHTML, i+1))
if glightboxDescId != "" {
elements = append(elements, fmt.Sprintf(`
@@ -144,10 +144,16 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
w.WriteString(fmt.Sprintf(`
<script>
+ var lightbox_%s = GLightbox({
+ selector: '.glightbox-%s',
+ moreLength: 0
+ });
+
var msnry_%s = new Masonry('.masonry-grid-%s', {
itemSelector: '.grid-item-%s',
columnWidth: '.grid-sizer-%s',
- percentPosition: true
+ percentPosition: true,
+ horizontalOrder: true
});
var imgLoad_%s_timer;
@@ -165,7 +171,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
initMasonryLayout_%s = null;
imgLoad_%s = null;
});
-</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
+</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
}
return ast.WalkContinue, nil
diff --git a/static/input.css b/static/input.css
index c308796..d03764b 100644
--- a/static/input.css
+++ b/static/input.css
@@ -239,7 +239,7 @@ a:hover, .linklike:hover {
.bg-sidebar {
background-image: var(--squares-and-triangles-background);
background-repeat: var(--squares-and-triangles-background-repeat);
- background-size: calc(var(--squares-and-triangles-background-width-coef) * 1rem) calc(var(--squares-and-triangles-background-height-coef) * 1rem);
+ background-size: calc(var(--squares-and-triangles-background-width-coef) * 0.8rem) calc(var(--squares-and-triangles-background-height-coef) * 0.8rem);
}
.logo-custom {
@@ -268,10 +268,13 @@ a:hover, .linklike:hover {
.theme-wheel {
position: fixed;
- width: 12rem;
- height: 12rem;
- box-shadow: 0.25rem 0.25rem 0.25rem var(--main-light-color);
+ width: 15vmax;
+ height: 15vmax;
border-radius: 50%;
+ background: var(--background-light-color);
+ opacity: 0.8;
+ border: 1vmax outset var(--background-dark-color);
+ box-shadow: 0 0 5vmax var(--main-light-color);
opacity: 0;
visibility: hidden;
transform: scale(0.5);
@@ -287,56 +290,26 @@ a:hover, .linklike:hover {
.theme-icon {
position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
+ width: 4rem;
+ height: 4rem;
+ border-radius: 50%;
cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
transition: all 0.3s ease;
- color: white;
+ border: 0.1rem inset var(--background-light-color);
background: var(--interlocked-hexagons-background);
- background-size: 100% 100%;
- font-size: 1.5rem;
+ background-size: contain;
}
.theme-icon:hover {
- filter: brightness(1.2);
-}
-
-.theme-icon i {
- position: absolute;
- filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
- z-index: 1;
+ transform: scale(1.2);
}
.theme-icon.active {
- filter: brightness(1.3);
-}
-
-.theme-icon.active::after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(255, 255, 255, 0.25);
- pointer-events: none;
- clip-path: inherit;
-}
-
-.theme-pin {
- position: relative;
- background: color-mix(in srgb, var(--main-light-color) 75%, transparent);
- box-shadow: 0rem 0rem 1rem var(--main-dark-color);
- border: 0.5rem solid color-mix(in srgb, var(--main-light-color) 90%, transparent);
- backdrop-filter: blur(2px);
- top: 35%;
- left: 35%;
- width: 30%;
- height: 30%;
- z-index: 1002;
- border-radius: 50%;
+ transform: scale(1.2);
+ border: 0.3rem outset var(--main-light-color);
}
.custom-svg-marker {
@@ -377,7 +350,7 @@ a:hover, .linklike:hover {
margin-top: 0.25rem;
border-radius: 0.5rem;
position: absolute;
- z-index: 1001;
+ z-index: 15;
}
.grid-tooltip:hover .grid-tooltip-text {
@@ -435,7 +408,7 @@ a:hover, .linklike:hover {
}
}
-@container main (width >= 56rem) {
+@container main (width >= 48rem) {
.grid-item, .grid-sizer {
width: 25%;
}
@@ -445,7 +418,7 @@ a:hover, .linklike:hover {
}
}
-@container main (width >= 96rem) {
+@container main (width >= 64rem) {
.grid-item, .grid-sizer {
width: 20%;
}
@@ -495,7 +468,6 @@ a:hover, .linklike:hover {
.gslide-description {
flex-grow: 0;
flex-shrink: 1;
- flex-basis: 0;
}
.map-container .leaflet-container {
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index d874ecf..ce5698b 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -31,10 +31,6 @@
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>
@@ -198,7 +194,6 @@
<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>
@@ -243,7 +238,6 @@
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) {
@@ -263,36 +257,23 @@
}
function positionThemeIcons() {
- const sliceAngle = 360 / themeIcons.length;
-
- themeIcons.forEach((icon, index) => {
- const startAngle = index * sliceAngle;
- const endAngle = (index + 1) * sliceAngle;
-
- const clipPath = createSliceClipPath(startAngle, endAngle, themeWheelRadius);
- icon.style.clipPath = clipPath;
- });
- }
+ 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
- function createSliceClipPath(startAngle, endAngle, radius) {
- const centerX = radius;
- const centerY = radius;
+ icons.forEach((icon, index) => {
+ const angle = (index * 360 / iconCount) - 90;
+ const angleRad = (angle * Math.PI) / 180;
- let points = `${centerX}px ${centerY}px`;
+ const x = Math.cos(angleRad) * iconRadius + wheelRadius - iconSize;
+ const y = Math.sin(angleRad) * iconRadius + wheelRadius - iconSize;
- 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})`;
+ icon.style.left = x + 'px';
+ icon.style.top = y + 'px';
+ });
}
function positionThemeWheel() {
@@ -300,24 +281,25 @@
const buttonCenterX = buttonRect.left + buttonRect.width / 2;
const buttonCenterY = buttonRect.top + buttonRect.height / 2;
- const margin = 0;
+ const wheelRadius = calculateVmax(7.5);
+ const margin = calculateVmax(1);
- let wheelX = buttonCenterX - themeWheelRadius;
- let wheelY = buttonCenterY - themeWheelRadius;
+ let wheelX = buttonCenterX - wheelRadius;
+ let wheelY = buttonCenterY - wheelRadius;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
if (wheelX < margin) {
wheelX = margin;
- } else if (wheelX + (themeWheelRadius * 2) > viewportWidth - margin) {
- wheelX = viewportWidth - (themeWheelRadius * 2) - margin;
+ } else if (wheelX + (wheelRadius * 2) > viewportWidth - margin) {
+ wheelX = viewportWidth - (wheelRadius * 2) - margin;
}
if (wheelY < margin) {
wheelY = margin;
- } else if (wheelY + (themeWheelRadius * 2) > viewportHeight - margin) {
- wheelY = viewportHeight - (themeWheelRadius * 2) - margin;
+ } else if (wheelY + (wheelRadius * 2) > viewportHeight - margin) {
+ wheelY = viewportHeight - (wheelRadius * 2) - margin;
}
themeWheel.style.left = wheelX + 'px';
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 77164fa..c9c9e91 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -46,11 +46,6 @@
{{ .MapLocationY }},
{{ .MapLocationAreaMeters }}
), 1000);
-
- var lightbox = GLightbox({
- selector: '.glightbox',
- moreLength: 0
- });
</script>
{{- end }}
</div>
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 686b46b..83078c9 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -38,10 +38,6 @@
<script>
const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-
- function convertRemToPixels(rem) {
- return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
- }
</script>
<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]">
@@ -65,11 +61,10 @@
<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 id="map-container" class="bg-background-dark flex z-10 w-[calc(100dvw-5rem)] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[92dvh]"></div>
+ <div id="map-container" class="bg-background-dark flex z-10 w-[95dvw] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[92dvh]"></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/leaflet/1.9.4/leaflet.js"></script>
@@ -79,7 +74,6 @@
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) {
@@ -99,36 +93,23 @@
}
function positionThemeIcons() {
- const sliceAngle = 360 / themeIcons.length;
-
- themeIcons.forEach((icon, index) => {
- const startAngle = index * sliceAngle;
- const endAngle = (index + 1) * sliceAngle;
-
- const clipPath = createSliceClipPath(startAngle, endAngle, themeWheelRadius);
- icon.style.clipPath = clipPath;
- });
- }
-
- function createSliceClipPath(startAngle, endAngle, radius) {
- const centerX = radius;
- const centerY = radius;
+ 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
- let points = `${centerX}px ${centerY}px`;
+ icons.forEach((icon, index) => {
+ const angle = (index * 360 / iconCount) - 90;
+ const angleRad = (angle * Math.PI) / 180;
- const segments = Math.max(2, Math.ceil(Math.abs(endAngle - startAngle) / 5));
- const angleStep = (endAngle - startAngle) / segments;
+ const x = Math.cos(angleRad) * iconRadius + wheelRadius - iconSize;
+ const y = Math.sin(angleRad) * iconRadius + wheelRadius - iconSize;
- 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})`;
+ icon.style.left = x + 'px';
+ icon.style.top = y + 'px';
+ });
}
function positionThemeWheel() {
@@ -136,24 +117,25 @@
const buttonCenterX = buttonRect.left + buttonRect.width / 2;
const buttonCenterY = buttonRect.top + buttonRect.height / 2;
- const margin = 0;
+ const wheelRadius = calculateVmax(7.5);
+ const margin = calculateVmax(1);
- let wheelX = buttonCenterX - themeWheelRadius;
- let wheelY = buttonCenterY - themeWheelRadius;
+ let wheelX = buttonCenterX - wheelRadius;
+ let wheelY = buttonCenterY - wheelRadius;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
if (wheelX < margin) {
wheelX = margin;
- } else if (wheelX + (themeWheelRadius * 2) > viewportWidth - margin) {
- wheelX = viewportWidth - (themeWheelRadius * 2) - margin;
+ } else if (wheelX + (wheelRadius * 2) > viewportWidth - margin) {
+ wheelX = viewportWidth - (wheelRadius * 2) - margin;
}
if (wheelY < margin) {
wheelY = margin;
- } else if (wheelY + (themeWheelRadius * 2) > viewportHeight - margin) {
- wheelY = viewportHeight - (themeWheelRadius * 2) - margin;
+ } else if (wheelY + (wheelRadius * 2) > viewportHeight - margin) {
+ wheelY = viewportHeight - (wheelRadius * 2) - margin;
}
themeWheel.style.left = wheelX + 'px';
generated by cgitext v1.3.1+17 (git 2.54.0) at 2026-09-20 13:41:35 +0000