summaryrefslogtreecommitdiff
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
Diffstat
-rw-r--r--internal/glightbox/block.go1
-rw-r--r--internal/glightbox/html_renderer.go80
-rw-r--r--internal/glightbox/parser.go16
-rw-r--r--static/input.css217
-rw-r--r--views/index.html2
-rw-r--r--views/layouts/general-page.html86
-rw-r--r--views/pages/blog-page.html13
-rw-r--r--views/pages/global-map.html78
-rw-r--r--views/partials/blog-page-like-button.html2
9 files changed, 371 insertions, 124 deletions
diff --git a/internal/glightbox/block.go b/internal/glightbox/block.go
index 696f328..e53e67b 100644
--- a/internal/glightbox/block.go
+++ b/internal/glightbox/block.go
@@ -15,6 +15,7 @@ type GLightboxBlock struct {
type GLightboxImage struct {
URL string
+ Tags []string
Caption []byte
}
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 43d4790..aad7984 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -4,11 +4,14 @@ import (
"bytes"
"fmt"
"math/rand"
+ "regexp"
"strings"
"time"
+ "github.com/SayaAndy/saya-today-web/internal/tailwind"
"github.com/yuin/goldmark"
"github.com/yuin/goldmark/ast"
+ "github.com/yuin/goldmark/parser"
"github.com/yuin/goldmark/renderer"
"github.com/yuin/goldmark/renderer/html"
"github.com/yuin/goldmark/util"
@@ -16,22 +19,36 @@ import (
type GLightboxHTMLRenderer struct {
html.Config
- md goldmark.Markdown
+ md goldmark.Markdown
+ anchorMatchRe *regexp.Regexp
}
func NewGLightboxHTMLRenderer(opts ...html.Option) renderer.NodeRenderer {
r := &GLightboxHTMLRenderer{
Config: html.NewConfig(),
md: goldmark.New(
- goldmark.WithRendererOptions(
- html.WithHardWraps(),
- html.WithXHTML(),
+ goldmark.WithParserOptions(
+ parser.WithAutoHeadingID(),
+ parser.WithAttribute(),
+ ),
+ goldmark.WithRenderer(
+ renderer.NewRenderer(
+ renderer.WithNodeRenderers(
+ util.Prioritized(tailwind.NewCustomLinkRenderer(
+ html.WithUnsafe(), html.WithHardWraps(), html.WithXHTML(),
+ ), 50),
+ util.Prioritized(html.NewRenderer(
+ html.WithUnsafe(), html.WithHardWraps(), html.WithXHTML(),
+ ), 100),
+ ),
+ ),
),
),
}
for _, opt := range opts {
opt.SetHTMLOption(&r.Config)
}
+ r.anchorMatchRe = regexp.MustCompile(`(?s)<\s*a(\s+[^<]*)(href\s*=\s*["'].*?["'])\s*([^<]*)>(.*?)<\s*\/\s*a\s*>`)
return r
}
@@ -78,11 +95,34 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
dataDescriptionAttribute = fmt.Sprintf("data-description=\".%s\"", glightboxDescId)
}
+ tagClassList := make([]string, 0, len(img.Tags))
+ for _, tag := range img.Tags {
+ switch tag {
+ case "2x":
+ tagClassList = append(tagClassList, "grid-item-2x")
+ }
+ }
+
+ if len(img.Caption) > 0 {
+ tagClassList = append(tagClassList, "grid-tooltip")
+ }
+
+ 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-%s grid-item grid-item-%s"
- data-gallery="gallery-%s" data-title="%s" %s>
- <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" class="rounded-md p-1" alt="webp thumbnail" />
- </a>`, img.URL, galleryID, galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt))
+ <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>
+ <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" />
+ </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))
if glightboxDescId != "" {
elements = append(elements, fmt.Sprintf(`
@@ -95,7 +135,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
w.WriteString(fmt.Sprintf(`
<div class="justify-content-center display-block m-1">
<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
- <div class="grid masonry-grid-%s">
+ <div class="grid masonry-grid-%s mx-auto">
<div class="grid-sizer grid-sizer-%s"></div>
%s
</div>
@@ -104,20 +144,28 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
w.WriteString(fmt.Sprintf(`
<script>
- var lightbox_%s = GLightbox({
- selector: '.glightbox-%s'
- });
-
var msnry_%s = new Masonry('.masonry-grid-%s', {
itemSelector: '.grid-item-%s',
columnWidth: '.grid-sizer-%s',
percentPosition: true
});
- imagesLoaded('.masonry-grid-%s', function() {
- msnry_%s.layout();
+ var imgLoad_%s_timer;
+ var imgLoad_%s = imagesLoaded('.masonry-grid-%s');
+
+ function initMasonryLayout_%s() {
+ clearTimeout(imgLoad_%s_timer);
+ imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 500);
+ }
+
+ imgLoad_%s.on('progress', initMasonryLayout_%s);
+
+ document.addEventListener('popout', (e) => {
+ imgLoad_%s.off('progress', initMasonryLayout_%s);
+ initMasonryLayout_%s = null;
+ imgLoad_%s = null;
});
-</script>`, 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))
}
return ast.WalkContinue, nil
diff --git a/internal/glightbox/parser.go b/internal/glightbox/parser.go
index ba3f22e..6780090 100644
--- a/internal/glightbox/parser.go
+++ b/internal/glightbox/parser.go
@@ -4,6 +4,7 @@ import (
"bytes"
"log/slog"
"regexp"
+ "strings"
"time"
"github.com/yuin/goldmark/ast"
@@ -60,16 +61,27 @@ func (p *GLightboxParser) Continue(node ast.Node, reader text.Reader, pc parser.
gallery := node.(*GLightboxBlock)
- parts := bytes.SplitN(trimmed, []byte{'|'}, 2)
+ parts := bytes.SplitN(trimmed, []byte{'|'}, 3)
url := bytes.TrimSpace(parts[0])
caption := make([]byte, 0)
- if len(parts) > 1 {
+ tagsRaw := ""
+ if len(parts) == 2 {
caption = bytes.TrimSpace(parts[1])
}
+ if len(parts) >= 3 {
+ tagsRaw = string(parts[1])
+ caption = bytes.TrimSpace(parts[2])
+ }
+
+ tags := strings.Split(tagsRaw, ",")
+ for i := range tags {
+ tags[i] = strings.TrimSpace(tags[i])
+ }
gallery.Images = append(gallery.Images, GLightboxImage{
URL: string(url),
+ Tags: tags,
Caption: caption,
})
diff --git a/static/input.css b/static/input.css
index d766049..c308796 100644
--- a/static/input.css
+++ b/static/input.css
@@ -10,25 +10,25 @@ html {
font-size: 12px;
}
-@media screen and (width >= 640px) {
+@media screen and (min-width: 640px) and (min-height: 640px) {
html {
font-size: 14px;
}
}
-@media screen and (width >= 1200px) {
+@media screen and (min-width: 900px) and (min-height: 900px) {
html {
font-size: 16px;
}
}
-@media screen and (width >= 1920px) {
+@media screen and (min-width: 1400px) and (min-height: 1400px) {
html {
font-size: 20px;
}
}
-@media screen and (width >= 2560px) {
+@media screen and (min-width: 1920px) and (min-height: 1920px) {
html {
font-size: 24px;
}
@@ -122,12 +122,12 @@ html {
--squares-and-triangles-background-height-coef: 15;
}
-a {
+a, .linklike {
color: var(--main-medium-color) !important;
text-decoration: underline;
}
-a:hover {
+a:hover, .linklike:hover {
color: var(--main-light-color) !important;
}
@@ -239,17 +239,16 @@ a: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) * 1dvw) calc(var(--squares-and-triangles-background-height-coef) * 1dvw);
+ background-size: calc(var(--squares-and-triangles-background-width-coef) * 1rem) calc(var(--squares-and-triangles-background-height-coef) * 1rem);
}
.logo-custom {
- width: 3.5dvw;
- height: 20dvw;
- font-size: 2.5dvw;
- -webkit-text-stroke: 0.1dvw var(--sidebar-stroke-color);
+ width: 3.5rem;
+ height: 20rem;
+ font-size: 2.5rem;
+ -webkit-text-stroke: 0.1rem var(--sidebar-stroke-color);
writing-mode: sideways-lr;
text-orientation: mixed;
- display: block;
}
.inset-shadow {
@@ -269,13 +268,10 @@ a:hover {
.theme-wheel {
position: fixed;
- width: 15vmax;
- height: 15vmax;
+ width: 12rem;
+ height: 12rem;
+ box-shadow: 0.25rem 0.25rem 0.25rem var(--main-light-color);
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);
@@ -291,26 +287,56 @@ a:hover {
.theme-icon {
position: absolute;
- width: 4vmax;
- height: 4vmax;
- border-radius: 50%;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
transition: all 0.3s ease;
- border: 0.1vmax inset var(--background-light-color);
+ color: white;
background: var(--interlocked-hexagons-background);
- background-size: contain;
+ background-size: 100% 100%;
+ font-size: 1.5rem;
}
.theme-icon:hover {
- transform: scale(1.2);
+ filter: brightness(1.2);
+}
+
+.theme-icon i {
+ position: absolute;
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+ z-index: 1;
}
.theme-icon.active {
- transform: scale(1.2);
- border: 0.3vmax outset var(--main-light-color);
+ 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%;
}
.custom-svg-marker {
@@ -327,26 +353,149 @@ a:hover {
transform: scale(1.1);
}
+.grid-tooltip {
+ position: relative;
+ display: inline-block;
+ box-shadow: inset 0rem 0rem 0.5rem var(--main-light-color);
+ transition: box-shadow 0.5s ease-in-out;
+}
+
+.grid-tooltip:hover {
+ box-shadow: none;
+}
+
+.grid-tooltip-text {
+ visibility: hidden;
+ opacity: 0;
+ transition: opacity 0.5s;
+ width: 100%;
+ top: 100%;
+ background-color: var(--background-dark-color);
+ color: var(--main-dark-color);
+ text-align: center;
+ padding: 0.25rem 0.25rem;
+ margin-top: 0.25rem;
+ border-radius: 0.5rem;
+ position: absolute;
+ z-index: 1001;
+}
+
+.grid-tooltip:hover .grid-tooltip-text {
+ visibility: visible;
+ opacity: 1;
+}
+
+.grid-tooltip-text::after {
+ content: " ";
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ margin-left: -0.25rem;
+ border-width: 0.25rem;
+ border-style: solid;
+ border-color: transparent transparent var(--background-dark-color) transparent;
+}
+
.grid-item, .grid-sizer {
+ position: relative;
+ display: inline-block;
width: 50%;
}
-@media (width >= 32rem) {
+.grid-item-index {
+ visibility: visible;
+ opacity: 1;
+ transition: opacity 0.5s;
+ top: 0%;
+ left: 0%;
+ background-color: var(--main-light-color);
+ color: var(--background-dark-color);
+ text-align: center;
+ padding: 0.25rem 0.25rem;
+ position: absolute;
+ z-index: 14;
+}
+
+.grid-item:hover .grid-item-index {
+ visibility: hidden;
+ opacity: 0;
+}
+
+.grid-item-2x {
+ width: 100%;
+}
+
+@container main (width >= 32rem) {
.grid-item, .grid-sizer {
width: 33%;
}
+
+ .grid-item-2x {
+ width: 66%;
+ }
}
-@media (width >= 40rem) {
+@container main (width >= 56rem) {
.grid-item, .grid-sizer {
width: 25%;
}
+
+ .grid-item-2x {
+ width: 50%;
+ }
}
-@media (width >= 48rem) {
+@container main (width >= 96rem) {
.grid-item, .grid-sizer {
width: 20%;
}
+
+ .grid-item-2x {
+ width: 40%;
+ }
+}
+
+.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;
+ flex-basis: 0;
}
.map-container .leaflet-container {
@@ -399,10 +548,6 @@ 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/index.html b/views/index.html
index 4b8fe37..2633894 100644
--- a/views/index.html
+++ b/views/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>SAYA TODAY // Заглавная</title>
+ <title>Choose Language // SAYA TODAY</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index c320666..d874ecf 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -31,6 +31,10 @@
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>
@@ -170,22 +174,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-[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">
+ <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-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]">
+ <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-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
+ <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-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
+ <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-[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="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>
@@ -194,19 +198,20 @@
<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 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="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="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 flex flex-col basis-8"
+ <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="max-xs:hidden 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">
@@ -238,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) {
@@ -257,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
-
- icons.forEach((icon, index) => {
- const angle = (index * 360 / iconCount) - 90;
- const angleRad = (angle * Math.PI) / 180;
+ const sliceAngle = 360 / themeIcons.length;
- const x = Math.cos(angleRad) * iconRadius + wheelRadius - iconSize;
- const y = Math.sin(angleRad) * iconRadius + wheelRadius - iconSize;
+ themeIcons.forEach((icon, index) => {
+ const startAngle = index * sliceAngle;
+ const endAngle = (index + 1) * sliceAngle;
- 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';
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 9704502..77164fa 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="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">
+ <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">
{{ .ParsedMarkdown }}
{{- if .MapLocationX }}
<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%] ml-auto mr-auto">
@@ -46,6 +46,11 @@
{{ .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 063337c..686b46b 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>SAYA TODAY // {{ .L.GlobalMap.Header }}</title>
+ <title>{{ .L.GlobalMap.Header }} // SAYA TODAY</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -38,33 +38,38 @@
<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-[5dvw] 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-[5rem] 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-[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]">
+ <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 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-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
+ <a href="/{{ .Lang }}/blog" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] 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-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
+ <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-[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>
+ <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>
</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 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>
+ <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>
<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>
@@ -74,6 +79,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) {
@@ -93,49 +99,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
-
- icons.forEach((icon, index) => {
- const angle = (index * 360 / iconCount) - 90;
- const angleRad = (angle * Math.PI) / 180;
+ const sliceAngle = 360 / themeIcons.length;
- const x = Math.cos(angleRad) * iconRadius + wheelRadius - iconSize;
- const y = Math.sin(angleRad) * iconRadius + wheelRadius - iconSize;
+ themeIcons.forEach((icon, index) => {
+ const startAngle = index * sliceAngle;
+ const endAngle = (index + 1) * sliceAngle;
- 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';
diff --git a/views/partials/blog-page-like-button.html b/views/partials/blog-page-like-button.html
index f286471..f23ef9d 100644
--- a/views/partials/blog-page-like-button.html
+++ b/views/partials/blog-page-like-button.html
@@ -1,6 +1,6 @@
<button
hx-put="/api/v1/like" hx-vals='{"like": {{ not .Liked }}}' hx-target="this" hx-swap="outerHTML" hx-trigger="click"
- class="text-sm/[0.9] font-spectral text-left px-1 py-0.5 {{ if .Liked }}bg-main-light hover:bg-main-medium text-background-dark border-inset{{ else }}bg-main-dark hover:bg-main-medium text-background-light border-outset{{ end }} cursor-pointer border-2 border-background-dark">
+ class="text-sm/[0.9] shrink-0 font-spectral text-left px-1 py-0.5 {{ if .Liked }}bg-main-light hover:bg-main-medium text-background-dark border-inset{{ else }}bg-main-dark hover:bg-main-medium text-background-light border-outset{{ end }} cursor-pointer border-2 border-background-dark">
<i class="fas fa-thumbs-up w-3 h-3"></i>
<span class="italic ml-0.5 text-background-light">({{ .LikedCount }})</span>
</button> \ No newline at end of file
generated by cgitext v1.3.1+17 (git 2.54.0) at 2026-09-11 21:57:55 +0000