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" >
2024-05-02 22:53:26 +02:00
< 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" >
2024-05-02 22:53:26 +02:00
< 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" >
2024-05-02 22:53:26 +02:00
< 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" > ← < / a >
{% endif %}
2024-05-02 22:53:26 +02:00
< 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 >
> < 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" >
2024-03-05 17:13:38 +01:00
< 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 >
