Skip to content

Commit

Permalink
Navbar fix (#993)
Browse files Browse the repository at this point in the history 
* Update custom.css

* Update custom.css

* fixing display width for mobile

* updating stylelint config

* prettier lint fix

* fixing media queries across the board

* making navbar more responsive to varying widths so it doesn't stack items near mob breakpoint

---------

Co-authored-by: bigbear <[email protected]>
  • Loading branch information
@sammysango @aso20455
sammysango and aso20455 authored Feb 17, 2025
1 parent ab44e39 commit 1fa3cc3
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 59 deletions.
8 changes: 4 additions & 4 deletions src/components/HomepageCards/styles.module.css
View file
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
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
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

0 comments on commit 1fa3cc3

Please sign in to comment.