🎨 💄 layouts(index): Reduce padding around index text (unicef#178)

This commit moves the index page text (if provided in the Hugo site)
into the `<section>` tag for the main topics. It uses a Bootstrap
container inside of the `<section>` and therefore exists inside of the
styling rules for the section instead of working against its styling.

This reduces the large amount of whitespace that exists between the
search bar section of the site and the topics. It is easier to realize
there is more content.

Related to unicef#154.

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>

assets/css/style.css

@@ -273,7 +273,7 @@ h4:hover a {
 
 .section,
 section.main-section {
-    padding-top: calc(250px - 4vw);
+    padding-top: 10vh;
 }
 
 @media (max-width: 768px) {

layouts/index.html

@@ -1,14 +1,14 @@
 {{ define "main" }}
 
-  {{ if .Content }}
-  <section class="section text-center pb-0">
-    <div class="container">
-    {{ .Content }}
-    </div>
-  </section>
-  {{ end }}
-  {{ "<!-- topics -->" | safeHTML }}
   <section class="section">
+    {{ if .Content }}
+      {{ "<!-- index page text -->" | safeHTML }}
+      <div class="container text-center pb-5">
+        {{ .Content }}
+      </div>
+      {{ "<!-- /index page text -->" | safeHTML }}
+    {{ end }}
+    {{ "<!-- topics -->" | safeHTML }}
     <div class="container">
       <div class="row justify-content-center">
         <div class="col-12 text-center">