From d3ffefbd3d9de2378b564e4c6f965c03a5a06113 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Wed, 15 Oct 2025 23:23:27 +0700 Subject: feat: adapt layout for phone screens (especially small ones) --- internal/router/api-v1-general-page-body.go | 2 + locale/localization.en.yaml | 3 ++ locale/localization.go | 6 +++ locale/localization.ru.yaml | 3 ++ static/input.css | 73 ++++++++++++----------------- views/layouts/general-page.html | 25 +++++----- views/pages/blog-catalogue.html | 16 +++---- views/pages/blog-page.html | 6 ++- views/pages/global-map.html | 18 +++---- views/pages/home-page.html | 8 ++-- views/partials/general-page-body.html | 2 +- views/partials/general-page-header.html | 2 +- 12 files changed, 85 insertions(+), 79 deletions(-) diff --git a/internal/router/api-v1-general-page-body.go b/internal/router/api-v1-general-page-body.go index b2fa268..c1a4a9f 100644 --- a/internal/router/api-v1-general-page-body.go +++ b/internal/router/api-v1-general-page-body.go @@ -136,6 +136,8 @@ func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string, values["MapLocationAreaMeters"] = areaError values["Title"] = metadata.Title values["ParsedMarkdown"] = template.HTML(parsedMarkdown) + values["PublishedDate"] = metadata.PublishedTime.Format("2006-01-02 15:04:05 -07:00") + values["ActionDate"] = metadata.ActionDate additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html") diff --git a/locale/localization.en.yaml b/locale/localization.en.yaml index 1b3654b..e93ab00 100644 --- a/locale/localization.en.yaml +++ b/locale/localization.en.yaml @@ -22,3 +22,6 @@ HomePage: Hymn2: "We've been expecting you!" Hymn3: 'You bring such joy in Sayasite!' Hymn4: 'No matter where you roam, know our love is true!~' +Metadata: + Published: 'Published' + Action: 'Took place on' diff --git a/locale/localization.go b/locale/localization.go index 088783f..7dbb554 100644 --- a/locale/localization.go +++ b/locale/localization.go @@ -12,6 +12,7 @@ type LocaleConfig struct { BlogSearch BlogSearchConfig `yaml:"BlogSearch" json:"BlogSearch"` GlobalMap GlobalMapConfig `yaml:"GlobalMap" json:"GlobalMap"` HomePage HomePageConfig `yaml:"HomePage" json:"HomePage"` + Metadata MetadataConfig `yaml:"Metadata" json:"Metadata"` } type BlogSearchConfig struct { @@ -43,6 +44,11 @@ type HomePageConfig struct { Hymn4 string `yaml:"Hymn4" json:"Hymn4"` } +type MetadataConfig struct { + Action string `yaml:"Action" json:"Action"` + Published string `yaml:"Published" json:"Published"` +} + func LoadConfig(path string, config *LocaleConfig) error { fileBytes, err := os.ReadFile(path) if err != nil { diff --git a/locale/localization.ru.yaml b/locale/localization.ru.yaml index 9d7084f..a1a9a6c 100644 --- a/locale/localization.ru.yaml +++ b/locale/localization.ru.yaml @@ -22,3 +22,6 @@ HomePage: Hymn2: 'Мы Вас столько ждали!' Hymn3: 'Столько радости от Вас на Саясайте!' Hymn4: 'Где бы Вы не были, знайте, -- наша любовь крепка!' +Metadata: + Published: 'Опубликовано' + Action: 'Время действия' diff --git a/static/input.css b/static/input.css index 668ca7a..51c3c30 100644 --- a/static/input.css +++ b/static/input.css @@ -3,15 +3,16 @@ @theme { --font-spectral: Spectral, serif; --font-patua: "Patua One", cursive; + --breakpoint-xs: 32rem; } html { - font-size: 8px; + font-size: 12px; } @media screen and (width >= 640px) { html { - font-size: 12px; + font-size: 14px; } } @@ -494,42 +495,42 @@ body[data-theme~="ram"] .leaflet-tile { filter: invert(1) hue-rotate(190deg) contrast(1.1) brightness(1.2) !important; } -@media (min-aspect-ratio: 1.1/1) { - .ar-gt-1\.1\:mr-6 { +@media (min-aspect-ratio: 0.8/1) { + .ar-gt-0\.8\:mr-6 { margin-right: 1.5rem; } - .ar-gt-1\.1\:w-fit { + .ar-gt-0\.8\:w-fit { width: fit-content; } - .ar-gt-1\.1\:w-\[100dvh\] { + .ar-gt-0\.8\:w-\[100dvh\] { width: 100dvh; flex-basis: 100dvh; } - .ar-gt-1\.1\:min-w-fit { + .ar-gt-0\.8\:min-w-fit { min-width: fit-content; } - .ar-gt-1\.1\:min-w-\[10dvh\] { + .ar-gt-0\.8\:min-w-\[10dvh\] { min-width: 10dvh; } - .ar-gt-1\.1\:max-w-\[20dvh\] { + .ar-gt-0\.8\:max-w-\[20dvh\] { max-width: 20dvh; } - .ar-gt-1\.1\:max-w-\[100dvh\] { + .ar-gt-0\.8\:max-w-\[100dvh\] { max-width: 100dvh; } - .ar-gt-1\.1\:items-center { + .ar-gt-0\.8\:items-center { align-items: center; } } -@media (max-aspect-ratio: 1.1/1) { +@media (max-aspect-ratio: 0.8/1) { .bg-sidebar { background-size: calc(var(--squares-and-triangles-background-width-coef) * 1.6vh) calc(var(--squares-and-triangles-background-height-coef) * 1.6vh); } @@ -546,71 +547,67 @@ body[data-theme~="ram"] .leaflet-tile { background-size: 10dvh; } - .ar-lt-1\.1\:grid { + .ar-lt-0\.8\:grid { display: grid; } - .ar-lt-1\.1\:flex-col { + .ar-lt-0\.8\:flex-col { flex-direction: column; } - .ar-lt-1\.1\:flex-row { + .ar-lt-0\.8\:flex-row { flex-direction: row; } - .ar-lt-1\.1\:h-\[8dvh\] { + .ar-lt-0\.8\:h-\[8dvh\] { height: 8dvh; } - .ar-lt-1\.1\:h-\[10dvh\] { + .ar-lt-0\.8\:h-\[10dvh\] { height: 10dvh; } - .ar-lt-1\.1\:h-\[30dvh\] { + .ar-lt-0\.8\:h-\[30dvh\] { height: 30dvh; } - .ar-lt-1\.1\:h-\[90dvh\] { + .ar-lt-0\.8\:h-\[90dvh\] { height: 90dvh; } - .ar-lt-1\.1\:w-\[8dvh\] { + .ar-lt-0\.8\:w-\[8dvh\] { width: 8dvh; } - .ar-lt-1\.1\:w-\[80\%\] { + .ar-lt-0\.8\:w-\[80\%\] { width: 80%; } - .ar-lt-1\.1\:w-\[90dvw\] { + .ar-lt-0\.8\:w-\[90dvw\] { width: 90dvw; } - .ar-lt-1\.1\:w-screen { + .ar-lt-0\.8\:w-screen { width: 100dvw; } - .ar-lt-1\.1\:max-h-\[25\%\] { - max-height: 25%; + .ar-lt-0\.8\:max-h-\[30\%\] { + max-height: 30%; } - .ar-lt-1\.1\:max-h-\[80\%\] { + .ar-lt-0\.8\:max-h-\[80\%\] { max-height: 80%; } - .ar-lt-1\.1\:max-h-\[92dvh\] { + .ar-lt-0\.8\:max-h-\[92dvh\] { max-height: 92dvh; } - .ar-lt-1\.1\:text-\[5dvh\] { + .ar-lt-0\.8\:text-\[5dvh\] { font-size: 5dvh; } - .ar-lt-1\.1\:ml-\[5dvw\] { - margin-left: 5dvw; - } - - .ar-lt-1\.1\:hidden { + .ar-lt-0\.8\:hidden { display: none; } } @@ -631,16 +628,6 @@ body[data-theme~="ram"] .leaflet-tile { } } -@media (max-aspect-ratio: 0.4/1) { - .ar-lt-0\.4\:w-\[100dvw\] { - width: 100dvw; - } - - .ar-lt-0\.4\:ml-0 { - margin-left: 0; - } -} - .home-page-heart { position: absolute; color: var(--color-pink-700); diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index 435ea66..5d84649 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -14,7 +14,7 @@ - + -