From e6997b307ce4e7f0dac01ed8ba1198e39785bfa3 Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah.ch>
Date: Sat, 22 Mar 2025 21:03:39 +0100
Subject: [PATCH] implement faq section

---
 i18n/de.toml                 |  4 +-
 i18n/en.toml                 |  4 +-
 layouts/_default/baseof.html |  2 +
 layouts/partials/faq.html    | 14 ++++++
 layouts/partials/navbar.html |  1 +
 static/style.css             | 92 +++++++++++++++++++++++++++++++++++-
 6 files changed, 114 insertions(+), 3 deletions(-)
 create mode 100644 layouts/partials/faq.html

diff --git a/i18n/de.toml b/i18n/de.toml
index 7b7111d..34b457e 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -12,4 +12,6 @@ language = 'Sprache'
 select-language = 'Sprache auswählen'
 load-more = 'Mehr laden'
 no-projects-found = 'Keine Projekte gefunden'
-no-more-projects = 'Keine weiteren Projekte verfügbar'
\ No newline at end of file
+no-more-projects = 'Keine weiteren Projekte verfügbar'
+faq = 'Häufige Fragen'
+faq-short = 'FAQ'
\ No newline at end of file
diff --git a/i18n/en.toml b/i18n/en.toml
index c61748d..e3ba4bc 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -12,4 +12,6 @@ language = 'Language'
 select-language = 'Select language'
 load-more = 'Load more'
 no-projects-found = 'No projects found'
-no-more-projects = 'No more projects available'
\ No newline at end of file
+no-more-projects = 'No more projects available'
+faq = 'Frequently Asked Questions'
+faq-short = 'FAQ'
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 676a2c0..a1b2393 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -12,6 +12,8 @@
         {{ partial "about.html" . }}
 
         {{ partial "projects.html" . }}
+
+        {{ partial "faq.html" . }}
     </div>
 
     {{ partial "contact.html" . }}
diff --git a/layouts/partials/faq.html b/layouts/partials/faq.html
new file mode 100644
index 0000000..c024974
--- /dev/null
+++ b/layouts/partials/faq.html
@@ -0,0 +1,14 @@
+<div id="faq" class="faq">
+    <h1 class="fade-up">{{ T "faq" }}</h1>
+    <div class="faq-container">
+        {{ $faqs := where .Site.RegularPages "Section" "faq" }}
+        {{ range $faqs }}
+        <details id="faq-{{ .Params.slug }}" class="fade-up" name="faq">
+            <summary>{{ .Title }}</summary>
+            <div class="faq-answer">
+                {{ .Content | safeHTML }}
+            </div>
+        </details>
+        {{ end }}
+    </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index b2dbc7c..fa4234c 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -5,6 +5,7 @@
             <a href="#" alt='{{ T "home" }}'>{{ T "home" }}</a>
             <a href="#about" alt='{{ T "about" }}'>{{ T "about" }}</a>
             <a href="#projects" alt='{{ T "projects" }}'>{{ T "projects" }}</a>
+            <a href="#faq" alt='{{ T "faq-short" }}'>{{ T "faq-short" }}</a>
             <a href="https://blog.michivonah.ch" alt='{{ T "blog" }}'>{{ T "blog" }}</a>
             <a href="#contact" alt='{{ T "contact" }}'>{{ T "contact" }}</a>
         </div>
diff --git a/static/style.css b/static/style.css
index 7fbf722..4d5ac0a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -2,7 +2,10 @@
 @import url('/fonts/source-sans-3.css');
 
 /* GENERAL */
-html{scroll-behavior: smooth;}
+:root{
+    scroll-behavior: smooth;
+    interpolate-size: allow-keywords;
+}
 
 body{
     /* STYLING */
@@ -19,6 +22,7 @@ body{
     --color: #f8f8f8;
     --font: "Source Sans 3", sans-serif;
     --border: 2px solid var(--color);
+    --borderPrimary: 2px solid var(--primary);
     --baseRadius: 12px;
     --baseTransition: all var(--baseDuration);
     --baseDuration: 250ms;
@@ -28,6 +32,11 @@ body{
     --animationCoverValue: 40%;
 }
 
+::selection{
+    background: var(--primary);
+    color: var(--color);
+}
+
 /* CONTENT */
 .content{
     margin: auto;
@@ -707,6 +716,87 @@ nav.small .nav-links a:last-child:focus{
     }
 }
 
+/* FAQ */
+.faq{
+    padding-block: 40px;
+    text-align: center;
+    scroll-margin-top: calc(var(--navSmallHeight) + 20px);
+}
+
+.faq-container{
+    padding-inline: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: stretch;
+}
+
+.faq details{
+    margin: 14px 0;
+    padding: 10px 20px;
+    background: var(--primary);
+    border: var(--borderPrimary);
+    border-radius: var(--baseRadius);
+    text-align: left;
+    cursor: pointer;
+    overflow: hidden;
+}
+
+.faq details:hover,
+.faq details:focus-within{
+    background: var(--secondary);
+    border: var(--border);
+    outline: none;
+}
+
+.faq details::selection{
+    background: var(--color);
+    color: var(--secondary);
+}
+
+/* animation credits: https://www.youtube.com/watch?v=Vzj3jSUbMtI */
+.faq details::details-content{
+    block-size: 0;
+    transition:
+        block-size var(--baseDuration) linear,
+        content-visibility var(--baseDuration) linear;
+    transition-behavior: allow-discrete;
+}
+
+.faq details[open]::details-content{
+    block-size: auto;
+}
+
+.faq summary{
+    position: relative;
+    padding-inline: 2.4rem;;
+    font-size: 1.2rem;
+    font-weight: 600;
+    list-style-position: outside;
+}
+
+.faq summary:focus{
+    outline: none;
+}
+
+.faq summary::marker{
+    content: none;
+}
+
+.faq summary::before{
+    content: "\f156";
+    font-family: akar-icons;
+    position: absolute;
+    inset-inline-start: 0.3rem;
+    inset-block-start: 0.25rem;
+    transition: var(--baseTransition);
+}
+
+.faq details[open] summary::before{
+    rotate: -180deg;
+}
+
 /* CONTACT */
 .contact{
     display: flex;