layouts use article.html and article-alternate.html partials

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: auto 16px;
-		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;
-	}
 }

layouts/_default/list.html

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

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="alternate shadow left-to-right float-on-hover">
+	<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>
+
+    	<h2 class="title">{{ .Title | markdownify }}</h2>
+
+    	{{ with .Date }}
+    		<p>{{ .Format "2006/01/02" }}</p>
+    	{{ end }}
+
+    	{{ with index (.GetTerms "tags") 0 }}
+    		<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+    	{{ end }}
+
+	</div>
+
+</article>