From 9c49207891dcd8b9b4249a5377750b4a0ec2fcc1 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sun, 3 May 2026 15:44:14 +0700 Subject: feat: overhaul sidebar feat: attach desktop content to sidebar, leaving only right space open feat: update sidebar info on home page --- locale/localization.en.yaml | 4 +- locale/localization.go | 2 + locale/localization.ru.yaml | 4 +- static/favicon-dark.svg | 7 +- static/favicon-light.svg | 7 +- static/input.css | 26 +++++ views/layouts/general-page.html | 212 ++++++++++++++++++++++++---------------- views/pages/global-map.html | 179 +++++++++++++++++++++------------ views/pages/home-page.html | 20 ++-- 9 files changed, 292 insertions(+), 169 deletions(-) diff --git a/locale/localization.en.yaml b/locale/localization.en.yaml index 10bcb94..9571aca 100644 --- a/locale/localization.en.yaml +++ b/locale/localization.en.yaml @@ -16,10 +16,12 @@ HomePage: Contacts: "Contacts" DidYouKnowThat: "Did you know, that..." SidebarDescription: "Describing the Sidebar" + BackDescription: "This button will lead back to higher page (like Home => Language Pick, Blog Search => Home)" HomePageDescription: "Home Page -- where we are right now!" BlogSearchDescription: "Blog Search. You can find my travel notes there and, maybe, something else!" MarkerMapDescription: "Map with markers of my travel notes -- a convinient way to find an interesting region and find related posts!" - ThemeSwitchDescription: "Theme Palette lets you change the theme of the site -- there are 2 dark and 2 bright themes currently!" + ThemeSwitchDescription: "Theme Palette lets you change the theme of the site -- there are 2 dark and 3 bright themes currently!" + AccountDescription: "This is where you can subscribe to any blog update via E-mail!" Hymn1: "We welcome you to Sayasite!" Hymn2: "We've been expecting you!" Hymn3: "You bring such joy in Sayasite!" diff --git a/locale/localization.go b/locale/localization.go index 7080355..87b8ea1 100644 --- a/locale/localization.go +++ b/locale/localization.go @@ -39,10 +39,12 @@ type HomePageConfig struct { Contacts string `yaml:"Contacts" json:"Contacts"` DidYouKnowThat string `yaml:"DidYouKnowThat" json:"DidYouKnowThat"` SidebarDescription string `yaml:"SidebarDescription" json:"SidebarDescription"` + BackDescription string `yaml:"BackDescription" json:"BackDescription"` HomePageDescription string `yaml:"HomePageDescription" json:"HomePageDescription"` BlogSearchDescription string `yaml:"BlogSearchDescription" json:"BlogSearchDescription"` MarkerMapDescription string `yaml:"MarkerMapDescription" json:"MarkerMapDescription"` ThemeSwitchDescription string `yaml:"ThemeSwitchDescription" json:"ThemeSwitchDescription"` + AccountDescription string `yaml:"AccountDescription" json:"AccountDescription"` Hymn1 string `yaml:"Hymn1" json:"Hymn1"` Hymn2 string `yaml:"Hymn2" json:"Hymn2"` Hymn3 string `yaml:"Hymn3" json:"Hymn3"` diff --git a/locale/localization.ru.yaml b/locale/localization.ru.yaml index 17e1e41..1818998 100644 --- a/locale/localization.ru.yaml +++ b/locale/localization.ru.yaml @@ -16,10 +16,12 @@ HomePage: Contacts: "Контакты" DidYouKnowThat: "А вы знали, что..." SidebarDescription: "Поясняем за сайдбар" + BackDescription: "Эта кнопка позволяет идти на страницу вверх (т.е. Домашняя страница => Выбор языка, Поиск по блогу => Домашняя страница)" HomePageDescription: "Домашняя страница -- где мы сейчас и находимся!" BlogSearchDescription: "Поиск по блогу. Там размещены мои путевые заметки и, может, что-то ещё!" MarkerMapDescription: "Карта с маркерами моих путевых заметок, -- удобный способ найти интересный регион и перейти на заинтересовавшие посты!" - ThemeSwitchDescription: "Позволяет поменять тему сайта -- есть 2 светлые и 2 тёмные темы!" + ThemeSwitchDescription: "Позволяет поменять тему сайта -- есть 3 светлые и 2 тёмные темы!" + AccountDescription: "Здесь можно подписаться на обновления в блоге, используя электронную почту!" Hymn1: "Приветствуем Вас на Саясайте!" Hymn2: "Мы Вас столько ждали!" Hymn3: "Столько радости от Вас на Саясайте!" diff --git a/static/favicon-dark.svg b/static/favicon-dark.svg index f09a1bf..a7820cb 100644 --- a/static/favicon-dark.svg +++ b/static/favicon-dark.svg @@ -6,11 +6,6 @@ - - - - - - + diff --git a/static/favicon-light.svg b/static/favicon-light.svg index e7ed6eb..078f874 100644 --- a/static/favicon-light.svg +++ b/static/favicon-light.svg @@ -6,11 +6,6 @@ - - - - - - + diff --git a/static/input.css b/static/input.css index 5d8de42..04d68b7 100644 --- a/static/input.css +++ b/static/input.css @@ -5,9 +5,11 @@ --font-m-plus: "M PLUS Rounded 1c", sans-serif; --font-gentium: "Gentium Plus", serif; --breakpoint-xs: 32rem; + --color-main: var(--color-main); --color-main-hard: var(--color-main-hard); --color-main-medium: var(--color-main-medium); --color-main-soft: var(--color-main-soft); + --color-background: var(--color-background); --color-background-dark: var(--color-background-dark); --color-background-medium: var(--color-background-medium); --color-background-light: var(--color-background-light); @@ -20,6 +22,20 @@ --color-main-dark-hard: var(--color-main-dark-hard); --color-main-dark-medium: var(--color-main-dark-medium); --color-main-dark-soft: var(--color-main-dark-soft); + --shadow-elevation-flat: 0px 1px 1px 0px rgba(0, 0, 0, 0.2); + --shadow-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); + --shadow-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + --shadow-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + --shadow-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); + --shadow-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); + --shadow-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); + --shadow-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); + --shadow-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12); + --shadow-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); + --shadow-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12); + --shadow-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12); + --shadow-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12); + --shadow-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); } html { @@ -102,9 +118,11 @@ body { --color-main-light-soft: #ffffdd; --color-main-light-medium: var(--color-main-light-soft); --color-main-light-hard: #fffff0; + --color-main: var(--color-main-dark-hard); --color-main-hard: var(--color-main-dark-hard); --color-main-medium: var(--color-main-dark-medium); --color-main-soft: var(--color-main-dark-soft); + --color-background: var(--color-main-light-hard); --color-background-dark: var(--color-main-light-soft); --color-background-medium: var(--color-main-light-medium); --color-background-light: var(--color-main-light-hard); @@ -132,9 +150,11 @@ body { --color-main-light-soft: #f5eee2; --color-main-light-medium: var(--color-main-light-soft); --color-main-light-hard: #fff9ef; + --color-main: var(--color-main-dark-hard); --color-main-hard: var(--color-main-dark-hard); --color-main-medium: var(--color-main-dark-medium); --color-main-soft: var(--color-main-dark-soft); + --color-background: var(--color-main-light-hard); --color-background-dark: var(--color-main-light-soft); --color-background-medium: var(--color-main-light-medium); --color-background-light: var(--color-main-light-hard); @@ -164,9 +184,11 @@ body { --color-main-dark-hard: #13131b; --color-main-dark-medium: var(--color-main-dark-hard); --color-main-dark-soft: #222230; + --color-main: var(--color-main-light-hard); --color-main-hard: var(--color-main-light-hard); --color-main-medium: var(--color-main-light-medium); --color-main-soft: var(--color-main-light-soft); + --color-background: var(--color-main-dark-soft); --color-background-dark: var(--color-main-dark-hard); --color-background-medium: var(--color-main-dark-medium); --color-background-light: var(--color-main-dark-soft); @@ -231,9 +253,11 @@ body { --color-main-dark-hard: #413b34; --color-main-dark-medium: #62584f; --color-main-dark-soft: #6d6258; + --color-main: var(--color-main-light-hard); --color-main-hard: var(--color-main-light-hard); --color-main-medium: var(--color-main-light-medium); --color-main-soft: var(--color-main-light-soft); + --color-background: var(--color-main-dark-soft); --color-background-dark: var(--color-main-dark-hard); --color-background-medium: var(--color-main-dark-medium); --color-background-light: var(--color-main-dark-soft); @@ -261,9 +285,11 @@ body { --color-main-light-hard: #e3e6ff; --color-main-light-medium: #d1d6ff; --color-main-light-soft: #c3caff; + --color-main: var(--color-main-dark-hard); --color-main-hard: var(--color-main-dark-hard); --color-main-medium: var(--color-main-dark-medium); --color-main-soft: var(--color-main-dark-soft); + --color-background: var(--color-main-light-hard); --color-background-dark: var(--color-main-light-soft); --color-background-medium: var(--color-main-light-medium); --color-background-light: var(--color-main-light-hard); diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index 0bd3454..b435402 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -64,8 +64,58 @@ + + + @@ -80,7 +130,10 @@ newPathname = newPathname.replace(/\/[^\/]+$/, ""); path = path.slice(0, -3); } - const newPath = toAppend ? `${newPathname}${path}` : `${path}`; + newPath = toAppend ? `${newPathname}${path}` : `${path}`; + if (newPath.length == 0) { + newPath = "/"; + } history.pushState( {}, @@ -286,83 +339,76 @@ Intl.DateTimeFormat().resolvedOptions().timeZone; -
- -
-
+
@@ -574,7 +620,7 @@ - -- cgit v1.3.1+13 From 18cae75392970179701f00b3356a82f40fc0989f Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sun, 3 May 2026 15:54:01 +0700 Subject: feat: make favicon for dark theme lighter --- static/favicon-dark.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/favicon-dark.svg b/static/favicon-dark.svg index a7820cb..65e31d5 100644 --- a/static/favicon-dark.svg +++ b/static/favicon-dark.svg @@ -4,7 +4,7 @@ - + -- cgit v1.3.1+13 From bc52b4ea0efca1a444310f1750bff0542abf8102 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sun, 3 May 2026 16:20:00 +0700 Subject: feat: accent button active property refactor: combine sidebar buttons' properties in accent-button class --- static/input.css | 38 ++++++++++++++++++++++++++++++++++++++ views/layouts/general-page.html | 38 ++++++++++++++++++++------------------ views/pages/global-map.html | 24 ++++++------------------ 3 files changed, 64 insertions(+), 36 deletions(-) diff --git a/static/input.css b/static/input.css index 04d68b7..b9fb166 100644 --- a/static/input.css +++ b/static/input.css @@ -568,6 +568,44 @@ form.crossable.htmx-request input { --border-size: 0.2rem; } +.accent-button, +.accent-button.active:active { + --tw-duration: 1500ms; + --tw-ease: var(--ease-in-out); + --tw-gradient-from: color-mix(in oklab, var(--color-accent-light) 10%, transparent); + --tw-gradient-position: from 225deg in oklab; + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + --tw-gradient-to: color-mix(in oklab, var(--color-accent-light) 10%, transparent); + --tw-gradient-via: transparent; + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + background-image: conic-gradient(var(--tw-gradient-stops)); + transition-duration: 1500ms; + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--ease-in-out); +} + +.accent-button:hover, +.accent-button.active:active:hover { + cursor: pointer; + --tw-gradient-from: color-mix(in oklab, var(--color-accent-light) 50%, transparent); + --tw-gradient-to: color-mix(in oklab, var(--color-accent-light) 50%, transparent); +} + +.accent-button.active, +.accent-button:active { + --tw-gradient-from: color-mix(in oklab, var(--color-accent-dark) 30%, transparent); + --tw-gradient-position: from 45deg in oklab; + --tw-gradient-to: color-mix(in oklab, var(--color-accent-dark) 30%, transparent); + --tw-gradient-via: color-mix(in oklab, var(--color-accent-light) 50%, transparent); +} + +.accent-button.active:hover, +.accent-button:active:hover { + --tw-gradient-from: color-mix(in oklab, var(--color-accent-light) 70%, transparent); + --tw-gradient-to: color-mix(in oklab, var(--color-accent-light) 70%, transparent); + --tw-gradient-via: color-mix(in oklab, var(--color-accent-dark) 50%, transparent); +} + .custom-svg-marker { background: transparent; border: none; diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index b435402..848c786 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -346,9 +346,7 @@ class="flex flex-row w-full h-24 md:flex-col md:w-24 md:h-full bg-paper bg-background shadow-elevation-6 z-2 shrink-0" >
Date: Sun, 3 May 2026 16:39:33 +0700 Subject: feat: overhaul like button --- views/partials/blog-page-like-button.html | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/views/partials/blog-page-like-button.html b/views/partials/blog-page-like-button.html index d8238f4..54b2914 100644 --- a/views/partials/blog-page-like-button.html +++ b/views/partials/blog-page-like-button.html @@ -1,5 +1,28 @@ \ No newline at end of file + class="accent-button rounded-xl flex flex-row shrink-0 w-fit h-full mx-2 my-auto{{ if .Liked }} active{{ end }}"> + {{ if .Liked }} + + + Like Hand 1 Streamline Icon: https://streamlinehq.com + + + + + + + + +
{{ .LikedCount }}
+ {{ else }} + + + Like Hand Streamline Icon: https://streamlinehq.com + + + + + + +
{{ .LikedCount }}
+ {{ end }} + -- cgit v1.3.1+13 From d409b1938973e31a1bdfe903fed973f396709ca2 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sun, 3 May 2026 16:49:41 +0700 Subject: feat: replace fa icons on homepage with freehand feat: remove font-awesome embeds --- static/input.css | 8 -------- views/layouts/general-page.html | 12 ------------ views/pages/global-map.html | 12 ------------ views/pages/home-page.html | 24 +++++++++++++++++++++--- 4 files changed, 21 insertions(+), 35 deletions(-) diff --git a/static/input.css b/static/input.css index b9fb166..64d0588 100644 --- a/static/input.css +++ b/static/input.css @@ -72,14 +72,6 @@ html { background-size: --value([bg-size]), 128px; } -@utility faw-full { - --fa-width: 100%; -} - -@utility faw-* { - --fa-width: calc(--value(integer) * var(--spacing)); -} - body { scrollbar-width: thin; scrollbar-color: var(--color-background-light) var(--color-main-soft); diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index 848c786..3920bdb 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -22,18 +22,6 @@ rel="stylesheet" href="{{ .StaticStorageBaseUrl }}/fonts/fonts.css" /> - - - - - - {{ block "header" . }}{{ end }} +
@@ -32,17 +50,17 @@ bg-linear-to-r from-background-dark to-background-light">{{ .L.HomePage.Contacts }}

 - + Telegram: @EarlInisMona - + Discord: montferrat - + E-mail: saya.andy@posteo.com -- cgit v1.3.1+13 From 8243ad9ec7b50b0aaf402c91decf3c8093ecb77a Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sun, 3 May 2026 16:52:50 +0700 Subject: feat: rm unused classes from input.css --- static/input.css | 64 -------------------------------------------------------- 1 file changed, 64 deletions(-) diff --git a/static/input.css b/static/input.css index 64d0588..9114514 100644 --- a/static/input.css +++ b/static/input.css @@ -397,10 +397,6 @@ form.crossable.htmx-request input { border-style: inset; } -.border-outset { - border-style: outset; -} - .bg-sidebar { background-image: var(--squares-and-triangles-background); background-repeat: var(--squares-and-triangles-background-repeat); @@ -500,66 +496,6 @@ form.crossable.htmx-request input { border-radius: 50%; } -.themed-button::before { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient( - 135deg, - var(--color-main-light-hard), - var(--color-main-dark-hard) - ); - opacity: 0.2; - z-index: 10; - content: ""; -} - -.themed-button:active::before { - opacity: 0.4; -} - -.themed-button:hover:not(:active)::before { - opacity: 0; -} - -.themed-button { - border-top: var(--border-size) solid var(--color-main-light-hard); - border-left: var(--border-size) solid var(--color-main-light-hard); - border-bottom: var(--border-size) solid var(--color-main-dark-hard); - border-right: var(--border-size) solid var(--color-main-dark-hard); - position: relative; - --border-size: 0.5rem; -} - -.themed-button:active, -.themed-button.active { - border-top: var(--border-size) solid var(--color-main-dark-hard); - border-left: var(--border-size) solid var(--color-main-dark-hard); - border-bottom: var(--border-size) solid var(--color-main-light-hard); - border-right: var(--border-size) solid var(--color-main-light-hard); -} - -.themed-button:active > *, -.themed-button.active > * { - transform: translateY(calc(var(--border-size) / 2)); -} - -.themed-button.themed-button-sidebar { - --border-size: 0.25rem; - 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.9rem - ) - calc(var(--squares-and-triangles-background-height-coef) * 0.9rem); -} - -.themed-button.themed-button-like { - --border-size: 0.2rem; -} - .accent-button, .accent-button.active:active { --tw-duration: 1500ms; -- cgit v1.3.1+13 From f5b3e8cc3cd4e26c327b00970173f5449e790282 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sun, 3 May 2026 16:55:24 +0700 Subject: fix: always recalculate theme wheel size on opening --- views/layouts/general-page.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index 3920bdb..fb018e3 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -612,7 +612,6 @@ const themeWheel = document.getElementById("theme-wheel"); const themeButton = document.getElementById("sidebar-theme-button"); const themeIcons = document.querySelectorAll(".theme-icon"); - const themeWheelRadius = convertRemToPixels(6); themeIcons.forEach((icon) => { if (icon.getAttribute("data-theme") == savedTheme) { @@ -641,7 +640,7 @@ const clipPath = createSliceClipPath( startAngle, endAngle, - themeWheelRadius, + convertRemToPixels(6), ); icon.style.clipPath = clipPath; }); @@ -676,6 +675,7 @@ const buttonRect = themeButton.getBoundingClientRect(); const buttonCenterX = buttonRect.left + buttonRect.width / 2; const buttonCenterY = buttonRect.top + buttonRect.height / 2; + const themeWheelRadius = convertRemToPixels(6); const margin = 0; -- cgit v1.3.1+13