Fix layout styling for navbar spacing and hero legibility
This commit is contained in:
@@ -11,13 +11,14 @@ $hero_bg = get_theme_mod('hero_background_image', get_template_directory_uri() .
|
|||||||
<section class="hero-section text-white d-flex align-items-center position-relative"
|
<section class="hero-section text-white d-flex align-items-center position-relative"
|
||||||
style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url('<?php echo esc_url($hero_bg); ?>'); background-size: cover; background-position: center; min-height: 80vh;">
|
style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url('<?php echo esc_url($hero_bg); ?>'); background-size: cover; background-position: center; min-height: 80vh;">
|
||||||
<div class="container text-center py-5">
|
<div class="container text-center py-5">
|
||||||
<h1 class="display-3 fw-bold mb-4 font-serif">
|
<h1 class="display-3 fw-bold mb-4 font-serif text-white">
|
||||||
<?php echo get_theme_mod('hero_headline', 'Ancient Wisdom for a Modern World.'); ?></h1>
|
<?php echo get_theme_mod('hero_headline', 'Ancient Wisdom for a Modern World.'); ?>
|
||||||
<p class="lead fw-normal mb-5 w-75 mx-auto font-sans">
|
</h1>
|
||||||
|
<p class="lead fw-normal mb-5 w-75 mx-auto font-sans text-light">
|
||||||
<?php echo get_theme_mod('hero_subheadline', 'A collection of biblical insights curated for the thoughtful leader.'); ?>
|
<?php echo get_theme_mod('hero_subheadline', 'A collection of biblical insights curated for the thoughtful leader.'); ?>
|
||||||
</p>
|
</p>
|
||||||
<a href="#primary"
|
<a href="#primary"
|
||||||
class="btn btn-primary btn-lg px-5 py-3 rounded-pill text-uppercase fw-bold shadow-sm"><?php echo get_theme_mod('hero_cta_text', 'Start Reading'); ?></a>
|
class="btn btn-secondary btn-lg px-5 py-3 rounded-pill text-uppercase fw-bold shadow-sm"><?php echo get_theme_mod('hero_cta_text', 'Start Reading'); ?></a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
13
style.css
13
style.css
@@ -120,15 +120,24 @@ h6,
|
|||||||
color: var(--brand-deep-midnight);
|
color: var(--brand-deep-midnight);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-light .navbar-nav .nav-link {
|
.navbar-light .navbar-nav {
|
||||||
|
gap: 1.5rem;
|
||||||
|
/* Force spacing between wp_nav_menu list items */
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-light .navbar-nav .nav-link,
|
||||||
|
.navbar-light .navbar-nav a {
|
||||||
color: var(--brand-deep-midnight);
|
color: var(--brand-deep-midnight);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-light .navbar-nav .nav-link:hover {
|
.navbar-light .navbar-nav .nav-link:hover,
|
||||||
|
.navbar-light .navbar-nav a:hover {
|
||||||
color: var(--brand-gold-leaf);
|
color: var(--brand-gold-leaf);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user