Skip to content

fix(ui): clean navbar for tablet view & responsive slider text #251

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(ui): clean navbar for tablet view & responsive slider text #251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
64 changes: 64 additions & 0 deletions src/components/About/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,70 @@
margin: 0px 0 10px 0;
}
}

@media (max-width: 435px) {
.row {
.description {
flex: 0 0 66.666667%;
max-width: 66.666667%;
font-size: 1rem;
}

.name {
font-size: 1.5em;
font-weight: 400;
margin: 20px 0 10px 0;
}

.jobTitle {
font-size: 0.5rem;
font-weight: 300;
margin: 0px 0 10px 0;
}
}
}

@media (max-width: 1024px) {
.row {
.description {
font-size: 1rem;
}
.name {
font-size: 1.5em;
}
.jobTitle {
font-size: 0.7rem;
}
}
}

@media (min-width: 1300px) and (max-width: 1515px) {
.row {
.description {
font-size: 1.1rem;
}
.name {
font-size: 1.8em;
}
.jobTitle {
font-size: 0.9rem;
}
}
}

@media (max-width: 1300px) {
.row {
.description {
font-size: 1.1rem;
}
.name {
font-size: 1.8em;
}
.jobTitle {
font-size: 0.9rem;
}
}
}
Comment on lines +121 to +133
Copy link

@gemini-code-assist gemini-code-assist bot Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

This media query for max-width: 1300px appears to be incorrect. Because it is placed after the queries for 1024px and 435px, it overrides their styles on any screen smaller than 1300px. For instance, a 400px wide screen will receive a font-size of 1.1rem for .description instead of the intended 1rem from the max-width: 435px rule.

Furthermore, the styles within this block are identical to those in the @media (min-width: 1300px) and (max-width: 1515px) block, which suggests this might be a copy-paste error.

To resolve this, I recommend removing this entire block. For better long-term maintainability, it's also a good practice to order max-width media queries from the largest breakpoint to the smallest.

}

