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>
{% include "partials/metas.html" %}
</head>
<body>
<body class="{{ pageClass}}">
{% include "partials/header.html" %}
<main tabindex="-1" id="main-content">

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

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

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/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));
}
}