Update style of next/prev section pager nav (#393)

exampleSite/config.toml

@@ -110,7 +110,7 @@ defaultContentLanguageInSubdir = false
   # Display comment count? Requires commenting to be enabled.
   comment_count = true
 
-  # Display section pager for posts?
+  # Display next/previous section pager?
   section_pager = false
 
   # Enable global LaTeX math rendering?

i18n/en.yaml

@@ -14,6 +14,12 @@
 - id: minute_read
   translation: min read
 
+- id: previous
+  translation: Previous
+
+- id: next
+  translation: Next
+
 # Buttons
 
 - id: btn_preprint

layouts/_default/single.html

@@ -35,7 +35,7 @@
 {{ end }}
 
 {{ if .Site.Params.section_pager }}
-<div class="container article-widget">
+<div class="article-container article-widget">
   {{ partial "section_pager.html" . }}
 </div>
 {{ end }}

layouts/partials/css/academic.css

@@ -226,6 +226,39 @@ small,
   color: red;
 }
 
+/*************************************************
+ *  Pager.
+ **************************************************/
+
+.post-nav {
+  margin-top: 1rem;
+  font-size: 0.8rem;
+}
+
+.post-nav-item {
+  hyphens: auto;
+  word-wrap: break-word;
+  padding: 11px 0 12px;
+  width: 100%;
+}
+
+.post-nav-item a {
+  color: #2b2b2b;
+  line-height: 1.7;
+  text-transform: none;
+}
+
+.post-nav-item .meta-nav {
+  color: #767676;
+  font-weight: 900;
+  line-height: 2;
+  text-transform: uppercase;
+}
+
+.dark .post-nav-item a {
+  color: #ddd;
+}
+
 /*************************************************
  *  Home Sections
  **************************************************/

layouts/partials/section_pager.html

@@ -1,13 +1,14 @@
-<nav>
-  <ul class="pager">
-    {{if .PrevInSection}}
-    <li class="previous"><a href="{{.PrevInSection.Permalink}}"><span
-      aria-hidden="true">&larr;</span> {{.PrevInSection.Title}}</a></li>
-    {{end}}
-
-    {{if .NextInSection}}
-    <li class="next"><a href="{{.NextInSection.Permalink}}">{{.NextInSection.Title}} <span
-      aria-hidden="true">&rarr;</span></a></li>
-    {{end}}
-  </ul>
-</nav>
+<div class="post-nav">
+  {{if .NextInSection}}
+  <div class="post-nav-item">
+    <div class="meta-nav">{{ i18n "next" }}</div>
+    <a href="{{.NextInSection.Permalink}}" rel="next">{{.NextInSection.Title}}</a>
+  </div>
+  {{end}}
+  {{if .PrevInSection}}
+  <div class="post-nav-item">
+    <div class="meta-nav">{{ i18n "previous" }}</div>
+    <a href="{{.PrevInSection.Permalink}}" rel="prev">{{.PrevInSection.Title}}</a>
+  </div>
+  {{end}}
+</div>

layouts/project/single.html

@@ -62,9 +62,11 @@
   </div>
 </article>
 
-<div class="container">
+{{ if .Site.Params.section_pager }}
+<div class="article-container article-widget">
   {{ partial "section_pager.html" . }}
 </div>
+{{ end }}
 
 {{ partial "footer_container.html" . }}
 {{ partial "footer.html" . }}

layouts/publication/single.html

@@ -100,9 +100,11 @@
   </div>
 </div>
 
-<div class="container">
+{{ if .Site.Params.section_pager }}
+<div class="article-container article-widget">
   {{ partial "section_pager.html" . }}
 </div>
+{{ end }}
 
 {{ partial "footer_container.html" . }}
 {{ partial "footer.html" . }}

layouts/talk/single.html

@@ -107,9 +107,11 @@
   </div>
 </div>
 
-<div class="container">
+{{ if .Site.Params.section_pager }}
+<div class="article-container article-widget">
   {{ partial "section_pager.html" . }}
 </div>
+{{ end }}
 
 {{ partial "footer_container.html" . }}
 {{ partial "footer.html" . }}