From 0ee10e3a590737884206963ae7824ad559201178 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Tue, 22 Jul 2025 18:36:53 +0300 Subject: feat: gallery rescale on changing resolution fix: gallery scaling on various aspect ratios refactor: use vmax instead of vh for scaling, vmin instead of vw feat: use saved theme on loading feat: use darker color for secondary text on lettuce theme fix: typos --- public/index.html | 274 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 160 insertions(+), 114 deletions(-) diff --git a/public/index.html b/public/index.html index c1a8fed..9e4dd3b 100644 --- a/public/index.html +++ b/public/index.html @@ -55,6 +55,7 @@ --background-light-color: #fffff0; --sidebar-text-color: var(--background-dark-color); --sidebar-stroke-color: var(--main-dark-color); + --secondary-color: var(--main-light-color); --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/interlocked-hexagons.svg'); --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/squares-and-triangles.svg'); --invert-colors-in-sidebar: false; @@ -68,6 +69,7 @@ --background-light-color: #fff9ef; --sidebar-text-color: var(--main-dark-color); --sidebar-stroke-color: var(--background-dark-color); + --secondary-color: var(--main-medium-color); --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/interlocked-hexagons.svg'); --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/squares-and-triangles.svg'); --invert-colors-in-sidebar: true; @@ -109,6 +111,10 @@ color: var(--background-light-color); } + .text-secondary { + color: var(--secondary-color); + } + .bg-main-dark { background-color: var(--main-dark-color); } @@ -144,6 +150,7 @@ -webkit-text-stroke: 0.1vw var(--sidebar-stroke-color); writing-mode: sideways-lr; text-orientation: mixed; + display: block; } .nav-icon-custom { @@ -175,11 +182,6 @@ background-size: 10vw; } - .content-tail-text { - font-size: 1.2vh; - line-height: 0.9; - } - .inset-shadow { box-shadow: inset 0vh 1vh 1vh -1vh rgba(75,81,58,0.5), inset 1vh 0vh 1vh -1vh rgba(75,81,58,0.5), @@ -211,10 +213,18 @@ letter-spacing: 0.03vw; } + .ls-vmin0-04 { + letter-spacing: 0.04vmin; + } + .timl-vh3 { text-indent: 3vh hanging; } + .timl-vmax2 { + text-indent: 2vmax hanging; + } + .text-vh1-2 { font-size: 1.2vh; } @@ -231,6 +241,22 @@ font-size: 3vh; } + .text-vmax0-8 { + font-size: 0.8vmax; + } + + .text-vmax1 { + font-size: 1vmax !important; + } + + .text-vmax1-5 { + font-size: 1.5vmax !important; + } + + .text-vmax2 { + font-size: 2vmax; + } + .w-vw90 { width: 90vw; } @@ -284,13 +310,15 @@ .lg-counter { color: var(--main-dark-color); font-family: 'Spectral'; - font-size: 1.5vh; + font-size: 1vmax; + padding-top: 0; + height: 1vmax; } .lg-toolbar .lg-icon { - font-size: 2vh !important; - padding: 1vh 1vh; - height: 2vh; + padding: 0 0.7vmax; + font-size: 1.5vmax !important; + height: 1.5vmax; width: auto; color: var(--main-dark-color); } @@ -300,7 +328,7 @@ } .lg-toolbar .lg-icon { - font-size: 2vh !important; + font-size: 1.5vmax !important; color: var(--main-dark-color); } @@ -308,6 +336,15 @@ color: var(--main-medium-color); } + .lg-sub-html { + padding: 0.7vmin 1.25vmin !important; + } + + .inline-gallery-container { + width: 80%; + height: 60vmin; + } + .light-gallery-captions { p { transform: translate3d(0, 0, 0px); @@ -352,6 +389,10 @@ display: flex; } + .inline-gallery-container { + width: 100%; + } + .desktop-sidebar-custom { width: 90%; margin-left: 5vw; @@ -360,10 +401,7 @@ } .logo-custom { - writing-mode: initial; - text-orientation: initial; - font-size: 6vh; - width: auto; + display: none; } .nav-icon-custom { @@ -392,12 +430,6 @@ } } - @media (max-aspect-ratio: 0.8/1) { - .logo-custom { - display: none; - } - } - @media (max-aspect-ratio: 0.4/1) { .desktop-sidebar-custom { width: 100%; @@ -426,43 +458,43 @@
- -

//

-

Демо-материал после демон-аэропорта

-

2025.07.21 20:34:44 UTC+3

+ +

//

+

Демо-материал после демон-аэропорта

+

2025.07.21 20:34:44 UTC+3

-

Ученик однажды попросил мудреца переименовать фотографические файлы формата JPG за 21 июля 2025 на своём телефоне, чтобы структура их имён была идентична. Ученик очень хотел поделиться своими двоякими впечатлениями от современных реалий российского авиатранспорта и хотел сначала загрузить свои фотографии в нужном формате. В ответ мудрец удалил их нахуй

-

Мудрец будет удалён к ебеням с телефона и оценён на 1 звезду.

-

В итоге, чтобы собрать материал под эту демо-страницу, я вспомнил про недавно купленную клавиатуру.

-

Это Apple Keyboard 1048 из 2003!

+

Ученик однажды попросил мудреца переименовать фотографические файлы формата JPG за 21 июля 2025 на своём телефоне, чтобы структура их имён была идентична. Ученик очень хотел поделиться своими двоякими впечатлениями от современных реалий российского авиатранспорта и хотел сначала загрузить свои фотографии в нужном формате. В ответ мудрец удалил их нахуй

+

Мудрец будет удалён к ебеням с телефона и оценён на 1 звезду.

+

В итоге, чтобы собрать материал под эту демо-страницу, я вспомнил про недавно купленную клавиатуру.

