Skip to content

Commit 85b5fe9

Browse files
chriscarrollsmithchriscarrollsmith
authored
style(footer): improve site footer layout and typography (#226)
Use a responsive grid footer with aligned padding, updated link styling, and browser tests for mobile centering and desktop alignment.
1 parent 856af8a commit 85b5fe9

3 files changed

Lines changed: 100 additions & 32 deletions

File tree

‎static/css/extras.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -434,6 +434,68 @@ input:invalid:not(:placeholder-shown) + .invalid-feedback {
434434
}
435435
}
436436

437+
/* Site footer: align horizontal padding with navbar; spread copyright and contact. */
438+
.site-footer-inner {
439+
padding-inline: 1.25rem;
440+
}
441+
442+
.site-footer-row {
443+
display: grid;
444+
gap: 1.25rem;
445+
text-align: center;
446+
}
447+
448+
.site-footer-copyright,
449+
.site-footer-links,
450+
.site-footer-contact {
451+
min-width: 0;
452+
}
453+
454+
.site-footer-heading {
455+
font-family: var(--font-display);
456+
font-weight: 600;
457+
font-size: 1rem;
458+
line-height: 1.15;
459+
letter-spacing: -0.015em;
460+
color: var(--muted);
461+
margin: 0 0 0.5rem;
462+
}
463+
464+
.site-footer-body,
465+
.site-footer-body a {
466+
font-family: var(--font-body);
467+
font-size: 1rem;
468+
line-height: 1.55;
469+
color: var(--muted);
470+
}
471+
472+
.site-footer-body a:hover {
473+
color: var(--primary);
474+
}
475+
476+
@media (min-width: 992px) {
477+
.site-footer-row {
478+
grid-template-columns: 1fr auto 1fr;
479+
align-items: end;
480+
gap: 2rem;
481+
}
482+
483+
.site-footer-copyright {
484+
justify-self: start;
485+
text-align: start;
486+
}
487+
488+
.site-footer-links {
489+
justify-self: center;
490+
text-align: center;
491+
}
492+
493+
.site-footer-contact {
494+
justify-self: end;
495+
text-align: end;
496+
}
497+
}
498+
437499
/* Pending invitations in organization members card. */
438500
.invitation-list-item-body {
439501
display: flex;

‎templates/base/partials/footer.html‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,35 @@
1-
<footer class="bg-light py-4 mt-auto">
2-
<div class="container">
3-
<div class="row">
4-
<!-- Copyright Information -->
5-
<div class="col-md-4 text-center text-md-start mb-3 mb-md-0 d-flex flex-column justify-content-end">
6-
<p class="mb-0">Created by Promptly Technologies, LLC and released under the <a href="https://opensource.org/license/mit">MIT License</a>.</p>
7-
</div>
1+
<footer class="site-footer bg-light py-4 mt-auto">
2+
<div class="container-fluid site-footer-inner">
3+
<div class="site-footer-row">
4+
<div class="site-footer-copyright">
5+
<p class="site-footer-body mb-0">
6+
Created by <a href="https://promptlytechnologies.com/">Promptly Technologies, LLC</a><br>
7+
and released under the
8+
<a href="https://opensource.org/license/mit">MIT License</a>.
9+
</p>
10+
</div>
811

9-
<!-- Quick Links -->
10-
<div class="col-md-4 text-center mb-3 mb-md-0">
11-
<h5 class="text-muted mb-2">Quick Links</h5>
12-
<ul class="list-inline mb-0">
13-
<li class="list-inline-item"><a href="{{ url_for('read_static_page', page_name='about') }}" class="text-muted">About</a></li>
14-
<li class="list-inline-item"><a href="{{ url_for('read_static_page', page_name='privacy-policy') }}" class="text-muted">Privacy Policy</a></li>
15-
<li class="list-inline-item"><a href="{{ url_for('read_static_page', page_name='terms-of-service') }}" class="text-muted">Terms of Service</a></li>
16-
</ul>
17-
</div>
12+
<div class="site-footer-links">
13+
<h5 class="site-footer-heading mb-2">Quick Links</h5>
14+
<ul class="list-inline site-footer-body mb-0">
15+
<li class="list-inline-item">
16+
<a href="{{ url_for('read_static_page', page_name='about') }}">About</a>
17+
</li>
18+
<li class="list-inline-item">
19+
<a href="{{ url_for('read_static_page', page_name='privacy-policy') }}">Privacy Policy</a>
20+
</li>
21+
<li class="list-inline-item">
22+
<a href="{{ url_for('read_static_page', page_name='terms-of-service') }}">Terms of Service</a>
23+
</li>
24+
</ul>
25+
</div>
1826

19-
<!-- Contact Information -->
20-
<div class="col-md-4 text-center text-md-end">
21-
<h5 class="text-muted mb-2">Contact Us</h5>
22-
<p class="mb-0">
23-
<a href="mailto:support@promptlytechnologies.com" class="text-muted">support@promptlytechnologies.com</a>
24-
</p>
25-
</div>
27+
<div class="site-footer-contact">
28+
<h5 class="site-footer-heading mb-2">Contact Us</h5>
29+
<p class="site-footer-body mb-0">
30+
<a href="mailto:support@promptlytechnologies.com">support@promptlytechnologies.com</a>
31+
</p>
2632
</div>
33+
</div>
2734
</div>
28-
</footer>
35+
</footer>

‎tests/browser/test_mobile_layout_overflow.py‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -501,13 +501,12 @@ def test_footer_columns_centered_on_mobile(
501501
html = _inject_static_css(auth_client_owner.get("/dashboard/").text)
502502

503503
layout_check = """() => {
504-
const cols = document.querySelectorAll('footer .row > [class*="col-md-4"]');
505-
if (cols.length < 3) {
506-
return { ok: false, reason: 'missing footer columns' };
504+
const copyrightCol = document.querySelector('.site-footer-copyright');
505+
const quickLinksCol = document.querySelector('.site-footer-links');
506+
const contactCol = document.querySelector('.site-footer-contact');
507+
if (!copyrightCol || !quickLinksCol || !contactCol) {
508+
return { ok: false, reason: 'missing footer sections' };
507509
}
508-
const copyrightCol = cols[0];
509-
const quickLinksCol = cols[1];
510-
const contactCol = cols[2];
511510
const ratio = document.documentElement.scrollWidth / window.innerWidth;
512511
const copyrightCentered = getComputedStyle(copyrightCol).textAlign === 'center';
513512
const quickLinksCentered = getComputedStyle(quickLinksCol).textAlign === 'center';
@@ -534,9 +533,9 @@ def test_footer_copyright_column_left_aligned_on_desktop(
534533
html = _inject_static_css(auth_client_owner.get("/dashboard/").text)
535534

536535
layout_check = """() => {
537-
const copyrightCol = document.querySelector('footer .row > [class*="col-md-4"]');
536+
const copyrightCol = document.querySelector('.site-footer-copyright');
538537
if (!copyrightCol) {
539-
return { ok: false, reason: 'missing copyright column' };
538+
return { ok: false, reason: 'missing copyright section' };
540539
}
541540
return {
542541
ok: getComputedStyle(copyrightCol).textAlign === 'start'

0 commit comments

Comments
 (0)