[Update] Post: Style featureposts / add postcontent

_layouts/post.html

@@ -8,25 +8,32 @@ layout: default
 
 	<section class="section section--post">
 		<div class="section__content content">
-			<div class="main-col post">
-				{{ content }}
+			<div class="section__main">
+				<div class="postcontent">
+					{{ content }}
+				</div>
 
 				{% include author.html %}
 			</div>
-
-			<div class="sidebar">
+			<div class="section__sidebar">
 				{% for post in site.related_posts limit:5 %}
-				<!-- limit:4  -->
-					<div class="feature">
+					<article class="featurepost featurepost--sidebar">
+						<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>
 
-						<h3><a href="{{ basenav }}{{ post.url }}">{{ post.title }}</a></h3>
+						<h2 class="featurepost__title"><a href="{{ post.url }}">{{ post.title }}</a></h2>
 
-						<p><em>{{ post.date | date: "%b %d, %Y" }}</em><br />{{ post.excerpt | strip_html | truncatewords: 10 }}</p>
-
-					</div>
+						<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>
 		</div>
 	</section>
+
 </div>

src/scss/_featurepost.scss

@@ -11,7 +11,7 @@ $m: 'featurepost';
 	overflow-wrap: break-word;
 
 	&__title {
-		@include font-title-medium();
+		@include font-title-large();
 		margin-bottom: pxToRem(10px);
 		a {
 			color: $color-blue;
@@ -40,6 +40,20 @@ $m: 'featurepost';
 	&__image {
 		@include overflow-image();
 	}
+
+	&--sidebar,
+	&--text-only {
+		.#{$m}__preview {
+			display: none;
+		}
+	}
+	&--sidebar {
+		.#{$m} {
+			&__title {
+				@include font-title-medium;
+			}
+		}
+	}
 }
 
 // TODO: Move into separate module

src/scss/_hero.scss

@@ -61,6 +61,7 @@
 
 	&__title {
 		@include font-title-xxlarge();
+		margin-top: 5px; /*optical*/
 		margin-bottom: 15px; /*optical*/
 		margin-left: -3px; /*optical*/
 	}

src/scss/_postcontent.scss

@@ -0,0 +1,34 @@
+$m: 'postcontent';
+
+$postcontent-max-width: 600px;
+
+.#{$m} {
+	img {
+		max-width: $postcontent-max-width;
+		height: auto;
+		margin-bottom: pxToRem(20px);
+	}
+
+	p {
+		max-width: $postcontent-max-width;
+		margin-bottom: pxToRem(20px);
+	}
+
+	h2 {
+		@include font-title-medium();
+		max-width: $postcontent-max-width;
+
+		&:not(:first-child) {
+			margin: pxToRem(60px) 0 pxToRem(20px);
+		}
+	}
+	h3 {
+		@include font-title-small();
+		max-width: $postcontent-max-width;
+
+		&:not(:first-child) {
+			margin: pxToRem(60px) 0 pxToRem(20px);
+		}
+	}
+
+};

src/scss/_section.scss

@@ -62,4 +62,26 @@ $m: 'section';
 			}
 		}
 	}
+
+	&--post {
+		.#{$m} {
+
+			&__sidebar {
+				display: inline-block;
+				width: 30%;
+				vertical-align: top;
+				padding-left: pxToRem(40px);
+
+				.featurepost {
+					max-width: 100%;
+				}
+			}
+
+			&__main {
+				display: inline-block;
+				width: 69%;
+				vertical-align: top;
+			}
+		}
+	}
 }

src/scss/main.scss

@@ -23,6 +23,7 @@
 @import "pagination";
 @import "section";
 @import "featurepost";
+@import "postcontent";
 
 
 //stuff most pages need