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

Merged
matteopilz merged 5 commits into from
Apr 7, 2026
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 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
c9984c5
Merge branch 'main' into fix-mobile-footer
Tanush576 Mar 27, 2026
36524f8
chore: revert accidental out-of-scope changes to gsoc2025.md
Tanush576 Apr 5, 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
214 changes: 180 additions & 34 deletions assets/css/styles_override.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
#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;
Expand Down Expand Up @@ -43,53 +48,194 @@
}
}

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

.footer-partners a {
display: inline-flex;
align-items: center;
}

.footer-partners img {
max-height: 36px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
transition: opacity 0.2s ease;
}

.footer-partners a:hover img {
opacity: 0.85;
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
}

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

/* Icon size slightly enlargened for footer */
#footer .social-media-icons {
font-size: 1.5em;
/* ---- Social icons ---- */
.footer-socials {
display: flex;
gap: 0.75rem;
align-items: center;
}

#footer svg.icon {
fill: #1e87f0;
.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;
}

/* For information ⓘ, when icon is missing */
#footer .icon {
color: #1e87f0;
.footer-socials a:hover {
color: #ffffff;
}
Comment on lines +164 to 201
Copy link
Copy Markdown
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
Copy Markdown
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;
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
97 changes: 52 additions & 45 deletions layouts/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,55 +6,62 @@
{{- $sponsorLogo3 := index $footer "sponsorLogo3" }}
{{- $quickLinks := index $footer "quicklinks" }}
{{- $socialMedia := index $footer "socialmedia" }}
{{- $logo := index $footer "logo" }}
{{- $navbarLogo := .Site.Params.navbarlogo }}

<footer id="footer" class="footer">
<div class="container is-max-widescreen">
<div id="footer-columns" class="columns">
<div class="footer-logo-column">
<!-- <img id="footer-logo" src="{{ printf "/images/%s" $logo | relURL }}" alt="{{ $title }} logo. {{ $navbarLogo.altText }}"> -->
<div><p style="font-weight: bolder; font-size: xx-large; color: aliceblue;">{{ $title }}</p></div>
<div><a href="https://www.netlify.com"> <img src="{{ $deployedBy }}" alt="Deploys by Netlify" style="width: 6rem;" /> </a></div>
</div>
<div class="footer-logo-column">
<div><a href="https://www.denbi.de"> <img src="{{ $sponsorLogo1 }}" alt="Supported by deNBI" style="width: 5rem;" /> </a></div>
<div><a href="https://elixir-europe.org/platforms/data/core-data-resources"> <img src="{{ $sponsorLogo2 }}" alt="Supported by Elixir" style="width: 3rem;" /> </a></div>
<div><a href="https://libis.uni-heidelberg.de/"> <img src="{{ $sponsorLogo3 }}" alt="Supported by LiBiS" style="width: 3rem;" /> </a></div>
<footer id="footer" class="footer-redesign">
<div class="footer-inner">

<!-- Brand + Partner logos -->
<div class="footer-brand">
<div class="footer-title">{{ $title }}</div>
<div class="footer-partners">
<a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">
<img src="{{ $deployedBy }}" alt="Deploys by Netlify" />
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
</a>
<a href="https://www.denbi.de" target="_blank" rel="noopener noreferrer">
<img src="{{ $sponsorLogo1 }}" alt="Supported by deNBI" />
</a>
<a href="https://elixir-europe.org/platforms/data/core-data-resources" target="_blank" rel="noopener noreferrer">
<img src="{{ $sponsorLogo2 }}" alt="Supported by Elixir" />
</a>
<a href="https://libis.uni-heidelberg.de/" target="_blank" rel="noopener noreferrer">
<img src="{{ $sponsorLogo3 }}" alt="Supported by LiBiS" />
</a>
</div>
</div>

<!-- Link columns -->
<nav class="footer-links" aria-label="Footer navigation">
{{- range $quickLinks }}
<div class="link-column">
<div class="footer-column">
<div class="footer-header">
</div>
<ul class="link-list">
{{- range .links }}
<li class="link-list">
<a class="footer-link" href="{{ .link }}">
{{ .text }}
</a>
</li>
{{- end }}
</ul>
</div>
</div>
<div class="footer-link-group">
{{- if .heading }}
<h4 class="footer-group-heading">{{ .heading }}</h4>
{{- end }}
<ul>
{{- range .links }}
<li>
<a href="{{ .link }}">{{ .text }}</a>
</li>
{{- end }}
</ul>
</div>
{{- end }}
</nav>

</div>

<!-- Bottom bar: socials + copyright -->
<div class="footer-bottom">
<div class="footer-socials">
{{- range $socialMedia }}
<a href="{{ .link }}" aria-label="{{ .link }}" target="_blank" rel="noopener noreferrer">
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
{{if .icon -}}
{{- partial "svg-icon" .icon -}}
{{- else -}}
<span class="icon">ⓘ</span>
{{- end }}
</a>
{{- end }}
<div class="footer-actions">
<nav class="level is-mobile">
<div class="social-media-icons">
{{- range $socialMedia }}
<a class="level-item" href="{{ .link }}" aria-label="{{ .link }}">
{{if .icon -}}
{{- partial "svg-icon" .icon -}}
{{- else -}}
<span class="icon">ⓘ</span>
{{- end }}
</a>
{{- end }}
</div>
</nav>
<div class="copyright">&copy; {{ now.Year}} {{ $title }}. All rights reserved.</div>
</div>
</div>
<div class="footer-copyright">&copy; {{ now.Year }} {{ $title }}. All rights reserved.</div>
</div>
</footer>