From 78d666e0f90f6e58c5c78d992beaaeea186c5016 Mon Sep 17 00:00:00 2001
From: SayaAndy <montferrat@tuta.io>
Date: Tue, 22 Jul 2025 21:43:07 +0300
Subject: feat: replace margins & paddings of rem to vmin feat: use webp src
 for lower res screens

---
 public/index.html | 136 +++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 94 insertions(+), 42 deletions(-)

diff --git a/public/index.html b/public/index.html
index 9e4dd3b..4090965 100644
--- a/public/index.html
+++ b/public/index.html
@@ -289,6 +289,43 @@
             width: 80%;
         }
 
+        .mt-vmin0-8 {
+            margin-top: 0.8vmin;
+        }
+
+        .mt-vmin1-6 {
+            margin-top: 1.6vmin;
+        }
+
+        .mx-vmin1-6 {
+            margin-left: 1.6vmin;
+            margin-right: 1.6vmin;
+        }
+
+        .mb-vmin0-4 {
+            margin-bottom: 0.4vmin;
+        }
+
+        .mb-vmin0-8 {
+            margin-bottom: 0.8vmin;
+        }
+
+        .m-vmin0-8 {
+            margin: 0.8vmin;
+        }
+
+        .pl-vmin0-8 {
+            padding-left: 0.8vmin;
+        }
+
+        .pr-vmin1-2 {
+            padding-right: 1.2vmin;
+        }
+
+        .p-vmin2-4 {
+            padding: 2.4vmin;
+        }
+
         .lg-backdrop {
             background-color: var(--background-light-color);
         }
@@ -456,37 +493,37 @@
     <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-4 mx-4">
-            <div class="flex flex-row mb-1">
-                <i class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-vmax2 mt-auto mb-auto pl-2 pr-2"></i>
-                <p class="text-vmax2 font-spectral italic font-extrabold select-none mt-auto pl-2 pr-3">//</p>
+        <div class="content-square flex flex-col bg-background-dark relative mt-vmin1-6 mx-vmin1-6">
+            <div class="flex flex-row mb-vmin0-4">
+                <i class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-vmax2 mt-auto mb-auto pl-vmin0-8 pr-2"></i>
+                <p class="text-vmax2 font-spectral italic font-extrabold select-none mt-auto pl-vmin0-8 pr-vmin1-2">//</p>
                 <p class="text-vmax2 font-spectral italic text-left mt-auto">Демо-материал после демон-аэропорта</p>
                 <p class="grow text-vmax1-5 font-spectral text-secondary text-right mt-auto">2025.07.21 20:34:44 UTC+3</p>
             </div>
-            <hr class="border-t-4 border-dotted border-main-dark mb-2">
+            <hr class="border-t-4 border-dotted border-main-dark mb-vmin0-8">
 
-            <div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-6">
+            <div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-vmin2-4">
                 <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left">Ученик однажды попросил мудреца переименовать фотографические файлы формата JPG за 21 июля 2025 на своём телефоне, чтобы структура их имён была идентична. Ученик очень хотел поделиться своими двоякими впечатлениями от современных реалий российского авиатранспорта и хотел сначала загрузить свои фотографии в нужном формате. В ответ мудрец удалил их нахуй</p>
-                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-4">Мудрец будет удалён к ебеням с телефона и оценён на 1 звезду.</p>
-                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-4">В итоге, чтобы собрать материал под эту демо-страницу, я вспомнил про недавно купленную клавиатуру.</p>
-                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-4">Это Apple Keyboard 1048 из 2003!</p>
+                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-vmin1-6">Мудрец будет удалён к ебеням с телефона и оценён на 1 звезду.</p>
+                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-vmin1-6">В итоге, чтобы собрать материал под эту демо-страницу, я вспомнил про недавно купленную клавиатуру.</p>
+                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-vmin1-6">Это Apple Keyboard 1048 из 2003!</p>
                 <div class="justify-content-center display-block m-2">
-                    <hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-p80 ml-auto mr-auto">
+                    <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
                     <div class="inline-gallery-container inline-gallery-container-1 relative ml-auto mr-auto"></div>
-                    <hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-p80 ml-auto mr-auto">
+                    <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
                 </div>
                 <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left">Мотив был такой -- мне нравится её внешний вид, эта курватура аля склона холма. Ну и USB, ничего не мешает подключить куда угодно. И цена таким на рынке -- 2 тыщи на рынке (~25$).</p>
