60 lines
2.9 KiB
HTML
60 lines
2.9 KiB
HTML
|
<div class="person-nav-container" style="display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 15px 0 30px;">
|
||
|
|
{{ if eq .Section "personen" }}
|
||
|
|
<a href="/" class="person-back">
|
||
|
|
← ZURÜCK ZUR BASIS
|
||
|
|
</a>
|
||
|
|
{{ end }}
|
||
|
|
|
||
|
|
<div class="person-nav-row" style="display: flex; justify-content: center; align-items: center; gap: 35px; flex-wrap: wrap; position: relative;">
|
||
|
|
{{ $persons := slice "mutti" "vater" "bruder" "schwester" "sascha" "sven" }}
|
||
|
|
{{ range $persons }}
|
||
|
|
{{ $id := . }}
|
||
|
|
{{ $name := . | upper }}
|
||
|
|
{{ $img := "" }}
|
||
|
|
{{ if eq $id "mutti" }}{{ $img = "/img/comicFigures/hp_mutti_comic_1.jpeg" }}{{ end }}
|
||
|
|
{{ if eq $id "bruder" }}{{ $img = "/img/comicFigures/hp_freddy_comic_1.png" }}{{ end }}
|
||
|
|
{{ if eq $id "sascha" }}{{ $img = "/img/comicFigures/hp_sascha_comic_1.jpeg" }}{{ end }}
|
||
|
|
{{ if eq $id "sven" }}{{ $img = "/img/comicFigures/hp_sven_comic_1.jpeg" }}{{ end }}
|
||
|
|
{{ if eq $id "vater" }}{{ $img = "/img/comicFigures/hp_vater_comic_1.png" }}{{ end }}
|
||
|
|
{{ if eq $id "schwester" }}{{ $img = "/img/comicFigures/hp_meli_comic_1.png" }}{{ end }}
|
||
|
|
|
||
|
|
<a href="/personen/{{ $id }}/" class="person-nav-item">
|
||
|
|
<div class="person-nav-portrait" style="width: 90px; height: 90px; border-radius: 50%; border: 2px solid #d4af37; background: #222; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #d4af37; font-weight: bold; font-size: 1.2rem; box-shadow: 0 0 10px rgba(212,175,55,0.2);">
|
||
|
|
{{ if $img }}
|
||
|
|
<img src="{{ $img }}" alt="{{ $name }}" style="width: 100%; height: 100%; object-fit: cover;">
|
||
|
|
{{ else }}
|
||
|
|
{{ substr $name 0 1 }}
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
<span class="person-nav-label" style="margin-top: 8px; font-size: 0.85rem; letter-spacing: 1px; color: rgba(212,175,55,0.6); font-family: 'Courier New', monospace; font-weight: bold;">{{ $name }}</span>
|
||
|
|
</a>
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.person-nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; transition: transform 0.2s; }
|
||
|
|
.person-nav-item:hover { transform: scale(1.1); }
|
||
|
|
.person-nav-item:hover .person-nav-label { color: #d4af37 !important; }
|
||
|
|
.person-back {
|
||
|
|
display: inline-block;
|
||
|
|
color: rgba(212,175,55,0.6);
|
||
|
|
font-size: 0.7rem;
|
||
|
|
font-weight: bold;
|
||
|
|
letter-spacing: 4px;
|
||
|
|
text-decoration: none;
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
border: 1px solid rgba(212,175,55,0.25);
|
||
|
|
padding: 6px 20px;
|
||
|
|
background: transparent;
|
||
|
|
text-transform: uppercase;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
.person-back:hover {
|
||
|
|
color: #d4af37;
|
||
|
|
border-color: rgba(212,175,55,0.6);
|
||
|
|
background: rgba(212,175,55,0.05);
|
||
|
|
letter-spacing: 5px;
|
||
|
|
}
|
||
|
|
</style>
|