Design adjustments, new content and more

site/templates/home.php

@@ -1,34 +1,49 @@
 <?php
-/**
- * Templates render the content of your pages. 
- * They contain the markup together with some control structures like loops or if-statements.
- * The `$page` variable always refers to the currently active page. 
- * To fetch the content from each field we call the field name as a method on the `$page` object, e.g. `$page->title()`. 
- * This home template renders content from others pages, the children of the `photography` page to display a nice gallery grid.
- * Snippets like the header and footer contain markup used in multiple templates. They also help to keep templates clean.
- * More about templates: https://getkirby.com/docs/guide/templates/basics
- */
+/*
+  Templates render the content of your pages.
+
+  They contain the markup together with some control structures
+  like loops or if-statements. The `$page` variable always
+  refers to the currently active page.
+
+  To fetch the content from each field we call the field name as a
+  method on the `$page` object, e.g. `$page->title()`.
+
+  This home template renders content from others pages, the children of
+  the `photography` page to display a nice gallery grid.
+
+  Snippets like the header and footer contain markup used in
+  multiple templates. They also help to keep templates clean.
+
+  More about templates: https://getkirby.com/docs/guide/templates/basics
+*/
 ?>
-
 <?php snippet('header') ?>
-
-<main>
   <?php snippet('intro') ?>
-
-
-  <?php 
-  // we always use an if-statement to check if a page exists to prevent errors 
-  // in case the page was deleted or renamed before we call a method like `children()` in this case
-  if ($photographyPage = page('photography')): ?>
-  <ul class="grid">
+  <?php
+  /*
+    We always use an if-statement to check if a page exists to
+    prevent errors in case the page was deleted or renamed before
+    we call a method like `children()` in this case
+  */
+  ?>
+  <?php if ($photographyPage = page('photography')): ?>
+  <ul class="home-grid">
     <?php foreach ($photographyPage->children()->listed() as $album): ?>
     <li>
       <a href="<?= $album->url() ?>">
         <figure>
-          <?php 
-          // the `cover()` method defined in the `album.php` page model can be used 
-          // everywhere across the site for this type of page
-          if ($cover = $album->cover()): ?>
+          <?php
+          /*
+            The `cover()` method defined in the `album.php`
+            page model can be used everywhere across the site
+            for this type of page
+
+            We can automatically resize images to a useful
+            size with Kirby's built-in image manipulation API
+          */
+          ?>
+          <?php if ($cover = $album->cover()): ?>
           <?= $cover->resize(1024, 1024) ?>
           <?php endif ?>
           <figcaption>
@@ -42,7 +57,4 @@
     <?php endforeach ?>
   </ul>
   <?php endif ?>
-
-</main>
-
 <?php snippet('footer') ?>