updated pages, layouts

This commit is contained in:
madrilene 2024-01-30 18:42:27 +01:00
parent 5d2df76402
commit 1ff0b81ed6
5 changed files with 117 additions and 81 deletions

View file

@ -1,16 +1,15 @@
{% set assetHash = global.random() %} {% set assetHash = helpers.random() %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ meta.lang }}"> <html lang="{{ meta.lang }}">
<head> <head>
<!-- charset/http-equiv/viewport --> <!-- charset/http-equiv/viewport -->
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- title --> <!-- title -->
<title> <title>
{% if seo.title %} {{ seo.title }} {% if discover.title %} {{ discover.title }}
{% elif title %} {% elif title %}
{{ title }} {{ title }}
{% else %} {% else %}
@ -18,23 +17,32 @@
{% endif %} {% endif %}
</title> </title>
<!-- 4 synchronous js -->
<!-- load theme toggle first to avoid color flashing on page load and inline render blocking js -->
{% set jsthemetoggle %} {% include "theme-toggle-inline.js" %} {% endset %}
<script>
<!-- prettier-ignore -->
{{ jsthemetoggle | jsmin | safe }}
</script>
<!-- inline base schema -->
{% include "schemas/base-schema.njk" %}
<!-- inline blogpost schema -->
{% if schema == 'blog' %} {%- include "schemas/blogpost-schema.njk" %} {% endif %}
<link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" /> <link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
<!-- preloads --> <!-- preloads -->
<link <link
rel="preload" rel="preload"
href="/assets/fonts/inter/inter-v7-latin-500.woff2" href="/assets/fonts/figtree/figtree-variable[wght].woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/assets/fonts/inter/inter-v7-latin-700.woff2"
as="font" as="font"
type="font/woff2" type="font/woff2"
crossorigin crossorigin
/> />
<link <link
rel="preload" rel="preload"
href="/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2" href="/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2"
@ -54,23 +62,32 @@
{% endif %} {% endif %}
<!-- defered js --> <!-- defered js -->
<script type="module" src="/assets/scripts/app.js?{{ assetHash }}" defer></script>
<!-- everything else: meta tags, icons, open graph etc. --> <!-- masonry fallback, if true in frontmatter -->
{% include "partials/meta-info.njk" %} {% if masonry %}
</head> <script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
{% endif %} {% if youtube %}
<body> <!-- youtube, if true in frontmatter -->
{% include "partials/header.njk" %}
<main id="main" class="flow">{{ content | safe }}</main>
{% include "partials/footer.njk" %} {% if youtube %}
<!-- youtube, if actvated in frontmatter -->
<script <script
type="module" type="module"
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"
></script> ></script>
{% endif %} {% endif %}
<!-- easteregg js, if true in meta -->
{% if meta.easteregg %}
<script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>
{% endif %}
<!-- everything else: meta tags, icons, open graph etc. -->
{% include "partials/meta-info.njk" %}
</head>
<body class="{{ layout }}">
{% include "partials/header.njk" %}
<main id="main" class="flow">{{ content | safe }}</main>
{% include "partials/footer.njk" %}
</body> </body>
</html> </html>

View file

