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

Nav brand: add tagline next to HER; Georgia italic ampersand

Browse Source
This commit is contained in:
Tom Roth
2026-07-31 09:40:45 +02:00
parent dc1e8bc29c
commit 0b69b95a2f
2 changed files with 32 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/_includes/components/nav.njk
View File

@@ -3,7 +3,10 @@
<header class="nav" role="banner"> <header class="nav" role="banner">
<div class="nav__inner container"> <div class="nav__inner container">
<a href="{{ rootPath }}index.html" class="nav__brand" aria-label="HER Home Enhancement and Renovation — Home">HER</a> <a href="{{ rootPath }}index.html" class="nav__brand" aria-label="HER Home Enhancement &amp; Restoration — Home">
<span class="nav__brand-her">HER</span>
<span class="nav__brand-tagline" aria-hidden="true">Home Enhancement<br><span class="nav__brand-amp">&amp;</span> Restoration</span>
</a>
<nav aria-label="Main navigation"> <nav aria-label="Main navigation">
<ul class="nav__links" role="list"> <ul class="nav__links" role="list">

30
src/css/main.css
View File

@@ -303,17 +303,43 @@ a {
/* Brand / wordmark */ /* Brand / wordmark */
.nav__brand { .nav__brand {
display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
transition: color 0.2s ease;
}
.nav__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; letter-spacing: -0.01em;
line-height: 1;
flex-shrink: 0; flex-shrink: 0;
transition: color 0.2s ease; transition: color 0.2s ease;
} }
.nav__brand:hover { .nav__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;
}
/* Georgia italic has a far more elegant ampersand than Fraunces at small sizes */
.nav__brand-amp {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
}
.nav__brand:hover .nav__brand-her,
.nav__brand:hover .nav__brand-tagline {
color: var(--col-copper-hover); color: var(--col-copper-hover);
} }