summaryrefslogtreecommitdiff
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
Diffstat
-rw-r--r--internal/glightbox/html_renderer.go3
-rw-r--r--static/input.css79
-rw-r--r--views/layouts/general-page.html24
-rw-r--r--views/pages/blog-page.html8
-rw-r--r--views/pages/global-map.html12
5 files changed, 44 insertions, 82 deletions
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 44fbd4c..a9d066d 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -145,8 +145,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
w.WriteString(fmt.Sprintf(`
<script>
var lightbox_%s = GLightbox({
- selector: '.glightbox-%s',
- moreLength: 0
+ selector: '.glightbox-%s'
});
var msnry_%s = new Masonry('.masonry-grid-%s', {
diff --git a/static/input.css b/static/input.css
index d03764b..910149a 100644
--- a/static/input.css
+++ b/static/input.css
@@ -10,25 +10,25 @@ html {
font-size: 12px;
}
-@media screen and (min-width: 640px) and (min-height: 640px) {
+@media screen and (width >= 640px) {
html {
font-size: 14px;
}
}
-@media screen and (min-width: 900px) and (min-height: 900px) {
+@media screen and (width >= 1200px) {
html {
font-size: 16px;
}
}
-@media screen and (min-width: 1400px) and (min-height: 1400px) {
+@media screen and (width >= 1920px) {
html {
font-size: 20px;
}
}
-@media screen and (min-width: 1920px) and (min-height: 1920px) {
+@media screen and (width >= 2560px) {
html {
font-size: 24px;
}
@@ -239,16 +239,17 @@ 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) * 0.8rem) calc(var(--squares-and-triangles-background-height-coef) * 0.8rem);
+ background-size: calc(var(--squares-and-triangles-background-width-coef) * 1dvw) calc(var(--squares-and-triangles-background-height-coef) * 1dvw);
}
.logo-custom {
- width: 3.5rem;
- height: 20rem;
- font-size: 2.5rem;
- -webkit-text-stroke: 0.1rem var(--sidebar-stroke-color);
+ width: 3.5dvw;
+ height: 20dvw;
+ font-size: 2.5dvw;
+ -webkit-text-stroke: 0.1dvw var(--sidebar-stroke-color);
writing-mode: sideways-lr;
text-orientation: mixed;
+ display: block;
}
.inset-shadow {
@@ -290,15 +291,15 @@ a:hover, .linklike:hover {
.theme-icon {
position: absolute;
- width: 4rem;
- height: 4rem;
+ width: 4vmax;
+ height: 4vmax;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
- border: 0.1rem inset var(--background-light-color);
+ border: 0.1vmax inset var(--background-light-color);
background: var(--interlocked-hexagons-background);
background-size: contain;
}
@@ -309,7 +310,7 @@ a:hover, .linklike:hover {
.theme-icon.active {
transform: scale(1.2);
- border: 0.3rem outset var(--main-light-color);
+ border: 0.3vmax outset var(--main-light-color);
}
.custom-svg-marker {
@@ -398,7 +399,7 @@ a:hover, .linklike:hover {
width: 100%;
}
-@container main (width >= 32rem) {
+@media (width >= 32rem) {
.grid-item, .grid-sizer {
width: 33%;
}
@@ -408,7 +409,7 @@ a:hover, .linklike:hover {
}
}
-@container main (width >= 48rem) {
+@media (width >= 40rem) {
.grid-item, .grid-sizer {
width: 25%;
}
@@ -418,7 +419,7 @@ a:hover, .linklike:hover {
}
}
-@container main (width >= 64rem) {
+@media (width >= 48rem) {
.grid-item, .grid-sizer {
width: 20%;
}
@@ -428,48 +429,6 @@ a:hover, .linklike:hover {
}
}
-.goverlay {
- background: color-mix(in srgb, var(--background-light-color) 50%, transparent) !important;
- backdrop-filter: blur(1rem);
-}
-
-.glightbox-clean .gslide-description {
- background: color-mix(in srgb, var(--background-dark-color) 50%, transparent) !important;
- backdrop-filter: blur(1rem);
-}
-
-.glightbox-clean .gslide-title {
- font-family: var(--font-spectral) !important;
- font-weight: 600 !important;
- color: var(--main-light-color) !important;
- padding-bottom: 1rem !important;
- margin-bottom: 0 !important;
-}
-
-.glightbox-clean .gslide-desc {
- font-size: 1rem !important;
- font-family: var(--font-spectral) !important;
- font-weight: 400;
- color: var(--main-medium-color) !important;
-}
-
-.glightbox-mobile .glightbox-container .gslide-description {
- padding: 0 !important;
-}
-
-.glightbox-clean .gdesc-inner {
- padding: 1rem 1rem !important;
-}
-
-.glightbox-container .ginner-container {
- height: 100dvh !important;
-}
-
-.gslide-description {
- flex-grow: 0;
- flex-shrink: 1;
-}
-
.map-container .leaflet-container {
width: 100% !important;
height: 100% !important;
@@ -520,6 +479,10 @@ body[data-theme~="ram"] .leaflet-tile {
background-color: var(--background-light-color);
}
+ .logo-custom {
+ display: none;
+ }
+
.bg-pattern-body {
background-size: 10dvh;
}
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index ce5698b..c320666 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -170,22 +170,22 @@
const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
</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]">
- <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">
+ <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5dvw] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[8dvh]">
+ <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
saya.today
</div>
- <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]">
+ <div class="text-[3dvw] 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-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] 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]">
+ <a href="/{{ .Lang }}/blog" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] 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]">
+ <a href="/{{ .Lang }}/map" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] 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="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] 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="xs:!hidden w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] 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>
@@ -197,16 +197,16 @@
</div>
</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="bg-background-dark flex z-10 w-[min(90dvw,100dvh)] grow-0 ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:max-h-[92dvh]">
+ <div class="pl-[0.5dvw] bg-background-dark border-r-2 border-dashed border-main-dark"></div>
<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"
+ <div id="general-page-header" class="max-xs: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="max-xs:hidden [@media(max-height:32rem)]:hidden border-t-4 border-dotted border-main-dark mb-2">
+ <hr class="max-xs: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">
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index c9c9e91..9704502 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -1,9 +1,9 @@
{{ define "body" }}
<div class="bg-background-light flex flex-col inset-shadow px-8 py-4 overflow-y-auto">
- <p class="max-xs:block [@media(max-height:32rem)]:block hidden font-spectral text-2xl font-bold italic text-main-dark tracking-[.0125rem] mb-1">{{ .Title }}</p>
- <p class="max-xs:block [@media(max-height:32rem)]:block hidden grow text-lg font-spectral text-secondary">{{ .L.Metadata.Published }}: {{ .PublishedDate }}</p>
- <p class="max-xs:block [@media(max-height:32rem)]:block hidden grow text-lg font-spectral text-secondary">{{ .L.Metadata.Action }}: {{ .ActionDate }}</p>
- <hr class="max-xs:block [@media(max-height:32rem)]:block hidden border-t-2 border-dotted border-main-dark mt-1 mb-2 w-full ml-auto mr-auto">
+ <p class="xs:hidden font-spectral text-2xl font-bold italic text-main-dark tracking-[.0125rem] mb-1">{{ .Title }}</p>
+ <p class="xs:hidden grow text-lg font-spectral text-secondary">{{ .L.Metadata.Published }}: {{ .PublishedDate }}</p>
+ <p class="xs:hidden grow text-lg font-spectral text-secondary">{{ .L.Metadata.Action }}: {{ .ActionDate }}</p>
+ <hr class="xs:hidden border-t-2 border-dotted border-main-dark mt-1 mb-2 w-full ml-auto mr-auto">
{{ .ParsedMarkdown }}
{{- if .MapLocationX }}
<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%] ml-auto mr-auto">
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 83078c9..9b67514 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -40,21 +40,21 @@
const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
</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]">
+ <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5dvw] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[8dvh]">
<div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
saya.today
</div>
- <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]">
+ <div class="text-[3dvw] 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-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
<i 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]">
+ <a href="/{{ .Lang }}/blog" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
<i 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]">
+ <a href="/{{ .Lang }}/map" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] 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>
+ <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] 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>
</div>
<div class="theme-wheel" id="theme-wheel">
<div class="theme-icon" data-theme="olive"></div>
generated by cgitext v1.3.1+17 (git 2.54.0) at 2026-09-13 00:52:08 +0000