Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navbar fix #993

Merged
merged 9 commits into from
Feb 17, 2025
Merged

Navbar fix #993

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ecab285
Update custom.css
aso20455 Feb 15, 2025
ec96966
Update custom.css
aso20455 Feb 15, 2025
a2db9b3
Merge branch 'main' into patch-1
sammysango Feb 17, 2025
2dcfc9f
fixing display width for mobile
sammysango Feb 17, 2025
6d614c5
updating stylelint config
sammysango Feb 17, 2025
324ad64
prettier lint fix
sammysango Feb 17, 2025
b7ea2b3
fixing media queries across the board
sammysango Feb 17, 2025
264f376
making navbar more responsive to varying widths so it doesn't stack i…
sammysango Feb 17, 2025
17a5463
Merge branch 'main' into navbar-fix
sammysango Feb 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/HomepageCards/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ main {
margin-top: 0;
}

@media (width <= 1500px) {
@media (max-width: 1500px) {
.cardTitle h3 {
font-size: 1.45rem;
font-weight: 500;
Expand Down Expand Up @@ -141,7 +141,7 @@ main {
color: #fff;
}

@media (width <= 1350px) {
@media (max-width: 1350px) {
.cardIcon {
opacity: 0;
}
Expand All @@ -153,7 +153,7 @@ main {
}
}

@media (width <= 996px) {
@media (max-width: 996px) {
.cardIcon {
opacity: 1;
width: 35px;
Expand All @@ -165,7 +165,7 @@ main {
}
}

@media (width <= 300px) {
@media (max-width: 300px) {
.cardIcon {
opacity: 0;
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/SecondaryCards/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ main {
transition: padding-left 0.25s ease;
}

@media (width <= 1500px) {
@media (max-width: 1500px) {
.cardBody {
padding: 14px 30px;
}
Expand Down Expand Up @@ -66,7 +66,7 @@ main {
color: var(--search-local-muted-color);
}

@media (width <= 1300px) {
@media (max-width: 1300px) {
.cardBody {
padding: 14px 16px 0 30px;
}
Expand All @@ -82,7 +82,7 @@ main {
}
}

@media (width <= 996px) {
@media (max-width: 996px) {
.cardTitle h3 {
padding-right: 10px;
font-size: 1.45rem;
Expand Down
69 changes: 38 additions & 31 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
border: 0;
}

@media (width <= 768px) {
@media (max-width: 768px) {
.video-container {
width: 100%;
}
Expand Down Expand Up @@ -62,7 +62,7 @@
flex-shrink: 0;
}

@media (width <= 768px) {
@media (max-width: 768px) {
.img-xsmall {
width: 50%;
flex-shrink: 0;
Expand All @@ -74,12 +74,14 @@
}

.img-medium {
max-width: none;
width: 90%;
flex-shrink: 0;
}

.img-large {
width: 100%;
max-width: none;
width: 90%;
flex-shrink: 0;
}
}
Expand Down Expand Up @@ -123,7 +125,7 @@
margin: 0 auto;
}

@media (width <= 768px) {
@media (max-width: 768px) {
.mermaid-xsmall {
width: 50%;
}
Expand Down Expand Up @@ -543,7 +545,7 @@ html[data-theme="dark"] .header-discord-link::before {
background-position: center;
}

@media (width <= 996px) {
@media (max-width: 996px) {
.header-discord-link {
padding-left: 12px;
}
Expand Down Expand Up @@ -598,7 +600,7 @@ html[data-theme="dark"] .header-twitter-link::before {
background-size: 20px 20px;
}

@media (width <= 996px) {
@media (max-width: 996px) {
.header-twitter-link::before {
content: "";
width: 28px;
Expand Down Expand Up @@ -682,13 +684,13 @@ html[data-theme='dark'] .header-release-notes-link::before {
visibility: visible;
}

@media (width <= 1080px) {
@media (max-width: 1080px) {
.navbar__inner:has(.navbar__search input:focus) .header-release-notes-link {
display: none !important;
}
}

@media (width <= 996px) {
@media (max-width: 996px) {
.header-release-notes-link::before {
background: none !important;
width: 0;
Expand Down Expand Up @@ -762,7 +764,7 @@ html[data-theme="dark"] .navbar .clean-btn:hover {
background: none;
}

@media (width <= 996px) {
@media (max-width: 996px) {
.navbar .clean-btn {
background: none;
border-radius: 5px;
Expand All @@ -787,7 +789,7 @@ html[data-theme="dark"] .navbar .clean-btn:hover {
}

.support-link {
font-size: calc(14px + (15 - 12) * ((100vw - 996px) / (1920 - 996)));
font-size: clamp(12px, 0.95vw, 15px);
margin-right: 20px;
color: #61dfff;
}
Expand All @@ -798,7 +800,7 @@ html[data-theme="dark"] .navbar .clean-btn:hover {
color: #61dfff;
}

@media (width <= 996px) {
@media (max-width: 996px) {
.support-link {
line-height: 1.25;
margin-right: 8px;
Expand Down Expand Up @@ -836,7 +838,7 @@ html[data-theme="dark"] .header-dockerhub-link::before {
filter: invert(100%);
}

@media only screen and (width <= 525px) {
@media only screen and (max-width: 525px) {
.menu__link {
display: flex;
justify-content: flex-start;
Expand Down Expand Up @@ -885,19 +887,23 @@ html[data-theme="dark"] .header-dockerhub-link::before {
margin: 0 auto;
}

a.navbar__brand {
margin-right: calc(0.5vw);
}

.navbar__logo {
color: var(--linea-text-color-1);
height: 25px;
width: auto;
padding: 3px 10px 0 20px;
padding: 3px 10px 0 calc(1.5vw);
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -5px;
}

@media (width <= 1380px) {
@media (max-width: 1380px) {
.navbar__inner {
width: 90%;
}
Expand All @@ -908,7 +914,7 @@ html[data-theme="dark"] .header-dockerhub-link::before {
}
}

@media (width <= 996px) {
@media (max-width: 996px) {
.navbar__logo {
height: 25px;
top: -4px;
Expand All @@ -924,7 +930,7 @@ html[data-theme="dark"] .header-dockerhub-link::before {
display: none;
}

@media (width <= 996px) {
@media (max-width: 996px) {
.navbar__logo {
height: 28px;
margin-right: 0;
Expand All @@ -942,8 +948,9 @@ html[data-theme="dark"] .header-dockerhub-link::before {
}

.navbar__link {
font-size: calc(14px + (15 - 12) * ((100vw - 996px) / (1920 - 996)));
font-size: clamp(12px, 0.95vw, 15px);
padding: calc(5px + (12 - 5) * ((100vw - 996px) / (1920 - 996)));
padding-left: calc(0.5vw);
}

/* Basic circle icons for navbar items */
Expand All @@ -957,7 +964,7 @@ html[data-theme="dark"] .header-dockerhub-link::before {
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
margin-right: calc(0.5vw);
border: 1px solid currentColor;
border-radius: 50%;
vertical-align: middle;
Expand All @@ -983,7 +990,7 @@ html[data-theme="dark"] .header-dockerhub-link::before {
}

/* ensure dots are hidden on smaller screens */
@media (width <= 996px) {
@media (max-width: 996px) {
.navbar__link[href="/get-started"]::before,
.navbar__link[href="/learn"]::before,
.navbar__link[href="/api"]::before,
Expand All @@ -1008,7 +1015,7 @@ html[data-theme="dark"] .header-dockerhub-link::before {
outline: 2px solid #61dfff !important;
}

@media (width <= 1320px) {
@media (max-width: 1320px) {
.navbar__search input {
width: 150px;
right: 0;
Expand All @@ -1020,15 +1027,15 @@ html[data-theme="dark"] .header-dockerhub-link::before {
}
}

@media (width <= 1080px) {
@media (max-width: 1080px) {
.navbar__search input {
width: 120px;
right: 0;
margin-right: 10px;
}
}

@media (width <= 996px) {
@media (max-width: 996px) {
.navbar__search input {
max-width: 30px;
border-radius: 8px;
Expand All @@ -1053,7 +1060,7 @@ html[data-theme="dark"] .header-dockerhub-link::before {
}
}

@media (width <= 600px) {
@media (max-width: 600px) {
.navbar__search-input:not(.navbar .navbar__search-input) {
max-width: 80vw;
}
Expand All @@ -1073,7 +1080,7 @@ html[data-theme="dark"] .navbar {
}

/* Make navbar look friendly on small devices. */
@media only screen and (width <= 400px) {
@media only screen and (max-width: 400px) {
.nav_src-pages-index-module .linkItem_src-pages-index-module {
padding-right: 0 !important;
}
Expand Down Expand Up @@ -1378,7 +1385,7 @@ a.menu__link {
padding: 0 20px !important;
}

@media (width <= 996px) {
@media (max-width: 996px) {
.container .padding-top--md .padding-bottom--lg {
max-width: 100vw;
margin-left: 0;
Expand Down Expand Up @@ -1414,7 +1421,7 @@ button.clean-btn.menu__caret {
padding: 3px 12px;
}

@media (width <= 1200px) {
@media (max-width: 1200px) {
/* hides TOC when viewport gets too slim */
ul.table-of-contents {
visibility: hidden;
Expand All @@ -1426,7 +1433,7 @@ button.clean-btn.menu__caret {
}
}

@media (width <= 996px) {
@media (max-width: 996px) {
/* hides TOC when viewport gets too slim */
ul.table-of-contents {
visibility: visible;
Expand All @@ -1441,7 +1448,7 @@ div[aria-label="Expand sidebar"] {
max-height: 80vh;
}

@media (width <= 1200px) {
@media (max-width: 1200px) {
div .col .col--3 {
display: none !important;
}
Expand All @@ -1461,22 +1468,22 @@ div[aria-label="Expand sidebar"] {
text-align: center;
}

@media (width <= 1499px) {
@media (max-width: 1499px) {
.responsive-graphic picture {
display: block;
padding-left: 5vw;
padding-right: 5vw;
}
}

@media (width <= 996px) {
@media (max-width: 996px) {
.responsive-graphic picture {
padding-left: 15vw;
padding-right: 15vw;
}
}

@media (width <= 700px) {
@media (max-width:700px) {
.responsive-graphic picture {
padding-left: 6vw;
padding-right: 6vw;
Expand Down
Loading
Loading