Simplify and generalize home page

README.md

@@ -79,7 +79,7 @@ dot. If both are the same, only one is used without the middle dot.
 The HTML body can have a header, a body, and a footer. The header has
 the section menus, if any; the page title, if any; the page description,
 if any; and the page date, if any. The body has the page content, if
-any. The footer has the site copyright notice, if any.
+any. The footer has the copyright notice, if any.
 
 A section menu is highlighted if its path is a prefix of the path of the
 current page. For example, the section menu path `/foo/` matches the
@@ -90,10 +90,12 @@ page `content/_index.md`.
 The page date is the publish date, if any; otherwise, it's the creation
 date.
 
-The home page shows the `blurb`, `description`, `greeting`, and `title`
-parameters from `content/_index.md`, the `avatar.jpg` and `cover.jpg`
-images at the site root, and linked icons for all the social sites
-configured in `config.yaml`.
+The home page body has the `stretch`, `center`, `greeting`, and `blurb`
+parameters from `content/_index.md`, if any; the page content, if any;
+and linked icons for the social sites configured in `config.yaml`, if
+any. `stretch` is an image that is stretched fully horizontally with
+`background-position: center` and `background-size: cover`. `center` is
+an image that is centered.
 
 Single pages use the `link` page parameter, if any, as the reference for
 an anchor around the page title, if any. If the page or site parameter

exampleSite/content/_index.md

@@ -1,6 +1,7 @@
 ---
-blurb: "There's a new daddy in town. A discipline daddy. If I make this comeback, I'll buy you a hundred George Michaels that you can teach to drive! These are my awards, Mother. From Army. The seal is for marksmanship, and the gorilla is for sand racing. We'll have to find something to do so that people can look at you without wanting to kill <a href=\"https://bluthipsum.com\">themselves</a>.<br><br><a href=\"https://github.com/willfaught/paige\">Paige: A simple Hugo theme</a></p>"
+blurb: "<p>There's a new daddy in town. A discipline daddy. If I make this comeback, I'll buy you a hundred George Michaels that you can teach to drive! These are my awards, Mother. From Army. The seal is for marksmanship, and the gorilla is for sand racing. We'll have to find something to do so that people can look at you without wanting to kill <a href=\"https://bluthipsum.com\">themselves</a>.</p><p><a href=\"https://github.com/willfaught/paige\">Paige: A simple Hugo theme</a></p>"
 description: Go ahead, touch the Cornballer
 greeting: You know [best](https://www.youtube.com/watch?v=1WDW8XKEGgU)
+stretch: cover.jpg
 title: No Borders, No Limits
 ---

layouts/_default/home.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 {{ if or .Title .Description }}
-<div class="row text-center">
-    <div class="col">
+<div class="row">
+    <div class="col text-center">
         {{ if .Title }}
         <h1 class="display-1 fw-bold">{{ .Title | markdownify }}</h1>
         {{ end }}
@@ -11,27 +11,42 @@
     </div>
 </div>
 {{ end }}
-<div class="row py-3">
-    <div class="col">
-        <div class="rounded-4" style="background-image: url('{{ .Site.BaseURL }}/cover.jpg'); background-position: center; background-size: cover; height: 20rem; width: 100%"></div>
+{{ if .Params.stretch }}
+<div class="row">
+    <div class="col pb-3 text-center">
+        <div class="rounded-4" style="background-image: url('{{ relURL .Params.stretch }}'); background-position: center; background-size: cover; height: 20rem; max-width: 100%"></div>
     </div>
 </div>
-<div class="d-flex justify-content-center py-3 row">
-    <div class="col-12 col-xl-10">
-        <div class="d-flex justify-content-evenly align-items-center row">
-            <div class="col-12 col-md-6">
-                <p class="display-5 fw-bold lh-1">{{ .Params.greeting | markdownify }}</p>
-                <p class="lead">{{ .Params.blurb | markdownify }}</p>
-            </div>
-            <div class="col-12 col-md-6 text-center">
-                <img alt="Avatar" class="rounded-4" src="{{ .Site.BaseURL }}/avatar.jpg" style="max-height: 20rem; max-width: 100%">
+{{ end }}
+{{ if .Params.center }}
+<div class="row">
+    <div class="col pb-3 text-center">
+        <img alt="Avatar" class="rounded-4" src="{{ relURL .Params.center }}" style="max-height: 20rem; max-width: 100%">
     </div>
+</div>
+{{ end }}
+{{ if .Params.greeting }}
+<div class="row">
+    <div class="col text-center">
+        <h2 class="display-5 fw-bold">{{ .Params.greeting | markdownify }}</h2>
     </div>
+</div>
+{{ end }}
+{{ if .Params.blurb }}
+<div class="row">
+    <div class="col col-lg-6 mx-auto text-center">
+        <div class="lead">{{ .Params.blurb | markdownify }}</div>
     </div>
 </div>
+{{ end }}
+{{ if .Content }}
+<div class="row">
+    <div class="col">{{ .Content }}</div>
+</div>
+{{ end }}
 {{ if .Site.Social }}
-<div class="py-3 row">
-    <div class="col text-center">
+<div class="row">
+    <div class="col pb-3 text-center">
         {{ range $k, $v := .Site.Social }}
         <a href="{{ $v }}"><i class="bi bi-{{ $k }} display-6 px-2"></i></a>
         {{ end }}