Merge branch 'development'

* development: Version update Cleaner no-content display Featured images in archives now have alt text pointing at linked resource. cleanup update Separated archive nav prototype complete Cleaner nav function with proper class names Pagination nav styling, part 1 New archive paging navigation function. New smaller featured image size to fit layout. RICG for featured images. Content images now responsive cleanup Add some breathing space at the bottom of the nav area. Restrict flex-shrink for header items on grid view (prevents overlap of elements + forces scrolling). Resolves #4. Change Skip to content link to target #main instead of #content. Fixes #5 # Conflicts: # sass/maps/style.css.map
mor10 · Aug 11, 2017 · bfae757 · bfae757
2 parents 7cefd01 + ea02666
commit bfae757
Show file tree

Hide file tree

Showing 18 changed files with 288 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,11 @@ Kuhn is distributed under the terms of the GNU GPL v2
 
 ### Changelog
 
+#### 1.0.3 - August 11 2017
+- Responsive images throughout.
+- New paging navigation for archive views.
+- Minor bugfixes.
+
 #### 1.0.3 - June 10 2017
 - Replace complex calc with simpler fr in archive layout.
 - Break words in archive titles to allow for the above.

diff --git a/archive.php b/archive.php
@@ -22,6 +22,9 @@
 		</header><!-- .page-header -->
 
 		<?php
+
+		echo kuhn_get_the_archive_navigation( 'next' );
+
 		/* Start the Loop */
 		while ( have_posts() ) : the_post();
 
@@ -34,8 +37,8 @@
 
 		endwhile;
 
-		the_posts_navigation();
-		
+		echo kuhn_get_the_archive_navigation( 'previous' );
+
 	else :
 
 		get_template_part( 'template-parts/content', 'none' );

