updated pages, layouts
This commit is contained in:
madrilene
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>
|
||||
<html lang="{{ meta.lang }}">
|
||||
<head>
|
||||
<!-- charset/http-equiv/viewport -->
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- title -->
|
||||
<title>
|
||||
{% if seo.title %} {{ seo.title }}
|
||||
{% if discover.title %} {{ discover.title }}
|
||||
{% elif title %}
|
||||
{{ title }}
|
||||
{% else %}
|
||||
|
|
@ -18,23 +17,32 @@
|
|||
{% endif %}
|
||||
</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 }}" />
|
||||
|
||||
<!-- preloads -->
|
||||
<link
|
||||
rel="preload"
|
||||
href="/assets/fonts/inter/inter-v7-latin-500.woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossorigin
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="/assets/fonts/inter/inter-v7-latin-700.woff2"
|
||||
href="/assets/fonts/figtree/figtree-variable[wght].woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossorigin
|
||||
/>
|
||||
|
||||
<link
|
||||
rel="preload"
|
||||
href="/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2"
|
||||
|
|
@ -54,23 +62,32 @@
|
|||
{% endif %}
|
||||
|
||||
<!-- defered js -->
|
||||
<script type="module" src="/assets/scripts/app.js?{{ assetHash }}" defer></script>
|
||||
|
||||
<!-- everything else: meta tags, icons, open graph etc. -->
|
||||
{% include "partials/meta-info.njk" %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% include "partials/header.njk" %}
|
||||
|
||||
<main id="main" class="flow">{{ content | safe }}</main>
|
||||
|
||||
{% include "partials/footer.njk" %} {% if youtube %}
|
||||
<!-- youtube, if actvated in frontmatter -->
|
||||
<!-- masonry fallback, if true in frontmatter -->
|
||||
{% if masonry %}
|
||||
<script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
|
||||
{% endif %} {% if youtube %}
|
||||
<!-- youtube, if true in frontmatter -->
|
||||
<script
|
||||
type="module"
|
||||
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"
|
||||
></script>
|
||||
{% 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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,46 @@
|
|||
---
|
||||
layout: base
|
||||
masonry: true
|
||||
---
|
||||
|
||||
<header class="section spot-color-primary">
|
||||
<div class="section__inner">
|
||||
<div class="wrapper flow region">
|
||||
<h1 class="text-center">{{ title }}</h1>
|
||||
<div class="wrapper">
|
||||
<header class="full | section" style="--spot-color: var(--color-primary)">
|
||||
<div class="section__inner flow region">
|
||||
<h1 class="text-center text-base-light">{{ title }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'svg/divider-waves.svg' %}
|
||||
</header>
|
||||
{% include 'svg/divider-waves.svg' %}
|
||||
</header>
|
||||
|
||||
<article class="region">
|
||||
<div class="wrapper flow prose">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
</article>
|
||||
<article class="full | region">
|
||||
<div class="wrapper flow prose">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="region" style="--region-space-top: var(--space-s)">
|
||||
<div class="wrapper flow prose">
|
||||
<h2>{{ blog.title }}</h2>
|
||||
<!-- blog intro text is optional. -->
|
||||
{% if blog.intro %}
|
||||
<p>{{ blog.intro }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<!-- TODO: duplicate of partials/blog.njk -->
|
||||
<section class="full | region">
|
||||
<div class="wrapper flow prose">
|
||||
<h2>{{ blog.title }}</h2>
|
||||
<!-- blog intro text is optional. -->
|
||||
|
||||
<ul class="wrapper grid mt-l-xl" role="list" data-rows="masonry" data-layout="50-50">
|
||||
{% set postslist = collections.posts %} {% for post in postslist.slice(0, 4) %}
|
||||
{% if blog.intro %}
|
||||
<p>{{ blog.intro }}</p>
|
||||
{% endif %}
|
||||
|
||||
<li class="card flow overflow-hidden">
|
||||
<h3>
|
||||
<a href="{{ post.url | url }}">{{ post.data.title }}</a>
|
||||
</h3>
|
||||
{% set definedDate = post.date %} {% include "partials/date.njk" %}
|
||||
<p>{{ post.data.description }}</p>
|
||||
</li>
|
||||
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</article>
|
||||
<ul
|
||||
class="feature | grid region"
|
||||
role="list"
|
||||
data-rows="masonry"
|
||||
data-layout="50-50"
|
||||
>
|
||||
<!-- loop posts -->
|
||||
{% set itemList = collections.posts %} {% for item in itemList.slice(0, 4) %}
|
||||
<!-- activate tags -->
|
||||
{% set activateTags = true %}
|
||||
<!-- set heading context -->
|
||||
{% set headingContext = "h3" %}
|
||||
<!-- card -->
|
||||
{% include 'components/card.njk' %} {% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@
|
|||
layout: base
|
||||
---
|
||||
|
||||
<article class="region page">
|
||||
<div class="wrapper flow prose">
|
||||
<h1 class="gradient-text">{{ title }}</h1>
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
<article
|
||||
class="region wrapper flow prose"
|
||||
style="--region-space-top: var(--space-xl-2xl)"
|
||||
>
|
||||
<h1 class="gradient-text">{{ title }}</h1>
|
||||
{{ content | safe }}
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -2,5 +2,11 @@
|
|||
title: Blog
|
||||
description: 'All blog posts can be found here'
|
||||
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
|
||||
description: Websites built with this starter
|
||||
layout: page
|
||||
grid:
|
||||
sizes: "(max-width: 615px) 50vw, 100vw"
|
||||
widths: [400, 520]
|
||||
---
|
||||
|
||||
<p>
|
||||
A list of sites based on / built with Eleventy Excellent. Add your site by submitting a
|
||||
pull request! :)
|
||||
</p>
|
||||
<p>A list of Add your site by submitting a pull request! :)</p>
|
||||
|
||||
<ul class="grid mt-l-xl" role="list">
|
||||
<!-- you find tha data for that in src/_data/builtwith.json -->
|
||||
{% for site in builtwith | reverse %}
|
||||
<article class="full section" style="--spot-color: var(--color-bg-accent)">
|
||||
{% include 'svg/divider-soft-top.svg' %}
|
||||
|
||||
<li class="flow mb-m">
|
||||
{% imagePlaceholder site.screenshot, "Screenshot of {{ site.name }}" %}
|
||||
<section class="section__inner wrapper">
|
||||
<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">
|
||||
{{ site.description }}<br />
|
||||
<li class="grid-card | text-step-min-1">
|
||||
{% eleventyImage site.screenshot, site.name, null, "lazy", null, sizes, widths %}
|
||||
|
||||
<strong>
|
||||
<a href="{{ site.link }}">{{ site.link | replace("https://", "") }}</a>
|
||||
</strong>
|
||||
</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<p>
|
||||
{{ site.description }}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="{{ site.link }}">{{ site.link | replace("https://", "") }}</a>
|
||||
</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{% include 'svg/divider-soft-bottom.svg' %}
|
||||
</article>
|
||||
|
|
|
|||
Loading…
Reference in a new issue