danvics/debrid-services-comparison
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: improve layout and responsiveness of header and navigation elements in styles.css

Browse source
This commit is contained in:
fynks 2025-09-18 09:52:52 +05:00
parent 836484ff17
commit 3b5370651e
1 changed files with 44 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
dist/css/styles.css vendored
View file

@ -173,6 +173,7 @@ html {
line-height: 1.6; line-height: 1.6;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
overflow-x: hidden; overflow-x: hidden;
height: 100%;
} }
body { body {
@ -186,8 +187,6 @@ body {
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
overflow-x: hidden; overflow-x: hidden;
display: flex;
flex-direction: column;
} }
svg, svg,
@ -256,9 +255,8 @@ a:hover {
/* Layout containers */ /* Layout containers */
.page-wrapper { .page-wrapper {
min-height: 100vh; min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden; overflow-x: hidden;
position: relative;
} }
.container { .container {
@ -276,16 +274,29 @@ a:hover {
/* Header */ /* Header */
.site-header { .site-header {
position: sticky; position: fixed;
top: 0; top: 0;
z-index: 100; left: 0;
background: rgba(255, 255, 255, .9); right: 0;
backdrop-filter: blur(10px) saturate(140%); z-index: 1000;
background: rgba(255, 255, 255, .95);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
height: var(--header-height); height: var(--header-height);
width: 100%;
} }
[data-theme="dark"] .site-header { background: rgba(15, 23, 42, .9); } [data-theme="dark"] .site-header {
background: rgba(15, 23, 42, .95);
}
/* Main content */
.main-content {
flex: 1;
position: relative;
padding-top: var(--header-height);
}
.header-content { .header-content {
display: flex; display: flex;
@ -448,8 +459,8 @@ a:hover {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 44px; width: 48px;
height: 44px; height: 48px;
border: 2px solid var(--border-primary); border: 2px solid var(--border-primary);
border-radius: var(--radius-full); border-radius: var(--radius-full);
background: var(--bg-primary); background: var(--bg-primary);
@ -461,15 +472,15 @@ a:hover {
@media (max-width:600px) { @media (max-width:600px) {
.dark-mode-toggle { .dark-mode-toggle {
width: 40px; width: 40px !important;
height: 40px height: 40px !important;
} }
} }
@media (max-width:380px) { @media (max-width:380px) {
.dark-mode-toggle { .dark-mode-toggle {
width: 36px; width: 36px !important;
height: 36px height: 36px !important;
} }
} }
@ -506,7 +517,7 @@ a:hover {
display: none; display: none;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 5px; gap: 3px;
width: 48px; width: 48px;
height: 48px; height: 48px;
background: var(--bg-primary); background: var(--bg-primary);
@ -521,20 +532,20 @@ a:hover {
@media (max-width:600px) { @media (max-width:600px) {
.nav-toggle { .nav-toggle {
width: 40px; width: 40px !important;
height: 40px height: 40px !important;
} }
} }
@media (max-width:380px) { @media (max-width:380px) {
.nav-toggle { .nav-toggle {
width: 36px; width: 36px !important;
height: 36px height: 36px !important;
} }
} }
.nav-toggle-bar { .nav-toggle-bar {
width: 22px; width: 18px;
height: 2px; height: 2px;
background: var(--text-primary); background: var(--text-primary);
border-radius: 2px; border-radius: 2px;
@ -544,7 +555,7 @@ a:hover {
} }
.nav-open .nav-toggle-bar:nth-child(1) { .nav-open .nav-toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg); transform: translateY(5px) rotate(45deg);
} }
.nav-open .nav-toggle-bar:nth-child(2) { .nav-open .nav-toggle-bar:nth-child(2) {
@ -552,7 +563,7 @@ a:hover {
} }
.nav-open .nav-toggle-bar:nth-child(3) { .nav-open .nav-toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg); transform: translateY(-5px) rotate(-45deg);
} }
.nav-overlay { .nav-overlay {
@ -576,7 +587,9 @@ a:hover {
/* Mobile nav */ /* Mobile nav */
@media (max-width:900px) { @media (max-width:900px) {
.nav-toggle { .nav-toggle {
display: inline-flex display: inline-flex;
width: 48px !important;
height: 48px !important;
} }
.header-nav { .header-nav {
@ -627,13 +640,18 @@ a:hover {
.dark-mode-toggle { .dark-mode-toggle {
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
width: 44px; width: 40px !important;
height: 44px; height: 40px !important;
order: 3; order: 3;
align-self: center; align-self: center;
z-index: 110 z-index: 110
} }
.nav-toggle {
width: 40px !important;
height: 40px !important;
}
body:not(.js-ready) .header-nav, body:not(.js-ready) .header-nav,
body:not(.js-ready) .nav-toggle-bar, body:not(.js-ready) .nav-toggle-bar,
body:not(.js-ready) .nav-overlay { body:not(.js-ready) .nav-overlay {