Skip to content

feat(ui): redesign mobile footer to a responsive multi-column grid #255

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
Tanush576 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat(ui): redesign mobile footer to a responsive multi-column grid #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
62c6f9a
feat(ui): redesign mobile footer to a responsive multi-column grid
Tanush576 Mar 11, 2026
9ba602b
fix(ui): clean up footer HTML structure and improve readability
Tanush576 Mar 11, 2026
a9621c4
chore: address accessibility, hierarchy, and touch target review feed…
Tanush576 Mar 11, 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
269 changes: 216 additions & 53 deletions assets/css/styles_override.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,95 +1,258 @@
#backtotop a:after {
content: "⇧";
/* Back to top – colour override to match footer theme */
#backtotop a {
background-color: #0b214a;
border: 2px solid rgba(255, 255, 255, 0.25);
}

#backtotop.visible a:hover {
background-color: #1a3a7a;
}

.hero-title-content {
max-width: 1200px;
margin: 1vh auto;
max-width: 1200px;
margin: 1vh auto;
}

.hero-logo {
max-height: 200px;
max-height: 200px;
}

.navbar.is-fresh .navbar-item.has-dropdown .navbar-link {
color: var(--colorPrimaryDark);
color: var(--colorPrimaryDark);
}

.navbar.is-fresh .navbar-brand img {
max-height: 50px !important;
height: 50px;
max-height: 50px !important;
height: 50px;
}

@media only screen and (max-width: 850px) {
.social-media-icons {
width: 100%;
}
.social-media-icons {
width: 100%;
}
}

@media only screen and (max-width: 600px) {
.hero-logo {
max-height: 150px;
}
.hero-logo {
max-height: 150px;
}
}

@media only screen and (max-width: 400px) {
.hero-logo {
max-height: 120px;
}
.hero-logo {
max-height: 120px;
}
}

@media only screen and (max-width: 320px) {
.hero-logo {
max-height: 100px;
}
.hero-logo {
max-height: 100px;
}
}

