simplify layouts; allow optional pre-content partial

assets/sass/cards.scss

@@ -13,65 +13,30 @@
 	}
 }
 
+.small-circle {
+	border-radius: 50%;
+	width: 250px;
+	height: 250px;
+}
+
 article {
-	display: flex;
 	background-color: $dark;
 	border-radius: 10px;
-}
-
-article.card {
 	height: 420px;
 	flex: 1 1 305px;
-	flex-direction: column;
 	overflow: hidden;
 
-	div.article-info-container, div.article-image {
+	img {
-		overflow: hidden;
+    	height: 50%;
-		flex: 1;
+    	width: 100%;
+    	object-fit: cover;
 	}
 
-	div.article-info {
+	div {
-		box-sizing: border-box;
+    	margin: 25px;
-		padding: 25px;
-		height: 200px;
     	display: flex;
     	flex-direction: column;
-
-		a.article-title {
-			flex: 2;
-			display: flex;
     	justify-content: space-between;
-			flex-direction: column;
-			text-decoration: none;
-			color: $font-color;
-		}
 	}
-}
-
-.circle {
-	border-radius: 50%;
-}
 
-.article-link {
-	text-decoration: none;
-	color: $font-color;
-}
-
-article.card-alternate {
-	justify-content: space-evenly;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 40px;
-
-	div {
-		padding: 16px;
-	}
-	img {
-		width: 250px;
-		height: 250px;
-		border-radius: 50%;
-	}
-	p {
-		max-width: 500px;
-	}
 }

assets/sass/code.scss

@@ -26,6 +26,6 @@ pre {
 		white-space: pre;
 		max-width: 100%;
 		overflow-x: auto;
-		border-left: .3rem solid $beetbox-purple;
+		border-left: .3rem solid $code-edge;
 	}
 }

assets/sass/colors.scss

@@ -1,13 +1,14 @@
-$background-color: #1f2835;
-$font-color: #f8f8ff;
-$top-bar: #f8f8ffcc;
-
 $beetbox-red: #9e0008;
 $beetbox-pink: #d93370;
 $beetbox-purple: #ac65cb;
 $beetbox-green: #003f56;
 $beetbox-blue: #5fcfd0;
 
+$background-color: #1f2835;
+$font-color: #f8f8ff;
+$font-color-alternate: #1f2835;
+$top-bar: #f8f8ffcc;
 $dark: #111;
-$visited-link: #e4cdef;
+$link-color: $beetbox-blue;
-
+$link-color-visited: #e4cdef;
+$code-edge: $beetbox-purple;

assets/sass/main.scss

@@ -35,7 +35,7 @@ header {
 				margin: auto;
 				font-weight: bold;
 				text-decoration: none;
-				color: $background-color;
+				color: $font-color-alternate;
 			}
 		}
 	}
@@ -56,10 +56,10 @@ header {
 }
 
 a {
-	color: $beetbox-blue;
+	color: $link-color;
 
 	&:visited, &:hover {
-		color: $visited-link;
+		color: $link-color-visited;
 	}
 }
 
@@ -113,6 +113,10 @@ img.featured {
     align-items: end;
 }
 
