STyling

eleventy.config.js

@@ -24,7 +24,7 @@ module.exports = function (eleventyConfig) {
 	eleventyConfig.addCollection("posts", collections.posts);
 	eleventyConfig.addCollection("feed", collections.feed);
 	eleventyConfig.addCollection("latest", collections.latest);
-	eleventyConfig.addCollection("spot", collections.spot);
+	eleventyConfig.addCollection("featured", collections.featured);
 
 	// Filters
 	eleventyConfig.addFilter("dateToDMY", filters.dateToDMY);

src/_11ty/collections.js

@@ -1,12 +1,12 @@
 // Collection for posts
 const posts = i => i.getFilteredByGlob("./src/content/posts/*.md").reverse();
 const latest = i => i.getFilteredByGlob("./src/content/posts/*.md").reverse().slice(0, 3);
-const spot = i => i.getFilteredByGlob("./src/content/posts/*.md").reverse().slice(0, 1);
+const featured = i => i.getFilteredByGlob("./src/content/posts/*.md").reverse().slice(0, 1);
 const feed = i => i.getFilteredByGlob("./src/content/posts/*.md").reverse();
 
 module.exports = {
 	posts,
 	feed,
 	latest,
-	spot,
+	featured,
 };

src/_includes/layouts/index.njk

@@ -13,7 +13,15 @@
         <h2>Latest recipes</h2>
         <ul class="recipe-ul">
           {% for item in collections.latest %}
-            {% include "partials/site-post-list.njk" %}
+            <li>
+              <a href="{{ item.url }}">
+                  {% figure %}
+                      {% picture item.data.figureRecipe.imageSrc, item.data.figureRecipe.imageTitle, item.data.figureRecipe.imageAlt, item.data.figureRecipe.loading, "(min-width: 60rem) 260px, 340px" %}
+                  {% endfigure %}
+                  {{ item.data.title }}
+              </a>
+              <time datetime="{{ item.date | dateToYYYYMMDD }}"> {{ item.date | dateToDMY }}</time>
+          </li>
           {% endfor %}
         </ul>
       </aside>

src/_includes/layouts/list.njk

@@ -5,8 +5,13 @@
     <h1 class="page-header layout-span">{{ title }}</h1>
     <div class="layout-span | content-main flow">
       <ul class="recipe-ul">
-        {% for item in pagination.items %}
-          {% include "partials/site-post-list.njk" %}
+        {% for item in pagination.items %} 
+          <a href="{{ item.url }}">         
+          {% figure %}
+              {% picture item.data.figureRecipe.imageSrc, item.data.figureRecipe.imageTitle, item.data.figureRecipe.imageAlt, item.data.figureRecipe.loading, "(min-width: 60rem) 250px, (min-width: 30rem) 440px, 430px" %}
+          {% endfigure %}
+          {{ item.data.title }}
+          </a>
         {% endfor %}
       </ul>
     </div>

src/_styles/base/sections.css

@@ -23,6 +23,7 @@ h1 {
 
 h2 {
 	@extend %heading-2;
+	margin-bottom: 0.25em;
 }
 
 h3 {

src/_styles/components/recipe-list.css

@@ -21,12 +21,21 @@ ul.recipe-ul {
 	ul.recipe-ul {
 		grid-template-columns: 1fr 1fr;
 	}
+	aside ul.recipe-ul {
+		grid-template-columns: 1fr 1fr;
+	}
 }
 
 @media only screen and (min-width: 960px) {
 	ul.recipe-ul {
 		grid-template-columns: 1fr 1fr 1fr 1fr;
 	}
+	aside ul.recipe-ul {
+		grid-template-columns: 1fr 1fr 1fr;
+	}
+}
+
+@media only screen and (min-width: 1100px) {
 	aside ul.recipe-ul {
 		grid-template-columns: 1fr;
 	}

src/_styles/layout/content.css

@@ -30,5 +30,4 @@
 	padding: var(--space-l);
 	border-radius: var(--border-radius-small);
 	background-color: var(--color-surface-secondary);
-	max-width: var(--measure-default);
 }

src/content/index.md

@@ -1,11 +1,20 @@
 ---
 layout: "layouts/index"
 permalink: "/index.html"
+eleventyImport:
+  collections: ["featured"]
 ---
 
 Welcome to our AI-Generated Vegan Recipe Page, a unique culinary destination where the fusion of technology and diverse global flavors brings you an exclusive range of vegan recipes. We are thrilled to introduce you to our four AI-created chef personas, each representing a different corner of the world, infusing their unique cultural touch into vegan cooking.
 
+## Newest Recipe
 
+{% set latestRecipe = collections.featured[0].data %}
+<a class="index" href="{{ collections.featured[0].url }}">
+{% figure %}
+    {% picture latestRecipe.figureRecipe.imageSrc, latestRecipe.figureRecipe.imageTitle, latestRecipe.figureRecipe.imageAlt, latestRecipe.figureRecipe.loading %}
+{% endfigure %}
+</a>
 
 ## Meet Our Chefs