diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
index 3b86484..f5caeef 100644
--- a/src/_layouts/base.njk
+++ b/src/_layouts/base.njk
@@ -1,16 +1,15 @@
-{% set assetHash = global.random() %}
+{% set assetHash = helpers.random() %}
 
 <!DOCTYPE html>
 <html lang="{{ meta.lang }}">
   <head>
     <!-- charset/http-equiv/viewport -->
     <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <!-- title -->
     <title>
-      {% if seo.title %} {{ seo.title }}
+      {% if discover.title %} {{ discover.title }}
       {% elif title %}
       {{ title }}
       {% else %}
@@ -18,23 +17,32 @@
       {% endif %}
     </title>
 
+    <!-- 4 synchronous js  -->
+    <!-- load theme toggle first to avoid color flashing on page load and inline render blocking js  -->
+    {% set jsthemetoggle %} {% include "theme-toggle-inline.js" %} {% endset %}
+
+    <script>
+      <!-- prettier-ignore -->
+      {{ jsthemetoggle | jsmin | safe }}
+    </script>
+
+    <!--  inline base schema -->
+    {% include "schemas/base-schema.njk" %}
+
+    <!--  inline blogpost schema  -->
+    {% if schema == 'blog' %} {%- include "schemas/blogpost-schema.njk" %} {% endif %}
+
     <link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
 
     <!-- preloads -->
     <link
       rel="preload"
-      href="/assets/fonts/inter/inter-v7-latin-500.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      href="/assets/fonts/inter/inter-v7-latin-700.woff2"
+      href="/assets/fonts/figtree/figtree-variable[wght].woff2"
       as="font"
       type="font/woff2"
       crossorigin
     />
+
     <link
       rel="preload"
       href="/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2"
@@ -54,23 +62,32 @@
     {% endif %}
 
     <!-- defered js  -->
-    <script type="module" src="/assets/scripts/app.js?{{ assetHash }}" defer></script>
 
-    <!-- everything else: meta tags, icons, open graph etc.  -->
-    {% include "partials/meta-info.njk" %}
-  </head>
-
-  <body>
-    {% include "partials/header.njk" %}
-
-    <main id="main" class="flow">{{ content | safe }}</main>
-
-    {% include "partials/footer.njk" %} {% if youtube %}
-    <!-- youtube, if actvated in frontmatter -->
+    <!-- masonry fallback, if true in frontmatter -->
+    {% if masonry %}
+    <script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
+    {% endif %} {% if youtube %}
+    <!-- youtube, if true in frontmatter -->
     <script
       type="module"
       src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"
     ></script>
     {% endif %}
+
+    <!-- easteregg js, if true in meta -->
+    {% if meta.easteregg %}
+    <script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>
+    {% endif %}
+
+    <!-- everything else: meta tags, icons, open graph etc.  -->
+    {% include "partials/meta-info.njk" %}
+  </head>
+
+  <body class="{{ layout }}">
+    {% include "partials/header.njk" %}
+
+    <main id="main" class="flow">{{ content | safe }}</main>
+
+    {% include "partials/footer.njk" %}
   </body>
 </html>
diff --git a/src/_layouts/home.njk b/src/_layouts/home.njk
index 23e7ab3..63c6211 100644
--- a/src/_layouts/home.njk
+++ b/src/_layouts/home.njk
@@ -1,43 +1,46 @@
 ---
 layout: base
+masonry: true
 ---
 
-<header class="section spot-color-primary">
-  <div class="section__inner">
-    <div class="wrapper flow region">
-      <h1 class="text-center">{{ title }}</h1>
+<div class="wrapper">
+  <header class="full | section" style="--spot-color: var(--color-primary)">
+    <div class="section__inner flow region">
+      <h1 class="text-center text-base-light">{{ title }}</h1>
     </div>
-  </div>
-  {% include 'svg/divider-waves.svg' %}
-</header>
+    {% include 'svg/divider-waves.svg' %}
+  </header>
 
-<article class="region">
-  <div class="wrapper flow prose">
-    {{ content | safe }}
-  </div>
-</article>
+  <article class="full | region">
+    <div class="wrapper flow prose">
+      {{ content | safe }}
+    </div>
+  </article>
 
-<article class="region" style="--region-space-top: var(--space-s)">
-  <div class="wrapper flow prose">
-    <h2>{{ blog.title }}</h2>
-    <!-- blog intro text is optional. -->
-    {% if blog.intro %}
-    <p>{{ blog.intro }}</p>
-    {% endif %}
-  </div>
-  <!-- TODO: duplicate of partials/blog.njk -->
+  <section class="full | region">
+    <div class="wrapper flow prose">
+      <h2>{{ blog.title }}</h2>
+      <!-- blog intro text is optional. -->
 
