Skip to content

fix(ui): responsivness of Kmesh website #274

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

Closed
yashisrani wants to merge 2 commits into from
Closed

fix(ui): responsivness of Kmesh website #274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b9d48c
fix(ui): responsivness of Kmesh website
yashisrani Feb 24, 2026
70d30b3
fix: DCO issue
yashisrani Feb 24, 2026
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
66 changes: 65 additions & 1 deletion src/components/About/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,74 @@
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;
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

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

The font size for jobTitle at this breakpoint is extremely small (0.5rem). This could make the text nearly unreadable on small screens. Consider using a minimum of 0.7rem or 0.75rem for better accessibility and readability.

Suggested change
font-size: 0.5rem;
font-size: 0.7rem;

Copilot uses AI. Check for mistakes.
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
Copy Markdown

@gemini-code-assist gemini-code-assist bot Feb 24, 2026

Choose a reason for hiding this comment

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

medium

The media query @media (max-width: 1300px) (lines 121-133) has identical styles to the @media (min-width: 1300px) and (max-width: 1515px) rule (lines 107-118). This creates redundancy and can make the CSS harder to maintain. If the intent is for these styles to apply to the combined range of (min-width: 1025px) and (max-width: 1515px) (assuming the max-width: 1024px rule is the next breakpoint), consider combining these into a single, more comprehensive media query to avoid duplication.

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

Comment on lines +71 to +133
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

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

The media query cascade is problematic. At viewport widths ≤435px, three media queries will match and apply in order: lines 71-91, 93-105, and 121-133. Due to CSS cascade order, the rules from the last query (121-133) will override the earlier ones, making the specific styling for small screens at lines 71-91 ineffective. The intended font sizes for very small screens (jobTitle: 0.5rem, description: 1rem, name: 1.5em) will be overridden by the larger breakpoint styles (jobTitle: 0.9rem, description: 1.1rem, name: 1.8em). Consider using min-width constraints or reordering so that larger breakpoints come first and smaller breakpoints come last.

Copilot uses AI. Check for mistakes.
}

html[data-theme="dark"] {
.aboutContainer {
background-color: #242526;
}
}
}
3 changes: 1 addition & 2 deletions src/components/CNCFInfo/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,4 @@

.cncfLine2 {
font-size: 1.8rem;
}

}
106 changes: 67 additions & 39 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,30 +75,68 @@
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

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

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

These media queries define identical styling rules. The @media (max-width: 992px) at lines 100-109 and @media (max-width: 1230px) and (min-width: 993px) at lines 89-98 set the exact same font sizes (main-title: 2rem, sub-title: 1.3rem). Consider consolidating these into a single media query @media (max-width: 1230px) to avoid duplication and improve maintainability.

Copilot uses AI. Check for mistakes.

@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 +119 to +120
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

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

The margin-left: auto and margin-right: auto properties (lines 119-120) are applied directly to .slick-item but should likely be applied within the nested .title selector or another appropriate child element. Currently, these margin properties are at the same nesting level as the .main-title and .sub-title selectors, which could cause unintended layout effects on the slider item itself rather than its content.

Suggested change
margin-left: auto;
margin-right: auto;
.title {
margin-left: auto;
margin-right: auto;
}

Copilot uses AI. Check for mistakes.
}
}

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

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

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

Trailing whitespace after the closing brace. This is a minor formatting issue but should be cleaned up for consistency.

Suggested change
}
}

Copilot uses AI. Check for mistakes.
.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;
}
Comment on lines +135 to 142
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot Feb 24, 2026

Choose a reason for hiding this comment

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

medium

The @media (max-width: 768px) rule is placed after the more specific @media (max-width: 768px) and (min-width: 565px) rule. While the properties might not directly conflict, it's generally best practice to order media queries from broadest to most specific (for max-width queries) or use non-overlapping ranges. This ensures a clearer and more predictable CSS cascade, making the stylesheet easier to understand and maintain.

Expand Down
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;
}

/* 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;
}
}