Post list

assets/css/screen.css

@@ -139,7 +139,7 @@ a:hover {
 
 .gh-inner {
     margin: 0 auto;
-    max-width: 1200px;
+    max-width: 1280px;
     width: 100%;
 }
 
@@ -584,6 +584,10 @@ Search                         LOGO                    Login Subscribe
 
 /* Card */
 
+.gh-card-link:hover {
+    opacity: 1;
+}
+
 .gh-card-image {
     position: relative;
     aspect-ratio: 16 / 9;
@@ -649,3 +653,34 @@ Search                         LOGO                    Login Subscribe
 .gh-header.is-highlight .gh-card:not(:first-child) .gh-card-excerpt {
     display: none;
 }
+
+/* 7. Container */
+
+.gh-container:not(.has-sidebar) .gh-container-inner {
+    display: grid;
+    grid-template-columns: repeat(16, 1fr);
+}
+
+.gh-container:not(.has-sidebar) .gh-container-inner .gh-main {
+    grid-column: 3 / span 12;
+}
+
+/* 8. Post list */
+
+/* 8.1. List style */
+
+.gh-container.is-list .gh-card-link {
+    display: flex;
+}
+
+.gh-container.is-list .gh-card-image {
+    flex-shrink: 0;
+    width: 240px;
+}
+
+/* 8.2. Grid style */
+
+.gh-container.is-grid .gh-feed {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+}

default.hbs

@@ -23,7 +23,8 @@
 <div class="gh-viewport">
     
     {{> "components/navigation" navigationLayout=@custom.navigation_layout}}
-    {{> "components/header" headerStyle="Search"}}
+    {{> "components/header" headerStyle=@custom.header_style}}
+    {{> "components/post-list" postListStyle=@custom.post_list_style}}
     
     {{{body}}}
 

package.json

@@ -104,6 +104,15 @@
                 ],
                 "default": "Magazine",
                 "group": "homepage"
+            },
+            "post_list_style": {
+                "type": "select",
+                "options": [
+                    "List",
+                    "Grid"
+                ],
+                "default": "List",
+                "group": "homepage"
             }
         }
     },

partials/components/post-list.hbs

@@ -0,0 +1,12 @@
+<section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}} gh-outer">
+    <div class="gh-container-inner gh-inner">
+        <main class="gh-main">
+            <h2 class="gh-feed-title">Latest</h2>
+            <div class="gh-feed">
+                {{#foreach posts from="8"}}
+                    {{> "loop"}}
+                {{/foreach}}
+            </div>
+        </main>
+    </div>
+</section>