Changed homepage

src/_includes/partials/hero-section.html

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