summaryrefslogtreecommitdiff
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
Diffstat
-rw-r--r--internal/glightbox/html_renderer.go53
-rw-r--r--static/input.css58
-rw-r--r--views/layouts/general-page.html2
3 files changed, 21 insertions, 92 deletions
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 44fbd4c..5514b6d 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -4,14 +4,11 @@ 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"
@@ -19,36 +16,22 @@ import (
type GLightboxHTMLRenderer struct {
html.Config
- md goldmark.Markdown
- anchorMatchRe *regexp.Regexp
+ md goldmark.Markdown
}
func NewGLightboxHTMLRenderer(opts ...html.Option) renderer.NodeRenderer {
r := &GLightboxHTMLRenderer{
Config: html.NewConfig(),
md: goldmark.New(
- 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),
- ),
- ),
+ goldmark.WithRendererOptions(
+ html.WithHardWraps(),
+ html.WithXHTML(),
),
),
}
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
}
@@ -107,8 +90,6 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
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 %s grid-item-%s p-1"
data-gallery="gallery-%s" data-title="%s" %s>
@@ -120,9 +101,9 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
<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-tooltip-text">%s</span>
<span class="grid-item-index">%d</span>
- </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))
+ </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, captionHTML, i+1))
if glightboxDescId != "" {
elements = append(elements, fmt.Sprintf(`
@@ -135,7 +116,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 mx-auto">
+ <div class="grid masonry-grid-%s">
<div class="grid-sizer grid-sizer-%s"></div>
%s
</div>
@@ -145,33 +126,23 @@ 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', {
itemSelector: '.grid-item-%s',
columnWidth: '.grid-sizer-%s',
- percentPosition: true,
- horizontalOrder: true
+ percentPosition: true
});
var imgLoad_%s_timer;
- var imgLoad_%s = imagesLoaded('.masonry-grid-%s');
+ var imgLoad_%s = imagesLoaded('.masonry-grid-%s', () => msnry_%s.layout());
- function initMasonryLayout_%s() {
+ imgLoad_%s.on('progress', function() {
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, 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))
}
return ast.WalkContinue, nil
diff --git a/static/input.css b/static/input.css
index 803b0f8..01a747e 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;
}
@@ -122,12 +122,12 @@ html {
--squares-and-triangles-background-height-coef: 15;
}
-a, .linklike {
+a {
color: var(--main-medium-color) !important;
text-decoration: underline;
}
-a:hover, .linklike:hover {
+a:hover {
color: var(--main-light-color) !important;
}
@@ -409,7 +409,7 @@ a:hover, .linklike:hover {
}
}
-@media (width >= 48rem) {
+@media (width >= 40rem) {
.grid-item, .grid-sizer {
width: 25%;
}
@@ -419,7 +419,7 @@ a:hover, .linklike:hover {
}
}
-@media (width >= 64rem) {
+@media (width >= 48rem) {
.grid-item, .grid-sizer {
width: 20%;
}
@@ -429,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;
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index ce6910b..c320666 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -197,7 +197,7 @@
</div>
</div>
- <div class="bg-background-dark 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-[60dvw] 2xl:w-[50dvw] grow-0 h-[100dvh] ar-lt-0.8:max-h-[92dvh]">
+ <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">
generated by cgitext v1.3.1+17 (git 2.54.0) at 2026-10-01 06:18:12 +0000