updated pages, layouts
This commit is contained in:
parent
5d2df76402
commit
1ff0b81ed6
5 changed files with 117 additions and 81 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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.
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue