diff --git a/assets/css/main.css b/assets/css/main.css index 93853fd..0717a52 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -9,8 +9,8 @@ --color-primary-button-light: #FFFFFF; --color-link: #405C00; --color-error: #d9534f; - --color-offwhite: #F3F3F3; - --color-offblack: #1D1F29 + --color-off: #F3F3F3; + --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 { - background-color: var(--color-offblack); - color: var(--color-text); -} - -.dark .dropdown-menu .dropdown-item:hover { +.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; - } -} diff --git a/assets/css/markdown.css b/assets/css/markdown.css new file mode 100644 index 0000000..43ec131 --- /dev/null +++ b/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; + } +} diff --git a/assets/css/shortcodes.css b/assets/css/shortcodes.css index 1bf3ba6..e16b1d7 100644 --- a/assets/css/shortcodes.css +++ b/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; } \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index e434c4b..d4c5f59 100644 --- a/assets/js/main.js +++ b/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(); }); -}); \ No newline at end of file +}); + +/* ======================== + 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'; +}; \ No newline at end of file diff --git a/content/about/entsendungen.md b/content/about/entsendungen.md index 6996a44..606d46b 100644 --- a/content/about/entsendungen.md +++ b/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 | \ No newline at end of file +| Lehrsammlung „Historische Computertechnik“ | Lydia Will | + +{{< /details >}} + +--- \ No newline at end of file diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html index 9c89b56..f072e59 100644 --- a/layouts/_partials/head.html +++ b/layouts/_partials/head.html @@ -14,8 +14,23 @@ integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" > + + - + {{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }} {{ partialCached "head/css.html" . }} {{ partialCached "head/js.html" . }} diff --git a/layouts/_partials/head/css.html b/layouts/_partials/head/css.html index e7b6db4..497b8a7 100644 --- a/layouts/_partials/head/css.html +++ b/layouts/_partials/head/css.html @@ -16,3 +16,12 @@ {{- end }} {{- end }} {{- end }} +{{- with resources.Get "css/markdown.css" }} + {{- if hugo.IsDevelopment }} + + {{- else }} + {{- with . | minify | fingerprint }} + + {{- end }} + {{- end }} +{{- end }} diff --git a/layouts/shortcodes/cards.html b/layouts/shortcodes/cards.html new file mode 100644 index 0000000..c2e4b82 --- /dev/null +++ b/layouts/shortcodes/cards.html @@ -0,0 +1,4 @@ +
+

{{ .Get "title" }}

+ {{ .Inner | markdownify }} +
\ No newline at end of file diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html new file mode 100644 index 0000000..c721def --- /dev/null +++ b/layouts/shortcodes/details.html @@ -0,0 +1,25 @@ +
+
+

+ {{ with .Get "number" }}{{ . }} {{ end }} + {{ .Get "title" }} +

+
+ + + + + + +
+
+
+ {{ .Inner | markdownify }} +
+
\ No newline at end of file