diff --git a/functions.php b/functions.php
@@ -41,7 +41,7 @@ function kuhn_setup() {
 	 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
 	 */
 	add_theme_support( 'post-thumbnails' );
-	add_image_size( 'kuhn-index', 1045, 600, true);
+	add_image_size( 'kuhn-index', 966, 555, true);
 
 	// This theme uses wp_nav_menu() in one location.
 	register_nav_menus( array(
@@ -145,6 +145,53 @@ function kuhn_resource_hints( $urls, $relation_type ) {
 }
 add_filter( 'wp_resource_hints', 'kuhn_resource_hints', 10, 2 );
 
+
+
+/**
+ * Add custom image sizes attribute to enhance responsive image functionality
+ * for content images.
+ *
+ * @origin Twenty Seventeen 1.0
+ *
+ * @param string $sizes A source size value for use in a 'sizes' attribute.
+ * @param array  $size  Image size. Accepts an array of width and height
+ *                      values in pixels (in that order).
+ * @return string A source size value for use in a content image 'sizes' attribute.
+ */
+function kuhn_content_image_sizes_attr( $sizes, $size ) {
+	if ( is_singular() ) {
+		$width = $size[0];
+		if ( 610 <= $width ) {
+			$sizes = '(min-width: 990px) 720px, (min-width: 1300px) 610px, 95vw';
+		}
+		return $sizes;
+	}
+}
+add_filter( 'wp_calculate_image_sizes', 'kuhn_content_image_sizes_attr', 10, 2 );
+
+
+/**
+ * Add custom image sizes attribute to enhance responsive image functionality
+ * for post thumbnails.
+ *
+ * @origin Twenty Seventeen 1.0
+ *
+ * @param array $attr       Attributes for the image markup.
+ * @param int   $attachment Image attachment ID.
+ * @param array $size       Registered image size or flat array of height and width dimensions.
+ * @return string A source size value for use in a post thumbnail 'sizes' attribute.
+ */
+function kuhn_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {
+	if ( is_singular() ) {
+		$attr['sizes'] = '(min-width: 990px) 720px, (min-width: 1300px) 820px, 95vw';
+	} else {
+		$attr['sizes'] = '(min-width: 990px) 955px, (min-width: 1300px) 966px, 95vw';
+	}
+	return $attr;
+}
+add_filter( 'wp_get_attachment_image_attributes', 'kuhn_post_thumbnail_sizes_attr', 10, 3 );
+
+
 /**
  * Register widget area.
  *

diff --git a/header.php b/header.php
@@ -21,7 +21,7 @@
 
 <body <?php body_class(); ?>>
 <div id="page" class="site">
-	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'kuhn' ); ?></a>
+	<a class="skip-link screen-reader-text" href="#main"><?php esc_html_e( 'Skip to content', 'kuhn' ); ?></a>
 
 	<header id="masthead" class="site-header" role="banner">
 		<div class="site-branding">

diff --git a/inc/template-tags.php b/inc/template-tags.php
@@ -150,4 +150,47 @@ function kuhn_post_navigation() {
 function kuhn_excerpt_more( $more ) {
 	return "…";
 }
-add_filter( 'excerpt_more', 'kuhn_excerpt_more' );
+add_filter( 'excerpt_more', 'kuhn_excerpt_more' );
+
+$prev_link = get_next_posts_link( __( 'Older posts' ) );
+$navigation = '<div class="nav-next">' . $prev_link . '</div>';
+
+/**
+ * Custom pagination navigation  for archive pages.
+ * Deconstructed version of get_the_posts_navigation()
+ * @link https://developer.wordpress.org/reference/functions/get_the_posts_navigation/
+ *
+ * @param string $end Defines the position of the nav button: 'next' or 'previous'.
+
+ */
+function kuhn_get_the_archive_navigation( $end ) {
+    $navigation = '';
+
+    // Don't print empty markup if there's only one page.
+    if ( $GLOBALS['wp_query']->max_num_pages > 1 ) {
+
+        if ( $end == 'next' ) {
+            $nav_link = get_previous_posts_link( _x( 'Newer posts', 'Newer posts button on archive pages.', 'kuhn' ) );
+        } elseif ( $end == 'previous' ) {
+            $nav_link = get_next_posts_link( _x( 'Older posts', 'Older posts button on archive pages.', 'kuhn' ) );
+        }
+
+        if ( $nav_link ) {
+            $navigation = '<nav class="navigation posts-navigation nav-%1$s" role="navigation">';
+            $navigation .= '<h2 class="screen-reader-text">%2$s</h2>';
+            $navigation .= '<div class="nav-links">';
+            $navigation .= '%3$s';
+            $navigation .= '</div></nav>';
+
+            $navigation = sprintf( $navigation,
+         		$end,
+         		esc_html_x( 'Posts navigation', 'Screen reader text for posts pagination areas.', 'kuhn' ),
+         		$nav_link
+         	);
+        }
+
+    }
+
+    return $navigation;
+
+}
diff --git a/index.php b/index.php
@@ -27,6 +27,8 @@
 		<?php
 		endif;
 
+		echo kuhn_get_the_archive_navigation( 'next' );
+
 		/* Start the Loop */
 		while ( have_posts() ) : the_post();
 
@@ -39,8 +41,8 @@
 
 		endwhile;
 
-		the_posts_navigation();
-		
+		echo kuhn_get_the_archive_navigation( 'previous' );
+
 	else :
 
 		get_template_part( 'template-parts/content', 'none' );

diff --git a/readme.txt b/readme.txt
@@ -27,6 +27,11 @@ Kuhn includes support for Infinite Scroll in Jetpack.
 
 == Changelog ==
 
+= 1.0.3 - August 11 2017 =
+- Responsive images throughout.
+- New paging navigation for archive views.
+- Minor bugfixes.
+
 = 1.0.3 - June 10 2017 =
 - Replace complex calc with simpler fr in archive layout.
 - Break words in archive titles to allow for the above.

diff --git a/sass/maps/style.css.map b/sass/maps/style.css.map
diff --git a/sass/navigation/_content-navigation.scss b/sass/navigation/_content-navigation.scss
@@ -20,7 +20,7 @@
 		&:focus {
 			color: white;
 			border-color: $color__grey_black;
-			background: $color__grey_black;
+			background-color: $color__grey_black;
 		}
 	}
 
@@ -31,6 +31,8 @@
 	padding: 0 1em;
 }
 
+
+
 @media screen and (min-width: $query__small) {
 
 	.nav-links {
@@ -41,7 +43,6 @@
 	}
 
 	.comment-navigation,
-	.posts-navigation,
 	.post-navigation {
 
 		.nav-previous,
@@ -68,14 +69,38 @@
 	@media screen and (min-width: $query__medium) {
 
 		.posts-navigation {
+			display: flex;
 			width: 100%;
 			margin: 0;
 			padding: 0;
 		}
 
 		.nav-links {
 			display: flex;
+			width: 100%;
 		}
+
+		.nav-next .nav-links a {
+			background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'><polyline points='32.3,57.3 6,26.7 32.3,-3.8' stroke='hsla(0, 0%, 100%, .2)' fill='transparent' stroke-width='8'/></svg>");
+			background-repeat: no-repeat;
+			background-position: left center;
+			background-size: auto 110%;
+		}
+
+		.nav-previous .nav-links a {
+			background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'><polyline points='8.3,-18.1 34.6,12.4 8.3,43' stroke='hsla(0, 0%, 100%, .2)' fill='transparent' stroke-width='8'/></svg>");
+			background-repeat: no-repeat;
+			background-position: right center;
+			background-size: auto 110%;
+		}
+
+		.nav-previous .nav-links a {
+			display: flex;
+			justify-content: flex-end;
+			align-items: flex-end;
+			min-height: 10em;
+		}
+
 	}
 }
 
@@ -100,4 +125,4 @@
 		border-bottom-color: white;
 	}
 
-}
+}
diff --git a/sass/site/archive/_archive.scss b/sass/site/archive/_archive.scss
@@ -22,7 +22,8 @@
 
 .archive-view {
 
-    .post {
+    .post,
+    .page {
         padding: 1em;
         &:after {
             display: block;
@@ -64,7 +65,8 @@
                 }
             }
 
-            .post {
+            .post,
+            .page {
                 background: white;
 
                 &:after {
@@ -87,5 +89,4 @@
             }
         }
     }
-
 }
diff --git a/sass/site/header/_header-menu.scss b/sass/site/header/_header-menu.scss
@@ -182,14 +182,16 @@ button.dropdown-toggle {
 }
 
 
-
 @supports (grid-area: auto) {
 	@media screen and (min-width: $query__medium) {
 		.menu-toggle {
 			display: none;
 		}
 
 		.main-navigation {
+			flex: 1 0 auto;
+			padding-bottom: 2em;
+
 			ul {
 				display: block;
 				padding-top: 2em;

diff --git a/sass/site/header/_header.scss b/sass/site/header/_header.scss
@@ -14,6 +14,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+
 }
 
 .custom-logo-link {
@@ -68,6 +69,10 @@
 			flex-direction: column;
 			justify-content:flex-start;
 		}
+
+		.site-branding {
+			flex: 1 0 auto;
+		}
 	}
 
 	@supports (grid-area: auto) {

diff --git a/sass/style.scss b/sass/style.scss
@@ -4,7 +4,7 @@ Theme URI: https://github.com/mor10/kuhn
 Author: Morten Rand-Hendriksen
 Author URI: https://mor10.com
 Description: Kuhn is a hyper-opinionated WordPress theme using CSS Grid and Flexbox for layouts.
-Version: 1.0.3
+Version: 1.0.4
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: kuhn

diff --git a/search.php b/search.php
@@ -28,6 +28,8 @@
 		</header><!-- .page-header -->
 
 		<?php
+		echo kuhn_get_the_archive_navigation( 'next' );
+
 		/* Start the Loop */
 		while ( have_posts() ) : the_post();
 
@@ -40,7 +42,7 @@
 
 		endwhile;
 
-		the_posts_navigation();
+		echo kuhn_get_the_archive_navigation( 'previous' );
 
 	else :