Fix: Single post pagination.

Fixes #40.
elmastudio · Sep 18, 2019 · 2690a4f · 2690a4f
1 parent e9efe6c
commit 2690a4f
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 88 deletions.
diff --git a/assets/sass/layout/_grid.scss b/assets/sass/layout/_grid.scss
@@ -198,6 +198,7 @@
 /* Grid Columns */
 .posts-container,
 .single-post .nav-links {
+
 	@include flexbox;
 	flex-wrap: wrap;
 	flex-direction: row;
@@ -232,18 +233,30 @@
 .s6,
 .single-post .related-post,
 .single-post .navigation .next,
-.post-navigation .nav-next,
-.single-post .navigation .prev,
-.post-navigation .nav-previous {
+.single-post .navigation .prev {
 	width: 100%; // 1-column on mobile
 	flex-grow: 0;
+
 	@include breakpoint(m) {
 		flex-basis: calc(50% - 48px);
 		margin-left: $spacing-desktop-3;
 		margin-right: $spacing-desktop-3;
 	}
 }
 
+.post-navigation .nav-next,
+.post-navigation .nav-previous {
+	width: 100%; // 1-column on mobile
+	flex-grow: 0;
+
+	@include breakpoint(m) {
+		flex-basis: calc(50%);
+		padding-left: $spacing-desktop-3;
+		padding-right: $spacing-desktop-3;
+	}
+}
+
+
 /* 3-Columns */
 .blog-3-column .posts-container .hentry,
 .header-infobar .col,

diff --git a/assets/sass/mixins/_mixins-master.scss b/assets/sass/mixins/_mixins-master.scss
@@ -56,7 +56,6 @@ $var: true !default; // Can be overridden elsewhere
 
 // Flexbox
 @mixin flexbox {
-	display: -ms-flexbox;
 	display: flex;
 }
 

diff --git a/assets/sass/site/_pagination.scss b/assets/sass/site/_pagination.scss
@@ -124,9 +124,25 @@
 		align-items: center;
 	}
 
+	.nav-previous {
+		padding-bottom: $spacing-mobile-6;
+
+		@include breakpoint(m) {
+			padding-bottom: 0;
+		}
+	}
+
 	.nav-next {
-		flex-direction: row-reverse;
-		justify-content: flex-end;
+		padding-top: $spacing-mobile-6;
+		border-top: 1px solid $color__border;
+
+		@include breakpoint(m) {
+			flex-direction: row-reverse;
+			justify-content: flex-end;
+			padding-top: 0;
+			border-top: none;
+			border-left: 1px solid $color__border;
+		}
 	}
 
 	.nav-thumb {
@@ -138,16 +154,22 @@
 	}
 
 	.nav-next .nav-thumb {
-		margin: 0 0 0 $spacing-2;
+
+		@include breakpoint(m) {
+			margin: 0 0 0 $spacing-2;
+		}
 	}
 
 	.nav-title {
 		display: block;
-		width: 360px;
 	}
 
 	.nav-next .nav-title {
-		text-align: right;
+
+		@include breakpoint(m) {
+			text-align: right;
+			flex-grow: 3;
+		}
 	}
 
 	.nav-title span {

diff --git a/style-editor.css b/style-editor.css
diff --git a/style-editor.css.map b/style-editor.css.map
diff --git a/style.css b/style.css
diff --git a/style.css.map b/style.css.map
diff --git a/style.min.css b/style.min.css
diff --git a/template-parts/post/nav-single.php b/template-parts/post/nav-single.php
@@ -10,7 +10,7 @@
 
 <nav class="navigation post-navigation" role="navigation">
 			<h2 class="screen-reader-text"><?php esc_html_e( 'Post navigation', 'aino' ); ?></h2>
-		<div class="nav-links cf">
+		<div class="nav-links">
 
 <?php $prev_post = get_previous_post(); ?>