update layouts
This commit is contained in:
madrilene
parent
a70020d417
commit
e006738a69
6 changed files with 77 additions and 123 deletions
|
|
@ -5,11 +5,11 @@
|
||||||
<!-- The order of elements in the head follows recommendations by Harry Roberts. learn more here: https://www.youtube.com/watch?v=MHyAOZ45vnU -->
|
<!-- The order of elements in the head follows recommendations by Harry Roberts. learn more here: https://www.youtube.com/watch?v=MHyAOZ45vnU -->
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<!-- charset/http-equiv/viewport -->
|
<!-- 1 charset/viewport -->
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
<!-- title -->
|
<!-- 2 title -->
|
||||||
<title>
|
<title>
|
||||||
{% if discover.title %}
|
{% if discover.title %}
|
||||||
{{ discover.title }}
|
{{ discover.title }}
|
||||||
|
|
@ -20,77 +20,26 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</title>
|
</title>
|
||||||
|
|
||||||
<!-- 4 synchronous js -->
|
<base href="{{ page.url }}" />
|
||||||
<!-- 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>
|
<!-- 3 synchronous js -->
|
||||||
// prettier-ignore
|
{% include "head/js-inline.njk" %}
|
||||||
{{ jsthemetoggle | jsmin | safe }}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- inline base schema -->
|
<!-- 4 schema settings -->
|
||||||
{% include "schemas/base-schema.njk" %}
|
{% include "head/schema.njk" %}
|
||||||
|
|
||||||
<!-- inline blogpost schema -->
|
<!-- 5 CSS -->
|
||||||
{% if schema == 'blog' %}{%- include "schemas/blogpost-schema.njk" -%}{% endif %}
|
<!-- <link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" /> -->
|
||||||
|
{% include "head/css-inline.njk" %}
|
||||||
|
|
||||||
<link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
|
<!-- 6 preloads -->
|
||||||
|
{% include "head/preloads.njk" %}
|
||||||
|
|
||||||
<!-- preloads -->
|
<!-- 7 meta tags, icons, open graph etc. -->
|
||||||
<link
|
{% include "head/meta-info.njk" %}
|
||||||
rel="preload"
|
|
||||||
href="/assets/fonts/figtree/figtree-variable[wght].woff2"
|
|
||||||
as="font"
|
|
||||||
type="font/woff2"
|
|
||||||
crossorigin
|
|
||||||
/>
|
|
||||||
|
|
||||||
<link
|
<!-- 8 defer -->
|
||||||
rel="preload"
|
{% include "head/js-defer.njk" %}
|
||||||
href="/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2"
|
|
||||||
as="font"
|
|
||||||
type="font/woff2"
|
|
||||||
crossorigin
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- preloads in page data -->
|
|
||||||
{%- if preloads -%}
|
|
||||||
<!-- prettier-ignore -->
|
|
||||||
<link rel="preload"
|
|
||||||
href="{{ preloads.href }}"
|
|
||||||
as="{{ preloads.as }}"
|
|
||||||
{% if preloads.type %}type={{ preloads.type }}{% endif %}{% if preloads.imagesrcset %}imagesrcset="{{ preloads.imagesrcset }}"{% endif %}
|
|
||||||
{% if preloads.crossorigin %}crossorigin{% endif %} />
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- defered js -->
|
|
||||||
|
|
||||||
{% if masonry %}
|
|
||||||
<!-- masonry fallback, if true in frontmatter -->
|
|
||||||
<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 %}
|
|
||||||
|
|
||||||
{% if meta.navigation.drawerNav %}
|
|
||||||
<!-- menu drawer js, if true in meta -->
|
|
||||||
<script src="/assets/scripts/nav-drawer.js?{{ assetHash }}" defer></script>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if meta.easteregg %}
|
|
||||||
<!-- easteregg js, if true in meta -->
|
|
||||||
<script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- everything else: meta tags, icons, open graph etc. -->
|
|
||||||
{% include "partials/meta-info.njk" %}
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="{{ layout }}">
|
<body class="{{ layout }}">
|
||||||
|
|
@ -99,5 +48,8 @@
|
||||||
<main id="main" class="flow">{{ content | safe }}</main>
|
<main id="main" class="flow">{{ content | safe }}</main>
|
||||||
|
|
||||||
{% include "partials/footer.njk" %}
|
{% include "partials/footer.njk" %}
|
||||||
|
|
||||||
|
<script type="module" src="/assets/scripts/components/custom-easteregg.js"></script>
|
||||||
|
<custom-easteregg keyword="yay" shape="🌈" particle-count="50"></custom-easteregg>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,45 @@
|
||||||
---
|
---
|
||||||
layout: base
|
layout: base
|
||||||
masonry: true
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<article class="wrapper">
|
<article class="wrapper">
|
||||||
<header class="full | section" style="--spot-color: var(--color-secondary)">
|
<header class="full | section" style="--spot-color: var(--color-secondary)">
|
||||||
<div
|
<div class="section__inner flow region" style="--region-space-top: var(--space-xl-2xl)">
|
||||||
class="section__inner flow region"
|
|
||||||
style="--region-space-top: var(--space-xl-2xl)"
|
|
||||||
>
|
|
||||||
<h1 class="text-center text-base-light">{{ title }}</h1>
|
<h1 class="text-center text-base-light">{{ title }}</h1>
|
||||||
</div>
|
</div>
|
||||||
{% include 'svg/divider-edgy.svg' %}
|
|
||||||
|
{% svg "divider/edgy", null, "seperator" %}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="region flow prose" style="--region-space-top: var(--space-xl-2xl)">
|
<div class="region flow prose" style="--region-space-top: var(--space-xl-2xl)">{{ content | safe }}</div>
|
||||||
{{ content | safe }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="blogcards | grid" role="list" data-rows="masonry" data-layout="50-50">
|
<custom-masonry layout="50-50">
|
||||||
<!-- loop posts -->
|
{% for item in pagination.items %}
|
||||||
{% set itemList = pagination.items %}
|
|
||||||
{% for item in itemList %}
|
|
||||||
<!-- activate tags -->
|
|
||||||
{% set activateTags = true %}
|
|
||||||
<!-- set date context -->
|
|
||||||
{% set definedDate = item.date %}
|
{% set definedDate = item.date %}
|
||||||
<!-- set heading context -->
|
|
||||||
{% set headingContext = "h2" %}
|
<custom-card clickable>
|
||||||
<!-- include card -->
|
<h2 slot="headline">
|
||||||
{% include 'components/card.njk' %}
|
<a href="{{ item.url | url }}">{{ item.data.title }}</a>
|
||||||
|
</h2>
|
||||||
|
<span slot="date"> {% include "partials/date.njk" %} </span>
|
||||||
|
{%
|
||||||
|
if
|
||||||
|
item.data.tags.length > 1
|
||||||
|
%}
|
||||||
|
<div slot="tag" webc:nkoeep>
|
||||||
|
{% for tag in item.data.tags %}
|
||||||
|
{% if tag != "posts" %}
|
||||||
|
<span class="button post-tag">{{ tag }}</span>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<div slot="content" webc:nokeep>{{ item.data.description | markdownFormat | safe }}</div>
|
||||||
|
</custom-card>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</custom-masonry>
|
||||||
|
|
||||||
|
<!-- TODO: pagination is reversed. -->
|
||||||
|
|
||||||
<!-- set collection to paginate -->
|
<!-- set collection to paginate -->
|
||||||
{% set collectionToPaginate = collections.posts %}
|
{% set collectionToPaginate = collections.posts %}
|
||||||
|
|
@ -40,6 +48,6 @@ masonry: true
|
||||||
<!-- if the number of items in the collection is greater than the number of items shown on one page -->
|
<!-- if the number of items in the collection is greater than the number of items shown on one page -->
|
||||||
{% if collectionToPaginate.length > pagination.size %}
|
{% if collectionToPaginate.length > pagination.size %}
|
||||||
<!-- include pagination -->
|
<!-- include pagination -->
|
||||||
{% include 'components/pagination.njk' %}
|
{% include 'partials/pagination.njk' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
---
|
---
|
||||||
layout: base
|
layout: base
|
||||||
masonry: true
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
@ -8,7 +7,8 @@ masonry: true
|
||||||
<div class="section__inner flow region">
|
<div class="section__inner flow region">
|
||||||
<h1 class="text-center text-base-light">{{ title }}</h1>
|
<h1 class="text-center text-base-light">{{ title }}</h1>
|
||||||
</div>
|
</div>
|
||||||
{% include 'svg/divider-waves.svg' %}
|
|
||||||
|
{% svg "divider/waves", null, "seperator" %}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<article class="full | region">
|
<article class="full | region">
|
||||||
|
|
@ -24,23 +24,28 @@ masonry: true
|
||||||
<p>{{ blog.intro }}</p>
|
<p>{{ blog.intro }}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<ul
|
<div class="feature | region">
|
||||||
class="feature | grid region"
|
<custom-masonry layout="50-50">
|
||||||
role="list"
|
<!-- loop posts -->
|
||||||
data-rows="masonry"
|
{% set itemList = collections.allPosts %}
|
||||||
data-layout="50-50"
|
{% for item in itemList.slice(0, 4) %}
|
||||||
>
|
{% set definedDate = item.date %}
|
||||||
<!-- loop posts -->
|
<custom-card clickable>
|
||||||
{% set itemList = collections.posts %}
|
<h3 slot="headline">
|
||||||
{% for item in itemList.slice(0, 4) %}
|
<a href="{{ item.url | url }}">{{ item.data.title }}</a>
|
||||||
<!-- activate tags -->
|
</h3>
|
||||||
{% set activateTags = true %}
|
<span slot="date"> {% include "partials/date.njk" %} </span>
|
||||||
<!-- set heading context -->
|
{%
|
||||||
{% set headingContext = "h3" %}
|
if
|
||||||
<!-- card -->
|
item.data.tags.length > 1
|
||||||
{% include 'components/card.njk' %}
|
%}
|
||||||
{% endfor %}
|
<span slot="tag" class="button post-tag">{{ item.data.tags[1] }}</span>
|
||||||
</ul>
|
{% endif %}
|
||||||
|
<p slot="content">{{ item.data.description }}</p>
|
||||||
|
</custom-card>
|
||||||
|
{% endfor %}
|
||||||
|
</custom-masonry>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,7 @@
|
||||||
layout: base
|
layout: base
|
||||||
---
|
---
|
||||||
|
|
||||||
<article
|
<article class="region wrapper flow prose" style="--region-space-top: var(--space-xl-2xl)">
|
||||||
class="region wrapper flow prose"
|
|
||||||
style="--region-space-top: var(--space-xl-2xl)"
|
|
||||||
>
|
|
||||||
<h1 class="gradient-text">{{ title }}</h1>
|
<h1 class="gradient-text">{{ title }}</h1>
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -9,19 +9,12 @@ schema: blog
|
||||||
|
|
||||||
{% if image %}
|
{% if image %}
|
||||||
<!-- image -->
|
<!-- image -->
|
||||||
{% eleventyImage image, alt or title, null, "eager", "feature" %}
|
{% image image, alt or title, credit, "eager", "feature" %}
|
||||||
{% endif %}
|
|
||||||
{%
|
|
||||||
if
|
|
||||||
credit
|
|
||||||
%}
|
|
||||||
<!-- credit -->
|
|
||||||
<p class="credit feature | text-step-min-1">© {{ credit }}</p>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<p class="meta | cluster" style="--gutter: var(--space-xs-s)">
|
<p class="meta | cluster" style="--gutter: var(--space-xs-s)">
|
||||||
<!-- date -->
|
<!-- date -->
|
||||||
{% set definedDate = date %} {% include "components/date.njk" %}
|
{% set definedDate = date %} {% include "partials/date.njk" %}
|
||||||
{%
|
{%
|
||||||
if tags.length >
|
if tags.length >
|
||||||
1
|
1
|
||||||
|
|
@ -34,7 +27,7 @@ schema: blog
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
{% include 'components/edit-on.njk' %}
|
{% include 'partials/edit-on.njk' %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- h-card infos: https://indieweb.org/authorship -->
|
<!-- h-card infos: https://indieweb.org/authorship -->
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
---
|
---
|
||||||
layout: base
|
layout: base
|
||||||
masonry: true
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<article class="region">
|
<article class="region">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue