Fix content footer next and prev links

content/content-management/shortcodes.md

@@ -25,7 +25,7 @@ A shortcode is a simple snippet inside a content file that Hugo will render usin
 
 Another benefit is, you can update your shortcode with any related new classes or techniques, and upon generation, Hugo will easily merge in your changes. You avoid a possibly complicated search and replace operation.
 
-## Using a shortcode
+## Using Shortcodes
 
 In your content files, a shortcode can be called by using the `{{%/* name parameters*/%}}` form. Shortcode parameters are space delimited. Parameters with spaces can be quoted.
 

themes/hugodocs/layouts/partials/head/metadata-prefetch.html

@@ -6,13 +6,11 @@
   <link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
   <link href="{{ .RSSLink }}" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}" />
 {{ end }}
-{{ if .IsPage }}
-	{{with .NextInSection }}
-	<link rel="prefetch" href="{{.Permalink}}">
-	<link rel="prerender" href="{{.Permalink}}">
-	{{ end }}
-	{{with .PrevInSection }}
-	<link rel="prefetch" href="{{.Permalink}}">
-	<link rel="prerender" href="{{.Permalink}}">
-	{{ end }}
-{{ end }}
+{{with .NextInSection }}
+<link rel="prefetch" href="{{.Permalink}}">
+<link rel="prerender" href="{{.Permalink}}">
+{{ end }}
+{{with .PrevInSection }}
+<link rel="prefetch" href="{{.Permalink}}">
+<link rel="prerender" href="{{.Permalink}}">
+{{ end }}

themes/hugodocs/pipeline/scss/components/_breadcrumb.scss

@@ -1,6 +1,7 @@
 .breadcrumbs {
   list-style: none;
   display: inline-block;
+  margin-top:3px;
   li {
     float: left;
     a {

themes/hugodocs/pipeline/scss/components/_content-footer.scss

@@ -12,18 +12,36 @@
 #content-footer {
   min-height: 100px;
   height: auto;
-  display:block;
+  display: block;
   border-top: 2px solid $hugo-gray-light;
   width: 100%;
-  margin-bottom:2em;
+  margin-bottom: 2em;
 }
 
 .prev-and-next-link {
-  display:inline-block;
+  display: inline-block;
   margin-top: 2em;
   min-width: 45%;
+  max-width: 45%;
+  min-height: 70px;
+  position: relative;
+  @include MQ(M) {
+    transition: background-color .3s ease-in-out;
+    &:hover {
+      transition: background-color .3s ease-in-out;
+      background-color: $hugo-pink;
+      color: $hugo-white;
+    }
+  }
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+    min-height: 100%;
+  }
   .page-info {
-    display:inline-block;
+    display: inline-block;
+    position: relative;
     h5 {
       font-size: 16px;
       padding: 0px;
@@ -37,7 +55,6 @@
       margin: 0px;
       display: block;
       font-size: 14px;
-      text-align: center;
       line-height: 1;
       margin-top: .5em;
     }
@@ -45,21 +62,34 @@
   i.fa.fa-chevron-right,
   i.fa.fa-chevron-left {
     font-size: 24px;
-    display:inline-block;
+    position: absolute;
+    top: 23px;
+    @include MQ(M) {
+      font-size: 30px;
+      top: 20px;
+    }
   }
   i.fa.fa-chevron-left {
-    margin-right: .5em;
+    left: 0px;
   }
   i.fa.fa-chevron-right {
-    margin-left: .5em;
+    right: 0px;
   }
   &.prev-page {
-    text-align:left;
-    float:left;
+    text-align: left;
+    float: left;
+    .page-info {
+      padding-left: 1.75em;
+    }
   }
   &.next-page {
-    text-align:right;
-    float:right;
+    text-align: right;
+    position: relative;
+    right: 0px;
+    float: right;
+    .page-info {
+      padding-right: 1.75em;
+    }
   }
   &:hover {
     text-decoration: none;

themes/hugodocs/pipeline/scss/components/_tags.scss

@@ -2,8 +2,8 @@ ul.tags {
   list-style: none;
   margin: 0;
   padding: 0;
-  margin-top:28px;
-  margin-bottom: 8px;
+  margin-top:1em;
+  margin-bottom: .5em;
   margin-right: 4px;
   display: flex;
   flex-wrap: wrap;

themes/hugodocs/pipeline/scss/layout/_site-content.scss

@@ -39,11 +39,9 @@ header.content-header {
   clear: both;
   width: 100%;
   position: relative;
-  margin-top: 3em;
+  margin-top: 2em;
   overflow-x: hidden;
-  @include MQ(M) {
-    margin-top: 2em;
-  }
+  margin-bottom:1em;
 }
 
 .content-section-image-wrapper {
@@ -106,7 +104,7 @@ header.content-header {
 }
 
 .body-copy {
-  margin-top: 20px;
+  margin-top: 0px;
   margin-bottom: 2.5em;
   display: block;
   overflow: visible;