Post layouts

assets/css/screen.css

@@ -814,7 +814,7 @@ make sure this only happens on large viewports / desktop-ish devices.
         grid-column: span 6;
         display: grid;
         grid-gap: 4vmin;
-        grid-template-columns: repeat(20, 1fr);
+        grid-template-columns: repeat(3, 1fr);
         min-height: 280px;
         border-top: 0;
     }
@@ -825,13 +825,13 @@ make sure this only happens on large viewports / desktop-ish devices.
 
     .post-card-large .post-card-image-link {
         position: relative;
-        grid-column: span 13;
+        grid-column: span 2;
         margin-bottom: 0;
         min-height: 380px;
     }
 
     .post-card-large .post-card-content {
-        grid-column: span 7;
+        grid-column: span 1;
     }
 
     .post-card-large .post-card-image {
@@ -870,12 +870,19 @@ make sure this only happens on large viewports / desktop-ish devices.
         font-size: 2.4rem;
     }
 
-    .post-card:nth-child(2),
-    .post-card:nth-child(3) {
+    .post-card-full {
+        grid-column: span 6;
+    }
+
+    .post-card-full .post-card-title {
+        font-size: 6.4rem;
+    }
+
+    .post-card.dynamic {
         grid-column: span 3;
     }
 
-    .post-card:is(:nth-child(2), :nth-child(3)) .post-card-title {
+    .post-card.dynamic .post-card-title {
         font-size: 3rem;
     }
 }

package.json

@@ -120,12 +120,21 @@
                 "default": true,
                 "group": "homepage"
             },
+            "first_post_layout": {
+                "type": "select",
+                "options": [
+                    "Large card",
+                    "Full-width card",
+                    "None"
+                ],
+                "default": "Large card",
+                "group": "homepage"
+            },
             "feed_layout": {
                 "type": "select",
                 "options": [
                     "Dynamic grid",
-                    "Simple grid",
-                    "List"
+                    "Simple grid"
                 ],
                 "default": "Dynamic grid",
                 "group": "homepage"

partials/post-card.hbs

@@ -1,7 +1,7 @@
 {{!-- This is a partial file used to generate a post "card"
 which templates loop over to generate a list of posts. --}}
 
-<article class="post-card {{post_class}} {{#match @custom.feed_layout "!=" "Simple grid"}}{{#is "home, paged"}}{{#match @custom.feed_layout "Dynamic grid"}}{{#has index="0"}}{{#is "home"}}{{#if feature_image}}post-card-large{{/if}}{{/is}}{{/has}}{{else}}post-card-large{{/match}}{{/is}}{{/match}}">
+<article class="post-card {{post_class}}{{^is "paged"}}{{#has index="0"}}{{#match @custom.first_post_layout "Large card"}} post-card-large{{/match}}{{#match @custom.first_post_layout "Full-width card"}} post-card-full{{/match}}{{/has}}{{/is}}{{#match @custom.feed_layout "Dynamic grid"}}{{#match @custom.first_post_layout "None"}}{{#has index="0,1"}} dynamic{{/has}}{{else}}{{#has index="1,2"}} dynamic{{/has}}{{/match}}{{/match}}">
 
     {{#if feature_image}}
     <a class="post-card-image-link" href="{{url}}">