+

Это Apple Keyboard 1048 из 2003!

-
+
-

Мотив был такой -- мне нравится её внешний вид, эта курватура аля склона холма. Ну и USB, ничего не мешает подключить куда угодно. И цена таким на рынке -- 2 тыщи на рынке (~25$).

-

Купил -- понравилась и тактильность, хоть это и мембранная клава!

-

Но зачем я решил её почистить, ибо она была желтоватая и у неё слипались пробел и клавиша Mac. На выходе действительно она получилась белей, клавиши все нажимаются на ура... но идея опрыскать базу клавы перекисью была ошибкой. Теперь у неё работает только Enter. :(

-

Напоследок немного макросъёмки, ибо почему бы и нет:

+

Мотив был такой -- мне нравится её внешний вид, эта курватура аля склона холма. Ну и USB, ничего не мешает подключить куда угодно. И цена таким на рынке -- 2 тыщи на рынке (~25$).

+

Купил -- понравилась и тактильность, хоть это и мембранная клава!

+

Но затем я решил её почистить, ибо она была желтоватая и у неё слипались пробел и клавиша Mac. На выходе действительно она получилась белей, клавиши все нажимаются на ура... но идея опрыскать базу клавы перекисью была ошибкой. Теперь у неё работает только Enter. :(

+

Напоследок немного макросъёмки, ибо почему бы и нет:

-
+
-

+

Демо-материал после демон-аэропорта © 2025 by Saya Andy is licensed under CC BY-SA 4.0

- +
@@ -486,43 +518,43 @@
- -

//

-

Демо-материал после демон-аэропорта

-

2025.07.21 20:34:44 UTC+3

+ +

//

+

Демо-материал после демон-аэропорта

+

2025.07.21 20:34:44 UTC+3

-

Ученик однажды попросил мудреца переименовать фотографические файлы формата JPG за 21 июля 2025 на своём телефоне, чтобы структура их имён была идентична. Ученик очень хотел поделиться своими двоякими впечатлениями от современных реалий российского авиатранспорта и хотел сначала загрузить свои фотографии в нужном формате. В ответ мудрец удалил их нахуй

-

Мудрец будет удалён к ебеням с телефона и оценён на 1 звезду.

-

В итоге, чтобы собрать материал под эту демо-страницу, я вспомнил про недавно купленную клавиатуру.

-

Это Apple Keyboard 1048 из 2003!

+

Ученик однажды попросил мудреца переименовать фотографические файлы формата JPG за 21 июля 2025 на своём телефоне, чтобы структура их имён была идентична. Ученик очень хотел поделиться своими двоякими впечатлениями от современных реалий российского авиатранспорта и хотел сначала загрузить свои фотографии в нужном формате. В ответ мудрец удалил их нахуй

+

Мудрец будет удалён к ебеням с телефона и оценён на 1 звезду.

+

В итоге, чтобы собрать материал под эту демо-страницу, я вспомнил про недавно купленную клавиатуру.

+

Это Apple Keyboard 1048 из 2003!

-
+
-

Мотив был такой -- мне нравится её внешний вид, эта курватура аля склона холма. Ну и USB, ничего не мешает подключить куда угодно. И цена таким на рынке -- 2 тыщи на рынке (~25$).

-

Купил -- понравилась и тактильность, хоть это и мембранная клава!

-

Но зачем я решил её почистить, ибо она была желтоватая и у неё слипались пробел и клавиша Mac. На выходе действительно она получилась белей, клавиши все нажимаются на ура... но идея опрыскать базу клавы перекисью была ошибкой. Теперь у неё работает только Enter. :(

-

Напоследок немного макросъёмки, ибо почему бы и нет:

+

Мотив был такой -- мне нравится её внешний вид, эта курватура аля склона холма. Ну и USB, ничего не мешает подключить куда угодно. И цена таким на рынке -- 2 тыщи на рынке (~25$).

+

Купил -- понравилась и тактильность, хоть это и мембранная клава!

+

Но затем я решил её почистить, ибо она была желтоватая и у неё слипались пробел и клавиша Mac. На выходе действительно она получилась белей, клавиши все нажимаются на ура... но идея опрыскать базу клавы перекисью была ошибкой. Теперь у неё работает только Enter. :(

+

Напоследок немного макросъёмки, ибо почему бы и нет:

-
+
-

+

Демо-материал после демон-аэропорта © 2025 by Saya Andy is licensed under CC BY-SA 4.0

- +
@@ -539,24 +571,51 @@ document.body.setAttribute('data-theme', currentTheme == "olive" ? "lettuce" : "olive"); localStorage.setItem('theme', currentTheme == "olive" ? "lettuce" : "olive"); } + + function createLightGallery(className, elements) { + const $lgContainers = document.getElementsByClassName(className); + for (i = 0; i < $lgContainers.length; i++) { + const $lgContainer = $lgContainers[i]; + const inlineGallery = lightGallery($lgContainer, { + container: $lgContainer, + dynamic: true, + width: "100%", + height: "50vmin", + hash: false, + closable: false, + showMaximizeIcon: true, + appendSubHtmlTo: ".lg-sub-html", + slideDelay: 0, + plugins: [lgZoom, lgThumbnail], + dynamicEl: elements, + thumbWidth: 160, + thumbHeight: "10vmin", + thumbMargin: 4 + }); + + setTimeout(() => { + inlineGallery.openGallery(); + }, 200); + } + } + + function destroyLightGallery(className) { + const $lgContainers = document.getElementsByClassName(className); + for (i = 0; i < $lgContainers.length; i++) { + const $lgContainer = $lgContainers[i]; + $lgContainer.innerHTML = ""; + } + } + + + -- cgit v1.3.1+13