-                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-4">Купил -- понравилась и тактильность, хоть это и мембранная клава!</p>
-                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-4">Но затем я решил её почистить, ибо она была желтоватая и у неё слипались пробел и клавиша Mac. На выходе действительно она получилась белей, клавиши все нажимаются на ура... но идея опрыскать базу клавы перекисью была ошибкой. Теперь у неё работает только Enter. :(</p>
-                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-4">Напоследок немного макросъёмки, ибо почему бы и нет:</p>
+                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-vmin1-6">Купил -- понравилась и тактильность, хоть это и мембранная клава!</p>
+                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-vmin1-6">Но затем я решил её почистить, ибо она была желтоватая и у неё слипались пробел и клавиша Mac. На выходе действительно она получилась белей, клавиши все нажимаются на ура... но идея опрыскать базу клавы перекисью была ошибкой. Теперь у неё работает только Enter. :(</p>
+                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-vmin1-6">Напоследок немного макросъёмки, ибо почему бы и нет:</p>
                 <div class="justify-content-center display-block m-2">
-                    <hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-p80 ml-auto mr-auto">
+                    <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
                     <div class="inline-gallery-container inline-gallery-container-2 relative ml-auto mr-auto"></div>
-                    <hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-p80 ml-auto mr-auto">
+                    <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
                 </div>
             </div>
 
-            <div class="flex flex-row mt-2 mb-1">
+            <div class="flex flex-row mt-vmin0-8 mb-vmin0-4">
                 <p class="grow text-vmax0-8 lh-0-9 font-spectral italic text-right text-secondary mr-2">
                     <a href="https://demo.saya.today">Демо-материал после демон-аэропорта</a> © 2025 by <a href="https://t.me/EarlInisMona">Saya Andy</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
                 </p>
@@ -495,7 +532,7 @@
                 <img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width:1.2vh; max-height:1.2vh;">
             </div>
 
-            <hr class="border-t-4 border-dotted border-main-dark mb-2">
+            <hr class="border-t-4 border-dotted border-main-dark mb-vmin0-8">
         </div>
 
         <div class="border-right-custom bg-background-dark shadow-2xl"></div>
@@ -516,37 +553,37 @@
     <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-4 mx-4">
-            <div class="flex flex-row mb-1">
-                <i class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-vmax2 mt-auto mb-auto pl-2 pr-2"></i>
-                <p class="text-vmax2 font-spectral italic font-extrabold select-none mt-auto pl-2 pr-3">//</p>
+        <div class="content-square flex flex-col bg-background-dark relative mt-vmin1-6 mx-vmin1-6">
+            <div class="flex flex-row mb-vmin0-4">
+                <i class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-vmax2 mt-auto mb-auto pl-vmin0-8 pr-2"></i>
+                <p class="text-vmax2 font-spectral italic font-extrabold select-none mt-auto pl-vmin0-8 pr-vmin1-2">//</p>
                 <p class="text-vmax2 font-spectral italic text-left mt-auto">Демо-материал после демон-аэропорта</p>
                 <p class="grow text-vmax1-5 font-spectral text-secondary text-right mt-auto">2025.07.21 20:34:44 UTC+3</p>
             </div>
-            <hr class="border-t-4 border-dotted border-main-dark mb-2">
+            <hr class="border-t-4 border-dotted border-main-dark mb-vmin0-8">
 
-            <div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-6">
+            <div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-vmin2-4">
                 <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left">Ученик однажды попросил мудреца переименовать фотографические файлы формата JPG за 21 июля 2025 на своём телефоне, чтобы структура их имён была идентична. Ученик очень хотел поделиться своими двоякими впечатлениями от современных реалий российского авиатранспорта и хотел сначала загрузить свои фотографии в нужном формате. В ответ мудрец удалил их нахуй</p>
-                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-4">Мудрец будет удалён к ебеням с телефона и оценён на 1 звезду.</p>
-                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-4">В итоге, чтобы собрать материал под эту демо-страницу, я вспомнил про недавно купленную клавиатуру.</p>
-                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-4">Это Apple Keyboard 1048 из 2003!</p>
+                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-vmin1-6">Мудрец будет удалён к ебеням с телефона и оценён на 1 звезду.</p>
+                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-vmin1-6">В итоге, чтобы собрать материал под эту демо-страницу, я вспомнил про недавно купленную клавиатуру.</p>
+                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-vmin1-6">Это Apple Keyboard 1048 из 2003!</p>
                 <div class="justify-content-center display-block m-2">
-                    <hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-p80 ml-auto mr-auto">
+                    <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
                     <div class="inline-gallery-container inline-gallery-container-1 relative ml-auto mr-auto"></div>
-                    <hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-p80 ml-auto mr-auto">
+                    <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
                 </div>
                 <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left">Мотив был такой -- мне нравится её внешний вид, эта курватура аля склона холма. Ну и USB, ничего не мешает подключить куда угодно. И цена таким на рынке -- 2 тыщи на рынке (~25$).</p>
