FSR/webseite
28
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

hero section and navbar quality-improvements

Browse source
This commit is contained in:
Jannik Menzel 2025-05-18 13:17:51 +02:00
parent ffb6e66b78
commit f18e59b6cb
5 changed files with 35 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

34
assets/css/main.css
View file

@ -13,6 +13,7 @@
--color-off: #F3F3F3;
--color-off-dark: #1D1F29;
--color-light: #F8F9Fa;
--color-dark: #191A23;
}
.dark {
@ -144,12 +145,12 @@ li .dropdown-item-mobile {
.dropdown-menu .dropdown-item:active {
background-color: var(--color-off);
color: var(--color-text);
color: var(--color-dark);
}
.dropdown-menu .dropdown-item:hover {
background-color: var(--color-accent);
color: var(--color-text-dark);
color: var(--color-dark);
}
#theme-switch {
@ -185,8 +186,7 @@ li .dropdown-item-mobile {
Hero
======================== */
.hero-section {
padding-top: 6rem;
padding-bottom: 6rem;
padding: 6rem 0 6rem 0;
max-width: 45rem;
margin: 5rem auto;
text-align: center;
@ -318,7 +318,7 @@ li .dropdown-item-mobile {
About
======================== */
.about-section {
margin: 9rem 0 3rem 0;
margin-bottom: 3rem;
}
.about-image {
@ -327,6 +327,7 @@ li .dropdown-item-mobile {
overflow: hidden;
display: block;
border-radius: 30px;
margin-top: 3rem;
}
.card {
@ -503,17 +504,15 @@ footer {
.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;
}
.hero-section {
padding: 0 !important;
}
}
@media (min-width: 992px) {
@ -526,4 +525,17 @@ footer {
.hero-card-wrapper {
display: none;
}
.hero-section {
padding: 0;
margin: 2rem auto;
}
.hero-section h1 {
font-size: 2.5rem;
}
.hero-section p {
font-size: 1.1rem;
}
}

8
assets/css/markdown.css
View file

@ -145,14 +145,6 @@
Responsive Design
======================== */
@media (max-width: 576px) {
.hero-section h1 {
font-size: 2rem;
}
.hero-section p {
font-size: 1rem;
}
#markdown {
padding: 1rem 0 0 0;
}

BIN
assets/images/hero-image.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 108 KiB

Before After
Before After

10
layouts/_default/home.html
View file

@ -1,11 +1,13 @@
{{ define "main" }}
<div class="d-flex flex-column-reverse flex-md-column">
{{ partial "hero.html" . }}
<div class="container">
<img src="{{ (resources.Get "images/hero-image.jpg").RelPermalink }}" alt="Hero Bild"
class="about-image img-fluid w-100">
</div>
</div>
<section class="about-section">
<div class="container">
<div class="mb-4">
<img src="{{ (resources.Get "images/hero-image.jpg").RelPermalink }}" alt="Hero Bild"
class="about-image img-fluid w-100">
</div>
<div class="row mt-5">
<div class="col-md-4 mb-4">
<div class="card h-100">

12
layouts/_partials/hero.html
View file

@ -16,7 +16,7 @@
<div class="hero-card-wrapper">
<div class="hero-card-column left">
<div class="hero-card left-1">
<a href="https://ese.ifsr.de/" class="d-flex align-items-center mb-2">
<a href="https://ese.ifsr.de/" class="d-flex align-items-center">
<svg class="me-2" fill="none" height="41" viewBox="0 0 41 41" width="41"
xmlns="http://www.w3.org/2000/svg">
<circle cx="20.5" cy="20.5" fill="currentColor" r="20.5"/>
@ -25,7 +25,7 @@
</svg>
ESE Website
</a>
<a href="/events" class="d-flex align-items-center mb-2">
<a href="/events" class="d-flex align-items-center">
<svg class="me-2" fill="none" height="41" viewBox="0 0 41 41" width="41"
xmlns="http://www.w3.org/2000/svg">
<circle cx="20.5" cy="20.5" fill="currentColor" r="20.5"/>
@ -48,7 +48,7 @@
</div>
<div class="hero-card-column right">
<div class="hero-card right-1">
<a href="https://www.instagram.com/ifsrde" class="d-flex align-items-center">
<a href="https://www.instagram.com/ifsrde" class="d-flex align-items-center" aria-label="iFSR auf Instagram">
<svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_17_63)">
<path d="M24 4.32187C30.4125 4.32187 31.1719 4.35 33.6938 4.4625C36.0375 4.56562 37.3031 4.95938 38.1469 5.2875C39.2625 5.71875 40.0688 6.24375 40.9031 7.07812C41.7469 7.92188 42.2625 8.71875 42.6938 9.83438C43.0219 10.6781 43.4156 11.9531 43.5188 14.2875C43.6313 16.8187 43.6594 17.5781 43.6594 23.9813C43.6594 30.3938 43.6313 31.1531 43.5188 33.675C43.4156 36.0188 43.0219 37.2844 42.6938 38.1281C42.2625 39.2438 41.7375 40.05 40.9031 40.8844C40.0594 41.7281 39.2625 42.2438 38.1469 42.675C37.3031 43.0031 36.0281 43.3969 33.6938 43.5C31.1625 43.6125 30.4031 43.6406 24 43.6406C17.5875 43.6406 16.8281 43.6125 14.3063 43.5C11.9625 43.3969 10.6969 43.0031 9.85313 42.675C8.7375 42.2438 7.93125 41.7188 7.09688 40.8844C6.25313 40.0406 5.7375 39.2438 5.30625 38.1281C4.97813 37.2844 4.58438 36.0094 4.48125 33.675C4.36875 31.1438 4.34063 30.3844 4.34063 23.9813C4.34063 17.5688 4.36875 16.8094 4.48125 14.2875C4.58438 11.9437 4.97813 10.6781 5.30625 9.83438C5.7375 8.71875 6.2625 7.9125 7.09688 7.07812C7.94063 6.23438 8.7375 5.71875 9.85313 5.2875C10.6969 4.95938 11.9719 4.56562 14.3063 4.4625C16.8281 4.35 17.5875 4.32187 24 4.32187ZM24 0C17.4844 0 16.6688 0.028125 14.1094 0.140625C11.5594 0.253125 9.80625 0.665625 8.2875 1.25625C6.70312 1.875 5.3625 2.69062 4.03125 4.03125C2.69063 5.3625 1.875 6.70313 1.25625 8.27813C0.665625 9.80625 0.253125 11.55 0.140625 14.1C0.028125 16.6687 0 17.4844 0 24C0 30.5156 0.028125 31.3312 0.140625 33.8906C0.253125 36.4406 0.665625 38.1938 1.25625 39.7125C1.875 41.2969 2.69063 42.6375 4.03125 43.9688C5.3625 45.3 6.70313 46.125 8.27813 46.7344C9.80625 47.325 11.55 47.7375 14.1 47.85C16.6594 47.9625 17.475 47.9906 23.9906 47.9906C30.5063 47.9906 31.3219 47.9625 33.8813 47.85C36.4313 47.7375 38.1844 47.325 39.7031 46.7344C41.2781 46.125 42.6188 45.3 43.95 43.9688C45.2812 42.6375 46.1063 41.2969 46.7156 39.7219C47.3063 38.1938 47.7188 36.45 47.8313 33.9C47.9438 31.3406 47.9719 30.525 47.9719 24.0094C47.9719 17.4938 47.9438 16.6781 47.8313 14.1188C47.7188 11.5688 47.3063 9.81563 46.7156 8.29688C46.125 6.70312 45.3094 5.3625 43.9688 4.03125C42.6375 2.7 41.2969 1.875 39.7219 1.26562C38.1938 0.675 36.45 0.2625 33.9 0.15C31.3313 0.028125 30.5156 0 24 0Z"
@ -65,7 +65,7 @@
</defs>
</svg>
</a>
<a href="https://github.com/fsr" class="d-flex align-items-center">
<a href="https://github.com/fsr" class="d-flex align-items-center" aria-label="iFSR auf GitHub">
<svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_910_44)">
<path fill-rule="evenodd" clip-rule="evenodd"
@ -79,7 +79,7 @@
</defs>
</svg>
</a>
<a href="https://t.me/s/ifsrde" class="d-flex align-items-center">
<a href="https://t.me/s/ifsrde" class="d-flex align-items-center" aria-label="iFSR auf Telegram">
<svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_318_75)">
<path fill-rule="evenodd" clip-rule="evenodd"
@ -93,7 +93,7 @@
</defs>
</svg>
</a>
<a href="https://toot.kif.rocks/@iFSR" class="d-flex align-items-center">
<a href="https://toot.kif.rocks/@iFSR" class="d-flex align-items-center" aria-label="iFSR auf Mastodon">
<svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M46.7806 10.4922C46.0881 5.40012 41.6015 1.38719 36.2829 0.609589C35.3856 0.478192 31.9859 0 24.1104 0H24.0516C16.174 0 14.4839 0.478192 13.5867 0.609589C8.4162 1.36565 3.69444 4.97148 2.54884 10.1239C1.99783 12.6613 1.93902 15.4745 2.04138 18.055C2.18731 21.7556 2.21562 25.4497 2.55538 29.1353C2.79026 31.5834 3.20001 34.012 3.78156 36.4029C4.87053 40.8186 9.27868 44.4934 13.5975 45.9926C18.2215 47.5561 23.1942 47.8156 27.9589 46.7422C28.483 46.6216 29.0014 46.4815 29.5139 46.3222C30.6704 45.9582 32.0273 45.551 33.0248 44.8359C33.0384 44.8258 33.0497 44.8129 33.0576 44.798C33.0655 44.7831 33.0699 44.7665 33.0705 44.7497V41.1784C33.0702 41.1627 33.0664 41.1472 33.0594 41.1331C33.0523 41.119 33.0421 41.1066 33.0296 41.0969C33.0171 41.0872 33.0025 41.0804 32.987 41.0769C32.9714 41.0735 32.9553 41.0736 32.9398 41.0771C29.8871 41.7983 26.7589 42.1598 23.6204 42.1541C18.2191 42.1541 16.7664 39.6189 16.3504 38.5634C16.0161 37.6512 15.8037 36.6997 15.7188 35.733C15.718 35.7168 15.721 35.7006 15.7276 35.6857C15.7343 35.6709 15.7444 35.6577 15.7571 35.6475C15.7699 35.6372 15.7849 35.63 15.8009 35.6266C15.817 35.623 15.8336 35.6234 15.8495 35.6275C18.8513 36.3438 21.9285 36.7053 25.0165 36.7045C25.7591 36.7045 26.4996 36.7045 27.2423 36.6851C30.3481 36.599 33.6215 36.4417 36.6771 35.8515C36.7534 35.8364 36.8296 35.8235 36.895 35.8041C41.7147 34.8886 46.3014 32.0152 46.7675 24.7389C46.785 24.4524 46.8285 21.7383 46.8285 21.4411C46.8307 20.4309 47.1574 14.2747 46.7806 10.4922ZM39.3625 28.6485H34.2945V16.3705C34.2945 13.7857 33.2055 12.4675 30.9905 12.4675C28.5556 12.4675 27.336 14.027 27.336 17.1072V23.8277H22.2984V17.1072C22.2984 14.027 21.0766 12.4675 18.6417 12.4675C16.4397 12.4675 15.3399 13.7857 15.3377 16.3705V28.6485H10.274V15.9979C10.274 13.4131 10.9412 11.3596 12.2755 9.83738C13.652 8.31881 15.4575 7.53909 17.6986 7.53909C20.2925 7.53909 22.2527 8.52558 23.5594 10.4966L24.8205 12.5903L26.0837 10.4966C27.3904 8.52558 29.3506 7.53909 31.9402 7.53909C34.1791 7.53909 35.9845 8.31881 37.3654 9.83738C38.6998 11.3581 39.3669 13.4116 39.3669 15.9979L39.3625 28.6485Z"
fill="currentColor"/>