[Update] Blog: style blog page / featureposts

_config.yml

@@ -12,7 +12,7 @@ exclude:
   - Gemfile
   - Gemfile.lock
   - package.json
-paginate: 5
+paginate: 12
 paginate_path: "/blog/page:num/"
 name: Dash
 url: https://www.dash.org
@@ -53,5 +53,4 @@ srcset:
   source: assets/img
   output: assets/img/resized
 
-keep_files:
-  - 'assets/img/resized'
+keep_files: ['assets/img/resized']

_includes/hero/post.html

@@ -10,7 +10,7 @@
 
 	<!-- Hero content -->
 	<div class="hero__content">
-		<a href="#">Blog — General</a><!-- TODO -->
+		<a href="{{ basenav }}/blog/">{% t nav.blog %}{% if page.categories | size == 1 %} – {{ page.categories | first }}{% if page.categories | size > 1 %}{% for category in page.categories offset: 1  %} / {{ category }} {% endfor %} {% endif %}{% endif %}</a><!-- TODO: Add category page and link to it -->
 		<h1 class="hero__title">{% if page.title %}{{ page.title }}{% endif %}</h1>
 		<p class="hero__lead">{{ page.date | date: "%b %d, %Y" }}</p>
 	</div>

_includes/pagination_navigation_all.html

@@ -1,21 +1,21 @@
 {% if paginator.total_pages > 1 %}
 <div class="pagination">
   {% if paginator.previous_page %}
-    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
+    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}" class="pagination__prev">&laquo; Prev</a>
   {% endif %}
 
   {% for page in (1..paginator.total_pages) %}
     {% if page == paginator.page %}
-      <em>{{ page }}</em>
+      <em class="pagination__current">{{ page }}</em>
     {% elsif page == 1 %}
-      <a href="/blog">{{ page }}</a>
+      <a href="/blog" class="pagination__link pagination__link--start">{{ page }}</a>
     {% else %}
-      <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
+      <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}" class="pagination__link">{{ page }}</a>
     {% endif %}
   {% endfor %}
 
   {% if paginator.next_page %}
-    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
+    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}" class="pagination__next">Next &raquo;</a>
   {% endif %}
 </div>
 {% endif %}

blog/index.html

@@ -6,31 +6,32 @@ description: pages.blog.description
 
 {% include hero/blog.html %}
 
-<div class="content post">
-	<div class="single-col">
+<div class="page page--blog">
 
-		{% include pagination_navigation_all.html %}
+	<section class="section">
+		<div class="section__content content">
+			<div class="featurepost-grid">
+			{% for post in paginator.posts %}
+			<!-- limit:10 -->
+				<article class="featurepost">
+					<div class="featurepost__preview {% if post.image %}featurepost__preview--image{% else %}featurepost__preview--no-image{% endif %}">
+						{% if post.image %}
+							<img src="{{ post.image }}" class="featurepost__image">
+						{% endif %}
+					</div>
 
-		{% for post in paginator.posts %}
-		<!-- limit:4  -->
-			<div class="feature">
-				{% if post.image %}
-					<img src="{{ post.image }}" class="preview">
-				{% endif %}
+					<h2 class="featurepost__title"><a href="{{ post.url }}">{{ post.title }}</a></h2>
 
-				<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
-
-				<p><em>{{ post.date | date: "%b %d, %Y" }}</em><br />{{ post.excerpt | strip_html | truncatewords: 50 }}</p>
+					<em class="featurepost__date">{{ post.date | date: "%b %d, %Y" }}</em>
 
+					<p class="featurepost__description">{{ post.excerpt | strip_html | truncatewords: 50 }}</p>
+					<div class="featurepost__divider"></div>
+				</article>
+			{% endfor %}
 			</div>
-			<span class="clear"></span>
 
-			<div class="divider">
+			{% include pagination_navigation_all.html %}
+		</div>
+	</section>
 
-			</div>
-		{% endfor %}
-
-		{% include pagination_navigation_all.html %}
-
-	</div>
 </div>

src/scss/_ctabox.scss

@@ -65,22 +65,11 @@
 
 	&__imagewrapper {
 		background: rgba($color-blue-light, 0.1);
-		width: 100%;
-		height: 0;
-		padding-bottom: 56.25%; // 16:9
-		position: relative;
-		overflow: hidden;
+		@include overflow-image-wrapper();
 	}
 
 	&__image {
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		left: 0;
-		right: 0;
-		bottom: 0;
-		width: 100%;
-		height: auto;
+		@include overflow-image();
 	}
 
 	&__title {

src/scss/_featurepost.scss

@@ -0,0 +1,61 @@
+$m: 'featurepost';
+
+.#{$m} {
+	display: inline-block;
+	vertical-align: top;
+	padding: 0 pxToRem(20px);
+	margin-bottom: pxToRem(40px);
+	max-width: 500px;
+	margin-left: auto;
+	margin-right: auto;
+	overflow-wrap: break-word;
+
+	&__title {
+		@include font-title-medium();
+		margin-bottom: pxToRem(10px);
+		a {
+			color: $color-blue;
+		}
+	}
+	&__date {
+		display: inline-block;
+		margin-bottom: pxToRem(10px);
+		color: transparentize($color-black, 0.5);
+	}
+
+	&__divider {
+
+	}
+
+	&__preview {
+		@include overflow-image-wrapper();
+		background: rgba($color-blue, 0.1);
+		margin-bottom: pxToRem(40px);
+
+		&--no-image {
+			// Hide images until we actually have htem
+			padding-bottom: 1px;
+		}
+	}
+	&__image {
+		@include overflow-image();
+	}
+}
+
+// TODO: Move into separate module
+.featurepost-grid {
+	margin: 0 pxToRem(-20px);
+	.featurepost {
+
+    	display: block;
+		width: 100%;
+
+		@include mq($from: small) {
+			display: inline-block;
+			width: 49%;
+		}
+		@include mq($from: medium) {
+			width: 33%;
+		}
+	}
+}

src/scss/_page.scss

@@ -19,4 +19,8 @@ $m: 'page';
 	}
 	&--participate {
 	}
+
+	&--blog {
+
+	}
 }

src/scss/_pagination.scss

@@ -0,0 +1,8 @@
+$m: 'pagination';
+
+.#{$m} {
+	display: inline-block;
+	width: 100%;
+	text-align: center;
+	padding: pxToRem(40px) 0;
+}

src/scss/_post.scss

@@ -18,11 +18,6 @@
 		}
 	}
 
-	.pagination{
-		width:100%;
-		text-align: right;
-	}
-
 	.author{
 		width:100%;
 		text-align: center;

src/scss/global/_mixins.scss

@@ -1,3 +1,26 @@
+/**
+ * Overflow Image (Content: Fit) 16/9
+ *
+ */
+@mixin overflow-image-wrapper {
+	width: 100%;
+	height: 0;
+	padding-bottom: 56.25%; // 16:9
+	position: relative;
+	overflow: hidden;
+}
+
+@mixin overflow-image {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: auto;
+}
+
 /**
  * Hide visually
  *

src/scss/main.scss

@@ -20,7 +20,10 @@
 @import "forms";
 @import "footer";
 @import "page";
+@import "pagination";
 @import "section";
+@import "featurepost";
+
 
 //stuff most pages need
 @import "overlay-menu";