TheThomaas/11ty-theme
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Added hero section to homepage

Browse source
This commit is contained in:
TheThomaas 2023-06-14 22:13:14 +02:00
parent f68060aed5
commit bf2c5edf78
6 changed files with 50 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/_includes/layouts/base.html
View file

@ -5,7 +5,7 @@
<head> <head>
{% include "partials/metas.html" %} {% include "partials/metas.html" %}
</head> </head>
<body> <body class="{{ pageClass}}">
{% include "partials/header.html" %} {% include "partials/header.html" %}
<main tabindex="-1" id="main-content"> <main tabindex="-1" id="main-content">

7
src/_includes/layouts/home.html
View file

@ -1,10 +1,13 @@
---
pageClass: 'home'
---
{% extends "layouts/base.html" %} {% extends "layouts/base.html" %}
{% block content %} {% block content %}
{% include "partials/article-head.html" %} {% include "partials/hero-section.html" %}
<br> <br>
<div class="wrapper-lg"> <div class="wrapper">
{{ content | safe }} {{ content | safe }}
</div> </div>

16
src/_includes/partials/hero-section.html Normal file
View file

@ -0,0 +1,16 @@
<header class="hero">
<div class="wrapper">
<div class="hero-content">
<h1>
{% if heroTitle %}
{{ heroTitle }}
{% else %}
{{ title }}
{% endif %}
</h1>
{% if description %}
<p>{{ description }}</p>
{% endif %}
</div>
</div>
</header>

5
src/index.md
View file

@ -1,8 +1,11 @@
--- ---
title: 'Home' 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' metaDesc: 'A made up agency site that you build if you take Learn Eleventy From Scratch, by Piccalilli'
layout: 'home' layout: 'home'
--- ---
## Posts
{% include "partials/post-list.html" %} {% include "partials/post-list.html" %}

17
src/scss/components/_hero.scss Normal file
View file

@ -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;;
}
}

7
src/scss/critical.scss
View file

@ -5,6 +5,7 @@
@use './components/top-button'; @use './components/top-button';
@use './components/skip-link'; @use './components/skip-link';
@use './components/post'; @use './components/post';
@use './components/hero';
:root { :root {
@media screen and (prefers-reduced-motion: no-preference) { @media screen and (prefers-reduced-motion: no-preference) {
@ -111,4 +112,10 @@ img {
.theme-toggle { .theme-toggle {
color: var(--text1); color: var(--text1);
}
.home {
h2 {
font-size: calc(1.5 * var(--font-size));
}
} }