Changed homepage

src/_includes/partials/hero-section.html

@@ -1,16 +1,28 @@
-<header class="hero">
+{% if heroTitle or description %}
+  {% if heroBackground or heroColor %}
+  <style>
+    .hero {
+      {% if heroBackground %}
+        --hero-background: {{ heroBackground }};
+      {% endif %}
+      {% if heroColor %}
+        --hero-color: {{ heroColor }};
+      {% endif %}
+    }
+  </style>
+  {% endif %}
+  <header class="hero">
     <div class="wrapper">
       <div class="hero-content">
-      <h1>
         {% if heroTitle %}
+          <h1>
             {{ heroTitle }}
-        {% else %}
-          {{ title }}
-        {% endif %}
           </h1>
+        {% endif %}
         {% if description %}
           <p>{{ description }}</p>
         {% endif %}
       </div>
     </div>
-</header>
+  </header>
+{% endif %}

src/index.md

@@ -1,11 +1,10 @@
 ---
 title: 'Home'
-description: 'A website made with Eleventy'
+heroTitle: 'Welcome to my website'
-heroTitle: 'Welcome'
+heroBackground: var(--surface1)
+heroColor: var(--text1)
 metaDesc: 'A made up agency site that you build if you take Learn Eleventy From Scratch, by Piccalilli'
 layout: 'home'
 ---
 
-## Posts
-
 {% include "partials/post-list.html" %}