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 }} + +
+
+ {{ $alt }} +
+
+

{{ $title }}

+

{{ $summary }}

+
+
+