tom/diana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Footer: brand tagline, remove tagline line, 2-col services, Bay Area heading

Browse Source
This commit is contained in:
Tom Roth
2026-07-31 09:47:58 +02:00
parent 0b69b95a2f
commit 1ead3a9674
2 changed files with 57 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/_includes/components/footer.njk
View File

@@ -2,17 +2,30 @@
<div class="footer__inner container"> <div class="footer__inner container">
<div> <div>
<a href="{{ rootPath }}index.html" class="footer__brand">HER</a> <a href="{{ rootPath }}index.html" class="footer__brand" aria-label="HER Home Enhancement &amp; Restoration — Home">
<p class="footer__tagline">Home Enhancement and Renovation<br>San Francisco &amp; Bay Area</p> <span class="footer__brand-her">HER</span>
<span class="footer__brand-tagline" aria-hidden="true">Home Enhancement<br><span class="footer__brand-amp">&amp;</span> Restoration</span>
</a>
</div> </div>
<nav aria-label="Footer navigation"> <nav aria-label="Footer navigation">
<p class="footer__nav-heading">Services</p> <p class="footer__nav-heading">Services in the Bay Area</p>
<ul class="footer__nav" role="list"> <div class="footer__nav-cols">
{% for service in services %} <ul class="footer__nav" role="list">
<li><a href="{{ rootPath }}services/{{ service.slug }}/index.html">{{ service.name }}</a></li> {% for service in services %}
{% endfor %} {% if loop.index <= 5 %}
</ul> <li><a href="{{ rootPath }}services/{{ service.slug }}/index.html">{{ service.name }}</a></li>
{% endif %}
{% endfor %}
</ul>
<ul class="footer__nav" role="list">
{% for service in services %}
{% if loop.index > 5 %}
<li><a href="{{ rootPath }}services/{{ service.slug }}/index.html">{{ service.name }}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
</nav> </nav>
<div> <div>
@@ -27,7 +40,7 @@
<div class="footer__bottom"> <div class="footer__bottom">
<div class="container"> <div class="container">
<p>&copy; {{ "" | currentYear }} Home Enhancement and Renovation &mdash; HER. All rights reserved.</p> <p>&copy; {{ "" | currentYear }} Home Enhancement &amp; Restoration &mdash; HER. All rights reserved.</p>
</div> </div>
</div> </div>
</footer> </footer>

46
src/css/main.css
View File

@@ -1083,30 +1083,48 @@ a {
@media (min-width: 1024px) { @media (min-width: 1024px) {
.footer__inner { .footer__inner {
grid-template-columns: repeat(3, 1fr); grid-template-columns: 1fr 2fr 1fr;
} }
} }
.footer__brand { .footer__brand {
display: block; display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
transition: color 0.2s ease;
}
.footer__brand-her {
font-family: var(--font-display); font-family: var(--font-display);
font-style: italic; font-style: italic;
font-size: var(--text-2xl); font-size: var(--text-2xl);
color: var(--col-copper); color: var(--col-copper);
text-decoration: none; letter-spacing: -0.01em;
margin-bottom: var(--space-2); line-height: 1;
flex-shrink: 0;
transition: color 0.2s ease; transition: color 0.2s ease;
} }
.footer__brand:hover { .footer__brand-tagline {
color: var(--col-copper-hover); font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 500;
color: var(--col-copper);
line-height: 1.38;
border-left: 1px solid rgba(181, 98, 42, 0.35);
padding-left: 0.6rem;
transition: color 0.2s ease;
} }
.footer__tagline { .footer__brand-amp {
font-family: var(--font-body); font-family: Georgia, 'Times New Roman', serif;
font-size: var(--text-sm); font-style: italic;
color: rgba(255, 255, 255, 0.55); }
margin: 0;
.footer__brand:hover .footer__brand-her,
.footer__brand:hover .footer__brand-tagline {
color: var(--col-copper-hover);
} }
.footer__nav-heading { .footer__nav-heading {
@@ -1120,6 +1138,12 @@ a {
margin-bottom: var(--space-2); margin-bottom: var(--space-2);
} }
.footer__nav-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.footer__nav { .footer__nav {
list-style: none; list-style: none;
margin: 0; margin: 0;