-  <ul class="wrapper grid mt-l-xl" role="list" data-rows="masonry" data-layout="50-50">
-    {% set postslist = collections.posts %} {% for post in postslist.slice(0, 4) %}
+      {% if blog.intro %}
+      <p>{{ blog.intro }}</p>
+      {% endif %}
 
-    <li class="card flow overflow-hidden">
-      <h3>
-        <a href="{{ post.url | url }}">{{ post.data.title }}</a>
-      </h3>
-      {% set definedDate = post.date %} {% include "partials/date.njk" %}
-      <p>{{ post.data.description }}</p>
-    </li>
-
-    {% endfor %}
-  </ul>
-</article>
+      <ul
+        class="feature | grid region"
+        role="list"
+        data-rows="masonry"
+        data-layout="50-50"
+      >
+        <!-- loop posts -->
+        {% set itemList = collections.posts %} {% for item in itemList.slice(0, 4) %}
+        <!-- activate tags -->
+        {% set activateTags = true %}
+        <!-- set heading context -->
+        {% set headingContext = "h3" %}
+        <!-- card -->
+        {% include 'components/card.njk' %} {% endfor %}
+      </ul>
+    </div>
+  </section>
+</div>
diff --git a/src/_layouts/page.njk b/src/_layouts/page.njk
index 90a8f53..466bdad 100644
--- a/src/_layouts/page.njk
+++ b/src/_layouts/page.njk
@@ -2,9 +2,10 @@
 layout: base
 ---
 
-<article class="region page">
-  <div class="wrapper flow prose">
-    <h1 class="gradient-text">{{ title }}</h1>
-    {{ content | safe }}
-  </div>
+<article
+  class="region wrapper flow prose"
+  style="--region-space-top: var(--space-xl-2xl)"
+>
+  <h1 class="gradient-text">{{ title }}</h1>
+  {{ content | safe }}
 </article>
diff --git a/src/pages/blog.md b/src/pages/blog.md
index aa0740d..4bb1a01 100644
--- a/src/pages/blog.md
+++ b/src/pages/blog.md
@@ -2,5 +2,11 @@
 title: Blog
 description: 'All blog posts can be found here'
 layout: blog
-permalink: /blog/index.html
+pagination:
+  data: collections.posts
+  size: 6
+permalink: 'blog/page-{{ pagination.pageNumber }}/index.html'
+redirectFrom: ['/blog/', '/blog/page-0/']
 ---
+
+This blog has a pagination of {{ pagination.size }} posts per page.
diff --git a/src/pages/built-with.njk b/src/pages/built-with.njk
index 890ef5b..859a866 100644
--- a/src/pages/built-with.njk
+++ b/src/pages/built-with.njk
@@ -3,27 +3,36 @@ title: Built with
 permalink: /built-with/index.html
 description: Websites built with this starter
 layout: page
+grid:
+  sizes: "(max-width: 615px) 50vw, 100vw"
+	widths: [400, 520]
 ---
 
-<p>
-  A list of sites based on / built with Eleventy Excellent. Add your site by submitting a
-  pull request! :)
-</p>
+<p>A list of Add your site by submitting a pull request! :)</p>
 
-<ul class="grid mt-l-xl" role="list">
-  <!-- you find tha data for that in src/_data/builtwith.json -->
-  {% for site in builtwith | reverse %}
+<article class="full section" style="--spot-color: var(--color-bg-accent)">
+  {% include 'svg/divider-soft-top.svg' %}
 
-  <li class="flow mb-m">
-    {% imagePlaceholder site.screenshot, "Screenshot of {{ site.name }}" %}
+  <section class="section__inner wrapper">
+    <h2>Based on, or built with Eleventy Excellent:</h2>
+    <ul class="grid" role="list" style="--gutter: var(--space-xl) var(--space-m)">
+      <!-- you find tha data for that in src/_data/builtwith.json -->
+      {% for site in builtwith | reverse %}
 
-    <p class="text-step-0">
-      {{ site.description }}<br />
+      <li class="grid-card | text-step-min-1">
+        {% eleventyImage site.screenshot, site.name, null, "lazy", null, sizes, widths %}
 
-      <strong>
-        <a href="{{ site.link }}">{{ site.link | replace("https://", "") }}</a>
-      </strong>
-    </p>
-  </li>
-  {% endfor %}
-</ul>
+        <p>
+          {{ site.description }}
+        </p>
+
+        <p>
+          <a href="{{ site.link }}">{{ site.link | replace("https://", "") }}</a>
+        </p>
+      </li>
+      {% endfor %}
+    </ul>
+  </section>
+
+  {% include 'svg/divider-soft-bottom.svg' %}
+</article>
