details shortcode

This commit is contained in:
Jannik Menzel 2025-05-16 13:39:24 +02:00
parent d816a951dc
commit cc2fa1cea5
9 changed files with 414 additions and 249 deletions

View file

@ -14,8 +14,23 @@
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<!-- Darkmode JS -->
<script>
(function() {
try {
const stored = localStorage.getItem("theme");
const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const isDark = stored ? stored === "dark" : systemPrefersDark;
if (isDark) {
document.documentElement.classList.add("dark");
}
} catch (e) {
// ignore errors
}
})();
</script>
<!-- Exo 2 Font -->
<link href="https://fonts.googleapis.com/css2?family=Cairo&family=Exo+2:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600&display=swap" rel="stylesheet" />
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
{{ partialCached "head/css.html" . }}
{{ partialCached "head/js.html" . }}

View file

@ -16,3 +16,12 @@
{{- end }}
{{- end }}
{{- end }}
{{- with resources.Get "css/markdown.css" }}
{{- if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{- else }}
{{- with . | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{- end }}
{{- end }}
{{- end }}

View file

@ -0,0 +1,4 @@
<div class="cards">
<h2>{{ .Get "title" }}</h2>
{{ .Inner | markdownify }}
</div>

View file

@ -0,0 +1,25 @@
<div class="details" onclick="toggleDetails(this)">
<div class="details-header">
<h2 class="details-text">
{{ with .Get "number" }}<span class="details-number">{{ . }}</span> {{ end }}
{{ .Get "title" }}
</h2>
<div class="details-icon">
<svg class="icon-plus" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
<path d="M15 12H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M15 12H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
transform="rotate(90 12 12)"/>
</svg>
<svg class="icon-minus" style="display: none;" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
<path d="M15 12H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
</div>
<div class="details-content">
{{ .Inner | markdownify }}
</div>
</div>