-                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-4">Купил -- понравилась и тактильность, хоть это и мембранная клава!</p>
-                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-4">Но затем я решил её почистить, ибо она была желтоватая и у неё слипались пробел и клавиша Mac. На выходе действительно она получилась белей, клавиши все нажимаются на ура... но идея опрыскать базу клавы перекисью была ошибкой. Теперь у неё работает только Enter. :(</p>
-                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-4">Напоследок немного макросъёмки, ибо почему бы и нет:</p>
+                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-vmin1-6">Купил -- понравилась и тактильность, хоть это и мембранная клава!</p>
+                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-vmin1-6">Но затем я решил её почистить, ибо она была желтоватая и у неё слипались пробел и клавиша Mac. На выходе действительно она получилась белей, клавиши все нажимаются на ура... но идея опрыскать базу клавы перекисью была ошибкой. Теперь у неё работает только Enter. :(</p>
+                <p class="text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 text-left mt-vmin1-6">Напоследок немного макросъёмки, ибо почему бы и нет:</p>
                 <div class="justify-content-center display-block m-2">
-                    <hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-p80 ml-auto mr-auto">
+                    <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
                     <div class="inline-gallery-container inline-gallery-container-2 relative ml-auto mr-auto"></div>
-                    <hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-p80 ml-auto mr-auto">
+                    <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
                 </div>
             </div>
 
-            <div class="flex flex-row mt-2 mb-1">
+            <div class="flex flex-row mt-vmin0-8 mb-vmin0-4">
                 <p class="grow text-vmax0-8 lh-0-9 font-spectral italic text-right text-secondary mr-2">
                     <a href="https://demo.saya.today">Демо-материал после демон-аэропорта</a> © 2025 by <a href="https://t.me/EarlInisMona">Saya Andy</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
                 </p>
@@ -555,7 +592,7 @@
                 <img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width:1.2vh; max-height:1.2vh;">
             </div>
 
-            <hr class="border-t-4 border-dotted border-main-dark mb-2">
+            <hr class="border-t-4 border-dotted border-main-dark mb-vmin0-8">
         </div>
 
         <div class="border-right-custom bg-background-dark shadow-2xl"></div>
@@ -619,8 +656,13 @@
                 {
                 src:
                     "https://f003.backblazeb2.com/file/sayana-photos/full/Novosibirsk-Home-20250721-191056.jpg",
-                responsive:
-                    "https://f003.backblazeb2.com/file/sayana-photos/thumbnails/Novosibirsk-Home-20250721-191056.webp",
+                downloadUrl:
+                    "https://f003.backblazeb2.com/file/sayana-photos/full/Novosibirsk-Home-20250721-191056.jpg",
+                alt: "Клава в отливе тусклого вечернего солнца",
+                sources: [{
+                    srcset: "https://f003.backblazeb2.com/file/sayana-photos/thumbnails/Novosibirsk-Home-20250721-191056.webp",
+                    media: "(max-width: 800px)"
+                }],
                 thumb:
                     "https://f003.backblazeb2.com/file/sayana-photos/thumbnails/Novosibirsk-Home-20250721-191056.webp",
                 subHtml: `<div class="flex flex-row light-gallery-captions">
@@ -649,8 +691,13 @@
                 {
                 src:
                     "https://f003.backblazeb2.com/file/sayana-photos/full/Novosibirsk-Home-20250721-185010.jpg",
-                responsive:
-                    "https://f003.backblazeb2.com/file/sayana-photos/thumbnails/Novosibirsk-Home-20250721-185010.webp",
+                downloadUrl:
+                    "https://f003.backblazeb2.com/file/sayana-photos/full/Novosibirsk-Home-20250721-185010.jpg",
+                alt: "Что можно сделать с F16? Не знаю. Я в принципе F-клавиши редко клацаю.",
+                sources: [{
+                    srcset: "https://f003.backblazeb2.com/file/sayana-photos/thumbnails/Novosibirsk-Home-20250721-185010.webp",
+                    media: "(max-width: 800px)"
+                }],
                 thumb:
                     "https://f003.backblazeb2.com/file/sayana-photos/thumbnails/Novosibirsk-Home-20250721-185010.webp",
                 subHtml: `<div class="flex flex-row light-gallery-captions">
@@ -661,8 +708,13 @@
                 {
                 src:
                     "https://f003.backblazeb2.com/file/sayana-photos/full/Novosibirsk-Home-20250721-190655.jpg",
-                responsive:
-                    "https://f003.backblazeb2.com/file/sayana-photos/thumbnails/Novosibirsk-Home-20250721-190655.webp",
+                downloadUrl:
+                    "https://f003.backblazeb2.com/file/sayana-photos/full/Novosibirsk-Home-20250721-190655.jpg",
+                alt: "Уход от Enter в задний план",
+                sources: [{
+                    srcset: "https://f003.backblazeb2.com/file/sayana-photos/thumbnails/Novosibirsk-Home-20250721-190655.webp",
+                    media: "(max-width: 800px)"
+                }],
                 thumb:
                     "https://f003.backblazeb2.com/file/sayana-photos/thumbnails/Novosibirsk-Home-20250721-190655.webp",
                 subHtml: `<div class="flex flex-row light-gallery-captions">
-- 
cgit v1.3.1+13