details shortcode

assets/css/main.css

@@ -9,8 +9,8 @@
     --color-primary-button-light: #FFFFFF;
     --color-link: #405C00;
     --color-error: #d9534f;
-    --color-offwhite: #F3F3F3;
+    --color-off: #F3F3F3;
-    --color-offblack: #1D1F29
+    --color-light: #f8f9fa;
 }
 
 .dark {
@@ -18,6 +18,7 @@
     --color-text: #F2F2F2;
     --color-text-dark: #191A23;
     --color-link: #BBE04C;
+    --color-off: #1D1F29;
 }
 
 /* ========================
@@ -112,6 +113,7 @@ li .dropdown-item-mobile {
 }
 
 .show-on-hover:hover > .dropdown-menu {
+    background-color: var(--color-off);
     display: block;
     position: absolute;
     top: 100%;
@@ -119,29 +121,22 @@ li .dropdown-item-mobile {
     margin-top: 0;
 }
 
-.dark .show-on-hover:hover > .dropdown-menu {
-    background-color: var(--color-offblack);
-}
-
 .dropdown-menu .dropdown-item:active {
-    background-color: #e0e0e0;
+    background-color: var(--color-off);
     color: var(--color-text);
 }
 
 .dropdown-menu .dropdown-item {
+    color: var(--color-text);
     padding: 0.3rem 0 0.3rem 1rem;
 }
 
-.dark .dropdown-menu .dropdown-item {
+.dropdown-menu .dropdown-item:active {
+    background-color: var(--color-off);
     color: var(--color-text);
 }
 
-.dark .dropdown-menu .dropdown-item:active {
+.dropdown-menu .dropdown-item:hover {
-    background-color: var(--color-offblack);
-    color: var(--color-text);
-}
-
-.dark .dropdown-menu .dropdown-item:hover {
     background-color: var(--color-accent);
     color: var(--color-text-dark);
 }
@@ -253,177 +248,6 @@ li .dropdown-item-mobile {
     box-shadow: 0 4px 0 0 var(--color-primary-button-light);
 }
 
-/* ========================
-   Markdown Content
-   ======================== */
-#markdown {
-    max-width: 80%;
-    margin: 0 auto;
-    padding: 3rem 0 0 0;
-    hyphens: auto;
-    text-align: left;
-    line-height: 1.8;
-    color: var(--color-text);
-}
-
-#markdown h1 {
-    font-size: 2.5rem;
-    margin-top: 0;
-    margin-bottom: 2rem;
-    text-align: left;
-    color: var(--color-text);
-    background-color: var(--color-accent);
-    border-radius: 8px;
-    padding: 5px 10px;
-    display: inline-block;
-    box-shadow: 0 4px 0 0 var(--color-text);
-}
-
-.dark #markdown h1 {
-    color: var(--color-text-dark);
-    box-shadow: 0 4px 0 0 var(--color-offblack);
-}
-
-#markdown h1::before {
-    content: "// ";
-    color: var(--color-text);
-    font-weight: bold;
-}
-
-.dark #markdown h1::before {
-    color: var(--color-text-dark);
-}
-
-#markdown h2 {
-    font-size: 2rem;
-    color: var(--color-text);
-}
-
-#markdown h3 {
-    font-size: 1.5rem;
-    color: var(--color-text);
-}
-
-#markdown h4 {
-    font-size: 1.25rem;
-    color: var(--color-text);
-}
-
-#markdown h5 {
-    font-size: 1.1rem;
-    color: var(--color-text);
-}
-
-#markdown h6 {
-    font-size: 1rem;
-    color: var(--color-text);
-}
-
-#markdown p,
-#markdown li {
-    font-size: 1.1rem;
-    color: var(--color-text);
-}
-
-#markdown ul, #markdown ol {
-    padding-left: 20px;
-}
-
-#markdown table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    margin-bottom: 1.5rem;
-    font-size: 1.1rem;
-    color: var(--color-text);
-    border: 1px solid var(--color-text);
-    border-radius: 10px;
-    overflow: hidden;
-    box-shadow: 0 4px 0 0 var(--color-text);
-}
-
-.dark #markdown table {
-    color: var(--color-text);
-    border: 1px solid var(--color-offwhite);
-    box-shadow: 0 4px 0 0 var(--color-offwhite);
-}
-
-#markdown th,
-#markdown td {
-    border: 1px solid #ccc;
-    padding: 12px 15px;
-    text-align: left;
-    border-radius: 0;
-}
-
-.dark #markdown th,
-#markdown td {
-    border: 1px solid var(--color-offwhite);
-    padding: 12px 15px;
-    text-align: left;
-    border-radius: 0;
-}
-
-#markdown th {
-    background-color: #f2f2f2;
-    color: var(--color-text);
-    font-weight: bolder;
-}
-
-.dark #markdown th {
-    background-color: var(--color-offblack);
-    color: var(--color-text);
-    font-weight: bolder;
-}
-
-#markdown blockquote {
-    background-color: var(--color-offwhite);
-    padding: 20px 20px 7px 20px;
-    margin-bottom: 20px;
-    color: var(--color-text);
-    border: 1px solid var(--color-text);
-    border-radius: 10px;
-    box-shadow: 0 4px 0 0 var(--color-text);
-}
-
-.dark #markdown blockquote {
-    background-color: var(--color-offblack);
-    padding: 20px 20px 7px 20px;
-    margin-bottom: 20px;
-    color: var(--color-text);
-    border: 1px solid var(--color-offwhite);
-    border-radius: 10px;
-    box-shadow: 0 4px 0 0 var(--color-offwhite);
-}
-
-#markdown a {
-    color: var(--color-link);
-    text-decoration: none;
-    transition: color 0.3s;
-}
-
-#markdown a:hover {
-    color: var(--color-link);
-    text-decoration: underline;
-}
-
-#markdown code {
-    background-color: #f2f2f2;
-    color: var(--color-text);
-    padding: 0.2rem 0.4rem;
-    border-radius: 4px;
-    font-size: 1.05rem;
-}
-
-#markdown img {
-    width: 100%;
-    max-height: 60vh;
-    object-fit: cover;
-    border-radius: 10px;
-    margin-bottom: 20px;
-    margin-top: 50px;
-}
-
 /* ========================
    Footer
    ======================== */
