mobile navbar and hero section

assets/css/main.css

@@ -7,7 +7,7 @@
     --color-accent: #BBE04C;
     --color-primary-button-dark: #191A23;
     --color-primary-button-light: #FFFFFF;
-    --color-link: #405C00;
+    --color-link: #607C0E;
     --color-error: #d9534f;
     --color-off: #F3F3F3;
     --color-light: #f8f9fa;
@@ -38,6 +38,7 @@ body {
     flex-direction: column;
     justify-content: flex-start;
     position: relative;
+    overflow-x: hidden;
 }
 
 main {
@@ -59,7 +60,6 @@ p {
 }
 
 .container {
-    background-color: var(--color-background);
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
@@ -69,15 +69,16 @@ p {
    Navbar
    ======================== */
 .navbar {
-    padding: 1rem 0;
+    position: sticky;
+    padding: 1rem 1rem 1rem 1rem;
     top: 0;
     left: 0;
     width: 100%;
-}
+    background-color: var(--color-off);
-
+    color: var(--color-text);
-.navbar .container {
+    border: 1px solid var(--color-text);
-    padding: 10px 15px;
+    border-radius: 0 0 30px 30px;
-    border-radius: 5px;
+    box-shadow: 0 4px 0 0 var(--color-text);
 }
 
 .navbar-brand {
@@ -105,13 +106,20 @@ p {
 
 li .dropdown-item-mobile {
     display: block;
-    padding-left: 2.5rem;
 }
 
 .nav-item.dropdown {
     position: relative;
 }
 
+.dark .navbar-toggler {
+    border: 1px solid var(--color-text);
+}
+
+.dark .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
 .show-on-hover:hover > .dropdown-menu {
     background-color: var(--color-off);
     display: block;
@@ -157,6 +165,7 @@ li .dropdown-item-mobile {
 #theme-switch img#light-icon {
     display: none;
 }
+
 #theme-switch img#dark-icon {
     display: inline;
 }
@@ -164,6 +173,7 @@ li .dropdown-item-mobile {
 .dark #theme-switch img#light-icon {
     display: inline;
 }
+
 .dark #theme-switch img#dark-icon {
     display: none;
 }
@@ -195,6 +205,75 @@ li .dropdown-item-mobile {
     margin-right: auto;
 }
 
+.hero-card {
+    width: 12rem;
+    height: 10rem;
+    background-color: var(--color-off);
+    color: var(--color-text);
+    border: 1px solid var(--color-text);
+    border-radius: 30px;
+    box-shadow: 0 4px 0 0 var(--color-text);
+    pointer-events: auto;
+    position: relative;
+}
+
+.hero-card-wrapper {
+    position: absolute;
+    top: 25%;
+    left: 0;
+    width: 100vw;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 2rem;
+    pointer-events: none;
+}
+
+.hero-card-column {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    pointer-events: auto;
+}
+
+.hero-card-column.left {
+    align-items: flex-start;
+}
+
+.hero-card-column.right {
+    align-items: flex-end;
+}
+
+.left-1 {
+    height: 12rem;
+    width: 17rem;
+    right: 5rem;
+    z-index: 2;
+}
+
+.left-2 {
+    height: 10rem;
+    width: 12rem;
+    right: 5rem;
+    bottom: 3rem;
+    z-index: 1;
+}
+
+.right-1 {
+    height: 15rem;
+    width: 12rem;
+    left: 5rem;
+    top: 1rem;
+    z-index: 2;
+}
+
+.right-2 {
+    height: 15rem;
+    width: 18rem;
+    left: 5rem;
+    bottom: 8rem;
+    z-index: 1;
+}
+
 /* ========================
    Button
    ======================== */
@@ -204,7 +283,7 @@ li .dropdown-item-mobile {
     color: var(--color-primary-button-light);
 }
 
-.btn-primary:hover {
+.btn-primary:hover, .btn-primary:active {
     color: var(--color-primary-button-dark);
     background-color: transparent;
     border: 1px solid var(--color-primary-button-dark);
@@ -217,7 +296,7 @@ li .dropdown-item-mobile {
     color: var(--color-text-dark);
 }
 
-.dark .btn-primary:hover {
+.dark .btn-primary:hover, .dark.btn.btn-primary:active {
     color: var(--color-text);
     background-color: transparent;
     border: 1px solid var(--color-accent);
@@ -230,7 +309,7 @@ li .dropdown-item-mobile {
     border: 1px solid var(--color-primary-button-dark);
 }
 
-.btn-secondary:hover {
+.btn-secondary:hover, .btn-secondary:active {
     color: var(--color-primary-button-dark);
     background-color: transparent;
     border-color: var(--color-primary-button-dark);
@@ -248,9 +327,17 @@ li .dropdown-item-mobile {
     box-shadow: 0 4px 0 0 var(--color-primary-button-light);
 }
 
+.dark .btn-secondary:active {
+    color: var(--color-primary-button-light) !important;
+}
+
 /* ========================
    Footer
    ======================== */
+footer {
+    background-color: var(--color-off);
+}
+
 .footer {
     padding: 1.5rem 0;
     width: 100%;
@@ -318,6 +405,41 @@ li .dropdown-item-mobile {
     .navbar-collapse .dropdown-menu {
         display: none !important;
     }
+
+    .navbar-nav .nav-link {
+        text-align: center;
+    }
+
+    .nav-item.dropdown {
+        justify-content: center;
+    }
+
+    .navbar-nav {
+        margin-top: 1rem;
+    }
+
+    .nav-item {
+        font-weight: 700;
+        border: 1px solid var(--color-text);
+        border-radius: 30px;
+        box-shadow: 0 4px 0 0 var(--color-text);
+        margin: 0.4rem 0 0.4rem 0;
+    }
+
+    .nav-item:hover, .nav-item:active {
+        background-color: var(--color-accent);
+        color: var(--color-text);
+        border: 1px solid var(--color-text);
+        border-radius: 30px;
+        box-shadow: 0 2px 0 0 var(--color-text);
+    }
+
+    .dropdown-item-mobile {
+        border: 1px solid var(--color-text);
+        border-radius: 30px;
+        box-shadow: 0 4px 0 0 var(--color-text);
+        margin: 0.4rem 0 0.4rem 0;
+    }
 }
 
 @media (min-width: 992px) {
@@ -325,3 +447,9 @@ li .dropdown-item-mobile {
         display: none !important;
     }
 }
+
+@media (max-width: 1260px) {
+    .hero-card-wrapper {
+        display: none;
+    }
+}

assets/css/markdown.css

@@ -4,7 +4,7 @@
 #markdown {
     max-width: 80%;
     margin: 0 auto;
-    padding: 3rem 0 0 0;
+    padding: 3rem 0 3rem 0;
     hyphens: auto;
     text-align: left;
     line-height: 1.8;
@@ -82,7 +82,7 @@
     font-size: 1.1rem;
     color: var(--color-text);
     border: 1px solid var(--color-text);
-    border-radius: 10px;
+    border-radius: 30px;
     overflow: hidden;
     box-shadow: 0 4px 0 0 var(--color-text);
     table-layout: fixed;
@@ -105,11 +105,11 @@
 
 #markdown blockquote {
     background-color: var(--color-off);
-    padding: 20px 20px 7px 20px;
+    padding: 20px 20px 0 20px;
     margin-bottom: 20px;
     color: var(--color-text);
     border: 1px solid var(--color-text);
-    border-radius: 10px;
+    border-radius: 30px;
     box-shadow: 0 4px 0 0 var(--color-text);
 }
 
@@ -160,6 +160,7 @@
 
     #markdown h1 {
         font-size: 1.8rem;
+        margin-top: 2rem;
     }
 
     #markdown h2 {

assets/css/shortcodes.css

@@ -48,7 +48,7 @@
     padding: 5px 10px 10px 20px;
     color: var(--color-text);
     border: 1px solid var(--color-text);
-    border-radius: 10px;
+    border-radius: 30px;
     box-shadow: 0 4px 0 0 var(--color-text);
 }
 
@@ -77,6 +77,7 @@
     align-items: center;
     font-size: 1.3rem !important;
     font-weight: 500 !important;
+    margin-bottom: 1rem;
 }
 
 .details-number {

content/about/aufgaben.md

@@ -15,6 +15,8 @@ Die Admins stellen sicher, dass die Infrastruktur funktioniert:
 
 > 📧 [fsr@ifsr.de](mailto:fsr@ifsr.de)
 
+---
+
 ### 🚀 Orga der Erstsemestereinführung (ESE)
 Über ein halbes Jahr vor der Veranstaltung beginnt die Planung. Verantwortliche Personen koordinieren viele Helfer\_innen in Bereichen wie:
 - Veranstaltungsplanung
@@ -24,6 +26,8 @@ Die Admins stellen sicher, dass die Infrastruktur funktioniert:
 
 > 📧 Kontakt: [ese-orga@ifsr.de](mailto:ese-orga@ifsr.de)
 
+---
+
 ### 📢 AG Öffentlichkeitsarbeit
 Wir kümmern uns um:
 - Pflege der Website
@@ -34,6 +38,8 @@ Wir kümmern uns um:
 Kreative Köpfe willkommen!  
 > 📧 [pr@ifsr.de](mailto:pr@ifsr.de)
 
+---
+
 ### 🌱 AG Nachhaltigkeit
 Wir setzen uns für ressourcenschonendes Arbeiten ein:
 - Nachhaltigkeit bei der ESE
@@ -42,6 +48,8 @@ Wir setzen uns für ressourcenschonendes Arbeiten ein:
 
 > 📧 [nachhaltigkeit@ifsr.de](mailto:nachhaltigkeit@ifsr.de)
 
+---
+
 ### 🎓 AG Lehre
 Kernaufgabe: Verbesserung der Lehre!
 - Diskussion zu Studiengangsreformen
@@ -51,6 +59,8 @@ Kernaufgabe: Verbesserung der Lehre!
 
 > 📧 [fsr@ifsr.de](mailto:fsr@ifsr.de)
 
+---
+
 ### 🎲 Spieleabend-Taskforce
 Wir organisieren die beliebten Spieleabende:
 - Vorbereitung von Räumen und Materialien

content/kontakt.md

@@ -9,10 +9,7 @@ Der Fachschaftsrat Informatik steht dir in sämtlichen Studienbelangen zur Seite
 
 ## 📱 Social Media
 
-- [Mailinglisten](https://lists.ifsr.de/mailman3/lists/)
+[📧 Mailinglisten](https://lists.ifsr.de/mailman3/lists/) · [📸 Instagram](https://instagram.com/fsr.inf) · [✈️ Telegram](https://t.me/fsr_inf) · [💬 Matrix](https://matrix.to/#/#fsr-inf-studierende:matrix.org)
-- [Instagram](https://instagram.com/fsr.inf)
-- [Telegram](https://t.me/fsr_inf)
-- [Matrix](https://matrix.to/#/#fsr-inf-studierende:matrix.org)
 
 ## 📬 Externe Kontaktanfragen
 

layouts/_partials/hero.html

@@ -11,4 +11,15 @@
             </div>
         </div>
     </div>
+
+    <div class="hero-card-wrapper">
+        <div class="hero-card-column left">
+            <div class="hero-card left-1"></div>
+            <div class="hero-card left-2"></div>
+        </div>
+        <div class="hero-card-column right">
+            <div class="hero-card right-1"></div>
+            <div class="hero-card right-2"></div>
+        </div>
+    </div>
 </section>

layouts/_partials/nav.html

@@ -1,7 +1,7 @@
 <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
         <a class="navbar-brand d-flex align-items-center" href="{{ "/" | relURL }}">
-            <img src="{{ "images/logo.svg" | relURL }}" alt="iFSR Logo" height="50" class="me-2">
+            <img src="{{ "images/logo.svg" | relURL }}" alt="iFSR Logo" height="42">
             iFSR
         </a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
@@ -16,9 +16,11 @@
                         {{ $children := where $items "parent" $i.name }}
                         {{ if gt (len $children) 0 }}
                             <li class="nav-item dropdown d-flex align-items-center show-on-hover">
-                                <a class="nav-link ps-0" href="{{ $i.url | relURL }}">{{ $i.name }}</a>
+                                <!-- Dropdown Parent -->
+                                <a class="nav-link" href="{{ $i.url | relURL }}">{{ $i.name }}</a>
                                 <ul class="dropdown-menu">
                                     {{ range $child := $children }}
+                                        <!-- Dropdown Child Desktop -->
                                         <li><a class="dropdown-item" href="{{ $child.url | relURL }}">{{ $child.name }}</a></li>
                                     {{ end }}
                                 </ul>
@@ -26,11 +28,13 @@
                             <li>
                                 <div class="d-lg-none d-flex flex-column dropdown-item-mobile">
                                     {{ range $child := $children }}
-                                        <a class="nav-link ps-0" href="{{ $child.url | relURL }}">{{ $child.name }}</a>
+                                        <!-- Dropdown Child Mobile -->
+                                    <div class="nav-item-mobile"><a class="nav-link" href="{{ $child.url | relURL }}">{{ $child.name }}</a></div>
                                     {{ end }}
                                 </div>
                             </li>
                         {{ else }}
+                            <!-- Nav Item -->
                             <li class="nav-item"><a class="nav-link" href="{{ $i.url | relURL }}">{{ $i.name }}</a></li>
                         {{ end }}
                     {{ end }}