Add post list

themes/clortox/layouts/_default/list.html

@@ -1,8 +1,26 @@
 {{ define "main" }}
-    <h1>{{ .Title }}</h1>
-    {{ range .Pages }}
-        <article>
-            <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
-        </article>
-    {{ end }}
+<div class="page-header dashed-bottom">
+    <h1 data-value="Posts" class="scramble">Posts</h1>
+    <p>Ideas, projects, and other musings.</p>
+</div>
+{{ range.Pages }}
+    <article class="light-dashed-bottom">
+        <a href="{{ .Permalink }}" onmouseover="scrambleLetters(document.querySelector('#{{ .Title | anchorize }}'))">
+            {{ if .Params.banner }}
+            <div class="post-list-body-container">
+            {{ else }}
+            <div class="post-list-body-container full-width">
+            {{ end }}
+                <h4 data-value="{{ .Title }}" id="{{ .Title | anchorize }}" class="post-list-title">{{ .Title }}</h4>
+                <small class="post-list-date">{{ .Date.Format "January 2, 2006" }}</small>
+                <p>{{ .Summary }}</p>
+            </div>
+            {{ if .Params.banner }}
+            <div class="post-list-image-container">
+                    <img src="{{ .Params.banner }}" alt="{{ .Title }}" class="post-list-image" />
+            </div>
+            {{ end }}
+        </a>
+    </article>
+{{ end }}
 {{ end }}

themes/clortox/layouts/_default/single.html

@@ -1,8 +1,11 @@
 {{ define "main" }}
-    <article>
-        <h1>{{ .Title }}</h1>
-        <div>
-            {{ .Content }}
-        </div>
-    </article>
+<div class="page-header dashed-bottom">
+    <h1 data-value="{{ .Title }}" class="scramble">{{ .Title }}</h1>
+    <small class="post-list-date">{{ .Date.Format "January 2, 2006" }}</small>
+</div>
+<article>
+    <div class="post clearfix">
+        {{ .Content }}
+    </div>
+</article>
 {{ end }}

themes/clortox/layouts/partials/head.html

@@ -5,4 +5,5 @@
 
     <link rel="stylesheet" href="{{ "css/background.css" | relURL }}">
     <script src="{{ "js/scramble.js" | relURL }}"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>