@@ -501,46 +325,3 @@ li .dropdown-item-mobile {
         display: none !important;
     }
 }
-
-@media (max-width: 576px) {
-    .hero-section h1 {
-        font-size: 2rem;
-    }
-
-    .hero-section p {
-        font-size: 1rem;
-    }
-
-    #markdown {
-        padding: 1rem 0 0 0;
-    }
-
-    #markdown h1 {
-        font-size: 1.8rem;
-    }
-
-    #markdown h2 {
-        font-size: 1.6rem;
-    }
-
-    #markdown h3 {
-        font-size: 1.4rem;
-    }
-
-    #markdown h4 {
-        font-size: 1.2rem;
-    }
-
-    #markdown h5 {
-        font-size: 1.1rem;
-    }
-
-    #markdown h6 {
-        font-size: 1rem;
-    }
-
-    #markdown p,
-    #markdown li {
-        font-size: 1rem;
-    }
-}

assets/css/markdown.css

@@ -0,0 +1,189 @@
+/* ========================
+   Markdown Content
+   ======================== */
+#markdown {
+    max-width: 80%;
+    margin: 0 auto;
+    padding: 3rem 0 0 0;
+    hyphens: auto;
+    text-align: left;
+    line-height: 1.8;
+    color: var(--color-text);
+}
+
+#markdown h1 {
+    font-size: 2.5rem;
+    margin-top: 0;
+    margin-bottom: 2rem;
+    text-align: left;
+    color: var(--color-text);
+    background-color: var(--color-accent);
+    border-radius: 8px;
+    padding: 5px 10px;
+    display: inline-block;
+    box-shadow: 0 4px 0 0 var(--color-text);
+}
+
+.dark #markdown h1 {
+    color: var(--color-text-dark);
+    box-shadow: 0 4px 0 0 var(--color-off);
+}
+
+#markdown h1::before {
+    content: "// ";
+    color: var(--color-text);
+    font-weight: bold;
+}
+
+.dark #markdown h1::before {
+    color: var(--color-text-dark);
+}
+
+#markdown h2 {
+    font-size: 2rem;
+    color: var(--color-text);
+}
+
+#markdown h3 {
+    font-size: 1.5rem;
+    color: var(--color-text);
+}
+
+#markdown h4 {
+    font-size: 1.25rem;
+    color: var(--color-text);
+}
+
+#markdown h5 {
+    font-size: 1.1rem;
+    color: var(--color-text);
+}
+
+#markdown h6 {
+    font-size: 1rem;
+    color: var(--color-text);
+}
+
+#markdown p,
+#markdown li {
+    font-size: 1.1rem;
+    color: var(--color-text);
+}
+
+#markdown ul, #markdown ol {
+    padding-left: 20px;
+}
+
+#markdown table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin-bottom: 1.5rem;
+    font-size: 1.1rem;
+    color: var(--color-text);
+    border: 1px solid var(--color-text);
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 4px 0 0 var(--color-text);
+    table-layout: fixed;
+}
+
+#markdown th,
+#markdown td {
+    background-color: var(--color-off);
+    border: 1px solid #ccc;
+    padding: 12px 15px;
+    text-align: left;
+    border-radius: 0;
+}
+
+#markdown th {
+    background-color: var(--color-off);
+    color: var(--color-text);
+    font-weight: bolder;
+}
+
+#markdown blockquote {
+    background-color: var(--color-off);
+    padding: 20px 20px 7px 20px;
+    margin-bottom: 20px;
+    color: var(--color-text);
+    border: 1px solid var(--color-text);
+    border-radius: 10px;
+    box-shadow: 0 4px 0 0 var(--color-text);
+}
+
+#markdown a {
+    color: var(--color-link);
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+#markdown a:hover {
+    color: var(--color-link);
+    text-decoration: underline;
+}
+
+#markdown code {
+    background-color: var(--color-off);
+    color: var(--color-text);
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-size: 1.05rem;
+}
+
+
+#markdown img {
+    width: 100%;
+    max-height: 60vh;
+    object-fit: cover;
+    border-radius: 10px;
+    margin-bottom: 20px;
+    margin-top: 50px;
+}
+
+/* ========================
+   Responsive Design
+   ======================== */
+@media (max-width: 576px) {
+    .hero-section h1 {
+        font-size: 2rem;
+    }
+
+    .hero-section p {
+        font-size: 1rem;
+    }
+
+    #markdown {
+        padding: 1rem 0 0 0;
+    }
+
+    #markdown h1 {
+        font-size: 1.8rem;
+    }
+
+    #markdown h2 {
+        font-size: 1.6rem;
+    }
+
+    #markdown h3 {
+        font-size: 1.4rem;
+    }
+
+    #markdown h4 {
+        font-size: 1.2rem;
+    }
+
+    #markdown h5 {
+        font-size: 1.1rem;
+    }
+
+    #markdown h6 {
+        font-size: 1rem;
+    }
+
+    #markdown p,
+    #markdown li {
+        font-size: 1rem;
+    }
+}

