refactor articles

assets/css/main.css

@@ -63,7 +63,7 @@ section.index {
 
 section.index aside { flex-shrink: 4; }
 
-aside {
+.index-articles {
   display: flex;
   justify-content: flex-end;
   flex-wrap: wrap;
@@ -71,6 +71,14 @@ aside {
   gap: 20px;
 }
 
+.author-articles {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+
 article {
   width: 256px;
   height: 414px; 
@@ -80,7 +88,7 @@ article {
 }
 
 @media(max-width: 700px) {
-  aside { display: none; }
+  aside.index-articles { display: none; }
 }
 
 article img {
@@ -96,13 +104,7 @@ article h3 {
   text-overflow: ellipsis;
 }
 
-.float-on-hover{
+.float-on-hover{transition:all .25s cubic-bezier(.2,.1,.47,1)}.float-on-hover:hover{transform:translateY(-10px)}
-  transition: all .25s cubic-bezier(.2,.1,.47,1)
-}
-
-.float-on-hover:hover{
-  transform: translateY(-10px);
-}
 
 a {
   color: var(--links);

layouts/_default/home.html

@@ -15,7 +15,7 @@
   {{ end }}
   </div>
 
-  <aside>
+  <aside class="index-articles">
     {{- range site.RegularPages.Limit 4 }}
       {{ partial "article.html" . }}
     {{- end }}

layouts/partials/article.html

@@ -1,5 +1,5 @@
 <article class="float-on-hover">
-    <a href=" {{.Permalink }}">
+    <a href=" {{ .Permalink }}">
     	{{- $image := (.Resources.GetMatch "featured").Resize "256x webp q90" }}
         <img src={{ $image.RelPermalink }} alt="{{ .Params.featured.alt }}">
     </a>