updated partials

This commit is contained in:
madrilene 2024-01-30 18:32:37 +01:00
parent 6a1a0c8789
commit fd3dfb2620
4 changed files with 80 additions and 63 deletions

View file

@ -3,12 +3,10 @@
<footer class="site-foot">
<div class="wrapper">
<div class="site-foot__inner">
<nav id="footernav" class="site-foot__inner text-step-0" aria-label="Footer">
&copy; {% year %} <a href="/" {% if activePage === '/' %} aria-current="page" {% endif %}>{{ meta.siteName }} <small>{% packageVersion %}</small> </a>
<nav class="site-foot__inner text-step-0" aria-label="{{ meta.navigation.ariaBottom }}">
&copy; {% year %} <a href="/" {% if activePage === '/' %} aria-current="page" {% endif %}>{{ meta.siteName }} <small>{{ pkg.version }}</small> </a>
{% for item in navigation.bottom %}
<a
href="{{ item.url }}"
{{
@ -19,29 +17,57 @@
}}
>{{ item.text }}</a
>
{% endfor %}
</nav>
<nav id="social" class="site-foot__inner" aria-label="Social links">
{% for item in social %}
{% if item.platform == "rss" %}
<a href="{{ meta.url }}/{{ locale }}{{ item.url }}" rel="alternate" type="application/rss+xml">
{% else %}
<a href="{{ item.url }}" rel="me">
{% endif %}
<span class="sr-only">{{ item.platform }}</span>
<div aria-hidden="true">{% include 'icons/social-' + item.icon %}</div>
</a
>
{% endfor %}
<nav class="site-foot__inner" aria-label="{{ meta.navigation.ariaSocial }}">
<!-- gets the first item from the feed loop set in meta -->
<a href="{{ meta.blog.feedLinks[0].url }}" rel="alternate" type="{{ meta.blog.feedLinks[0].type }}">
<span class="visually-hidden">{{ meta.blog.feedLinks[0].title }}</span>
<div aria-hidden="true">{% include 'svg/rss.svg' %}</div>
</a>
{% for key, value in personal.social %}
{% if value != "" %}
<!-- regular social networks -->
<a href="{{ value }}" rel="me">
<span class="visually-hidden">{{ key | capitalize }}</span>
<div aria-hidden="true">{% include 'svg/social-' + key + '.svg' %}</div>
</a>
{% endif %}
{% endfor %}
</nav>
</div>
<div
role="region"
class="theme-switch | cluster mt-xs"
style="--cluster-horizontal-alignment: center; --gutter: 0.5rem;"
aria-labelledby="theme-switcher-label theme-switcher-value"
data-theme-switcher
hidden
>
<h2 id="theme-switcher-label">{{ meta.themeSwitch.title }}</h2>
<button
class="button"
theme-toggle
>
<span id="theme-switcher-value"></span>
</button>
</div>
<div class="text-center mt-m-l">
<a class="creator text-step-min-1" href="{{ meta.creatorWebsite }}"
>Made with <span>{% include 'svg/heart.svg' %}</span>
by {{ meta.creator }}</a
>
</div>
</div>
</footer>
</footer>

View file

@ -1,14 +1,12 @@
<a href="#main" class="skip-link">{{ meta.skipContent }}</a>
<header class="wrapper">
<div class="site-head | ontop spot-color-primary">
<div class="repel ontop" style="--gap: 0;">
{% set activePage = page.url | url %}
<a href="/" class="logo | no-underline" {% if activePage === '/' %} aria-current="page" {% endif %}>
{% include "svg/star.svg" %}
{{ meta.siteName }}
</a>
<a href="/" class="logo | cluster" {% if activePage === '/' %} aria-current="page" {% endif %}>
{% include "svg/star.svg" %}
<span>{{ meta.siteName }}</span>
</a>
{% include "partials/menu.njk" %}
</div>
</header>

View file

