Simple homepage

public/admin/config.yml

@@ -44,6 +44,30 @@ media_libraries:
           optimize: true
 
 collections:
+  - name: home
+    label: "Home page"
+    files:
+      - name: home
+        label: "Home page"
+        file: "pages/home.md"
+        format: frontmatter
+        fields:
+          - { name: title, label: "Title", widget: string }
+          - { name: introduction, label: "Introduction", widget: text, required: false }
+          - name: images
+            label: "Images"
+            label_singular: "image"
+            widget: list
+            required: false
+            max: 2
+            hint: "Up to two images, shown side by side."
+            fields:
+              - { name: image, label: "Image", widget: image }
+              - { name: alt, label: "Alternative text", widget: string, required: false, hint: "Describe the image; leave empty only for decorative images." }
+              - { name: caption, label: "Caption", widget: string, required: false }
+          - { name: body, label: "Body", widget: markdown }
+          - { name: buttonLabel, label: "Button label", widget: string, required: false }
+          - { name: buttonUrl, label: "Button destination", widget: string, required: false, hint: "A site path such as /example/lorem-ipsum/, or an https:// URL." }
   - name: examples
     label: "Example pages"
     files:

public/admin/preview.css

@@ -279,6 +279,24 @@ button:hover .arrow {
   color: var(--text-muted);
 }
 
+/* Two photos side by side, pulled up over the hero together */
+.page-figures {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+  margin: -9rem 0 4rem;
+}
+
+.page-figures .page-figure {
+  margin: 0;
+}
+
+/* Same shape for both photos, whatever the uploads' proportions */
+.page-figures img {
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+}
+
 /* Prose
    ========================================================================== */
 
@@ -450,11 +468,18 @@ button:hover .arrow {
     padding-bottom: 4rem;
   }
 
-  .page-figure {
+  .page-figure,
+  .page-figures {
     margin-top: -6rem;
   }
 }
 
+@media (max-width: 600px) {
+  .page-figures {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* Preferences
    ========================================================================== */