adolforeyna/WFK_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix newsletter styling on the front page and update secondary button

Browse Source
This commit is contained in:
Adolfo Reyna
2026-03-13 00:30:07 -04:00
parent 78a94fb2d2
commit fb54211f34
2 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
front-page.php
View File

@@ -84,18 +84,16 @@ $hero_bg = get_theme_mod('hero_background_image', get_template_directory_uri() .
</main><!-- #main -->
</div><!-- .container -->
<section class="bg-primary text-white py-5">
<div class="container text-center py-3">
<h3 class="h4 mb-4 font-serif">Receive weekly insights directly in your inbox.</h3>
<form class="d-flex justify-content-center mx-auto" style="max-width: 500px;">
<div class="input-group input-group-lg shadow-sm">
<input type="email" placeholder="Email address" class="form-control border-0 px-4" required>
<button type="submit" class="btn btn-dark px-4 border-0">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
<section class="bg-primary text-white py-5 mt-5">
<div class="container text-center py-5">
<h3 class="display-6 fw-bold mb-4 font-serif text-white">Receive weekly insights directly in your inbox.</h3>
<p class="lead mb-4 font-sans text-light">Join our community and get our latest thoughts sent straight to you.
</p>
<form class="mx-auto" style="max-width: 500px;">
<div class="input-group input-group-lg shadow">
<input type="email" placeholder="Your email address" class="form-control border-0 px-4" required>
<button type="submit" class="btn btn-secondary px-5 border-0 fw-bold text-uppercase h-100">
Subscribe
</button>
</div>
</form>

17
style.css
View File

@@ -75,10 +75,25 @@ h6,
color: #fff;
}
.btn-secondary,
.btn-secondary {
background-color: var(--brand-gold-leaf);
border-color: var(--brand-gold-leaf);
color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
background-color: #a88849;
/* Darker Gold Leaf */
border-color: #a88849;
color: #fff;
}
.btn-outline-secondary {
color: var(--brand-gold-leaf);
border-color: var(--brand-gold-leaf);
background-color: transparent;
}
.btn-outline-secondary:hover {