From d31e4399a6e92ef1023b00f52fc8edfba153835a Mon Sep 17 00:00:00 2001 From: Jannik Menzel Date: Sat, 17 May 2025 01:05:53 +0200 Subject: [PATCH] mobile navbar and hero section --- assets/css/main.css | 152 +++++++++++++++++++++++++++++++++--- assets/css/markdown.css | 9 ++- assets/css/shortcodes.css | 3 +- content/about/aufgaben.md | 10 +++ content/kontakt.md | 5 +- layouts/_partials/hero.html | 11 +++ layouts/_partials/nav.html | 10 ++- 7 files changed, 176 insertions(+), 24 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 0717a52..f3c96af 100644 --- a/assets/css/main.css +++ b/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%; -} - -.navbar .container { - padding: 10px 15px; - border-radius: 5px; + background-color: var(--color-off); + color: var(--color-text); + border: 1px solid var(--color-text); + border-radius: 0 0 30px 30px; + 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; + } +} \ No newline at end of file diff --git a/assets/css/markdown.css b/assets/css/markdown.css index 43ec131..0c8023d 100644 --- a/assets/css/markdown.css +++ b/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 { diff --git a/assets/css/shortcodes.css b/assets/css/shortcodes.css index e16b1d7..471328f 100644 --- a/assets/css/shortcodes.css +++ b/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 { diff --git a/content/about/aufgaben.md b/content/about/aufgaben.md index 928e7d0..92407fa 100644 --- a/content/about/aufgaben.md +++ b/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 diff --git a/content/kontakt.md b/content/kontakt.md index 9715327..1ccdc49 100644 --- a/content/kontakt.md +++ b/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/) -- [Instagram](https://instagram.com/fsr.inf) -- [Telegram](https://t.me/fsr_inf) -- [Matrix](https://matrix.to/#/#fsr-inf-studierende:matrix.org) +[📧 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) ## 📬 Externe Kontaktanfragen diff --git a/layouts/_partials/hero.html b/layouts/_partials/hero.html index cd79b65..068f547 100644 --- a/layouts/_partials/hero.html +++ b/layouts/_partials/hero.html @@ -11,4 +11,15 @@ + +
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/layouts/_partials/nav.html b/layouts/_partials/nav.html index 614c270..f536b4e 100644 --- a/layouts/_partials/nav.html +++ b/layouts/_partials/nav.html @@ -1,7 +1,7 @@