html[data-theme="dark"] {
Expand Down
108 changes: 68 additions & 40 deletions src/components/slider/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,18 @@

&.left {
align-items: flex-start;

.title {
text-align: left;
}
}

&.right {
align-items: flex-end;

.title {
text-align: right;
}
}

&.center {
align-items: centers;
justify-content: center;

align-items: center;
.title {
text-align: center;
}
Expand All @@ -46,34 +40,30 @@
color: white;
}

.button {
a {
display: block;
cursor: pointer;
font-size: 1.1rem;
font-weight: 400;
color: #0039cb;
padding: 0.5em 2.1em;
background-color: #f8f9fa;
border-color: #f8f9fa;
border-radius: 0.4rem;
text-decoration: none;
user-select: none;
transition: color 0.15s ease-in-out,
background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

&:hover {
background-color: #e2e6ea;
border-color: #dae0e5;
}
.button a {
display: block;
cursor: pointer;
font-size: 1.1rem;
font-weight: 400;
color: #0039cb;
padding: 0.5em 2.1em;
background-color: #f8f9fa;
border-color: #f8f9fa;
border-radius: 0.4rem;
text-decoration: none;
user-select: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out;
&:hover {
background-color: #e2e6ea;
border-color: #dae0e5;
}
}

.main-title {
font-size: 2.7rem;
text-align: inherit;
}

.sub-title {
font-size: 1.35rem;
text-align: inherit;
Expand All @@ -85,33 +75,71 @@
width: 15%;
z-index: 1;
}

.slick-prev {
position: position;
left: 0;
}

.slick-next {
position: position;
right: 0;
}

.slick-dots {
bottom: 10px;
}
}

@media (max-width: 768px) {
.slick-slider {
.slick-item {
padding-right: 20px;
padding-left: 20px;
margin: 0 0.25rem;
@media (max-width: 1230px) and (min-width: 993px){
.slick-slider .slick-item {
.main-title {
font-size: 2rem;
}
.sub-title {
font-size: 1.3rem;
}
}
}

@media (max-width: 992px) {
.slick-slider .slick-item {
.main-title {
font-size: 2rem;
}
.sub-title {
font-size: 1.3rem;
}
}
}
Comment on lines +89 to +109
Copy link

@gemini-code-assist gemini-code-assist bot Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

These two adjacent media queries contain identical style rules. To reduce code duplication and improve maintainability, they can be combined into a single, simpler media query.

Suggested change
@media (max-width: 1230px) and (min-width: 993px){
.slick-slider .slick-item {
.main-title {
font-size: 2rem;
}
.sub-title {
font-size: 1.3rem;
}
}
}
@media (max-width: 992px) {
.slick-slider .slick-item {
.main-title {
font-size: 2rem;
}
.sub-title {
font-size: 1.3rem;
}
}
}
@media (max-width: 1230px) {
.slick-slider .slick-item {
.main-title {
font-size: 2rem;
}
.sub-title {
font-size: 1.3rem;
}
}
}


@media (max-width: 768px) and (min-width: 565px) {
.slick-slider .slick-item {
.main-title {
font-size: 1.4rem;
}
.sub-title {
font-size: 1rem;
}
margin-left: auto;
margin-right: auto;
}
}
Comment on lines +111 to +122
Copy link

@gemini-code-assist gemini-code-assist bot Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The margin-left: auto; and margin-right: auto; rules in this block are being overridden by the margin: 0 0.25rem; rule within the @media (max-width: 768px) block at line 135. Since both media queries apply to screens between 565px and 768px, the rule that appears later in the file takes precedence, rendering your new margin rules ineffective.

To fix this, you should reorder or refactor the media queries to ensure the correct styles are applied. One approach is to consolidate all styles for a given breakpoint and ensure the more specific rules are not unintentionally overridden.


@media (max-width: 564px) {
.slick-slider .slick-item {
.main-title {
font-size: 1.4rem;
}
.sub-title {
font-size: 1rem;
}
}
}

@media (max-width: 768px) {
.slick-slider .slick-item {
padding-right: 20px;
padding-left: 20px;
margin: 0 0.25rem;
.title {
text-align: center;
}
}
}
}
}
38 changes: 38 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,3 +130,41 @@
width: 100%;
height: 100%;
}

/* 997 px – 1245 px : ONLY logo + toggle + search */
@media (min-width: 997px) and (max-width: 1245px) {
/* hide all navbar links except the logo image */
.navbar__item:not(.navbar__logo):not(img),
.navbar__link:not(.navbar__logo):not(img) {
display: none !important;
}

/* make sure logo, toggle, search stay visible */
.navbar__logo,
.navbar__logo img,
.navbar__toggle,
.navbar__search,
.DocSearch-Button {
display: inline-block !important;
}
Comment on lines +137 to +149
Copy link

@gemini-code-assist gemini-code-assist bot Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using !important can make your CSS harder to maintain and debug because it disrupts the natural cascading order of stylesheets. It's generally better to increase selector specificity to override styles. Please check if you can achieve the desired outcome by using more specific selectors instead of !important.


/* push logo to the far left */
.navbar__brand {
margin-right: auto;
}

/* tidy sizes */
.navbar__logo { height: 1.8rem; }
.navbar__title { font-size: 1.1rem; }
}

/* mobile sidebar : social icons in a ROW */
@media (max-width: 996px) {
.navbar-sidebar__items .navbar__items--right,
.navbar-sidebar__items .navbar__items--right .navbar__item {
display: flex !important;
flex-direction: row !important;
gap: 0.75rem; /* space between icons */
align-items: center;
}
Comment on lines +163 to +169
Copy link

@gemini-code-assist gemini-code-assist bot Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Similar to the media query above, using !important should be avoided if possible as it can make styles difficult to override in the future. Consider using a more specific selector to enforce these styles, which will make the codebase easier to maintain.

}