visual articles on home page

assets/css/main.css

@@ -56,6 +56,54 @@ footer {
   border-top: 1px solid var(--light);
 }
 
+section.index {
+  display: flex;
+  flex-direction: row;
+}
+
+section.index aside { flex-shrink: 4; }
+
+aside {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 20px;
+}
+
+article {
+  width: 256px;
+  height: 414px; 
+  padding: 1rem;
+  border-radius: 10px;
+  background-color: #111;
+}
+
+@media(max-width: 700px) {
+  aside { display: none; }
+}
+
+article img {
+  height: 50%;
+  width: 100%;
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+article 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);
+}
+
 a {
   color: var(--links);
   text-decoration: none;

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>
+    {{- range site.RegularPages.Limit 4 }}
+      {{ partial "article.html" . }}
+    {{- end }}
+  </aside>
 </section>
 {{ end }}

layouts/partials/article.html

@@ -0,0 +1,13 @@
+<article class="float-on-hover">
+    <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>