Adjusted text positioning on top of landing page

This commit is contained in:
Nathan Schneider
2025-04-16 17:25:24 -06:00
parent 31b5a8e530
commit 52d8918671
2 changed files with 14 additions and 5 deletions

View File

@ -150,13 +150,16 @@ header {
/* Hero Section */ /* Hero Section */
.hero { .hero {
min-height: 80vh; height: calc(100vh - 80px); /* Subtract approximate header height */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
text-align: center; text-align: center;
padding: 4rem 0; padding: 10vh 0 0 0;
margin: 0;
position: relative;
box-sizing: border-box;
} }
.hero h1 { .hero h1 {
@ -175,6 +178,12 @@ section {
padding: 4rem 0; padding: 4rem 0;
} }
#about {
position: relative;
margin-top: 0;
padding-top: 2rem;
}
.section-heading { .section-heading {
text-align: center; text-align: center;
margin-bottom: 3rem; margin-bottom: 3rem;

View File

@ -1,5 +1,5 @@
{{ define "main" }} {{ define "main" }}
<section id="home" class="hero"> <div id="home" class="hero">
<div class="container"> <div class="container">
<h1>{{ .Params.hero.heading }}</h1> <h1>{{ .Params.hero.heading }}</h1>
<p>{{ .Params.hero.subheading }}</p> <p>{{ .Params.hero.subheading }}</p>
@ -7,7 +7,7 @@
<a href="{{ .Params.hero.button_link }}" class="btn">{{ .Params.hero.button_text }}</a> <a href="{{ .Params.hero.button_link }}" class="btn">{{ .Params.hero.button_text }}</a>
</div> </div>
</div> </div>
</section> </div>
<section id="about" class="bg-light"> <section id="about" class="bg-light">
<div class="container"> <div class="container">