From bf2c5edf786ea56a9ccca805950554963e56326a Mon Sep 17 00:00:00 2001 From: TheThomaas Date: Wed, 14 Jun 2023 22:13:14 +0200 Subject: [PATCH] Added hero section to homepage --- src/_includes/layouts/base.html | 2 +- src/_includes/layouts/home.html | 7 +++++-- src/_includes/partials/hero-section.html | 16 ++++++++++++++++ src/index.md | 5 ++++- src/scss/components/_hero.scss | 17 +++++++++++++++++ src/scss/critical.scss | 7 +++++++ 6 files changed, 50 insertions(+), 4 deletions(-) create mode 100644 src/_includes/partials/hero-section.html create mode 100644 src/scss/components/_hero.scss diff --git a/src/_includes/layouts/base.html b/src/_includes/layouts/base.html index 6868c5b..93af69a 100644 --- a/src/_includes/layouts/base.html +++ b/src/_includes/layouts/base.html @@ -5,7 +5,7 @@ {% include "partials/metas.html" %} - + {% include "partials/header.html" %}
diff --git a/src/_includes/layouts/home.html b/src/_includes/layouts/home.html index 3809ce5..75d6ce0 100644 --- a/src/_includes/layouts/home.html +++ b/src/_includes/layouts/home.html @@ -1,10 +1,13 @@ +--- +pageClass: 'home' +--- {% extends "layouts/base.html" %} {% block content %} - {% include "partials/article-head.html" %} + {% include "partials/hero-section.html" %}
-
+
{{ 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 %} +
+
+
\ 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