using article-group class and adding shadow class

assets/css/main.css

@@ -4,13 +4,13 @@
   --beetbox-purple: #ac65cb;
   --beetbox-green: #003f56;
   --beetbox-blue: #5fcfd0;
-
   --light: #F8F8FF;
-
   --background: #1f2835;
   --text: var(--light);
   --links: var(--beetbox-blue);
   --link-hover: var(--beetbox-pink);
+  --header: #F8F8FFCC;
+  --header-link: #5C2673; /* darker beetbox-purple */
 }
 
 body {
@@ -25,10 +25,9 @@ body {
 a {
   color: var(--links);
   text-decoration: none;
-  transition: color 0.2s ease;
 }
 
-a:hover {
+a:visited, a:hover {
   color: var(--link-hover);
   text-decoration: underline;
 }
@@ -37,42 +36,159 @@ p {
   margin-bottom: 1.5rem;
 }
 
+header div, main, footer {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+/* Header */
 header {
-  padding: 4px;
-  background-color: #f8f8ffcc;
+  background-color: var(--header);
+  box-shadow: 0 5px 10px black;
 }
 
-header div {max-width: 1200px; margin: 0 auto;}
+header div {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
 
-nav ul li { font-weight: 600; }
+header ul {
+  margin: 0;
+}
 
-main {
-  max-width: 1200px;
-  margin: 0 auto;
+header a {
+  color: var(--header-link);
+}
+
+header li {
+  display: inline;
+  font-weight: 600;
+  margin-right: 8px;
+}
+
+/* Responsive */
+@media (max-width: 700px) {
+  aside.index-articles {
+    display: none;
+  }
+}
+
+/* Article Lists */
+.article-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.index-articles {
+  justify-content: flex-end;
+}
+
+.author-articles {
+  justify-content: center;
+}
+
+.index-articles aside {
+  flex-shrink: 4;
+}
+
+section.index {
+  display: flex;
+  flex-direction: row;
+}
+
+section.index aside {
+  flex-shrink: 4;
+}
+
+/* Article Cards */
+article {
+  background-color: #111;
+  border-radius: 10px;
   padding: 1rem;
 }
 
-footer {
-  border-top: 1px solid var(--light);
-  max-width: 1200px;
-  margin: 0 auto;
+article.index {
+  width: 256px;
+  height: 414px;
+}
+
+article.index img {
+  height: 50%;
+  width: 100%;
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+article.index h3 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+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;
 }
 
-code { white-space: nowrap; }
+/* Images */
+img.featured, img.author {
+  display: block;
+  border-radius: 8px;
+  margin: 12px 0;
+  object-fit: cover;
+  max-height: 500px;
+}
+
+/* Code Blocks */
+code {
+  white-space: nowrap;
+}
 
 pre {
-	border-radius: .4rem;
-	max-width: 100%;
+  border-radius: .4rem;
+  max-width: 100%;
 }
 
 pre code {
-	display: block;
-    tab-size: 4;
-	padding: 1rem 1.5rem;
-	font-size: 1.05rem;
-	white-space: pre;
-	max-width: 100%;
-	overflow-x: auto;
-	border-left: .3rem solid var(--beetbox-purple);
-   	border-radius: .4rem;
-	}
+  display: block;
+  tab-size: 4;
+  padding: 1rem 1.5rem;
+  font-size: 1.05rem;
+  white-space: pre;
+  max-width: 100%;
+  overflow-x: auto;
+  border-left: .3rem solid var(--beetbox-purple);
+  border-radius: .4rem;
+  box-shadow: 0 4px 8px black;
+}
+
+/* Effects */
+.float-on-hover {
+  transition: all .25s cubic-bezier(.2,.1,.47,1);
+}
+
+.float-on-hover:hover {
+  transform: translateY(-10px);
+}
+
+.shadow{
+  box-shadow: 0 4px 8px black;
+}
+
+/* Footer */
+footer {
+  border-top: 1px solid var(--light);
+}

layouts/_default/home.html

@@ -1,6 +1,7 @@
 {{ define "main" }}
 {{ .Content }}
-<section>
+<section class="index">
+  <div class="article-list">
   <h2>All Posts:</h2>
   {{ range site.RegularPages.GroupByDate "2006" }}
   <p>{{ .Key }}</p>
@@ -12,5 +13,12 @@
     {{ end -}}
   </ul>
   {{ end }}
+  </div>
+
+  <aside class="article-group index-articles">
+    {{- range site.RegularPages.Limit 4 }}
+      {{ partial "article.html" . }}
+    {{- end }}
+  </aside>
 </section>
 {{ end }}

layouts/authors/list.html

@@ -0,0 +1,22 @@
+{{ define "main" }}
+ <section>
+
+   {{- with .Resources.GetMatch "avatar" }}
+   <img class="shadow author" src="{{ .RelPermalink }}" alt="{{ .Params.alt }}"/>
+   {{- end }}
+
+   <div>
+     <h1>{{ .Params.name }}</h1>
+     <a href={{ .Params.projects }}>Projects</a>
+     <span> | </span>
+     <a href="mailto:{{ .Params.email }}">{{ .Params.email}}</a>
+   </div>
+
+</section>
+{{ .Content }}
+<section class="article-group author-articles">
+    {{- range .Data.Pages }}
+      {{ partial "article.html" . }}
+    {{- end }}
+</section>
+{{ end }}

layouts/authors/terms.html

@@ -0,0 +1,14 @@
+{{ define "main" }}
+<section>
+    <h1 class="center-text">Authors</h1>
+	{{- 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 shadow">
+	<div>
+	  <img src="{{ $image.RelPermalink }}" alt="{{ $alt }}" />
+	</div>
+	<div>
+		<h2>{{ $title }}</h2>
+		<p>{{ $summary }}</p>
+	</div>
+</article>
+</a>

layouts/partials/article.html

@@ -0,0 +1,13 @@
+<article class="index float-on-hover shadow">
+    <a href=" {{ .Permalink }}">
+    	{{- $image := (.Resources.GetMatch "featured").Resize "256x webp q90" }}
+        <img src={{ $image.RelPermalink }} alt="{{ .Params.featured.alt }}">
+    </a>
+    <h3 class="title">{{ .Title | markdownify }}</h3>
+    {{- with .Date }}
+    <p>{{ .Format "2006/01/02" }}</p>
+    {{- end }}
+    {{- with index (.GetTerms "tags") 0 }}
+    <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+    {{- end }}
+</article>

layouts/partials/head.html

@@ -1,5 +1,9 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
-{{ partialCached "head/css.html" . }}
-<link rel="shortcut icon" href="{{ site.Params.favicon }}">
+{{- partialCached "head/css.html" . }}
+<link rel="shortcut icon" href="{{ site.Params.meta.favicon }}">
+
+{{ with .OutputFormats.Get "rss" }}
+  {{- printf `<link rel=%q type=%q href=%q title=%q>` .Rel .MediaType.Type .Permalink site.Title | safeHTML }}
+{{- end }}

layouts/partials/header.html

@@ -1,6 +1,6 @@
 <div>
 {{ with resources.Get site.Params.logo.src }}
-  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ site.Params.logo.alt }}">
+  <a href="/"><img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ site.Params.logo.alt }}"></a>
 {{ else }}
   <h1>{{ site.Title }}</h1>
 {{ end }}

layouts/partials/image.html

@@ -1,6 +1,6 @@
 {{- /*
 Renders an image with the given class, alt, and sizes.
-@contetx {alt} alt text for the image.
+@context {alt} alt text for the image.
 @context {image} the image resource.
 @context {sizes} each size to include in the srcset.
 @context {classes} classes for the image.