austnv/remnawave-minishop
1
0
Fork 0
Code Issues 1 Pull Requests Activity

feat: split logo scale by viewport

Browse Source
This commit is contained in:
3252a8
2026-06-03 12:24:18 +03:00
parent 602cbc7ee6
commit d8fe88eb01
14 changed files with 269 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/base.css
+7
View File
@@ -111,6 +111,7 @@ input {
}
.app-shell {
--home-logo-scale-effective: var(--home-logo-scale-mobile, var(--home-logo-scale, 1));
min-height: 100dvh;
background: var(--bg, #02070b) !important;
}
@@ -119,3 +120,9 @@ input {
--desktop-rail-width: 252px;
--desktop-page-gutter: clamp(28px, 4vw, 72px);
}
@media (min-width: 1024px) {
.app-shell {
--home-logo-scale-effective: var(--home-logo-scale-desktop, var(--home-logo-scale, 1));
}
}
frontend/src/styles/webapp.css
+12 -12
View File
@@ -64,9 +64,9 @@ a {
}
.app-shell .loader .brand-mark.brand-mark-lg {
width: calc(4.125rem * var(--home-logo-scale, 1));
height: calc(4.125rem * var(--home-logo-scale, 1));
font-size: calc(2.875rem * var(--home-logo-scale, 1));
width: calc(4.125rem * var(--home-logo-scale-effective, 1));
height: calc(4.125rem * var(--home-logo-scale-effective, 1));
font-size: calc(2.875rem * var(--home-logo-scale-effective, 1));
}
.app-header,
@@ -2207,15 +2207,15 @@ a {
}
.app-shell .home-brand .brand-mark.brand-mark-xl {
width: calc(6rem * var(--home-logo-scale, 1));
height: calc(6rem * var(--home-logo-scale, 1));
font-size: calc(4.375rem * var(--home-logo-scale, 1));
width: calc(6rem * var(--home-logo-scale-effective, 1));
height: calc(6rem * var(--home-logo-scale-effective, 1));
font-size: calc(4.375rem * var(--home-logo-scale-effective, 1));
}
.app-shell .login-brand-auth .brand-mark.brand-mark-xl {
width: calc(116px * var(--home-logo-scale, 1));
height: calc(116px * var(--home-logo-scale, 1));
font-size: calc(84px * var(--home-logo-scale, 1));
width: calc(116px * var(--home-logo-scale-effective, 1));
height: calc(116px * var(--home-logo-scale-effective, 1));
font-size: calc(84px * var(--home-logo-scale-effective, 1));
}
.home-bottom {
@@ -3027,9 +3027,9 @@ a {
.app-shell .home-brand .brand-mark,
.app-shell .home-brand .brand-mark.brand-mark-lg,
.app-shell .home-brand .brand-mark.brand-mark-xl {
width: calc(clamp(180px, 18vw, 260px) * var(--home-logo-scale, 1));
height: calc(clamp(180px, 18vw, 260px) * var(--home-logo-scale, 1));
font-size: calc(clamp(124px, 13vw, 184px) * var(--home-logo-scale, 1));
width: calc(clamp(180px, 18vw, 260px) * var(--home-logo-scale-effective, 1));
height: calc(clamp(180px, 18vw, 260px) * var(--home-logo-scale-effective, 1));
font-size: calc(clamp(124px, 13vw, 184px) * var(--home-logo-scale-effective, 1));
}
.home-bottom {