implement faq section

i18n/de.toml

@@ -13,3 +13,5 @@ select-language = 'Sprache auswählen'
 load-more = 'Mehr laden'
 no-projects-found = 'Keine Projekte gefunden'
 no-more-projects = 'Keine weiteren Projekte verfügbar'
+faq = 'Häufige Fragen'
+faq-short = 'FAQ'

i18n/en.toml

@@ -13,3 +13,5 @@ select-language = 'Select language'
 load-more = 'Load more'
 no-projects-found = 'No projects found'
 no-more-projects = 'No more projects available'
+faq = 'Frequently Asked Questions'
+faq-short = 'FAQ'

layouts/_default/baseof.html

@@ -12,6 +12,8 @@
         {{ partial "about.html" . }}
 
         {{ partial "projects.html" . }}
+
+        {{ partial "faq.html" . }}
     </div>
 
     {{ partial "contact.html" . }}

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>

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>

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;