mirror of
https://git.nolog.cz/NoLog.cz/headline.git
synced 2025-01-31 11:53:35 +01:00
81 lines
3.9 KiB
HTML
81 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Headline</title>
|
|
{% assets "css" %}
|
|
<link rel="stylesheet" href="{{ ASSET_URL }}" />
|
|
{% endassets %}
|
|
<link rel="icon" type="image/png" href="/static/icon-32.png" sizes="32x32" />
|
|
<link rel="icon" type="image/svg+xml" href="/static/icon.svg" />
|
|
<link rel="apple-touch-icon" href="/static/icon-180.png" />
|
|
<link rel="manifest" href="/static/manifest.webmanifest" />
|
|
<script
|
|
defer
|
|
data-domain="headline.nolog.cz"
|
|
src="https://plausible.nolog.cz/js/plausible.js"
|
|
></script>
|
|
<script src="{{ url_for('static', filename='htmx@1.9.4.min.js') }}"></script>
|
|
<script defer src="{{ url_for('static', filename='alpinejs-persist@3.12.3.min.js') }}"></script>
|
|
<script defer src="{{ url_for('static', filename='alpinejs@3.12.3.min.js') }}"></script>
|
|
{% block head %}{% endblock %}
|
|
<script>
|
|
const themeQuery = window.matchMedia("(prefers-color-scheme: dark)")
|
|
const THEME_OVERRIDE_KEY = "themeOverride"
|
|
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.store('darkMode', {
|
|
on: themeQuery.matches,
|
|
|
|
init() {
|
|
const themeOverride = window.localStorage.getItem(THEME_OVERRIDE_KEY)
|
|
if (themeOverride) {
|
|
this.on = themeOverride === "true"
|
|
}
|
|
},
|
|
|
|
toggleManually() {
|
|
this.on = ! this.on
|
|
window.localStorage.setItem(THEME_OVERRIDE_KEY, this.on)
|
|
}
|
|
})
|
|
})
|
|
|
|
themeQuery.addEventListener("change", (event) => {
|
|
Alpine.store('darkMode').on = event.matches
|
|
window.localStorage.removeItem(THEME_OVERRIDE_KEY)
|
|
})
|
|
</script>
|
|
</head>
|
|
<body hx-boost="true" x-data="{ expandDiffs: $persist(false) }" x-bind:class="{ 'dark-theme': $store.darkMode.on }">
|
|
<header class="py-4 bg-gray-1 {% block header_class %}border-b{% endblock %}">
|
|
<div class="container flex flex-wrap items-center gap-x-8 gap-y-2">
|
|
<a href="/" class="text-inherit">
|
|
<h1 class="logo text-2xl font-bold">
|
|
{% include "parts/logo.svg" %}
|
|
</h1>
|
|
</a>
|
|
<nav class="hidden sm:flex flex-wrap items-center gap-x-4 gap-y-2 font-medium">
|
|
<a href="/about">About</a>
|
|
<a href="/feeds">Feeds</a>
|
|
</nav>
|
|
<button class="button-md button-outline ml-auto" @click="$store.darkMode.toggleManually()">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5" x-show="$store.darkMode.on">
|
|
<title>Light theme</title>
|
|
<path fill="currentColor" d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"></path>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5" x-show="!$store.darkMode.on">
|
|
<title>Dark theme</title>
|
|
<path fill="currentColor" d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27098 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main class="mb-auto">
|
|
{% block body %}{% endblock %}
|
|
</main>
|
|
{% include "parts/footer.html" %}
|
|
</body>
|
|
</html>
|
|
{% block top %}{% endblock %}
|