muhh.lol/_layouts/default.html

187 lines
9.7 KiB
HTML
Raw Normal View History

2024-03-05 17:04:12 +01:00
<!doctype html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<link rel="me" href="https://micro.blog/muhh">
<link rel="alternate" type="application/rss+xml" href="/feed.xml">
<link rel="alternate" type="application/rss+xml" href="/notes.xml">
<link rel="icon" href="/assets/fav.svg" type="image/svg+xml" sizes="24x24">
<!--link rel="icon" href="/assets/fav.png" type="image/png" sizes="96x96"-->
<!--<link href="https://fonts.googleapis.com/css2?family=Readex+Pro&display=swap" rel="stylesheet">-->
<link href="/assets/new.css" rel="stylesheet" type="text/css">
{% if page.collection == "posts" %}
<link href="/assets/syntax.css" rel="stylesheet" type="text/css">
{% endif %}
{% if page.title %}
<title>{{ page.title }} - {{ site.title }}</title>
<meta content="{{ page.title }} - {{ site.title }}" property="og:title">
<meta content="{{ page.title }} - {{ site.title }}" name="twitter:title">
{% else %}
<title>{{ site.title }}</title>
<meta content="{{ site.title }}" property="og:title">
<meta content="{{ site.title }}" name="twitter:title">
{% endif %}
{% if page.collection == "posts" or page.collection == "notes" or page.collection == "stories" %}
<meta content="{{ site.url }}{{ page.url }}" property="og:url">
<meta content="{{ page.content | strip_html | strip_newlines | truncate: 120 }}" name="description">
{% if page.collection == "posts" %}
<meta content="article" property="og:type">
<meta content="@muhh" property="twitter:site">
<meta name="twitter:card" content="summary_large_image">
{% endif %}
{% if page.image %}
<meta content="https://muhh.lol/images/{{ page.image }}" property="og:image">
<meta content="https://muhh.lol/images/{{ page.image }}" property="twitter:image">
{% elsif page.image_text %}
<meta content="https://muhh-text-image.herokuapp.com/title?v=2&text={{ page.image_text | strip | url_encode }}" property="og:image">
<meta content="https://muhh-text-image.herokuapp.com/title?v=2&text={{ page.image_text | strip | url_encode }}" property="twitter:image">
{% else %}
<meta content="summary" name="twitter:card">
<meta content="https://muhh.lol/assets/muhh_100x100.png" name="twitter:image">
<meta content="https://muhh.lol/assets/muhh_100x100.png" property="og:image">
2024-03-05 17:04:12 +01:00
{% endif %}
{% else %}
<meta content="summary" name="twitter:card">
<meta content="https://muhh.lol/assets/muhh_100x100.png" property="twitter:image">
<meta content="https://muhh.lol/assets/muhh_100x100.png" property="og:image">
2024-03-05 17:04:12 +01:00
<meta content="{{ site.description }}" name="description">
<meta content="website" property="og:type">
{% endif %}
</head>
<body class="{% if page.root != true %}post-body{% endif %} col-{{ page.collection }}" data-page-type="{{ page.type }}">
<header>
<div class="logo-container">
<img src="/assets/muhh_100x100.png" alt="muhh as a drawing holding coffee" />
2024-03-05 17:04:12 +01:00
{% if page.root != true %}
<a href="/{% if page.collection == "notes" %}notes{% endif %}" aria-label="Home" class="back-link">&leftarrow;</a>
{% endif %}
<title>~</title>
2024-03-05 17:04:12 +01:00
{% if page.root != true %}
<span class="font">{{ site.title }}</span>
{% endif %}
</div>
<h1 class="h1">
<span lang="en">{{ page.title }}</span>
</h1>
{% if page.root == true %}
<div class="desc" lang="en" data-status-loading hidden><span data-status-text></span> <span data-status-datetime></span></div>
{% endif %}
{% if page.collection == "posts" %}<time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %e, %Y" }}</time>{% endif %}
{% if page.collection == "notes" or page.collection == "stories" %}<time datetime="{{ page.date }}">{{ page.date | date: "%Y/%m/%d %H:%M" }}</time>{% endif %}
<div class="desc">{{ page.header_content }}</div>
</header>
<main>
{% capture content_and_then_some do %}
{% if page.type == "photos" %}
<input type="radio" name="layout" value="y-scroll" id="y-scroll" checked>
<label for="y-scroll">
<svg width="15" height="15" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><title>vertical scroll</title><path d="M55 0a5 5 0 0 1 5 5v31a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V5a5 5 0 0 1 5-5h50ZM55 47a5 5 0 0 1 5 5v8H0v-8a5 5 0 0 1 5-5h50Z" fill="#D9D9D9"/></svg>
</label>
<input type="radio" name="layout" value="x-scroll" id="x-scroll">
<label for="x-scroll">
<svg width="15" height="15" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><title>horizontal scroll</title><path d="M0 5a5 5 0 0 1 5-5h30a5 5 0 0 1 5 5v50a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V5ZM47 5a5 5 0 0 1 5-5h8v60h-8a5 5 0 0 1-5-5V5Z" fill="#D9D9D9"/></svg>
</label>
<input type="radio" name="layout" value="grid2fr" id="grid2fr">
<label for="grid2fr">
<svg width="15" height="15" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><title>grid 2 columns</title><path d="M0 37c0-2 2-4 4-4h19c2 0 4 2 4 4v19c0 2-2 4-4 4H4c-2 0-4-2-4-4V37zM0 4c0-2 2-4 4-4h19c2 0 4 2 4 4v19c0 2-2 4-4 4H4c-2 0-4-2-4-4V4zM33 37c0-2 2-4 4-4h19c2 0 4 2 4 4v19c0 2-2 4-4 4H37c-2 0-4-2-4-4V37zM33 4c0-2 2-4 4-4h19c2 0 4 2 4 4v19c0 2-2 4-4 4H37c-2 0-4-2-4-4V4z" fill="#D9D9D9"/></svg>
</label>
</label>
<input type="radio" name="layout" value="grid3fr" id="grid3fr">
<label for="grid3fr">
<svg width="15" height="15" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><title>grid 3 columns</title><path d="M22 4c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4V4zM0 26c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4H4c-2 0-4-2-4-4v-8zM22 26c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zM0 48c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4H4c-2 0-4-2-4-4v-8zM44 26c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zM22 48c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zM44 48c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zM0 4c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4H4c-2 0-4-2-4-4V4zM44 4c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4V4z" fill="#D9D9D9"/></svg>
</label>
{% endif %}
{{ content }}
{% endcapture %}
{% if page.collection == "posts" or page.collection == "pages" %}
<article>
{{ content_and_then_some }}
</article>
{% elsif page.collection == "notes" %}
{{ content_and_then_some }}
{% else %}
{{ content_and_then_some }}
{% endif %}
{% if page.feature == 1 or page.open_heart %}
{% if page.enable_heart %}
<hr class="hr">
<div class="smol">
<div class="monospace">
<div id="like-prompt">Like this {% if page.collection == "posts" %}post{% elsif page.collection == "notes" %}note{% else %}page{% endif %}? let me know!</div>
&gt;<open-heart class="text-open-heart" href="https://likes.muhh.lol/?id={{ page.url }}" emoji="❤️" aria-labelledby="like-prompt">
<span class="on">Liked.<br>(Thanks!)</span><span class="off">Sure. <kbd></kbd></span>
</open-heart>
</div>
</div>
{% endif %}
{% endif %}
</main>
<footer>
<hr class="hr">
<nav aria-label="About this site">
<a href="{% link _pages/colophon.md %}">Colophon</a>
<hr class="inline-hr">
<a href="{% link _pages/imprint_gdpr.md %}">Impressum</a>
<hr class="inline-hr">
<a href="{% link _pages/accessibility-statement.md %}">Accessibility statement</a>
<hr class="inline-hr">
<a href="https://code.muhh.lol/muhh/muhh.lol">View source</a>
2024-03-05 17:04:12 +01:00
</nav>
</footer>
{% if page.root %}
<script type="module" src="/assets/site.js"></script>
<!--<script type="module" src="https://unpkg.com/open-stories-element@latest"></script>-->
{% endif %}
{% comment %}
{% if page.feature == 1 or page.open_heart or page.has_open_heart %}
<script type="module" src="https://unpkg.com/open-heart-element@latest"></script>
<script>
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(async (entry) => {
await customElements.whenDefined('open-heart')
if (entry.target instanceof OpenHeartElement && entry.isIntersecting) {
entry.target.getCount()
observer.unobserve(entry.target)
}
})
})
for (const oh of document.querySelectorAll('open-heart')) {
observer.observe(oh)
}
</script>
{% endif %}
{% if page.type == "photos" %}
<script>
const photos = document.querySelector('#photos')
const xScroll = document.querySelector('#x-scroll')
// move scroll area into viewport and user focus
document.addEventListener('change', function(event) {
if (xScroll.checked) {
photos.scrollIntoView()
photos.setAttribute('tabindex', '-1')
photos.focus()
photos.addEventListener('blur', function() {
photos.blur()
}, {once: true})
}
})
// return focus
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' && xScroll.checked && photos.contains(event.target)) {
xScroll.focus()
window.scrollTo(0, 0)
}
})
</script>
{% endif %}
{% endcomment %}
</body>
</html>