Дебаг вёрстки шапки и подвала сайта (#4) #18

Merged
NotBigGhost merged 5 commits from issue-4-header-footer-layout into dev 2026-09-07 15:53:40 +03:00
3 changed files with 5 additions and 6 deletions
Showing only changes of commit 81ad2a0403 - Show all commits
+1 -1
View File
@@ -196,7 +196,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.toast { .toast {
position: fixed; position: fixed;
left: 50%; left: 50%;
bottom: calc(var(--bottombar-height) + var(--safe-bottom) + 16px); bottom: calc(var(--bottombar-height) + 16px);
transform: translateX(-50%); transform: translateX(-50%);
background: var(--surface-2); background: var(--surface-2);
border: 1px solid var(--border); border: 1px solid var(--border);
+2 -3
View File
@@ -39,8 +39,7 @@
.bottom-bar { .bottom-bar {
position: relative; position: relative;
flex: none; flex: none;
height: calc(var(--bottombar-height) + var(--safe-bottom)); height: var(--bottombar-height);
padding-bottom: var(--safe-bottom);
background: var(--surface); background: var(--surface);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
display: flex; display: flex;
@@ -70,7 +69,7 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
bottom: calc(var(--safe-bottom) + 8px); bottom: 0;
width: var(--fab-width); width: var(--fab-width);
height: var(--fab-height); height: var(--fab-height);
border: 1px solid var(--accent); border: 1px solid var(--accent);
+2 -2
View File
@@ -22,8 +22,8 @@
--radius-sm: 10px; --radius-sm: 10px;
/* Safe-area с потолком: часть мобильных браузеров (DuckDuckGo, Firefox Focus) при /* Safe-area с потолком: часть мобильных браузеров (DuckDuckGo, Firefox Focus) при
viewport-fit=cover отдаёт inset поверх уже смещённого вьюпорта — без ограничения viewport-fit=cover отдаёт inset поверх уже смещённого вьюпорта — без ограничения
шапка раздувается вдвое, а её содержимое съезжает вниз. */ шапка раздувается вдвое, а её содержимое съезжает вниз. Снизу отступ не нужен:
--safe-bottom: min(env(safe-area-inset-bottom, 0px), 24px); подвал и купол FAB прижаты вплотную к нижнему краю экрана. */
--safe-top: min(env(safe-area-inset-top, 0px), 24px); --safe-top: min(env(safe-area-inset-top, 0px), 24px);
/* Брейкпоинты (для справки) */ /* Брейкпоинты (для справки) */