@ -1,43 +1,46 @@
--- ---
layout: base layout: base
masonry: true
--- ---
<header class="section spot-color-primary"> <div class="wrapper">
<div class="section__inner"> <header class="full | section" style="--spot-color: var(--color-primary)">
<div class="wrapper flow region"> <div class="section__inner flow region">
<h1 class="text-center">{{ title }}</h1> <h1 class="text-center text-base-light">{{ title }}</h1>
</div> </div>
</div> {% include 'svg/divider-waves.svg' %}
{% include 'svg/divider-waves.svg' %} </header>
</header>
<article class="region"> <article class="full | region">
<div class="wrapper flow prose"> <div class="wrapper flow prose">
{{ content | safe }} {{ content | safe }}
</div> </div>
</article> </article>
<article class="region" style="--region-space-top: var(--space-s)"> <section class="full | region">
<div class="wrapper flow prose"> <div class="wrapper flow prose">
<h2>{{ blog.title }}</h2> <h2>{{ blog.title }}</h2>
<!-- blog intro text is optional. --> <!-- blog intro text is optional. -->
{% if blog.intro %}
<p>{{ blog.intro }}</p>
{% endif %}
</div>
<!-- TODO: duplicate of partials/blog.njk -->
<ul class="wrapper grid mt-l-xl" role="list" data-rows="masonry" data-layout="50-50"> {% if blog.intro %}
{% set postslist = collections.posts %} {% for post in postslist.slice(0, 4) %} <p>{{ blog.intro }}</p>
{% endif %}
<li class="card flow overflow-hidden"> <ul
<h3> class="feature | grid region"
<a href="{{ post.url | url }}">{{ post.data.title }}</a> role="list"
</h3> data-rows="masonry"
{% set definedDate = post.date %} {% include "partials/date.njk" %} data-layout="50-50"
<p>{{ post.data.description }}</p> >
</li> <!-- loop posts -->
{% set itemList = collections.posts %} {% for item in itemList.slice(0, 4) %}
{% endfor %} <!-- activate tags -->
</ul> {% set activateTags = true %}
</article> <!-- set heading context -->
{% set headingContext = "h3" %}
<!-- card -->
{% include 'components/card.njk' %} {% endfor %}
</ul>
</div>
</section>
</div>

View file

@ -2,9 +2,10 @@
layout: base layout: base
--- ---
<article class="region page"> <article
<div class="wrapper flow prose"> class="region wrapper flow prose"
<h1 class="gradient-text">{{ title }}</h1> style="--region-space-top: var(--space-xl-2xl)"
{{ content | safe }} >
</div> <h1 class="gradient-text">{{ title }}</h1>
{{ content | safe }}
</article> </article>

View file

@ -2,5 +2,11 @@
title: Blog title: Blog
description: 'All blog posts can be found here' description: 'All blog posts can be found here'
layout: blog layout: blog
permalink: /blog/index.html pagination:
data: collections.posts
size: 6
permalink: 'blog/page-{{ pagination.pageNumber }}/index.html'
redirectFrom: ['/blog/', '/blog/page-0/']
--- ---
This blog has a pagination of {{ pagination.size }} posts per page.

View file

@ -3,27 +3,36 @@ title: Built with
permalink: /built-with/index.html permalink: /built-with/index.html
description: Websites built with this starter description: Websites built with this starter
layout: page layout: page
grid:
sizes: "(max-width: 615px) 50vw, 100vw"
widths: [400, 520]
--- ---
<p> <p>A list of Add your site by submitting a pull request! :)</p>
A list of sites based on / built with Eleventy Excellent. Add your site by submitting a
pull request! :)
</p>
<ul class="grid mt-l-xl" role="list"> <article class="full section" style="--spot-color: var(--color-bg-accent)">
<!-- you find tha data for that in src/_data/builtwith.json --> {% include 'svg/divider-soft-top.svg' %}
{% for site in builtwith | reverse %}
<li class="flow mb-m"> <section class="section__inner wrapper">
{% imagePlaceholder site.screenshot, "Screenshot of {{ site.name }}" %} <h2>Based on, or built with Eleventy Excellent:</h2>
<ul class="grid" role="list" style="--gutter: var(--space-xl) var(--space-m)">
<!-- you find tha data for that in src/_data/builtwith.json -->
{% for site in builtwith | reverse %}
<p class="text-step-0"> <li class="grid-card | text-step-min-1">
{{ site.description }}<br /> {% eleventyImage site.screenshot, site.name, null, "lazy", null, sizes, widths %}
<strong> <p>
<a href="{{ site.link }}">{{ site.link | replace("https://", "") }}</a> {{ site.description }}
</strong> </p>
</p>
</li> <p>
{% endfor %} <a href="{{ site.link }}">{{ site.link | replace("https://", "") }}</a>
</ul> </p>
</li>
{% endfor %}
</ul>
</section>
{% include 'svg/divider-soft-bottom.svg' %}
</article>