Split out article pagination and close #8

3 files changed, 112 insertions, 56 deletions

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index ea0bda4..37aebe2 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -3,17 +3,38 @@
 
 <!-- Footer content -->
     <div id="footer">
-        {{ partial "social.html" . }}
-        <p class="copyright">
-            &copy; {{ dateFormat "2006" now }} {{ .Site.Params.CopyrightOwner }}
-        </p>
-        <p class="h-card">
-          <img class="u-photo" src="{{ .Site.BaseURL }}{{ .Site.Params.Avatar }}" />
-          <a class="p-name u-url" href="{{ .Site.Home }}" rel="me">{{ .Site.Params.AuthorName }}</a>
-          <a class="u-email" href="mailto:{{ .Site.Params.IndieWeb.EmailAddress }}">{{ .Site.Params.IndieWeb.EmailAddress }}</a>, 
-          <span class="p-locality">{{ .Site.Params.IndieWeb.City }}</span>
-          <span class="p-country-name">{{ .Site.Params.IndieWeb.Country }}</span>
-        </p>
+      {{ if or (.Prev) (.Next) }}
+      <nav id="article-skip">
+        <div class="prev">
+          {{ if and (.Prev) (not .Params.Menu) }}
+          <a alt="Newer article" href="{{ .Prev.Permalink }}">&larr; Newer</a>
+          {{ else }}
+          <p>&nbsp;</p>
+          {{ end }}
+        </div>
+        <div class="top">
+          <a alt="Top of page" href="#">Top</a>
+        </div>
+        <div class="next">
+          {{ if and (.Next) (not .Params.Menu) }}
+          <a alt="Older article" href="{{ .Next.Permalink }}">Older &rarr;</a>
+          {{ else }}
+          <p>&nbsp;</p>
+          {{ end }}
+        </div>
+      </nav>
+      {{ end }}
+      {{ partial "social.html" . }}
+      <p class="copyright">
+          &copy; {{ dateFormat "2006" now }} {{ .Site.Params.CopyrightOwner }}
+      </p>
+      <p class="h-card">
+        <img class="u-photo" src="{{ .Site.BaseURL }}{{ .Site.Params.Avatar }}" />
+        <a class="p-name u-url" href="{{ .Site.Home }}" rel="me">{{ .Site.Params.AuthorName }}</a>
+        <a class="u-email" href="mailto:{{ .Site.Params.IndieWeb.EmailAddress }}">{{ .Site.Params.IndieWeb.EmailAddress }}</a>, 
+        <span class="p-locality">{{ .Site.Params.IndieWeb.City }}</span>
+        <span class="p-country-name">{{ .Site.Params.IndieWeb.Country }}</span>
+      </p>
     </div>
 
 <!-- Close the body/html document -->
diff --git a/layouts/partials/pagenav.html b/layouts/partials/pagenav.html
index 8adeb8f..7c90183 100644
--- a/layouts/partials/pagenav.html
+++ b/layouts/partials/pagenav.html
@@ -1,40 +1,16 @@
 <nav>
     {{ $currentPage := . }}
     <div id="page-nav">
-        <!--
-            Left-most entry is a link to the next-newest article, if we're
-            looking at posts, or a spacer if we're either on the home page or a
-            menu-content page.
-        -->
-        {{ if and (.Prev) (not .Params.Menu) }}
-        <div class="static-page-nav-item">
-            <a alt="Newer article" href="{{ .Prev.Permalink }}">&larr; Newer</a>
+        <div class="page-nav-item">
+            <a href="{{ .Site.BaseURL }}">Home</a>
         </div>
-        {{ else }}
-        <div class="static-page-nav-spacer">&nbsp;</div>
-        {{ end }}
-
-        <!-- Next, the menu of static content pages (e.g., about, now). -->
         {{ range .Site.Menus.main }}