assets/css/shortcodes.css

@@ -32,4 +32,94 @@
     #markdown .profile-content {
         text-align: center;
     }
+}
+
+/* ========================
+   cards
+   ======================== */
+
+
+/* ========================
+   details
+   ======================== */
+.details {
+    cursor: pointer;
+    background-color: var(--color-off);
+    padding: 5px 10px 10px 20px;
+    color: var(--color-text);
+    border: 1px solid var(--color-text);
+    border-radius: 10px;
+    box-shadow: 0 4px 0 0 var(--color-text);
+}
+
+.details.expanded {
+    background-color: var(--color-accent);
+}
+
+.dark #markdown .details.expanded {
+    border: 1px solid var(--color-off) !important;
+    box-shadow: 0 4px 0 0 var(--color-off) !important;
+    color: var(--color-text-dark) !important;
+}
+
+.dark #markdown .details.expanded .details-content * {
+    color: var(--color-text-dark) !important;
+}
+
+.details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.details-text {
+    display: inline-flex;
+    align-items: center;
+    font-size: 1.3rem !important;
+    font-weight: 500 !important;
+}
+
+.details-number {
+    font-size: 3.5rem;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    width: 3.5rem;
+    text-align: left;
+    margin-right: 2rem;
+    line-height: 1;
+}
+
+#markdown .details.expanded .details-text,
+#markdown .details.expanded .details-number {
+    color: var(--color-text-dark) !important;
+}
+
+.details-icon {
+    display: flex;
+    justify-content: center;
+    width: 3rem !important;
+    height: 3rem !important;
+    flex-shrink: 0;
+    align-items: center;
+    margin: 0.5rem 1rem 0 0 !important;
+    color: var(--color-text);
+}
+
+.dark .details.expanded .details-icon {
+    color: var(--color-text-dark) !important;
+}
+
+.details-content {
+    margin-top: 1.5rem;
+    display: none;
+}
+
+#markdown .details.expanded .details-content {
+    color: var(--color-text-dark) !important;
+    display: block;
+}
+
+#markdown .details.expanded .details-content * {
+    color: inherit !important;
 }

