Recreate bare-bones and memory-management sections

layouts/index.html

@@ -12,11 +12,15 @@
   {{ end }}
 </p></div>
 
-<div class="posts">
+<div id="bare-bones" class="post-category bare-bones">Bare Bones</div>
+<div class="posts bare-bones">
   {{ range first 4 (where .Site.Pages.ByDate "Section" "post") }}
     {{ .Render "teaser" }}
   {{ end }}
-  <hr>
+</div>
+
+<div id="memory-management" class="post-category memory-management">Memory Management</div>
+<div class="posts memory-management">
   {{ range first 4 (after 4 (where .Site.Pages.ByDate "Section" "post")) }}
     {{ .Render "teaser" }}
   {{ end }}

static/css/main.css

@@ -6,3 +6,50 @@
 .front-page-introduction {
 	margin-bottom: 2rem;
 }
+
+main img {
+  max-width: 100%;
+}
+
+.post {
+  margin-bottom: 2em;
+}
+
+.post:last-child {
+  margin-bottom: 0em;
+}
+
+.posts {
+  padding: 1.5rem 1rem 0.5rem 1rem;
+  border-radius: 10px;
+  margin-bottom: 2rem;
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+
+.posts.bare-bones {
+  border: 2px solid #66f;
+}
+
+.posts.memory-management {
+  border: 2px solid #cc0;
+}
+
+.posts hr {
+  margin: 2rem 0;
+}
+
+.post-category {
+  margin-right: 0.5rem;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  text-align: right;
+}
+
+.post-category.bare-bones {
+  color: #55d;
+}
+
+.post-category.memory-management {
+  color: #990;
+}

static/css/poole.css

@@ -275,7 +275,7 @@ tbody tr:nth-child(odd) th {
 .masthead {
   padding-top:    1rem;
   padding-bottom: 1rem;
-  margin-bottom: 1rem;
+  margin-bottom:  1rem;
 }
 .masthead-title {
   margin-top: 0;
@@ -300,8 +300,7 @@ tbody tr:nth-child(odd) th {
  * page is wrapped in `.page` and is only used on the page layout.
  */
 
-.page,
-.post {
+.page {
   margin-bottom: 4em;
 }