Add post list

data/header.json

@@ -9,8 +9,12 @@
             "url": "/resume/"
         },
         {
-            "name": "Blog",
-            "url": "/blog/"
+            "name": "Posts",
+            "url": "/posts/"
+        },
+        {
+            "name": "Utilities",
+            "url": "/utilities/"
         },
         {
             "name": "About",
@@ -19,7 +23,7 @@
     ],
     "RightHandSide": [
         {
-            "name": "Login",
+            "name": "User Portal",
             "url": "https://auth.clortox.com/"
         }
     ]

static/css/footer.css

@@ -41,9 +41,7 @@ footer {
 }
 
 .footer-list a:hover {
-    text-decoration: underline 0.1em rgba(255,255,255,1);
     background: rgba(33,33,36,1);
-
 }
 
 .footer-header {

static/css/header.css

@@ -8,6 +8,7 @@
     border-bottom: 5px;
 
     overflow: hidden;
+    z-index: 1000;
 
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -26,11 +27,6 @@
     text-align: center;
     padding: 10px 10px;
     text-decoration: underline 0.1em rgba(255,255,255,0);
-    transition: text-decoration 300ms;
-}
-
-.navbar a:hover {
-    text-decoration: underline 0.1em rgba(255,255,255,1);
 }
 
 .navbar-right {

static/css/styles.css

@@ -33,11 +33,16 @@ p, a, li, tr, td, span, noscript, figcaption {
 
 html {
     scroll-behavior: smooth;
+    overflow-x: hidden;
     width: 100vw;
     -ms-overflow-style: none;
     scrollbar-width: none;
 }
 
+::-webkit-scrollbar {
+    display: none;
+}
+
 .centered {
     width: 100vw;
     max-width: 100%;
@@ -58,6 +63,130 @@ html {
     border-bottom: 5px dashed white;
 }
 
+.light-dashed-bottom {
+    border-bottom: 2px dashed #e6e6e6;
+}
+
 .intro-content {
     text-align: center;
 }
+
+
+.page-header {
+    text-align: center;
+    padding: 50px;
+    background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 40%, rgba(0,0,0,0) 100%)
+}
+
+.post-list-title {
+    text-align: left;
+    font-size: 40px;
+    margin: 0px;
+}
+
+.post-list-image-container {
+    position: relative;
+    width: 20%;
+    padding-bottom: 20%;
+    overflow: hidden;
+    float: right;
+    margin-left: auto;
+}
+
+.post-list-body-container {
+    width: 80%;
+    float: left;
+    padding: 0px 20px;
+}
+
+.full-width {
+    width: 100% !important;
+}
+
+
+.post-list-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+article a {
+    text-decoration: none;
+    display: flex;
+    padding: 50px;
+    height: 30vh;
+    padding-bottom: 25px;
+    background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(0,0,0,0) 100%);
+    overflow: hidden;
+}
+
+.post {
+    margin: 10px;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+figure {
+    border: 2px dashed #e6e6e6;
+    padding: 2vw;
+    margin: auto;
+    max-width: 70%;
+    margin-bottom: 20px;
+    background: rgba(22, 22, 22, 0.9);
+}
+
+.figure-left {
+    float: left;
+    margin-right: 10px;
+    max-width: 55%;
+}
+
+.figure-right {
+    float: right;
+    margin-left: 10px;
+    max-width: 55%;
+}
+
+.clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+@media only screen and (max-width: 768px) {
+    .post-list-image-container {
+        display: none;
+    }
+
+    .post-list-title{
+        text-align: center;
+    }
+
+    .post-list-body-container {
+        width: 100%;
+        float: none;
+        padding: 0px;
+    }
+
+    article a {
+        padding: 0px;
+        height: 100%;
+        flex-direction: column;
+        text-align: center;
+    }
+
+    figure {
+        border: 2px dashed #e6e6e6;
+        padding: 2vw;
+        margin: auto;
+        max-width: 100%;
+        background: rgba(22, 22, 22, 0.9);
+        margin-bottom: 20px;
+    }
+}

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);
 }
+
+