diff --git a/assets/css/main.css b/assets/css/main.css
index ae9494f..cd44f53 100644
--- a/assets/css/main.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/layouts/authors/terms.html b/layouts/authors/terms.html
index 4756fe9..f4f81a9 100644
--- a/layouts/authors/terms.html
+++ b/layouts/authors/terms.html
@@ -1,8 +1,14 @@
{{ define "main" }}
Authors
- {{ range .Data.Pages }}
- Hi
- {{ 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 }}
{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/article-alt.html b/layouts/partials/article-alt.html
new file mode 100644
index 0000000..391e4d6
--- /dev/null
+++ b/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 }}
+
+
+
+

+
+
+
{{ $title }}
+
{{ $summary }}
+
+
+