-            <div class="static-page-nav-item">
+            <div class="page-nav-item">
                 <a href="{{ .URL }}">
                     {{ .Pre }}
                     <span>{{ .Name }}</span>
                 </a>
             </div>
         {{ end }}
-
-        <!--
-            Right-most entry is a link to the next-oldest article if we're
-            looking at posts, or a spacer if we're either on the home page or a
-            menu-content page.
-        -->
-        {{ if and (.Next) (not .Params.Menu) }}
-        <div class="static-page-nav-item">
-            <a alt="Older article" href="{{ .Next.Permalink }}">Older &rarr;</a>
-        </div>
-        {{ else }}
-        <div class="static-page-nav-spacer">&nbsp;</div>
-        {{ end }}
     </div>
 </nav>
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 6466bfa..541ba2b 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -353,7 +353,6 @@ div#site-header > p {
 }
 
 div#page-nav, #pagination {
-    display: inline-block;
     font-family: 'Fira Sans', Fallback, sans-serif;
     font-size: smaller;
     line-height: 1em;
@@ -364,39 +363,42 @@ div#page-nav, #pagination {
     width: 100%;
 }
 
-div.static-page-nav-item, div.static-page-nav-item-disabled, div.static-page-nav-spacer {
-    display: inline-block;
-    float: left;
+#page-nav {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-around;
+}
+
+div.page-nav-item, div.page-nav-spacer {
+    flex: 1 1 auto;
     margin: 0;
     padding: 0;
-    width: 20%;
 }
 
-div.static-page-nav-item > a {
+div.page-nav-item > a {
     color: #00416a;
     display: block;
     text-decoration: none;
+    width: 100%;
 }
 
-div.static-page-nav-item > a:hover {
+div.page-nav-item > a:hover {
+    background-color: #00416a;
     color: #dee5e9;
 }
 
-div.static-page-nav-item:hover, div.pagination-item:hover {
-    background-color: #00416a;
+div#pagination {
+    display: inline-block;
 }
 
-div.static-page-nav-item-disabled > p {
-    display: block;
-    font-weight: bold;
-    line-height: 1em;
-    margin: 0;
-    padding: 0;
+div.pagination-item:hover {
+    background-color: #00416a;
 }
 
 div#pagination {
-    margin-bottom: 0;
-    margin-top: 3.5em;
+    margin: 3.5em 0;
 }
 
 div.pagination-item, div.pagination-item-spacer {
@@ -420,7 +422,7 @@ div.pagination-item > a:hover {
 aside#social {
     border-top: 2px solid #3f3f3f;
     height: 48px;
-    margin: 5em auto 0 auto;
+    margin: 0 auto;
     width: 100%;
 }
 
@@ -434,4 +436,61 @@ div#social-icons {
 .icon-24x24 {
     height: 24px;
     width: 24px;
+}
+
+nav#article-skip {
+    align-items: flex-start;
+    border-top: 1px solid #dee5e9;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    font-family: 'Fira Sans', Fallback, sans-serif;
+    font-size: smaller;
+    justify-content: space-around;
+    line-height: 1em;
+    margin: 5em 0 0 0;
+    padding: 0;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.next, .prev, .top {
+    flex: 0 1 auto;
+    margin: 0;
+    padding: 0.5em;
+    width: 100%;
+}
+
+.next {
+    text-align: right;
+}
+
+.prev {
+    text-align: left;
+}
+
+.top {
+    border-left: 1px solid #dee5e9;
+    border-right: 1px solid #dee5e9;
+}
+
+div.next > p,
+div.prev > p {
+    margin: 0;
+    padding: 0;
+}
+
+div.next > a,
+div.prev > a,
+div.top > a {
+    color: #00416a;
+    text-decoration: none;
+}
+
+
+div.next > a:hover,
+div.prev > a:hover,
+div.top > a:hover {
+    background-color: #00416a;
+    color: #dee5e9;
 }
\ No newline at end of file