some darknet improvements

layouts/_default/list.html

@@ -14,14 +14,17 @@
             {{if .Content}}
             {{.Content}}
             {{end}}
+            {{ template "_internal/pagination.html" .}}
             <div class="gallery">
                 {{ if .Pages }}
-                {{range .Pages}}
+                {{range (.Paginate .Pages).Pages}}
                 {{partial "item" .}}
                 {{end}}
                 {{end}}
             </div>
 
+            {{ template "_internal/pagination.html" .}}
+
         </section>
     </main>
     {{partial "footer" .}}

layouts/_default/single.html

@@ -8,13 +8,16 @@
         {{partial "banner-item" .}}
         {{partial "spritesheet" .}}
         <main>
+
             <article>
                 {{.Content}}
                 {{ if .Params.author}}
+                {{end}}
                 <hr>
-                <section>
+                {{$author := index .Site.Data.details.staff (.Params.author | default "default")}}
                 {{partial "metadata" .}}
-                </section>
+                {{if $author}}
+                <p>Thoughts or questions? <a href="mailto:{{$author.email}}?RE:subject={{.Title}}">Reply to this post</a></p>
                 {{end}}
             </article>
         </main>

layouts/partials/header.html

@@ -12,18 +12,4 @@
         <a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
         {{end}}
     </nav>
-
-    {{ if .Site.Data.details.social_links}}
-        <div id="social-links">
-            {{range .Site.Data.details.social_links}}
-            <div class="social-link">
-                <a href="{{.href}}">
-                    <img src="{{.img}}">
-                </a>
-                <a href="{{.href}}"><strong>{{.title}}</strong></a>
-            </div>
-            {{end}}
-        </div>
-    {{end}}
-    
 </header>

layouts/partials/item.html

@@ -5,17 +5,5 @@
     <a href="{{.Permalink}}"  ><h2>{{.Title}}</h2><i>{{.Params.description}}</i></a>
     
     <span></span>
-    {{if .GetTerms "tags"}}
-    <div class="tags">
-        {{ range (.GetTerms "tags")}}
-        <a href="{{.RelPermalink}}">
-            <svg class="icon-small">
-                <use href="#tag"></use>
-            </svg>
-            <span>{{.LinkTitle}}</span>
-        </a>
-        {{end}}
-    </div>
-    {{end}}
     </div>
 </section>

layouts/partials/metadata.html

@@ -1,21 +1,17 @@
-<div class="metadata">
+<section class="metadata">
-    <div id="info">
         {{$author := index .Site.Data.details.staff (.Params.author | default "default")}}
-        <div>
-            <img src="{{$author.image}}" style="max-width:5rem;border-radius:5rem;">
-            <h2>{{$author.name}}</h2>
  
-        </div>
+            <div><img src="{{$author.image}}" style="max-width:64px;border-radius:64px;">
-        <div>
+                <h2>{{$author.name}}</h2>
-            <p>Published: {{.Date | time.Format "Jan 02 2006"}}
+            <p><strong>Published:</strong> {{.Date | time.Format "Jan 02 2006"}}
                 {{if .Params.updated}}
-                <br>Published: {{.Params.updated | time.Format "Jan 02 2006"}}
+                <br><strong>Updated:</strong> {{.Params.updated | time.Format "Jan 02 2006"}}
                 {{end}}
             </p>
+        </div>
 
-        </div>
-    </div>
                 <div id="tags">
+                    <h2>Tags:</h3>
                     {{ range (.GetTerms "tags")}}
                 <a href="{{.Permalink}}" class="tag">
         
@@ -27,7 +23,4 @@
                 </div>
             </div>
 
-<div>
+</section>
-    <a href="mailto:{{$author.email}}?RE:subject={{.Title}}">Reply to this post</a>
-</div>
-</div>

layouts/shortcodes/relevant-items.html

@@ -1,7 +1,7 @@
 
 <div class="gallery">
 {{ $tag := .Get 0 }}
-    {{range .Site.RegularPages.RelatedTo (keyVals "tags" $tag) }}
+    {{range .Site.RegularPages.RelatedTo (keyVals "tags" $tag) | first 5 }}
     {{partial "item" .}}
     {{end}}
 </div>

