| -rw-r--r-- | internal/frontmatter/parser.go | 1 | ||||
| -rw-r--r-- | internal/lightgallery/html_renderer.go | 2 | ||||
| -rw-r--r-- | main.go | 13 | ||||
| -rw-r--r-- | static/input.css | 78 | ||||
| -rw-r--r-- | static/output.css | 103 | ||||
| -rw-r--r-- | views/index.html | 51 | ||||
| -rw-r--r-- | views/layouts/blog-page.html | 78 |
7 files changed, 64 insertions, 262 deletions
diff --git a/internal/frontmatter/parser.go b/internal/frontmatter/parser.go index 1a521c0..6cc3ee8 100644 --- a/internal/frontmatter/parser.go +++ b/internal/frontmatter/parser.go @@ -15,7 +15,6 @@ type Metadata struct { PublishedTime time.Time `yaml:"publishedTime"` Thumbnail string `yaml:"thumbnail"` Tags []string `yaml:"tags"` - Geolocation string `yaml:"geolocation"` } func ParseFrontmatter(content []byte) (metadata *Metadata, markdown []byte, err error) { diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go index bd73eac..fb65b06 100644 --- a/internal/lightgallery/html_renderer.go +++ b/internal/lightgallery/html_renderer.go @@ -87,7 +87,7 @@ function createLightLibrary%s() { closable: false, showMaximizeIcon: true, appendSubHtmlTo: ".lg-sub-html", - isMobile: () => false, + isMobile: () => { return false; }, slideDelay: 0, plugins: [lgZoom, lgThumbnail], thumbWidth: 160, @@ -101,25 +101,12 @@ func main() { return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("failed to find '%s' post", c.Params("title"))) } - geolocationParts := strings.Split(metadata.Geolocation, " ") - var x, y, areaError string - if len(geolocationParts) >= 2 { - x = geolocationParts[0] - y = geolocationParts[1] - } - if len(geolocationParts) >= 3 { - areaError = geolocationParts[2] - } - return c.Render("layouts/blog-page", fiber.Map{ "Title": metadata.Title, "PublishedDate": metadata.PublishedTime.Format("2006-01-02 15:04:05 -07:00"), "PublishedYear": strconv.Itoa(metadata.PublishedTime.Year()), "ParsedMarkdownDesktop": template.HTML(parsedMarkdownDesktop), "ParsedMarkdownMobile": template.HTML(parsedMarkdownMobile), - "MapLocationX": x, - "MapLocationY": y, - "MapLocationAreaMeters": areaError, }) }) diff --git a/static/input.css b/static/input.css index 3ab5028..dfa9219 100644 --- a/static/input.css +++ b/static/input.css @@ -27,7 +27,7 @@ --secondary-color: var(--main-light-color); --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/interlocked-hexagons.svg'); --interlocked-hexagons-background-repeat: repeat; - --interlocked-hexagons-background-size: 10vh; + --interlocked-hexagons-background-size: 10vw; --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/squares-and-triangles.svg'); --squares-and-triangles-background-repeat: repeat; } @@ -43,7 +43,7 @@ --secondary-color: var(--main-medium-color); --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/interlocked-hexagons.svg'); --interlocked-hexagons-background-repeat: repeat; - --interlocked-hexagons-background-size: 10vh; + --interlocked-hexagons-background-size: 10vw; --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/squares-and-triangles.svg'); --squares-and-triangles-background-repeat: repeat; } @@ -124,21 +124,13 @@ background-size: 10vw; } -body:has(.lg-container:not([class~="lg-inline"])) .desktop-sidebar-custom { - display: none !important; -} - .mobile-topbar-custom { width: 90vw; - height: 8%; - background-size: 16vh; + height: 10vh; + background-size: 20vh; margin-left: 5vw; } -body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { - display: none !important; -} - .logo-custom { width: 3.5vw; height: 20vw; @@ -235,32 +227,12 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { width: 90vw; } -.w-p60 { - width: 60%; -} - -.w-p80 { - width: 80%; -} - -.w-p100 { - width: 100%; -} - -.w-vmax4 { - width: 4vmax; -} - -.h-vh40 { - height: 40vh; -} - .h-vh90 { height: 90vh; } -.h-vmax4 { - height: 4vmax; +.w-p80 { + width: 80%; } .mt-vmin0-8 { @@ -308,10 +280,6 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { padding-right: 1.2vmin; } -.p-vmin0-8 { - padding: 0.8vmin; -} - .p-vmin2-4 { padding: 2.4vmin; } @@ -322,18 +290,10 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { .lg-backdrop { background-color: var(--background-light-color); - opacity: 0.8 !important; -} - -.lg-container:not([class~="lg-inline"]) .lg-outer { - width: 90%; - height: 90%; - margin: 5vh 5vw; } .lg-thumb-outer { background-color: var(--background-light-color) !important; - opacity: 0.8 !important; } .lg-prev { @@ -354,19 +314,6 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { height: 1vmax; } -.lg-container:not([class~="lg-inline"]) .lg-counter { - font-size: 2vmax; - height: 2vmax; -} - -.lg-content { - top: 3vmax !important; -} - -.lg-container:not([class~="lg-inline"]) .lg-content { - top: 4vmax !important; -} - .lg-toolbar .lg-icon { padding: 0 0.7vmax; font-size: 1.5vmax !important; @@ -375,11 +322,6 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { color: var(--main-dark-color); } -.lg-container:not([class~="lg-inline"]) .lg-toolbar .lg-icon { - font-size: 3vmax !important; - height: 3vmax; -} - .lg-toolbar .lg-icon:hover { color: var(--main-medium-color); } @@ -465,16 +407,16 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { } .nav-icon-custom { - font-size: 5vh !important; + font-size: 6vh !important; -webkit-text-stroke: 0.1vh var(--sidebar-stroke-color); - width: 8vh; - height: 8vh; + width: 10vh; + height: 10vh; align-content: center; text-align: center; } .nav-icon-custom:hover { - font-size: 7vh; + font-size: 8vh; } .bg-pattern-body { diff --git a/static/output.css b/static/output.css index 1517e8d..2ba01ad 100644 --- a/static/output.css +++ b/static/output.css @@ -12,6 +12,8 @@ --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --spacing: 0.25rem; + --text-4xl: 2.25rem; + --text-4xl--line-height: calc(2.5 / 2.25); --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-extrabold: 800; @@ -181,9 +183,6 @@ .relative { position: relative; } - .sticky { - position: sticky; - } .z-0 { z-index: 0; } @@ -223,6 +222,9 @@ .my-auto { margin-block: auto; } + .mt-2 { + margin-top: calc(var(--spacing) * 2); + } .mt-auto { margin-top: auto; } @@ -232,6 +234,9 @@ .mr-auto { margin-right: auto; } + .mb-4 { + margin-bottom: calc(var(--spacing) * 4); + } .mb-auto { margin-bottom: auto; } @@ -244,8 +249,11 @@ .flex { display: flex; } - .h-\[92vh\] { - height: 92vh; + .h-4\/12 { + height: calc(4/12 * 100%); + } + .h-16 { + height: calc(var(--spacing) * 16); } .h-auto { height: auto; @@ -253,8 +261,17 @@ .h-screen { height: 100vh; } - .max-h-\[80\%\] { - max-height: 80%; + .min-h-16 { + min-height: calc(var(--spacing) * 16); + } + .w-6\/12 { + width: calc(6/12 * 100%); + } + .w-10\/12 { + width: calc(10/12 * 100%); + } + .w-16 { + width: calc(var(--spacing) * 16); } .max-w-full { max-width: 100%; @@ -268,9 +285,6 @@ .flex-5 { flex: 5; } - .flex-none { - flex: none; - } .flex-grow { flex-grow: 1; } @@ -380,6 +394,10 @@ .font-spectral { font-family: var(--font-spectral); } + .text-4xl { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); @@ -437,7 +455,7 @@ --secondary-color: var(--main-light-color); --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/interlocked-hexagons.svg'); --interlocked-hexagons-background-repeat: repeat; - --interlocked-hexagons-background-size: 10vh; + --interlocked-hexagons-background-size: 10vw; --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/squares-and-triangles.svg'); --squares-and-triangles-background-repeat: repeat; } @@ -452,7 +470,7 @@ --secondary-color: var(--main-medium-color); --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/interlocked-hexagons.svg'); --interlocked-hexagons-background-repeat: repeat; - --interlocked-hexagons-background-size: 10vh; + --interlocked-hexagons-background-size: 10vw; --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/squares-and-triangles.svg'); --squares-and-triangles-background-repeat: repeat; } @@ -517,18 +535,12 @@ width: 5vw; background-size: 10vw; } -body:has(.lg-container:not([class~="lg-inline"])) .desktop-sidebar-custom { - display: none !important; -} .mobile-topbar-custom { width: 90vw; - height: 8%; - background-size: 16vh; + height: 10vh; + background-size: 20vh; margin-left: 5vw; } -body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { - display: none !important; -} .logo-custom { width: 3.5vw; height: 20vw; @@ -602,26 +614,11 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { .w-vw90 { width: 90vw; } -.w-p60 { - width: 60%; -} -.w-p80 { - width: 80%; -} -.w-p100 { - width: 100%; -} -.w-vmax4 { - width: 4vmax; -} -.h-vh40 { - height: 40vh; -} .h-vh90 { height: 90vh; } -.h-vmax4 { - height: 4vmax; +.w-p80 { + width: 80%; } .mt-vmin0-8 { margin-top: 0.8vmin; @@ -657,9 +654,6 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { .pr-vmin1-2 { padding-right: 1.2vmin; } -.p-vmin0-8 { - padding: 0.8vmin; -} .p-vmin2-4 { padding: 2.4vmin; } @@ -668,16 +662,9 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { } .lg-backdrop { background-color: var(--background-light-color); - opacity: 0.8 !important; -} -.lg-container:not([class~="lg-inline"]) .lg-outer { - width: 90%; - height: 90%; - margin: 5vh 5vw; } .lg-thumb-outer { background-color: var(--background-light-color) !important; - opacity: 0.8 !important; } .lg-prev { background-color: var(--background-light-color); @@ -694,16 +681,6 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { padding-top: 0; height: 1vmax; } -.lg-container:not([class~="lg-inline"]) .lg-counter { - font-size: 2vmax; - height: 2vmax; -} -.lg-content { - top: 3vmax !important; -} -.lg-container:not([class~="lg-inline"]) .lg-content { - top: 4vmax !important; -} .lg-toolbar .lg-icon { padding: 0 0.7vmax; font-size: 1.5vmax !important; @@ -711,10 +688,6 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { width: auto; color: var(--main-dark-color); } -.lg-container:not([class~="lg-inline"]) .lg-toolbar .lg-icon { - font-size: 3vmax !important; - height: 3vmax; -} .lg-toolbar .lg-icon:hover { color: var(--main-medium-color); } @@ -781,15 +754,15 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom { display: none; } .nav-icon-custom { - font-size: 5vh !important; + font-size: 6vh !important; -webkit-text-stroke: 0.1vh var(--sidebar-stroke-color); - width: 8vh; - height: 8vh; + width: 10vh; + height: 10vh; align-content: center; text-align: center; } .nav-icon-custom:hover { - font-size: 7vh; + font-size: 8vh; } .bg-pattern-body { background-size: 10vh; diff --git a/views/index.html b/views/index.html index ce80db6..cff3826 100644 --- a/views/index.html +++ b/views/index.html @@ -9,42 +9,9 @@ <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 href="/output.css" rel="stylesheet"> - <style> - .menu-outer-body { - border-radius: 10%; - width: 60vw; - height: 40vh; - } - - .menu-inner-body { - width: 85%; - } - - @media (max-aspect-ratio: 1.2/1) { - .menu-outer-body { - border-radius: 5%; - } - - .menu-inner-body { - width: 92.5%; - } - } - - @media (max-aspect-ratio: 0.8/1) { - .menu-outer-body { - width: 100vw; - height: 80vh; - border-radius: 0; - } - - .menu-inner-body { - width: 100%; - } - } - </style> </head> -<body data-theme="night" class="font-spectral text-main-dark text-vmax1-5 overflow-hidden bg-interlocked-hexagons h-screen flex flex-col"> +<body data-theme="night" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-col"> <div class="absolute star z-0">*</div> <div class="absolute star z-0">*</div> @@ -90,22 +57,22 @@ switchTheme(savedTheme); </script> - <div class="menu-outer-body p-4 z-1 bg-background-dark flex flex-col mx-auto my-auto opacity-70"> - <p class="font-patua mx-auto text-vmax2-5 mt-vmin0-8 mb-vmin1-6">saya.today</p> - <div class="menu-inner-body grow bg-background-light flex flex-col mx-auto mb-vmin1-6 overflow-y-auto opacity-100"> + <div class="p-4 w-6/12 h-4/12 z-1 rounded-4xl bg-background-dark flex flex-col mx-auto my-auto opacity-70"> + <p class="font-patua mx-auto text-4xl mt-2 mb-4">saya.today</p> + <div class="w-10/12 grow bg-background-light flex flex-col mx-auto mb-4 overflow-y-auto opacity-100"> {{- range .BlogPages }} - <div class="m-2 flex flex-row justify-center justify-items-center gap-4"> - <img onclick="location.href='/blog/{{ .Link }}';" style="flex-grow: 0;" class="flex-1 cursor-pointer object-cover rounded-4xl select-none w-vmax4 h-vmax4" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp"> + <div class="m-2 min-h-16 flex flex-row justify-center justify-items-center gap-4"> + <img style="flex-grow: 0;" class="flex-1 object-cover w-16 h-16 rounded-4xl select-none" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp"> <div class="flex-5 justify-self-center flex-col border-r-1 border-dashed border-opacity-50 border-main-medium"> <a href="/blog/{{ .Link }}" class="block font-extrabold">{{ .Title }}</a> - <a href="/blog/{{ .Link }}" class="block italic text-vmax1 text-secondary">{{ .ActionDate }}</a> + <a href="/blog/{{ .Link }}" class="block italic text-secondary">{{ .ActionDate }}</a> <p>{{ .ShortDescription }}</p> </div> <div class="flex-3 justify-self-center flex flex-col text-right"> - <p class="grow text-vmax1"> + <p class="grow"> Тэги: {{ .Tags }} </p> - <p class="italic text-secondary text-vmax1"> + <p class="italic text-secondary"> {{ .PublishedTime }} </p> </div> diff --git a/views/layouts/blog-page.html b/views/layouts/blog-page.html index 427f33e..6ee7d85 100644 --- a/views/layouts/blog-page.html +++ b/views/layouts/blog-page.html @@ -8,23 +8,13 @@ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lightgallery.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lg-zoom.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lg-thumbnail.min.css"> -{{- if .MapLocationX }} - <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.css"> -{{- end }} <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 href="/output.css" rel="stylesheet"> - - <style> - .map-container .leaflet-container { - width: 100% !important; - height: 100% !important; - } - </style> </head> -<body data-theme="night" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex"> +<body data-theme="olive" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons bg-repeat bg-pattern-body h-screen flex"> <script> function switchTheme(theme) { @@ -40,11 +30,11 @@ document.body.setAttribute('data-theme', theme); } - const savedTheme = localStorage.getItem('theme') || 'night'; + const savedTheme = localStorage.getItem('theme') || 'olive'; switchTheme(savedTheme); </script> - <div class="desktop-sidebar-custom sticky bg-squares-and-triangles bg-repeat flex-col items-center shadow-2xl z-20 h-screen desktop"> + <div class="desktop-sidebar-custom fixed bg-squares-and-triangles bg-repeat flex-col items-center shadow-2xl z-20 h-screen desktop"> <div class="logo-custom text-sidebar font-patua font-extrabold text-center relative z-20"> saya.today </div> @@ -56,7 +46,7 @@ </div> </div> - <div class="bg-background-dark z-10 h-screen desktop"> + <div class="bg-background-dark z-10 h-screen desktop" style="padding-left: 5vw;"> <div class="border-left-custom bg-background-dark"></div> <div class="content-square flex flex-col bg-background-dark relative mt-vmin1-6 mx-vmin1-6"> @@ -70,11 +60,6 @@ <div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-vmin2-4"> {{ .ParsedMarkdownDesktop }} - {{- if .MapLocationX }} - <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto"> - <div id="location-map-desktop" class="relative p-vmin0-8 flex-none ml-auto mr-auto w-p60 h-vh40"></div> - <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto"> - {{- end }} </div> <div class="flex flex-row mt-vmin0-8 mb-vmin0-4"> @@ -104,7 +89,7 @@ </div> </div> - <div class="bg-background-dark flex-row z-10 w-vw90 h-[92vh] mobile" style="margin-left: 5vw; margin-top: 8vh;"> + <div class="bg-background-dark flex-row z-10 w-vw90 h-vh90 mobile" style="margin-left: 5vw; margin-top: 10vh;"> <div class="border-left-custom bg-background-dark"></div> <div class="content-square flex flex-col bg-background-dark relative mt-vmin1-6 mx-vmin1-6"> @@ -116,13 +101,8 @@ </div> <hr class="border-t-4 border-dotted border-main-dark mb-vmin0-8"> - <div class="bg-background-light flex flex-col overflow-y-auto inset-shadow p-vmin2-4 max-h-[80%]"> + <div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-vmin2-4"> {{ .ParsedMarkdownMobile }} - {{- if .MapLocationX }} - <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto"> - <div id="location-map-mobile" class="relative p-vmin0-8 flex-none ml-auto mr-auto w-p100 h-vh40"></div> - <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto"> - {{- end }} </div> <div class="flex flex-row mt-vmin0-8 mb-vmin0-4"> @@ -143,52 +123,6 @@ <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> -{{- if .MapLocationX }} - <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script> - - <script> - function initLocationMap(id, x, y, relativeErrorMeters = 0) { - var map = L.map(id).setView([x, y], 13); - - L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { - maxZoom: 19, - attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' - }).addTo(map); - - if (relativeErrorMeters != 0) { - var circle = L.circle([x, y], { - color: '#8a9d8a', - fillColor: '#8a9d8a', - fillOpacity: 0.15, - radius: relativeErrorMeters - }).addTo(map); - } - - var marker = L.marker([x, y]).addTo(map); - } - - document.addEventListener('DOMContentLoaded', () => {initLocationMap( - 'location-map-desktop', - {{ .MapLocationX }}, - {{ .MapLocationY }}, - {{ .MapLocationAreaMeters }} - )}); - - document.addEventListener('DOMContentLoaded', () => {initLocationMap( - 'location-map-mobile', - {{ .MapLocationX }}, - {{ .MapLocationY }}, - {{ .MapLocationAreaMeters }} - )}); - - window.addEventListener('resize', function() { - setTimeout(() => { - if (window.location-map-desktop) window.location-map-desktop.invalidateSize(); - if (window.location-map-mobile) window.location-map-mobile.invalidateSize(); - }, 100); - }); - </script> -{{- end }} </body> </html> |