+.align-center {
+    align-items: center;
+}
+
 section {
 	max-width: 1000px;
 	margin: 16px auto;

layouts/_default/list.html

@@ -14,7 +14,7 @@
 
     <section class="article-list">
      {{ range $pages }}
-    	 {{ partial "article-card.html" . }}
+    	 {{ partial "article.html" . }}
      {{ end }}
     </section>
 

layouts/_default/single.html

@@ -8,6 +8,10 @@
             {{ .TableOfContents }}
         {{ end }}
 
+        {{ if templates.Exists "partials/pre-content.html" }}
+        	{{ partial "pre-content.html" . }}
+        {{ end }}
+
         {{ .Content }}
 
         <p>

layouts/authors/list.html

@@ -26,7 +26,7 @@
 
     <section class="article-list">
         {{ range .Data.Pages }}
-            {{ partial "article-card.html" . }}
+            {{ partial "article.html" . }}
         {{ end }}
     </section>
 

layouts/authors/terms.html

@@ -3,7 +3,7 @@
 
 <section>
 	{{ range .Data.Pages }}
-		{{ partial "article-card-alternate.html" . }}
+		{{ partial "article-alternate.html" . }}
 	{{ end }}
 </section>
 {{ end }}

layouts/games/list.html

@@ -18,7 +18,7 @@
 
             <section class="article-list">
         	    {{ range .Data.Pages }}
-        	    	{{ partial "article-card.html" . }}
+        	    	{{ partial "article.html" . }}
         	    {{ end }}
             </section>
 

layouts/partials/article-alternate.html

@@ -0,0 +1,14 @@
+<a href={{ printf "/%s/%s" "authors" (.Params.name | urlize) }}>
+<article class="shadow left-to-right float-on-hover align-center">
+	<div>
+		{{ with .Resources.GetMatch "avatar" }}
+			<img class="shadow small-circle" src="{{ .RelPermalink }}" alt="{{ .Params.alt }}"/>
+		{{ end }}
+	</div>
+	<div>
+		<h2>{{ .Params.name }}</h2>
+		<p>{{ .Params.bio }}</p>
+	</div>
+</article>
+</a>
+	

layouts/partials/article-card-alternate.html

@@ -1,14 +0,0 @@
-<a class="article-link" href={{ printf "/%s/%s" "authors" (.Params.name | urlize) }}>
-<article class="card-alternate shadow float-on-hover">
-	<div>
-			{{ with .Resources.GetMatch "avatar" }}
-				<img class="shadow" src="{{ .RelPermalink }}" alt="{{ .Params.alt }}"/>
-			{{ end }}
-	</div>
-	<div>
-		<h2>{{ .Params.name }}</h2>
-		<p>{{ .Params.bio }}</p>
-	</div>
-</article>
-</a>
-	

layouts/partials/article-card.html

@@ -1,27 +0,0 @@
-<article class="shadow float-on-hover card">
-	<div class="article-image">
-		<a href=" {{ .Permalink }}">
-    		{{ $image := .Resources.GetMatch "featured" }}
-			{{ partial "image.html" (dict "image" $image "alt" .Params.featured.alt "class" "fill-wh")}}
-		</a>
-	</div>
-	<div class="article-info-container">
-		<div class="article-info">
-			{{ range first 1 (.GetTerms "tags") }}
-				<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
-			{{ end }}
-			<a href="{{ .Permalink }}" class="article-title fill-wh">
-				<h2>{{ .Title | markdownify }}</h2>
-				{{ if ne .Kind "term"}}
-					<span class="date">
-						{{ if .Date }}
-							{{ .Date.Format "2006/01/02" }}
-						{{ else }}
-							TBD
-						{{ end }}
-					</span>
-				{{ end }}
-			</a>
-		</div>
-	</div>
-</article>

layouts/partials/article.html

@@ -0,0 +1,22 @@
+<article class="shadow float-on-hover">
+
+    <a href=" {{.Permalink }}">
+    	{{ $image := .Resources.GetMatch "featured" }}
+    	{{ partial "image.html" (dict "image" $image "alt" .Params.featured.alt) }}
+    </a>
+
+    <div>
+
+    	{{ with index (.GetTerms "tags") 0 }}
+    		<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+    	{{ end }}
+
+    	<h2 class="title">{{ .Title | markdownify }}</h2>
+
+    	{{ with .Date }}
+    		<p>{{ .Format "2006/01/02" }}</p>
+    	{{ end }}
+
+	</div>
+
+</article>

layouts/partials/header.html

@@ -1,10 +1,10 @@
 <header>
 	<nav class="spread">
-		<a href="/"><img src="/images/logo.svg" alt="The {{ .Site.Title }} Logo"></a>
+		<a href="/"><img src="{{ .Site.Params.logo }}" alt="The {{ .Site.Title }} Logo"></a>
 		<ul class="spread">
-			<li><a href="https://gitea.beetbox.io/BeetBox" title="Gitea Repositories">Gitea</a></li>
+    		{{ range .Site.Params.HeaderLinks }}
-			<li><a href="https://odysee.com/@BeetBox:f" title="Odysee Channel">Odysee</a></li>
+        		<li><a href="{{ .url }}" title="{{ .title }}">{{ .title }}</a></li>
-			<li><a href="/games" title="Games">Games</a></li>
+			{{ end }}
 			<li>{{ printf `<a href="/index.xml" title="%s">RSS</a>` $.Site.Title | safeHTML }}</li>
 		</ul>
 	</nav>