Style the site footer

* Split the copyright and the "built with" text into separate configs
* Style footer with smaller text
* Add a thin border separating footer from rest of page

exampleSite/config.toml

@@ -1,7 +1,7 @@
 baseURL = "http://example.org/"
 languageCode = "en-us"
 title = "Semantic IndieWeb Theme"
-copyright = "Copyright © 2019, Copyright Owner Name | Built with [Hugo](https://gohugo.io/)"
+copyright = "Copyright © 2019, Copyright Owner Name"
 theme = "semantic-indieweb"
 paginate = 5
 
@@ -10,6 +10,7 @@ paginate = 5
 
 [params]
   subtitle = "A theme with no CSS and only basic layouts"
+  builtWith = "Built with [Hugo](https://gohugo.io/)"
   homepageSectionTitle = "What's New"
   mainSections = [ "posts" ]
 

layouts/_default/baseof.html

@@ -23,7 +23,7 @@
         <!-- Code that all your templates share, like a header -->
         {{ partial "header.html" . }}
         {{- end }}
-        <nav>
+        <nav class="site-menu">
             {{ block "site-menu" . -}}
             {{ partial "site-menu.html" . }}
             {{- end }}

layouts/partials/footer.html

@@ -1,3 +1,6 @@
 {{ with .Site.Copyright }}
 <p class="copyright">{{ . | markdownify }}</p>
+{{ end }}
+{{ with .Site.Params.BuiltWith }}
+<p class="built-with">{{ . | markdownify }}</p>
 {{ end }}

layouts/partials/header.html

@@ -1,6 +1,6 @@
-<hgroup>
+<hgroup class="site-header">
     <h1>{{.Site.Title}}</h1>
     {{- if .Site.Params.Subtitle }}
-    <h2 class="subtitle">{{.Site.Params.Subtitle}}</h2>
+    <h2>{{.Site.Params.Subtitle}}</h2>
     {{- end }}
 </hgroup>

layouts/partials/paginator.html

@@ -1,4 +1,4 @@
-<nav>
+<nav class="paginator">
     <ul>
         <li>
             {{if .HasPrev}}

layouts/partials/prev-next-page.html

@@ -1,5 +1,5 @@
 {{ if not .Params.Menu }}
-<nav>
+<nav class="paginator">
     <ul>
         <li>
             {{ if .NextInSection }}

static/css/layout.css

@@ -7,3 +7,24 @@
 div.author-card-content {
   flex-grow: 1;
 }
+
+nav.site-menu ul {
+  display:flex;
+  flex-wrap: wrap;
+  justify-content: left;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+nav.site-menu ul li {
+  padding: 0.5em 0.5em 0.5em 0.5em;
+}
+
+nav.paginator ul {
+  display: flex;
+  justify-content: space-between;
+  list-style-type: none;
+  padding-inline-start: 1em;
+  padding-inline-end: 1em;
+}

static/css/style.css

@@ -1,3 +1,22 @@
+/* Styles for site header */
+hgroup.site-header {
+  border-top: double;
+  border-bottom: thin solid;
+  margin-bottom: 0.5em;
+}
+
+hgroup.site-header h1 {
+  margin: 0;
+}
+
+hgroup.site-header h2 {
+  font-weight: normal;
+  font-size: 1em;
+  font-style: italic;
+  padding-left: 0.5em;
+  margin: 0;
+}
+
 img.u-photo {
   max-width: 60px;
   padding: 0.5em;
@@ -5,4 +24,23 @@ img.u-photo {
 
 .glyph {
   font-size: 1.25em;
+}
+
+nav.site-menu {
+  border-top: thin solid;
+  border-bottom: double;
+}
+
+/* Styles for site footer */
+p.copyright {
+  border-top: thin solid;
+  font-size: 0.8em;
+  text-align: center;
+  margin: 0;
+}
+
+p.built-with {
+  text-align: center;
+  font-size: 0.8em;
+  margin: 0;
 }