Full-width > 700px posts.php styles

Establish some new breakpoints too

article.php

@@ -5,7 +5,9 @@
 		<section class="content">
 			<article>
 		    	<h1><?php echo article_title(); ?></h1>
-		        <h5><?php echo article_date(); ?></h5>
+          		<time datetime="<?php echo date(DATE_W3C, article_time()); ?>"><?php echo relative_time(article_time()); ?></time>
+			  	<h3 class="article-time">Estimated read time: <?php echo reading_time(article_html()); ?> </h3>
+
 			    <?php echo article_markdown(); ?>
 			    <?php echo article_custom_field('attribution'); ?>
 			</article>

css/posts.css

@@ -5,13 +5,51 @@
   box-sizing: border-box; }
 
 #posts-container {
+  text-align: center;
   margin: 0 auto;
   background: rgba(225, 225, 225, 0.6);
   margin-bottom: 95px;
   width: 80%; }
+  @media screen and (max-width: 700px) {
+    #posts-container {
+      width: 100%; } }
+  #posts-container time {
+    float: right;
+    text-align: right; }
+    #posts-container time:after {
+      content: "";
+      display: table;
+      clear: both; }
   #posts-container h1 {
+    color: #fff;
+    font-weight: 700;
     font-family: "Titillium Web", sans-serif;
-    font-size: 50px; }
+    font-size: 2em;
+    padding: 10px; }
+  #posts-container a:hover {
+    color: #bfba72; }
+  #posts-container article {
+    height: 300px;
+    padding: 10px; }
   #posts-container .content {
-    padding: 1em;
-    margin: 2em; }
+    line-height: 200%;
+    margin: 1em auto;
+    width: 85%; }
+  #posts-container ul {
+    padding: 10px; }
+  #posts-container img {
+    margin-right: 1em;
+    margin-bottom: 1em;
+    float: left; }
+    #posts-container img:after {
+      content: "";
+      display: table;
+      clear: both; }
+    @media screen and (max-width: 500px) {
+      #posts-container img {
+        height: 100px;
+        width: 100px; } }
+  #posts-container p {
+    font-weight: 700;
+    font-size: 1.5em;
+    padding: 10px; }

css/screen.css

@@ -383,7 +383,7 @@ html * {
   -moz-osx-font-smoothing: grayscale; }
 
 a {
-  color: #6cac70;
+  color: #72a3bf;
   text-decoration: none; }
 
 body {

functions.php

@@ -41,4 +41,14 @@ function relative_time($time) {
 			return $rounded . ' ' . pluralise($rounded, $title) . ' ago';
 		}
 	}
-}
+}
+
+function reading_time($post_content) {
+	$words = str_word_count(strip_tags($post_content));
+	$m = floor($words/200);
+	$s = floor($words % 200 / (200/60));
+	$est = $m . ' minute' . ($m == 1 ? '' : 's') . ', ' . $s . ' second' . ($s == 1 ? '' : 's');
+	return $est;
+}
+
+?>

posts.php

@@ -4,6 +4,7 @@
 		<div id="posts-container">
 		<ul><!-- Categories Roll -->
 			    	<h3>View by category</h3>
+			    	<li><a href="<?php echo full_url(); ?>">All</a></li>
        				<?php while(categories()): ?>
 					<li><a href="<?php echo category_url(); ?>" title="<?php echo category_description(); ?>">
 									<?php echo category_title(); ?>
@@ -14,12 +15,14 @@
 		<section class="content">
 			<?php if(has_posts()) : while(posts()) : ?>
 				<article>
-				<time datetime="<?php echo date(DATE_W3C, article_time()); ?>"><?php echo relative_time(article_time()); ?></time>
-			    	<h1>
-			        	<a href="<?php echo article_url(); ?>" title="<?php echo article_title(); ?>"><?php echo article_title(); ?></a>
+					<figure><img src="<?php echo article_custom_field('thumbnail');?>"></img></figure> 
+					<h1>
+			        <a href="<?php echo article_url(); ?>" title="<?php echo article_title(); ?>"><?php echo article_title(); ?></a>
 			        </h1>
+			        <h3 class="article-time">Estimated read time: <?php echo reading_time(article_html()); ?> </h3>
+
 					<p><?php echo article_description(); ?></p>
-					<figure><img src="<?php echo article_custom_field('thumbnail');?>"></img></figure>
+			         <time datetime="<?php echo date(DATE_W3C, article_time()); ?>"><?php echo relative_time(article_time()); ?></time>
 				</article>
 			<?php endwhile; endif; ?>
 		</section>

sass/partials/_variables.scss

@@ -1,6 +1,10 @@
 // The organization of this file is shameful. Clean it up, there are PEOPLE watching.
 
 //Breakpoints
+
+$baby-bear: new-breakpoint(max-width 320px);
+$mama-bear: new-breakpoint(max-width 500px);
+$papa-bear: new-breakpoint(max-width 700px);
 $mobile: new-breakpoint(max-width 500px 4);
 
 // fonts
@@ -16,7 +20,7 @@ $light-blue: rgb(114, 163, 191);
 $light-purple: rgb(114, 115, 191);
 
 $main-text: #fff; // main text
-$link: #6cac70; // anchor tags
+$link: $light-blue; // anchor tags
 $background: $light-purple; // body background color
 
 $color-1: $light-blue; // green dark

sass/posts.scss

@@ -3,22 +3,63 @@
 @import "partials/variables";
 
 
+
 #posts-container{
+	text-align: center;
 	margin: 0 auto;
 	background: rgba(225, 225, 225, 0.6);
 	margin-bottom: $footer-margin;
 	width: 80%;
-
+	@include media($papa-bear) {
+		width: 100%;
+	}
+	time {
+		float: right;
+		text-align: right;
+		@include clearfix;
+	}
 	h1 {
+		color: #fff;
+		font-weight: 700;
 		font-family: $heading-font;
-		font-size: 50px;
+		font-size: 2em;
+		padding: 10px;
 	}
-	.content {
-		padding: 1em;
-		margin: 2em;
+
+	a:hover {
+		color: $light-yellow;
+	}
+	article {
+		height: 300px;
+		padding: 10px;
 	}
 
+	.content {
+		line-height: 200%;
+		margin: 1em auto;
+		width: 85%;
+	}
 	.pagination {}
-	ul {}
+	ul {
+		padding: 10px;
+	}
+
+	img {
+		margin-right: 1em;
+		margin-bottom: 1em;
+		float: left;
+		@include clearfix;
+		@include media($mama-bear) {
+			height: 100px;
+			width: 100px;
+
+		}
+	}
+
+	p {
+		font-weight: 700;
+		font-size: 1.5em;
+		padding: 10px;
+	}
 
-}
+}