article-alternate for authors

assets/css/main.css

@@ -80,31 +80,40 @@ section.index aside { flex-shrink: 4; }
 }
 
 article {
-  width: 256px;
-  height: 414px; 
-  padding: 1rem;
-  border-radius: 10px;
   background-color: #111;
+  border-radius: 10px;
+  padding: 1rem;
+}
+
+article.index {
+  width: 256px;
+  height: 414px;
 }
 
 @media(max-width: 700px) {
   aside.index-articles { display: none; }
 }
 
-article img {
+article.index img {
   height: 50%;
   width: 100%;
   border-radius: 10px;
   object-fit: cover;
 }
 
-article h3 {
+article.index h3 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.float-on-hover{transition:all .25s cubic-bezier(.2,.1,.47,1)}.float-on-hover:hover{transform:translateY(-10px)}
+.float-on-hover{
+  transition: all .25s cubic-bezier(.2,.1,.47,1);
+}
+
+.float-on-hover:hover{
+  transform:translateY(-10px);
+}
 
 a {
   color: var(--links);
@@ -140,3 +149,25 @@ pre code {
   border-left: .3rem solid var(--beetbox-purple);
   border-radius: .4rem;
 }
+
+article.alt {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+article.alt img {
+  border-radius: 50%;
+  height: 256px;
+  width: 256px;
+}
+
+img.featured, img.author {
+    display: block;
+    border-radius: 8px;
+    margin: 12px 0;
+    object-fit: cover;
+    max-height: 500px;
+}

layouts/authors/terms.html

@@ -1,8 +1,14 @@
 {{ define "main" }}
 <section>
     <h1 class="center-text">Authors</h1>
-	{{ range .Data.Pages }}
-	  <p>Hi</p>
-	{{ end }}
+	{{- range .Data.Pages }}
+      {{- partial "article-alt.html"
+        (dict
+          "image" (.Resources.GetMatch "avatar")
+          "alt" .Params.alt
+          "title" .Params.name
+          "summary" .Params.bio
+          "url" (printf "/%s/%s" "authors" (.Params.name | urlize))) }}
+	{{- end }}
 </section>
 {{ end }}

layouts/partials/article-alt.html

@@ -0,0 +1,24 @@
+{{- /*
+Renders an article card with a circle image, title, and summary.
+@context {image} the image resource.
+@context {alt} alt text for the image.
+@context {title} the title of the card.
+@context {summary} the summary text.
+@context {url} the url of the article.
+*/}}
+{{- $image := .image }}
+{{- $alt := .alt }}
+{{- $title := .title }}
+{{- $summary := .summary }}
+{{- $url := .url }}
+<a href="{{ $url }}">
+<article class="alt float-on-hover">
+	<div>
+	  <img src="{{ $image.RelPermalink }}" alt="{{ $alt }}" />
+	</div>
+	<div>
+		<h2>{{ $title }}</h2>
+		<p>{{ $summary }}</p>
+	</div>
+</article>
+</a>