From 3173f4d36004b7d0dde9182d3ca1754e6daa7c36 Mon Sep 17 00:00:00 2001
From: 0xfff <0xfff@protonmail.com>
Date: Sat, 5 Nov 2016 17:03:31 +0100
Subject: [PATCH] =?UTF-8?q?[Update]=C2=A0Post:=20Style=20related=20posts?=
 =?UTF-8?q?=20for=20smaller=20viewports?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _layouts/post.html         |  9 ++++----
 src/scss/_featurepost.scss |  2 +-
 src/scss/_section.scss     | 44 +++++++++++++++++++++++++++++++++-----
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index 5220bff..a5d298b 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -6,7 +6,7 @@ layout: default
 
 <div class="page page--post">
 
-	<section class="section section--post">
+	<div class="section section--post">
 		<div class="section__content content">
 			<div class="section__main">
 				<div class="postcontent">
@@ -15,7 +15,8 @@ layout: default
 
 				{% include author.html %}
 			</div>
-			<div class="section__sidebar">
+			<aside class="section__sidebar">
+				<h3 class="section__sidebar-title">Related</h3>
 				{% for post in site.related_posts limit:5 %}
 					<article class="featurepost featurepost--sidebar">
 						<div class="featurepost__preview {% if post.image %}featurepost__preview--image{% else %}featurepost__preview--no-image{% endif %}">
@@ -32,8 +33,8 @@ layout: default
 						<div class="featurepost__divider"></div>
 					</article>
 				{% endfor %}
-			</div>
+			</aside>
 		</div>
-	</section>
+	</div>
 
 </div>
diff --git a/src/scss/_featurepost.scss b/src/scss/_featurepost.scss
index de4c1d6..ea89bd7 100644
--- a/src/scss/_featurepost.scss
+++ b/src/scss/_featurepost.scss
@@ -61,7 +61,7 @@ $m: 'featurepost';
 	margin: 0 pxToRem(-20px);
 	.featurepost {
 
-    	display: block;
+		display: block;
 		width: 100%;
 
 		@include mq($from: small) {
diff --git a/src/scss/_section.scss b/src/scss/_section.scss
index 42d1439..e92b04e 100644
--- a/src/scss/_section.scss
+++ b/src/scss/_section.scss
@@ -65,22 +65,56 @@ $m: 'section';
 
 	&--post {
 		.#{$m} {
-
 			&__sidebar {
-				display: inline-block;
-				width: 30%;
-				vertical-align: top;
-				padding-left: pxToRem(40px);
+				display: block;
+				width: 100%;
+				margin-top: pxToRem(120px);
+				margin-left: pxToRem(-20px);
+				margin-right: pxToRem(-20px);
 
 				.featurepost {
 					max-width: 100%;
+					@include mq($from: small, $to: medium) {
+						width: 49%;
+					}
+
+					margin-bottom: pxToReM(60px);
+
+					@include mq($to: medium) {
+						&__preview {
+							display: block;
+							height: 1px;
+						}
+					}
 				}
+				&-title {
+					@include font-claim();
+					text-align: center;
+					margin-bottom: pxToRem(40px);
+
+					@include mq($from: medium) {
+						@include visuallyhidden();
+					}
+				}
+
+				@include mq($from: medium) {
+					display: inline-block;
+					width: 30%;
+					vertical-align: top;
+					margin: 0;
+					padding-left: pxToRem(40px);
+				}
+
 			}
 
 			&__main {
 				display: inline-block;
 				width: 69%;
 				vertical-align: top;
+
+				@include mq($to: medium) {
+					width: 100%;
+				}
 			}
 		}
 	}