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>

themes/clortox/static/js/scramble.js

@@ -6,12 +6,16 @@ window.onload = function() {
     });
 }
 
-function scramble(event) {
+function scramble(event){
+    scrambleLetters(event.target);
+}
+
+function scrambleLetters(element) {
     let iterations = 0;
-    const originalValue = event.target.dataset.value;
+    const originalValue = element.dataset.value;
 
     let interval = setInterval(() => {
-        event.target.innerText = event.target.innerText.split("")
+        element.innerText = element.innerText.split("")
             .map((letter, index) => {
                 if(index < iterations){
                     return originalValue[index];
@@ -23,7 +27,9 @@ function scramble(event) {
 
         if(iterations > originalValue.length){
             clearInterval(interval);
-            event.target.innerText = originalValue;
+            element.innerText = originalValue;
         }
     }, 30);
 }
+
+