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

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

@@ -2,17 +2,30 @@
<div class="footer__inner container">
<div>
<a href="{{ rootPath }}index.html" class="footer__brand">HER</a>
<p class="footer__tagline">Home Enhancement and Renovation<br>San Francisco &amp; Bay Area</p>
<a href="{{ rootPath }}index.html" class="footer__brand" aria-label="HER Home Enhancement &amp; Restoration — Home">
<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>
<nav aria-label="Footer navigation">
<p class="footer__nav-heading">Services</p>
<p class="footer__nav-heading">Services in the Bay Area</p>
<div class="footer__nav-cols">
<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>
<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>
<div>
@@ -27,7 +40,7 @@
<div class="footer__bottom">
<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>
</footer>

46
src/css/main.css
View File

@@ -1083,30 +1083,48 @@ a {
@media (min-width: 1024px) {
.footer__inner {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 1fr 2fr 1fr;
}
}
.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-style: italic;
font-size: var(--text-2xl);
color: var(--col-copper);
text-decoration: none;
margin-bottom: var(--space-2);
letter-spacing: -0.01em;
line-height: 1;
flex-shrink: 0;
transition: color 0.2s ease;
}
.footer__brand:hover {
color: var(--col-copper-hover);
.footer__brand-tagline {
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 {
font-family: var(--font-body);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.55);
margin: 0;
.footer__brand-amp {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
}
.footer__brand:hover .footer__brand-her,
.footer__brand:hover .footer__brand-tagline {
color: var(--col-copper-hover);
}
.footer__nav-heading {
@@ -1120,6 +1138,12 @@ a {
margin-bottom: var(--space-2);
}
.footer__nav-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.footer__nav {
list-style: none;
margin: 0;