@ -1,5 +1,5 @@
<nav id="mainnav" class="navbar" aria-label="Main">
<ul>
<nav id="mainnav" class="site-nav" aria-label="{{ meta.navigation.ariaTop }}">
<ul class="cluster" style="--gap: 0" role="list">
{% for item in navigation.top %}
<li>
<a
@ -17,18 +17,3 @@
{% endfor %}
</ul>
</nav>
<!-- template element holding a button that needs to be injected when JavaScript is finally available. based on an article by Manuel Matuzovic, https://web.dev/website-navigation/, see also https://kittygiraudel.com/2022/09/30/templating-in-html/ -->
<template id="burger-template">
<button type="button" aria-expanded="false" aria-label="Menu" aria-controls="mainnav">
<span>Menu</span>
<svg width="24" height="24" aria-hidden="true">
<path
fill-rule="evenodd"
d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
clip-rule="evenodd"
/>
</svg>
</button>
</template>

View file

@ -3,7 +3,7 @@
<meta
name="description"
content="
{% if seo.description %} {{ seo.description }}
{% if discover.description %} {{ discover.description }}
{% elif description %}
{{ description }}
{% else %}
@ -13,20 +13,27 @@
/>
<meta name="theme-color" content="{{ meta.themeColor }}" />
<meta name="robots" content="index,follow" /><!-- All Search Engines -->
<meta name="googlebot" content="index,follow" /><!-- Google Specific -->
<meta name="generator" content="{{ eleventy.generator }}" /><!-- thank you, Zach -->
<!-- Search Engines -->
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<!-- Made with Eleventy! -->
<meta name="generator" content="{{ eleventy.generator }}" />
<!-- Disable automatic detection and formatting of possible phone numbers -->
<meta name="format-detection" content="telephone=no" />
<!-- supports both dark and light color schemes, page author prefers light as default. -->
<meta name="color-scheme" content="light dark" />
<!-- activates page transitions -->
<meta name="view-transition" content="same-origin" />
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="{{ meta.url }}{{ page.url }}" />
<!-- Links to information about the author(s) of the document -->
<link rel="author" href="humans.txt" />
{% if meta.meta_data.mastodonProfile %}
{% if personal.social.mastodon %}
<!-- Mastodon verified site -->
<link rel="me" href="{{ meta.meta_data.mastodonProfile }}" />
<link rel="me" href="{{ personal.social.mastodon }}" />
{% endif %}
<!-- Open Graph meta -->
@ -38,7 +45,7 @@
/>
<meta
property="og:image"
content="{{ meta.url }}{% if (layout == 'post') %}/assets/images/social-preview/{{
content="{{ meta.url }}{% if (layout == 'post') %}/assets/og-images/{{
title | slugify
}}-preview.jpeg
{% else %}{{ meta.meta_data.opengraph_default }}
@ -59,19 +66,20 @@
<meta property="og:locale" content="{{ meta.locale }}" />
<meta property="article:author" content="{{ meta.author }}" />
<!-- Twitter meta -->
<meta name="twitter:card" content="summary_large_image" />
{% if meta.meta_data.twitterSite %}
<meta name="twitter:site" content="{{ meta.meta_data.twitterSite }}" />
{% endif %} {% if meta.meta_data.twitterCreator %}
<meta name="twitter:creator" content="{{ meta.meta_data.twitterCreator }}" />
{% endif %}
<meta name="twitter:dnt" content="on" />
<!-- Twitter specific head data was removed in v2 -->
<!-- Favicon -->
<!-- RSS Autodiscovery. Loops over meta.blog.feedLinks -->
{% for feedLink in meta.blog.feedLinks %}
<link
rel="alternate"
type="{{ feedLink.type }}"
title="{{ feedLink.title }}: {{ meta.siteName }}"
href="{{ feedLink.url }}"
/>
{% endfor %}
<!-- Favicon: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs -->
<link rel="icon" href="{{ '/favicon.ico' | url }}" sizes="any" />
<link rel="icon" href="{{ '/favicon.svg' | url }}" type="image/svg+xml" />
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/apple-touch-icon.png' | url }}" />
<link rel="icon" type="image/png" href="{{ '/favicon-32x32.png' | url }}" sizes="32x32" />
<link rel="icon" type="image/png" href="{{ '/favicon-16x16.png' | url }}" sizes="16x16" />
<link rel="manifest" href="{{ '/site.webmanifest' | url }}" />