Restyle lists

assets/sass/_list.scss

@@ -0,0 +1,83 @@
+$list-item-image-size: 32px;
+
+.list {
+    .header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        h3 {}
+
+        .view-all {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            a {
+                text-decoration: none;
+
+                &:after {
+                    content: "»";
+                }
+            }
+        }
+    }
+
+    .list-items-container {
+        ul.list-items {
+            list-style: none;
+            padding: 0;
+
+            li.list-item {
+                display: flex;
+
+                background-color: rgba(white, 0.05);
+                transition: transform 150ms ease-in;
+
+                border-radius: 16px;
+                padding: 8px;
+
+                user-select: none;
+
+                &:not(:last-child) {
+                    margin-bottom: 1rem;
+                }
+
+                &[data-href] {
+                    cursor: pointer;
+
+                    &:hover {
+                        transform: translateX(2rem);
+
+                        @media (max-width: $xl) {
+                            transform: translateX(1rem);
+                        }
+
+                        @media (max-width: $lg) {
+                            transform: translateX(0.5rem);
+                        }
+                    }
+                }
+
+                .list-item-image {
+                    max-width: $list-item-image-size;
+                    max-height: $list-item-image-size;
+
+                    margin-right: 1rem;
+                }
+
+                .list-item-text {
+                    h4.list-item-title {
+                        line-height: $list-item-image-size;
+                        font-size: 1.2rem;
+                        margin: 0;
+                    }
+
+                    span.list-item-date {
+                        display: block
+                    }
+                }
+            }
+        }
+    }
+}

assets/sass/app.scss

@@ -9,8 +9,9 @@
 
 // Generic styling
 @import "container";
-
-// Component specific styling
 @import "layout";
 @import "header";
 @import "footer";
+
+// Component-specific styling
+@import "list"

layouts/index.html

@@ -1,7 +1,5 @@
 {{ define "main" }}
-<section class="blog-recent">
+{{ partial "snippet-list" (dict "showAllArticles" true) }}
-    {{ partial "snippet-list" (dict "showAllArticles" true) }}
-</section>
 {{ end }}
 
 {{ define "aside" }}

layouts/partials/snippet-list.html

@@ -1,22 +1,24 @@
-<div class="header">
+<section class="list">
-    <h3>Latest Articles</h3>
+    <div class="header">
+        <h3>Latest Articles</h3>
 
-    {{ if index $ "showAllArticles" }}
+        {{ if index $ "showAllArticles" }}
-    <div class="all-articles">
+        <div class="view-all">
-        <a href="javascript:void(0)">All articles</a>
+            <a href="javascript:void(0)">All articles</a>
-    </div>
+        </div>
-    {{ end }}
-</div>
-<div class="list">
-    <ul class="blog-items">
-        {{ range ( first 3 (where site.RegularPages "Type" "snippets").ByDate.Reverse ) }}
-            <li class="blog-item" data-href="{{ .Permalink }}">
-                <img class="article-image" src="//via.placeholder.com/128" alt="Article Topic">
-                <div class="article-text">
-                    <h4 class="article-title">{{ .Title }}</h4>
-                    <span class="article-date">{{ .Date.Format "January 2, 2006" }}</span>
-                </div>
-            </li>
         {{ end }}
-    </ul>
+    </div>
-</div>
+    <div class="list-items-container">
+        <ul class="list-items">
+            {{ range ( first 3 (where site.RegularPages "Type" "snippets").ByDate.Reverse ) }}
+                <li class="list-item" data-href="{{ .Permalink }}">
+                    <img class="list-item-image" src="//via.placeholder.com/128" alt="Article Topic">
+                    <div class="list-item-text">
+                        <h4 class="list-item-title">{{ .Title }}</h4>
+                        <span class="list-item-date">{{ .Date.Format "January 2, 2006" }}</span>
+                    </div>
+                </li>
+            {{ end }}
+        </ul>
+    </div>
+</section>

layouts/snippets/list.html

@@ -1,7 +1,5 @@
 {{ define "main" }}
-<section class="blog-recent">
+{{ partial "snippet-list" (dict) }}
-    {{ partial "snippet-list" (dict) }}
-</section>
 {{ end }}
 
 {{ define "aside" }}