assets/js/main.js

@@ -1,3 +1,6 @@
+/* ========================
+   Darkmode
+   ======================== */
 document.addEventListener("DOMContentLoaded", () => {
     const themeSwitch = document.getElementById("theme-switch");
     const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
@@ -6,20 +9,11 @@ document.addEventListener("DOMContentLoaded", () => {
         document.documentElement.classList.toggle("dark", theme === "dark");
     };
 
-    const getStoredTheme = () => localStorage.getItem("theme");
     const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
 
-    // Initial load
-    const savedTheme = getStoredTheme();
-    if (savedTheme) {
-        applyTheme(savedTheme);
-    } else {
-        applyTheme(prefersDarkScheme.matches ? "dark" : "light");
-    }
-
     // system changes
     prefersDarkScheme.addEventListener("change", (e) => {
-        const saved = getStoredTheme();
+        const saved = localStorage.getItem("theme");
         if (!saved) {
             applyTheme(e.matches ? "dark" : "light");
         }
@@ -33,7 +27,6 @@ document.addEventListener("DOMContentLoaded", () => {
         setStoredTheme(newTheme);
     });
 
-
     const updateBodyThemeAttr = () => {
         const current = document.documentElement.classList.contains("dark") ? "dark" : "light";
         document.body.setAttribute("data-theme", current);
@@ -47,4 +40,19 @@ document.addEventListener("DOMContentLoaded", () => {
     prefersDarkScheme.addEventListener("change", () => {
         updateBodyThemeAttr();
     });
-});
+});
+
+/* ========================
+   Details Toggle
+   ======================== */
+window.toggleDetails = function(element) {
+    element.classList.toggle('expanded');
+
+    const plusIcon = element.querySelector('.icon-plus');
+    const minusIcon = element.querySelector('.icon-minus');
+
+    const isExpanded = element.classList.contains('expanded');
+
+    plusIcon.style.display = isExpanded ? 'none' : 'inline';
+    minusIcon.style.display = isExpanded ? 'inline' : 'none';
+};

content/about/entsendungen.md

@@ -9,7 +9,11 @@ In den nachfolgenden Gremien sitzen studentische Vertreter:innen der Fachschaft
 
 ---
 
-## 🏛️ Studierendenrat (StuRa)
+{{< details
+title="Studierendenrat (StuRa)"
+number="01" >}}
+
+---
 
 Der **Studierendenrat** ist das höchste Gremium der studentischen Selbstverwaltung. Er tagt **alle zwei Wochen donnerstags um 19:30 Uhr** und besteht derzeit aus 5 Geschäftsbereichen:
 
@@ -31,9 +35,15 @@ Er hat 37 Mitglieder, die von den Fachschaften entsandt werden – ein guter Ort
 - **Roman Roller** – weiterer Vertreter – [roman.roller@ifsr.de](mailto:roman.roller@ifsr.de)
 - **Arthur Wolf** – Ersatzvertreter – [arthur.wolf@ifsr.de](mailto:arthur.wolf@ifsr.de)
 
+{{< /details >}}
+
 ---
 
-## 🏫 Fakultätsrat (FR)
+{{< details
+title="Fakultätsrat (FR)"
+number="02" >}}
+
+---
 
 Der **Fakultätsrat** ist das "Parlament der Fakultät". Er entscheidet in monatlichen Sitzungen über organisatorische, finanzielle und personelle Belange.
 
@@ -55,9 +65,15 @@ Der **Fakultätsrat** ist das "Parlament der Fakultät". Er entscheidet in monat
 - **Joachim Stramke** – [joachim.stramke@ifsr.de](mailto:joachim.stramke@ifsr.de)
 - **Kenny Weidemann** – [kenny.weidemann@ifsr.de](mailto:kenny.weidemann@ifsr.de)
 
+{{< /details >}}
+
 ---
 
-## 📝 Prüfungsausschüsse (veraltet, wird bald aktualisiert)
+{{< details
+title="Prüfungsausschüsse (veraltet, wird bald aktualisiert)"
+number="03" >}}
+
+---
 
 Zuständig für:
 - Prüfungsanerkennungen
@@ -76,9 +92,15 @@ Für jeden Studiengang existiert ein eigener Ausschuss.
 
 **Wir suchen Nachfolger:innen für Lehramtsvertretungen.**
 
+{{< /details >}}
+
 ---
 
-## 📚 Studienkommissionen (veraltet, wird bald aktualisiert)
+{{< details
+title="Studienkommissionen (veraltet, wird bald aktualisiert)"
+number="04" >}}
+
+---
 
 Diese Kommissionen beraten und beschließen Änderungen an Studien- und Prüfungsordnungen.
 
@@ -89,9 +111,15 @@ Diese Kommissionen beraten und beschließen Änderungen an Studien- und Prüfung
 - **CMS**: Rajasekar Sankar, Muhammad Irtaza Khan u.a.
 - **CL**: Lydia Will, Helene Hausmann
 
+{{< /details >}}
+
 ---
 
-## 👩‍🏫 Studentische Studiengangskoordinator:innen (2025)
+{{< details
+title="Studentische Studiengangskoordinator:innen (2025)"
+number="05" >}}
+
+---
 
 **Zuständig für:**
 - interne Organisation & Kommunikation in den Studiengängen
@@ -103,9 +131,15 @@ Diese Kommissionen beraten und beschließen Änderungen an Studien- und Prüfung
 - **Lehramt (alle)**: Eliah Lohr
 - **CSE**: Wolfgang Walther
 
+{{< /details >}}
+
 ---
 
-## ✅ Eignungsfeststellungsausschüsse
+{{< details
+title="Eignungsfeststellungsausschüsse"
+number="06" >}}
+
+---
 
 **Mitglieder:**
 - **Informatik (M.Sc.)**: Franz Rodestock
@@ -115,9 +149,15 @@ Diese Kommissionen beraten und beschließen Änderungen an Studien- und Prüfung
 
 > In den Programmen **DSE** und **CL** suchen wir engagierte Studierende zur Mitwirkung!
 
+{{< /details >}}
+
 ---
 
-## 🛠 Weitere Gremien
+{{< details
+title="Weitere Gremien"
+number="07" >}}
+
+---
 
 | Bezeichnung                                | Studentische Mitglieder             |
 |--------------------------------------------|-------------------------------------|
@@ -125,4 +165,8 @@ Diese Kommissionen beraten und beschließen Änderungen an Studien- und Prüfung
 | Öffentlichkeitsarbeit                      | Marco Lehner                        |
 | Deutschlandstipendium                      | Dharshan Barkur, Macy Schreiber (V) |
 | Institutsrat SMT                           | Jakob Steinberg                     |
-| Lehrsammlung „Historische Computertechnik“ | Lydia Will                          |
+| Lehrsammlung „Historische Computertechnik“ | Lydia Will                          |
+
+{{< /details >}}
+
+---

layouts/_partials/head.html

@@ -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" . }}

layouts/_partials/head/css.html

@@ -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 }}

layouts/shortcodes/cards.html

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

layouts/shortcodes/details.html

@@ -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>