Carpentry & Mounting h1: Georgia italic ampersand via styleAmp filter
This commit is contained in:
@@ -14,6 +14,11 @@ module.exports = function (eleventyConfig) {
|
||||
new Date().getFullYear()
|
||||
);
|
||||
|
||||
// Wrap & with a Georgia-italic span so headings use an elegant ampersand
|
||||
eleventyConfig.addFilter("styleAmp", (str) =>
|
||||
String(str).replace(/&|&/g, '<span class="amp">&</span>')
|
||||
);
|
||||
|
||||
return {
|
||||
templateFormats: ["njk", "html", "xml", "txt"],
|
||||
htmlTemplateEngine: "njk",
|
||||
|
||||
@@ -31,7 +31,7 @@ layout: layouts/base.njk
|
||||
</ol>
|
||||
</nav>
|
||||
<p class="section-eyebrow">{{ _eyebrow }}</p>
|
||||
<h1 class="page-hero__title">{{ _title }}</h1>
|
||||
<h1 class="page-hero__title">{{ _title | styleAmp | safe }}</h1>
|
||||
<p class="page-hero__lead">{{ _lead }}</p>
|
||||
<a href="{{ rootPath }}contact/index.html" class="btn btn--primary">Request a Quote</a>
|
||||
</div>
|
||||
|
||||
@@ -333,7 +333,11 @@ a {
|
||||
}
|
||||
|
||||
/* Georgia italic has a far more elegant ampersand than Fraunces at small sizes */
|
||||
.nav__brand-amp {
|
||||
/* Shared elegant ampersand — applied via the styleAmp filter in headings
|
||||
and directly in nav/footer brand markup */
|
||||
.amp,
|
||||
.nav__brand-amp,
|
||||
.footer__brand-amp {
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -1117,10 +1121,7 @@ a {
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer__brand-amp {
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-style: italic;
|
||||
}
|
||||
/* .footer__brand-amp covered by shared .amp rule in section 6 (Navigation) */
|
||||
|
||||
.footer__brand:hover .footer__brand-her,
|
||||
.footer__brand:hover .footer__brand-tagline {
|
||||
|
||||
Reference in New Issue
Block a user