/* Footer */
@media (max-width: 850px){
.footer-column > ul.link-list {
padding-left: unset;
}
/* =============================================
FOOTER — REDESIGN
============================================= */

.footer-column {
padding-left: unset;
}
.footer-redesign {
background-color: #0b214a;
color: #e2e8f0;
padding: 3rem 0 0;
font-family: inherit;
}

.footer-logo-column {
display: flex;
justify-content: flex-start;
flex-direction: column;
padding: 0.5rem;
/* ---- Inner wrapper (brand + link grid) ---- */
.footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 2.5rem;
display: flex;
gap: 3rem;
align-items: flex-start;
}

.footer-column {
padding-left: 30px;
/* ---- Brand block ---- */
.footer-brand {
flex: 0 0 200px;
}

.social-media-icons {
display: flex;
.footer-title {
font-size: 1.75rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 1.5rem;
letter-spacing: -0.3px;
}

@media (max-width: 400px) {
ul {
padding-left: 0px !important;
padding-right: 30px;
}
}
/* ---- Partner logo row ---- */
.footer-partners {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
align-items: center;
/* Removed container-level opacity */
}

/* Icon size slightly enlargened for footer */
#footer .social-media-icons {
font-size: 1.5em;
.footer-partners a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
/* Ensure touch target is large enough */
min-height: 44px;
}

#footer svg.icon {
fill: #1e87f0;
.footer-link-group ul li a:focus-visible,
.footer-socials a:focus-visible {
color: #ffffff;
outline: 2px solid rgba(255, 255, 255, 0.45);
outline-offset: 4px;
}

/* For information ⓘ, when icon is missing */
#footer .icon {
color: #1e87f0;
.footer-partners img {
max-height: 36px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.7;
/* Individual logo is dimmed */
transition: opacity 0.2s ease;
}

.img-fit {
object-fit: contain;
.footer-partners a:hover img,
.footer-partners a:focus-visible img {
opacity: 1;
/* Lights up to full brightness on hover/focus */
}

/* ---- Link columns grid ---- */
.footer-links {
flex: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}

/* ---- Column heading ---- */
.footer-group-heading {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin: 0 0 0.875rem 0;
padding: 0;
}

/* ---- Link list ---- */
.footer-link-group ul {
list-style: none;
margin: 0;
padding: 0;
}

.footer-link-group ul li a {
color: #c8d4e8;
text-decoration: none;
font-size: 0.9rem;
display: flex;
align-items: center;
min-height: 44px;
transition: color 0.2s ease;
}

.footer-link-group ul li a:hover {
color: #ffffff;
text-decoration: underline;
}

/* ---- Bottom bar ---- */
.footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding: 1.25rem 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}

/* ---- Social icons ---- */
.footer-socials {
display: flex;
gap: 0.75rem;
align-items: center;
}

.footer-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
color: #c8d4e8;
transition: color 0.2s ease;
}

.footer-socials a:hover {
color: #ffffff;
}
Comment on lines +164 to 201
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 11, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Add keyboard-visible states for footer links and socials.

These controls currently get enhanced styling on :hover only. Please mirror that on :focus-visible so keyboard users receive the same feedback in the redesigned footer.

⌨️ Suggested follow-up 
-.footer-link-group ul li a:hover {
+.footer-link-group ul li a:hover,
+.footer-link-group ul li a:focus-visible {
   color: `#ffffff`;
   text-decoration: underline;
 }
 
-.footer-socials a:hover {
+.footer-socials a:hover,
+.footer-socials a:focus-visible {
   color: `#ffffff`;
 }
+
+.footer-link-group ul li a:focus-visible,
+.footer-socials a:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.45);
+  outline-offset: 2px;
+}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@assets/css/styles_override.css` around lines 157 - 194, The hover-only
styling for footer links and social icons must also apply when focused via
keyboard: add matching :focus-visible selectors so .footer-link-group ul li
a:focus-visible receives the same color and text-decoration as
.footer-link-group ul li a:hover, and .footer-socials a:focus-visible receives
the same color/transition as .footer-socials a:hover; place these rules
alongside the existing hover rules to ensure keyboard users get identical visual
feedback.


.footer-socials svg.icon {
width: 1.4rem;
height: 1.4rem;
fill: currentColor;
}
Comment on lines +203 to +207
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 11, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Fix keyword casing to satisfy Stylelint.

currentColor should be currentcolor (lowercase) per the value-keyword-case rule flagged by Stylelint.

Suggested fix 
 .footer-socials svg.icon {
   width: 1.4rem;
   height: 1.4rem;
-  fill: currentColor;
+  fill: currentcolor;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.footer-socials svg.icon {
width: 1.4rem;
height: 1.4rem;
fill: currentColor;
}
.footer-socials svg.icon {
width: 1.4rem;
height: 1.4rem;
fill: currentcolor;
}
🧰 Tools
🪛 Stylelint (17.4.0)

[error] 206-206: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@assets/css/styles_override.css` around lines 203 - 207, The CSS rule for the
selector .footer-socials svg.icon uses the property fill: currentColor which
violates Stylelint's value-keyword-case; update the value to lowercase by
changing the fill value from currentColor to currentcolor in the .footer-socials
svg.icon rule so the value-keyword-case rule passes.


/* ---- Copyright ---- */
.footer-copyright {
color: rgba(255, 255, 255, 0.45);
font-size: 0.85rem;
}

/* =============================================
FOOTER — MOBILE (max-width: 768px)
============================================= */
@media (max-width: 768px) {
.footer-inner {
flex-direction: column;
gap: 2rem;
padding: 0 1.25rem 2rem;
}

.footer-brand {
flex: unset;
width: 100%;
}

.footer-partners {
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
}

.footer-links {
width: 100%;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem 1rem;
}

.footer-link-group ul li a {
text-align: left;
}

.footer-bottom {
padding: 1.25rem;
flex-direction: column;
align-items: flex-start;
}
}

/* =============================================
UTILITIES
============================================= */
.img-fit {
object-fit: contain;
}
4 changes: 4 additions & 0 deletions config.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ languages:
icon: discord
quicklinks:
column1:
heading: RESOURCES
links:
- text: Install
link: https://openms.readthedocs.io/en/latest/about/installation.html
Expand All @@ -147,6 +148,7 @@ languages:
- text: Citing OpenMS
link: /citing-openms
column2:
heading: COMMUNITY
links:
- text: Community
link: /communication
Expand All @@ -155,6 +157,7 @@ languages:
- text: Code of conduct
link: /code-of-conduct
column3:
heading: ABOUT
links:
- text: OpenMS Inc.
link: /about
Expand All @@ -163,6 +166,7 @@ languages:
- text: Jobs
link: /jobs
column4:
heading: LEGAL
links:
- text: Terms of use
link: /terms
Expand Down
Loading