Formatting for poetry

content/poetry/sleep.md

@@ -7,6 +7,7 @@ draft: false
 align: 
 ---
 
+                                                  \
 Snooze\
 \
 \

layouts/instagram-posts/single.html

@@ -33,11 +33,13 @@
                   <line x1="8" y1="2" x2="8" y2="6"></line>
                   <line x1="3" y1="10" x2="21" y2="10"></line>
                 </svg>
+                <date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" .Date.Local }}">
                 {{ if .Site.Params.dateformNumTime }}
                   {{ dateFormat .Site.Params.dateformNumTime .Date.Local }}
                 {{ else }}
                   {{ dateFormat "2006-01-02 15:04" .Date.Local }}
                 {{ end }}
+                </date>
         
                 {{ if .Lastmod }} 
                   {{ if not (eq .Lastmod .Date )}}

layouts/poetry/single.html

@@ -0,0 +1,45 @@
+{{ define "main" }}
+  <main class="post poetry">
+
+    <article class="poem-{{ .Params.align }}">
+        <h2 class="post-title"{{ with .Params.emoji }} data-emoji="{{.}}"{{end}}><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
+
+        <div class="post-content">
+          {{ if eq .Params.align "monospace" }}
+            <pre>{{.RawContent}}</pre>
+          {{ else }}
+            {{ .Content }}
+          {{ end }}
+        </div>
+    </article>
+
+    <div class="post-info">
+      <p><date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" .Date.Local }}">{{ dateFormat "Jan 2, 2006" .Date.Local }}</date></p>
+      <p><a href="../">back</a></p>
+    </div>
+
+  </main>
+  {{ if or .Params.prev .Params.next }}
+    <div class="pagination">
+        <div class="pagination__buttons">
+            {{ if .Params.prev }}{{ with .Site.GetPage .Params.prev }}
+            <span class="button previous">
+                <a href="{{ .RelPermalink }}">
+                    <span class="button__icon">←</span>
+                    <span class="button__text">{{ .Title }}</span>
+                </a>
+            </span>
+            {{ end }}{{ end }}
+
+            {{ if .Params.next }}{{ with .Site.GetPage .Params.next }} 
+            <span class="button next">
+                <a href="{{ .RelPermalink }}">
+                    <span class="button__text">{{ .Title }}</span>
+                    <span class="button__icon">→</span>
+                </a>
+            </span>
+            {{ end }}{{ end }}
+        </div>
+    </div>
+  {{ end }}
+{{ end }}

themes/hello-friend-ng/assets/scss/_main.scss

@@ -564,4 +564,32 @@ a[href^="#fn:"] {
       counter-increment: li;
     }
   }
+}
+
+.post.poetry {
+  width: auto;
+
+  article {
+    margin: 0 auto;
+    width: auto;
+  }
+
+  h2 {
+    font-size: 1.375em;
+    a {
+      margin: auto
+    }
+  }
+
+  .poem {
+    &-left { text-align: left; }
+    &-center { text-align: center; }
+    &-right { text-align: right; }
+    &-monospace { text-align: center; }
+  }
+
+  .post-info {
+    text-align: center;
+    margin-top: 60px;
+  }
 }

themes/hello-friend-ng/assets/scss/_single.scss

@@ -110,6 +110,7 @@
 
 .pagination {
   margin-top: 20px;
+  min-width: 50%;
 
   &__title {
     display: flex;

themes/hello-friend-ng/layouts/posts/single.html

@@ -82,11 +82,13 @@
           <line x1="8" y1="2" x2="8" y2="6"></line>
           <line x1="3" y1="10" x2="21" y2="10"></line>
         </svg>
+        <date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" .Date.Local }}">
         {{ if .Site.Params.dateformNumTime }}
           {{ dateFormat .Site.Params.dateformNumTime .Date.Local }}
         {{ else }}
           {{ dateFormat "2006-01-02 15:04" .Date.Local }}
         {{ end }}
+        </date>
 
         {{ if .Lastmod }} 
           {{ if not (eq .Lastmod .Date )}}