static/css/theme.css

@@ -68,11 +68,8 @@ hr {
 main,
 aside {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
-    justify-content: space-evenly;
-    padding: 5px;
-    padding-top: 0;
 }
 article{
     max-width:90vw;
@@ -167,19 +164,7 @@ article > *{
     flex-wrap: wrap;
     justify-content: space-evenly;
 }
-.tags>a {
+
-    margin: 5px;
-    padding:2px;
-    border-radius: 3px;
-    font-size:14px;
-    font-weight: bolder;
-    display:flex;
-    flex-direction: row;
-    align-items: center;    background-color: var(--theme-accent);
-    color: var(--theme-color-primary);
-    border-radius: 1.25rem;
-    padding:5px;
-}
 
 
 img,
@@ -196,31 +181,24 @@ audio {
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    width:100%;
+    flex-wrap: wrap;
 }
 
-.metadata>div {
+.metadata>* {
     margin: 1rem;
     display: flex;
     flex-direction: column;
+    flex-wrap: wrap;
     align-items: center;
-}
-
-.metadata p {
-    max-width: 20rem;
-}
-
-.metadata-author {
-    padding: 0.5rem;
-    display: flex;
-    flex-direction: column;
     align-items: center;
-    flex-wrap: nowrap;
+    min-width: 30%;
+    max-width:50%;
+}
+.metadata #tags{
+    flex-direction: row;
 }
 
-.metadata-author>img {
-    max-width: 5rem;
-    border-radius: 3rem;
-}
 
 
 
@@ -529,10 +507,10 @@ video {
     margin: 5px;
     padding:10px;
     border-radius: 50px;
-    font-size:16px;
+    font-size:12px;
     font-weight: bold;
-    background-color: var(--theme-accent);
+    background-color: var(--theme-color-primary);
-    color: var(--theme-color-primary);
+    color: var(--theme-accent);
     font-weight: bolder;
     display:flex;
     flex-direction: row;
@@ -653,27 +631,10 @@ video {
     .listing-text{
         font-size:14px;
     }
-    .metadata{
-        max-width: 100%;
-        flex-wrap: wrap;
-    }
-    .metadata #tags a  {
-        font-size:10px;
-        padding:0;
-    }
-    .metadata .icon{
-        width:2rem;
-        height:2rem;
-    }
     nav{
         font-size:10px;
         line-height: 14px;
     }
-    .social-link strong{
-        display:none;
-    }
-    #social-links img{
-    }
     #banner-text {
         font-size:12px;
     }
@@ -691,17 +652,6 @@ svg{
     height:1rem;
     width:1rem;
 }
-.metadata #info{
-    min-width:50%;
-}
-#info>div{
-    display:flex;
-    flex-direction: row;
-}
-#info>div>*{
-    margin:10px;
-}
-
 .bare-link{
     text-decoration: none;
 }
@@ -756,3 +706,51 @@ article a[href^="https"]:where(:not([href*="{{.Site.BaseURL}}"]))::after {conten
 .media-container a{
     flex-direction: row;
 }
+
+
+.pagination{
+    list-style: none;
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width:100%;
+    max-width:90vw;
+    justify-content:center;
+    align-items: center;
+}
+.pagination>*{
+
+    margin:5px;
+}
+.pagination a {
+    font-family: Arial, Helvetica, sans-serif;
+    border:1px solid var(--theme-accent);
+    padding:10px;
+    font-size:22px;
+    font-weight: bolder;
+    border-radius: 10px;
+    text-decoration: none;
+    margin:0;
+}
+.pagination .disabled {
+    display:none;
+}
+.pagination .active a{
+    color:var(--theme-color-primary);
+    background-color: var(--theme-accent);
+}
+#tags a {
+    margin: 5px;
+    padding:2px;
+    border-radius: 3px;
+    font-size:16px;
+    font-weight: bolder;
+    display:flex;
+    flex-direction: row;
+    border:2px solid var(--theme-accent);
+    align-items: center;    
+    background-color: var(--theme-accent);
+    color: var(--theme-color-primary);
+    border-radius:25px;
+    padding:5px;
+}