mobile navbar and hero section
This commit is contained in:
Jannik Menzel
parent
cc2fa1cea5
commit
d31e4399a6
7 changed files with 176 additions and 24 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue