independent scrolling

Author: narendasan

_layouts/default.html

@@ -43,7 +43,7 @@ <h1>
 					</li>
 				</ul>
 
-				<ul>
+				<ul class="article-list">
 					{% assign grouped = site.til | group_by: 'category' %}
 					{% for group in grouped %}
 						<li>

_sass/_layout.scss

@@ -69,7 +69,8 @@ body {
 
 .main {
 	margin-top: $space + $nav-header-height;
-
+	height: 100vh;
+	overflow-y: scroll;
 	@media (min-width: $mobile-break) {
 		margin-top: 0;
 	}
@@ -117,6 +118,14 @@ header {
 		}
 	}
 
+	.article-list {
+		overflow-y: scroll;
+		height: calc(100vh - 195px);
+		height: -o-calc(100vh - 195px); /* opera */
+		height: -webkit-calc(100vh - 195px); /* google, safari */
+		height: -moz-calc(100vh - 195px); /* firefox */
+	}
+
 	.open-nav {
 		background-image: url(/images/menu.svg);
 		background-color: transparent;