-
+
+
\ No newline at end of file
diff --git a/src/index.md b/src/index.md
index 2168035..a51ca7f 100644
--- a/src/index.md
+++ b/src/index.md
@@ -1,8 +1,11 @@
---
title: 'Home'
-description: 'A made up agency site that you build if you take Learn Eleventy From Scratch, by Piccalilli'
+description: 'A website made with Eleventy'
+heroTitle: 'Welcome'
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" %}
\ No newline at end of file
diff --git a/src/scss/components/_hero.scss b/src/scss/components/_hero.scss
new file mode 100644
index 0000000..a74cbc3
--- /dev/null
+++ b/src/scss/components/_hero.scss
@@ -0,0 +1,17 @@
+.hero {
+ inline-size: 100%;
+ background-color: var(--hero-background, var(--brand-variant));
+ padding: 4rem var(--gutter);
+ color: var(--hero-color, var(--surface2));
+
+ .hero-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--gutter);
+ }
+
+ h1 {
+ font-size: 2.5rem;;
+ }
+}
\ No newline at end of file
diff --git a/src/scss/critical.scss b/src/scss/critical.scss
index 7ded03e..fce46fe 100644
--- a/src/scss/critical.scss
+++ b/src/scss/critical.scss
@@ -5,6 +5,7 @@
@use './components/top-button';
@use './components/skip-link';
@use './components/post';
+@use './components/hero';
:root {
@media screen and (prefers-reduced-motion: no-preference) {
@@ -111,4 +112,10 @@ img {
.theme-toggle {
color: var(--text1);
+}
+
+.home {
+ h2 {
+ font-size: calc(1.5 * var(--font-size));
+ }
}
\ No newline at end of file
{{ content | safe }}
diff --git a/src/_includes/partials/hero-section.html b/src/_includes/partials/hero-section.html
new file mode 100644
index 0000000..be5baa3
--- /dev/null
+++ b/src/_includes/partials/hero-section.html
@@ -0,0 +1,16 @@
+
+
+
+
+ + {% if heroTitle %} + {{ heroTitle }} + {% else %} + {{ title }} + {% endif %} +
+ {% if description %} +{{ description }}
+ {% endif %} +