hugo/layouts/_default/single: Make article page a bit more modular and improve more content section

1 files changed, 68 insertions, 47 deletions

diff --git a/generators/hugo/themes/tdro/layouts/_default/single.html b/generators/hugo/themes/tdro/layouts/_default/single.html
index 2b6c727..888bbfe 100644
--- a/generators/hugo/themes/tdro/layouts/_default/single.html
+++ b/generators/hugo/themes/tdro/layouts/_default/single.html
@@ -1,67 +1,88 @@
 {{ define "main" }}
 <section class="section is-fullheight" itemscope itemtype="https://schema.org/WebPage">
-	<div class="container">
-		<div class="columns is-centered">
-			<div class="column is-7">
-				<article class="content document">
-					<h1 class="title serif">{{ .Title }}</h1>
+  <div class="container">
+    <div class="columns is-centered">
+      <div class="column is-7">
+        <article class="content document">
+          <h2 class="title serif">{{ .Title }}</h2>
 
-            <p class="subtitle is-6 has-text-grey-dark">
-              {{- partial "page-meta.html" . -}}
-              <br>
-              <script>document.write('<a class="focus-link" title="Jump to Comments" href="#isso-thread">0 Comments</a> ·');</script> {{- partial "read-time.html" . -}} · {{ .FuzzyWordCount }} words
-            </p>
+          <p class="subtitle is-6 has-text-grey-dark">
+          {{- partial "page-meta.html" . -}}
+          <br>
+          <span class="isso-comments-counter"><a class="focus-link" title="Jump to Comments" href="#isso-thread">0 Comments</a> ·</span>
+          {{- partial "read-time.html" . -}} · {{ .FuzzyWordCount }} words
+          </p>
 
-            {{- partial "page-status.html" . -}}
+          {{- partial "page-status.html" . -}}
 
-            {{- .Content | replaceRE "<p>" "<p class=\"serif is-size-serif\">" | replaceRE "<h2" "<h2 class=\"serif\"" | replaceRE "<h3" "<h3 class=\"serif\"" | safeHTML }}
+          {{- .Content | replaceRE "<p>" "<p class=\"serif is-size-serif\">" | replaceRE "<h2" "<h2 class=\"serif\"" | replaceRE "<h3" "<h3 class=\"serif\"" | safeHTML }}
 
 
-            <div class="has-text-right">
-              <p class="article__updated has-text-grey-dark is-inline-block">
-                Updated
-                {{ if .Params.updated }}
-                  {{ dateFormat "2 January 2006" .Params.updated }}
-                {{ else }}
-                  {{ dateFormat "2 January 2006" .Params.date }}
-                {{ end }}
-              </p>
-            </div>
+                  <div class="has-text-right">
+                    <p class="article__updated has-text-grey-dark is-inline-block">
+                    Updated
+                    {{ if .Params.updated }}
+                    {{ dateFormat "2 January 2006" .Params.updated }}
+                    {{ else }}
+                    {{ dateFormat "2 January 2006" .Params.date }}
+                    {{ end }}
+                    </p>
+                  </div>
 
 
-            <section>
-              {{ $related :=  shuffle .Site.RegularPages | first 3 }}
-              {{ with $related }}
-              <h3>Random</h3>
-              <ul>
-                {{ range . }}
-                <li><a href="{{ .RelPermalink }}" title="{{ .Title }}">{{ .Title }}</a></li>
-                {{ end }}
-              </ul>
-              {{ end }}
-            </section>
+        </article>
 
+      </div>
+    </div>
+  </div>
 
-            {{ if .Params.syntax }}
-              <link rel="stylesheet" href="/css/syntax-highlight.css">
-            {{ end }}
-
+</section>
 
-            <section>
+<section class="section content posts__more__content">
+  <div class="container">
+    <h1 class="is-size-4 has-margin-bottom-lg">More Content</h1>
+    <div class="columns is-tablet is-centered">
+
+      {{ $related :=  shuffle .Site.RegularPages | first 3 }}
+      {{ with $related }}
+      {{ range . }}
+
+      <div class="column is-4">
+        <div class="tile is-ancestor">
+          <div class="tile is-parent">
+            <article class="tile is-child box is-shadowless">
+              <h2><a href="{{ .RelPermalink }}" title="{{ .Title }}" class="serif is-size-4 is-block has-margin-bottom-md">{{ .Title }}</a></h2>
+              <div class="content">
+                <p>{{ .Summary | truncate 100 }}</p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+
+      {{ end }}
+      {{ end }}
+
+    </div>
+  </div>
+</section>
 
-              <script>document.write('<h3 id="comments">Comments</h3>');</script>
+{{ if .Params.syntax }}
+<link rel="stylesheet" href="/css/syntax-highlight.css">
+{{ end }}
 
-              <script data-isso="/isso/" data-isso-css="false" src="/isso/js/embed.min.js"></script>
+<aside class="section content container comments__section">
+  <div class="columns is-centered">
+    <div class="column is-7">
 
-              <section id="isso-thread" data-title="{{ .Title }}"></section>
+      <h1 id="comments" class="is-size-4">Comments</h1>
 
-            </section>
+      <script data-isso="/isso/" data-isso-css="false" src="/isso/js/embed.min.js"></script>
 
+      <div id="isso-thread" data-title="{{ .Title }}"></div>
 
-          </article>
+    </div>
+  </div>
+</aside>
 
-			</div>
-		</div>
-	</div>
-</section>
 {{ end }}