news section

dist/css/app.css

@@ -1714,7 +1714,6 @@ Make this look cool with parallax webgl awesomeness
   box-sizing: border-box; }
 
 .homePost__inner {
-  background-color: #474747;
   width: 100%;
   height: 100%;
   padding: 0.5em 1em;
@@ -1726,6 +1725,9 @@ Make this look cool with parallax webgl awesomeness
     display: table;
     clear: both; }
 
+.allNews .homePost__inner {
+  background-color: #f1f1f1; }
+
 .homePost__image {
   display: none;
   float: left;
@@ -1752,6 +1754,12 @@ Make this look cool with parallax webgl awesomeness
   .homePost__body a:hover {
     color: #76b700; }
 
+.homePosts__allNews a {
+  color: white;
+  text-decoration: underline; }
+  .homePosts__allNews a:hover {
+    color: #76b700; }
+
 .degreeCards {
   margin: 1em auto;
   max-width: 24em;
@@ -2791,6 +2799,9 @@ Make this look cool with parallax webgl awesomeness
 .u-blackBG {
   background-color: black; }
 
+.u-greyBG {
+  background-color: #383838; }
+
 .u-indent {
   margin-left: 2em; }
 
@@ -2943,6 +2954,9 @@ Make this look cool with parallax webgl awesomeness
 .u-homeColor .pageNav__link--about-us {
   color: #ae33ab !important; }
 
+.u-capitalize {
+  text-transform: capitalize; }
+
 @media screen and (min-width: 38em) {
   .subPageAside__Image,
   .subPageAside__Banner {

page-home.php

@@ -2,13 +2,20 @@
 $context = Timber::get_context();
 $post = new TimberPost();
 
-$query = array(
- 'post_type' => 'home-post',
- 'orderby' => 'date',
- 'order' => 'ASC'
-);
-query_posts($query);
-$context['homeposts'] = Timber::get_posts();
+ $args = array(
+	        'post_type' => 'post',
+	        'tag' => 'home-post',
+	        'tax_query' => array(
+	        	'relation' => 'and',
+	        	array(
+	        		'taxonomy' => 'category',
+	        		'field' => 'slug',
+	        		'terms' => array( 'news' )
+	        	)
+	        )
+	    	);
+
+$context['homeposts'] = Timber::get_posts($args);
 $context['post'] = $post;
 Timber::render( array( 'page-' . $post->post_name . '.twig', 'page.twig' ), $context );
 

src/scss/base/_utilities.scss

@@ -20,6 +20,10 @@
 	background-color:black;
 }
 
+.u-greyBG {
+	background-color:#383838;
+}
+
 .u-indent {
 	margin-left:2em;
 }
@@ -73,3 +77,7 @@
 		color:lighten($about-us-color, 5%)!important;
 	}
 }
+
+.u-capitalize {
+	text-transform:capitalize;
+}

src/scss/base/pages/landing.scss

@@ -162,7 +162,6 @@ Make this look cool with parallax webgl awesomeness
 }
 
 .homePost__inner {
-	background-color:#474747;
 	width:100%;
 	height:100%;
 	padding:0.5em 1em;
@@ -173,6 +172,12 @@ Make this look cool with parallax webgl awesomeness
 	@include clearfix;
 }
 
+.allNews {
+	.homePost__inner {
+		background-color:#f1f1f1;
+	}
+}
+
 .homePost__image {
 	display:none;
 	float:left;
@@ -207,3 +212,14 @@ Make this look cool with parallax webgl awesomeness
 		}
 	}
 }
+
+.homePosts__allNews {
+	a {
+		color:white;
+		text-decoration:underline;
+
+		&:hover {
+			color:#76b700;
+		}
+	}
+}

templates/base.twig

@@ -64,7 +64,7 @@
     {% endblock %}
 
     <section role="main" class="site-content layout-section">
-      {% if title %}<div class="u-container"><h1>{{title}}</h1></div>{% endif %}
+      {% if title %}<div class="u-container"><h1 class="u-capitalize">{{title}}</h1></div>{% endif %}
       <div class="layout-position {{sidebar_class}}">
         {% block content %}
           Sorry, no content

templates/index.twig

@@ -1,9 +1,9 @@
 {% extends "base.twig" %}
 
 {% block content %}
-  <h2>{{foo}}</h2>
-  <p>{{qux}}</p>
-  {% for post in posts %}
-    {% include ['tease-'~post.post_type~'.twig', 'tease.twig'] %}
-  {% endfor %}
+		<div class="u-container allNews">
+	  {% for post in posts %}
+	    {% include ['tease-'~post.post_type~'.twig', 'tease.twig'] %}
+	  {% endfor %}
+	  </div>
 {% endblock %}

templates/page-home.twig

@@ -45,6 +45,7 @@
 				</div>
 			</article>
 		{% endfor %}
+		<h3 class="homePosts__allNews"><a href="/category/news/">All News</a></h3>
 	</div>
 </section>
 

templates/tease-post.twig

@@ -1,9 +1,15 @@
 {% extends "tease.twig" %}
 
 {% block content %}
-  <h2 class="postTitle"><a class="postTitle-Link" href="{{post.link}}">{{post.title}}</a></h2>
-    <p>{{post.get_preview(25)}}</p>
-    {% if post.thumbnail.src %}
-      <img src="{{post.thumbnail.src}}" />
-    {% endif %}
+  <article class="homePost">
+		<div class="homePost__inner">
+		<figure class="homePost__image">
+			<div style="background:url({{post.thumbnail.src}}) center/cover;"></div>
+		</figure>
+		<div class="homePost__body">
+			<h2 class="homePost__title">{{post.title}}</h2>
+			<p class="homePost__content">{{post.content}}</p>
+		</div>
+		</div>
+	</article>
 {% endblock %}