Viel
This commit is contained in:
lucashahmann committed
1 parent
e5869dc6cb
commit
a4a261f871
47 files changed
+1113
-143
No files matched your search
@@ -67,3 +67,7 @@ bower_components
|
|||||||
# AWS stuff for publishing static files
|
# AWS stuff for publishing static files
|
||||||
.aws-credentials.json
|
.aws-credentials.json
|
||||||
.awspublish*
|
.awspublish*
|
||||||
|
|
||||||
|
# Hugo-Bildcache
|
||||||
|
resources/_gen/
|
||||||
|
.hugo_build.lock
|
||||||
@@ -0,0 +1,669 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
Deepwater Survival
|
||||||
|
Farben aus Logo (Blitz-Gelb, Survival-Rot) und Bühnenlicht (Tiefsee-Navy).
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Big Shoulders Display";
|
||||||
|
src: url("/fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2");
|
||||||
|
font-weight: 800;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Big Shoulders Display";
|
||||||
|
src: url("/fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2");
|
||||||
|
font-weight: 900;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Archivo";
|
||||||
|
src: url("/fonts/archivo-latin-400-normal.woff2") format("woff2");
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Archivo";
|
||||||
|
src: url("/fonts/archivo-latin-400-italic.woff2") format("woff2");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Archivo";
|
||||||
|
src: url("/fonts/archivo-latin-600-normal.woff2") format("woff2");
|
||||||
|
font-weight: 600;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--deep: #081226; /* Tiefsee, Grundfläche */
|
||||||
|
--deep-2: #0f1f42; /* etwas heller, Flächen */
|
||||||
|
--line: #22386a; /* Linien */
|
||||||
|
--bolt: #fff200; /* Blitz aus dem Logo */
|
||||||
|
--red: #e5232b; /* "Survival"-Rot, nur groß einsetzen */
|
||||||
|
--foam: #eef1f6; /* Text, Plakatpapier */
|
||||||
|
--mist: #9fb0cf; /* Nebentext */
|
||||||
|
|
||||||
|
--font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
|
||||||
|
--font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
|
||||||
|
--wrap: 72rem;
|
||||||
|
--gutter: clamp(1rem, 4vw, 2.5rem);
|
||||||
|
--slant: clamp(2rem, 6vw, 5rem); /* Schräge im Winkel des Blitzes */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Grundlagen ---------- */
|
||||||
|
|
||||||
|
*, *::before, *::after { box-sizing: border-box; }
|
||||||
|
|
||||||
|
html {
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
scroll-padding-top: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--deep);
|
||||||
|
color: var(--foam);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
img { max-width: 100%; height: auto; display: block; }
|
||||||
|
|
||||||
|
a { color: inherit; }
|
||||||
|
|
||||||
|
h1, h2, h3, h4 { margin: 0; line-height: 1.05; }
|
||||||
|
|
||||||
|
p { margin: 0 0 1em; }
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
outline: 3px solid var(--bolt);
|
||||||
|
outline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection { background: var(--bolt); color: var(--deep); }
|
||||||
|
|
||||||
|
.skip-link {
|
||||||
|
position: absolute;
|
||||||
|
left: 1rem;
|
||||||
|
top: -4rem;
|
||||||
|
z-index: 100;
|
||||||
|
padding: .6rem 1rem;
|
||||||
|
background: var(--bolt);
|
||||||
|
color: var(--deep);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.skip-link:focus { top: 1rem; }
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--wrap);
|
||||||
|
margin-inline: auto;
|
||||||
|
padding-inline: var(--gutter);
|
||||||
|
}
|
||||||
|
.wrap--narrow { max-width: 48rem; }
|
||||||
|
|
||||||
|
.display {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 900;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .01em;
|
||||||
|
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||||
|
line-height: .95;
|
||||||
|
}
|
||||||
|
.display--l { font-size: clamp(2.75rem, 8vw, 5rem); }
|
||||||
|
.display--xl { font-size: clamp(3.75rem, 14vw, 9rem); line-height: .85; }
|
||||||
|
|
||||||
|
/* ---------- Buttons & Links ---------- */
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 3rem;
|
||||||
|
padding: .55rem 1.4rem .5rem;
|
||||||
|
border: 2px solid var(--bolt);
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
letter-spacing: .03em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color .15s, color .15s;
|
||||||
|
}
|
||||||
|
.button--bolt { background: var(--bolt); color: var(--deep); }
|
||||||
|
.button--bolt:hover { background: var(--foam); border-color: var(--foam); }
|
||||||
|
.button--ghost { background: transparent; color: var(--bolt); }
|
||||||
|
.button--ghost:hover { background: var(--bolt); color: var(--deep); }
|
||||||
|
|
||||||
|
.text-link {
|
||||||
|
color: var(--bolt);
|
||||||
|
font-weight: 600;
|
||||||
|
text-underline-offset: .25em;
|
||||||
|
}
|
||||||
|
.text-link:hover { color: var(--foam); }
|
||||||
|
|
||||||
|
/* ---------- Header ---------- */
|
||||||
|
|
||||||
|
.site-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background: rgba(8, 18, 38, .88);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header__inner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: var(--wrap);
|
||||||
|
margin-inline: auto;
|
||||||
|
padding: .6rem var(--gutter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header__logo img { width: auto; height: 2.75rem; }
|
||||||
|
|
||||||
|
.site-nav { display: flex; gap: clamp(1rem, 3vw, 2.25rem); }
|
||||||
|
|
||||||
|
.site-nav a {
|
||||||
|
position: relative;
|
||||||
|
padding: .35rem 0;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
letter-spacing: .04em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--foam);
|
||||||
|
}
|
||||||
|
.site-nav a::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 3px;
|
||||||
|
background: var(--bolt);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: left;
|
||||||
|
transition: transform .2s;
|
||||||
|
}
|
||||||
|
.site-nav a:hover { color: var(--bolt); }
|
||||||
|
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
|
||||||
|
|
||||||
|
@media (max-width: 34rem) {
|
||||||
|
.site-header__inner { flex-direction: column; gap: .25rem; padding-block: .5rem .25rem; }
|
||||||
|
.site-header__logo img { height: 2.25rem; }
|
||||||
|
.site-nav { gap: 1.5rem; }
|
||||||
|
.site-nav a { font-size: 1.25rem; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Hero ---------- */
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
min-height: min(92vh, 60rem);
|
||||||
|
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
@supports (min-height: 1svh) {
|
||||||
|
.hero { min-height: min(92svh, 60rem); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__media { position: absolute; inset: 0; }
|
||||||
|
|
||||||
|
.hero__media img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: 50% 60%;
|
||||||
|
}
|
||||||
|
.hero__media::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(to top, rgba(8, 18, 38, .95) 0%, rgba(8, 18, 38, .55) 40%, rgba(8, 18, 38, .1) 75%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--wrap);
|
||||||
|
margin-inline: auto;
|
||||||
|
padding: 6rem var(--gutter) calc(var(--slant) + 3rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__logo { margin: 0 0 1.25rem; }
|
||||||
|
.hero__logo img { width: min(100%, 52rem); }
|
||||||
|
|
||||||
|
.hero__tagline {
|
||||||
|
max-width: 30ch;
|
||||||
|
margin-bottom: 1.75rem;
|
||||||
|
font-size: clamp(1.15rem, 2.4vw, 1.5rem);
|
||||||
|
line-height: 1.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
|
||||||
|
|
||||||
|
/* Der eine Auftritt: Licht an, Logo rein. */
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
.hero__media img { animation: lights-up 1.6s ease-out both; }
|
||||||
|
.hero__logo { animation: logo-in .9s .5s cubic-bezier(.2, .8, .2, 1) both; }
|
||||||
|
@keyframes lights-up {
|
||||||
|
from { opacity: 0; transform: scale(1.04); }
|
||||||
|
to { opacity: 1; transform: none; }
|
||||||
|
}
|
||||||
|
@keyframes logo-in {
|
||||||
|
from { opacity: 0; transform: translateY(1rem); }
|
||||||
|
to { opacity: 1; transform: none; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Intro (Startseite) ---------- */
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem 4rem;
|
||||||
|
padding-block: clamp(3rem, 8vw, 6rem);
|
||||||
|
}
|
||||||
|
@media (min-width: 56rem) {
|
||||||
|
.intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
|
||||||
|
.intro__head { position: sticky; top: 6rem; align-self: start; }
|
||||||
|
}
|
||||||
|
.intro .display { font-size: clamp(3rem, 9vw, 6.5rem); line-height: .85; }
|
||||||
|
|
||||||
|
/* ---------- Fließtext ---------- */
|
||||||
|
|
||||||
|
.prose { max-width: 65ch; }
|
||||||
|
.prose p { color: #d6dded; }
|
||||||
|
.prose strong { color: var(--foam); font-weight: 600; }
|
||||||
|
.prose a { color: var(--bolt); text-underline-offset: .2em; }
|
||||||
|
.prose a:hover { color: var(--foam); }
|
||||||
|
.prose ul { padding-left: 1.25rem; }
|
||||||
|
.prose li { margin-bottom: .5em; color: #d6dded; }
|
||||||
|
|
||||||
|
.prose--legal { overflow-wrap: anywhere; font-size: 1rem; }
|
||||||
|
.prose--legal h2 {
|
||||||
|
margin: 3rem 0 1rem;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 2.25rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.prose--legal h3 { margin: 2rem 0 .75rem; font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
|
||||||
|
.prose--legal h4 { margin: 1.5rem 0 .5rem; font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--mist); }
|
||||||
|
|
||||||
|
/* ---------- Seitenköpfe ---------- */
|
||||||
|
|
||||||
|
.page-head { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2rem, 5vw, 3rem); }
|
||||||
|
.page-head--compact { padding-inline: 0; }
|
||||||
|
.page-head__lead {
|
||||||
|
max-width: 40rem;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--mist);
|
||||||
|
}
|
||||||
|
.page-head__lead p:last-child { margin-bottom: 0; }
|
||||||
|
|
||||||
|
.section-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Plakatwand ---------- */
|
||||||
|
|
||||||
|
.live { padding-bottom: clamp(4rem, 10vw, 7rem); }
|
||||||
|
.live__empty { max-width: 46ch; font-size: 1.15rem; color: var(--mist); margin-bottom: 2.5rem; }
|
||||||
|
.live__empty a { color: var(--bolt); }
|
||||||
|
.live__sub {
|
||||||
|
margin-bottom: 1.75rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--mist);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flyer-wall {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
|
||||||
|
gap: 3rem 2rem;
|
||||||
|
padding-top: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flyer {
|
||||||
|
position: relative;
|
||||||
|
padding: .55rem .55rem 1rem;
|
||||||
|
background: var(--foam);
|
||||||
|
color: var(--deep);
|
||||||
|
box-shadow: 0 1.25rem 2rem -1rem rgba(0, 0, 0, .7);
|
||||||
|
transform: rotate(var(--tilt, -1deg));
|
||||||
|
transition: transform .2s ease-out;
|
||||||
|
}
|
||||||
|
.flyer:nth-child(3n + 2) { --tilt: 1.2deg; }
|
||||||
|
.flyer:nth-child(3n + 3) { --tilt: -.4deg; }
|
||||||
|
.flyer:nth-child(4n + 4) { --tilt: 1.8deg; }
|
||||||
|
.flyer:hover,
|
||||||
|
.flyer:focus-within { transform: rotate(0) translateY(-.25rem); }
|
||||||
|
|
||||||
|
/* Gaffa-Tape in Blitz-Gelb */
|
||||||
|
.flyer::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -.8rem;
|
||||||
|
left: 50%;
|
||||||
|
z-index: 1;
|
||||||
|
width: 5rem;
|
||||||
|
height: 1.6rem;
|
||||||
|
margin-left: -2.5rem;
|
||||||
|
background: rgba(255, 242, 0, .82);
|
||||||
|
transform: rotate(calc(var(--tilt, -1deg) * -3));
|
||||||
|
clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 45%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flyer__poster {
|
||||||
|
display: block;
|
||||||
|
aspect-ratio: 4 / 5;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--deep-2);
|
||||||
|
}
|
||||||
|
.flyer__poster img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
|
||||||
|
|
||||||
|
.flyer__poster--type {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--deep);
|
||||||
|
color: var(--bolt);
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 2.25rem;
|
||||||
|
line-height: .9;
|
||||||
|
text-transform: uppercase;
|
||||||
|
hyphens: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flyer__caption { padding: .9rem .35rem 0; }
|
||||||
|
.flyer__caption time { font-size: .9rem; font-weight: 600; }
|
||||||
|
.flyer__caption h3 {
|
||||||
|
margin: .15rem 0 .2rem;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
line-height: .95;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.flyer__caption p { margin: 0; font-size: .95rem; color: #3b4a6b; }
|
||||||
|
|
||||||
|
@media (max-width: 34rem) {
|
||||||
|
.flyer-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1rem; }
|
||||||
|
.flyer { padding: .4rem .4rem .75rem; }
|
||||||
|
.flyer::before { width: 3.5rem; margin-left: -1.75rem; height: 1.25rem; top: -.65rem; }
|
||||||
|
.flyer__caption { padding-inline: .2rem; }
|
||||||
|
.flyer__caption time,
|
||||||
|
.flyer__caption p { font-size: .8rem; }
|
||||||
|
.flyer__caption h3 { font-size: 1.3rem; }
|
||||||
|
.flyer__poster--type { font-size: 1.5rem; padding: .6rem; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Shows-Seite ---------- */
|
||||||
|
|
||||||
|
.shows-block { padding-bottom: clamp(3rem, 8vw, 5rem); }
|
||||||
|
.shows-block > .display { margin-bottom: 2rem; }
|
||||||
|
|
||||||
|
.year-group {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem 3rem;
|
||||||
|
padding: 2.5rem 0;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.year-group__year {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: clamp(4rem, 12vw, 6rem);
|
||||||
|
line-height: .8;
|
||||||
|
color: var(--red);
|
||||||
|
}
|
||||||
|
@media (min-width: 56rem) {
|
||||||
|
.year-group { grid-template-columns: 14rem minmax(0, 1fr); }
|
||||||
|
.year-group__year { position: sticky; top: 6rem; align-self: start; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Band ---------- */
|
||||||
|
|
||||||
|
.members {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 2.5rem clamp(1rem, 3vw, 2rem);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
@media (min-width: 56rem) {
|
||||||
|
.members { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||||
|
.member:nth-child(even) { margin-top: 4rem; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.member__photo { aspect-ratio: 2 / 3; overflow: hidden; background: var(--deep-2); }
|
||||||
|
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
.member__name {
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: clamp(2rem, 5vw, 3rem);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.member__role { margin: .25rem 0 0; color: var(--mist); }
|
||||||
|
|
||||||
|
.group-photo {
|
||||||
|
margin: clamp(4rem, 10vw, 7rem) 0 0;
|
||||||
|
clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
|
||||||
|
}
|
||||||
|
.group-photo img { width: 100%; }
|
||||||
|
|
||||||
|
/* ---------- Musik ---------- */
|
||||||
|
|
||||||
|
.release {
|
||||||
|
display: grid;
|
||||||
|
gap: 2.5rem 4rem;
|
||||||
|
padding-bottom: clamp(3rem, 8vw, 5rem);
|
||||||
|
}
|
||||||
|
@media (min-width: 56rem) {
|
||||||
|
.release { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
|
||||||
|
}
|
||||||
|
.release__kind { margin-bottom: .5rem; color: var(--mist); font-weight: 600; }
|
||||||
|
.release__title {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: clamp(4rem, 12vw, 8rem);
|
||||||
|
line-height: .82;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--bolt);
|
||||||
|
}
|
||||||
|
.release__text { max-width: 40ch; margin: 1.5rem 0 2rem; font-size: 1.15rem; }
|
||||||
|
|
||||||
|
.spotify {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
min-height: 352px;
|
||||||
|
padding: 2rem;
|
||||||
|
border: 2px solid var(--line);
|
||||||
|
background: var(--deep-2);
|
||||||
|
}
|
||||||
|
.spotify__note { max-width: 38ch; margin: 0; color: var(--mist); font-size: .95rem; }
|
||||||
|
.spotify__note a,
|
||||||
|
.spotify__direct { color: var(--foam); }
|
||||||
|
.spotify iframe { display: block; width: 100%; border: 0; }
|
||||||
|
.spotify.is-loaded { padding: 0; border: 0; background: none; }
|
||||||
|
|
||||||
|
.singles { padding-bottom: clamp(3rem, 8vw, 5rem); }
|
||||||
|
.singles > .display { margin-bottom: 1.5rem; }
|
||||||
|
|
||||||
|
.tracklist {
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
counter-reset: track;
|
||||||
|
}
|
||||||
|
.tracklist li {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: .9rem 0;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
counter-increment: track;
|
||||||
|
}
|
||||||
|
.tracklist li::before {
|
||||||
|
content: counter(track);
|
||||||
|
min-width: 1.5rem;
|
||||||
|
color: var(--mist);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.tracklist__title {
|
||||||
|
flex: 1;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.tracklist__year { color: var(--mist); font-variant-numeric: tabular-nums; }
|
||||||
|
|
||||||
|
.elsewhere { padding-bottom: clamp(4rem, 10vw, 7rem); }
|
||||||
|
.elsewhere > .display { margin-bottom: 1.5rem; }
|
||||||
|
.elsewhere__list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.elsewhere__list a {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
padding: 1.25rem 1.25rem 1.4rem;
|
||||||
|
border: 2px solid var(--line);
|
||||||
|
color: var(--mist);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: border-color .15s;
|
||||||
|
}
|
||||||
|
.elsewhere__list a:hover { border-color: var(--bolt); }
|
||||||
|
.elsewhere__list strong {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: .3rem;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 2rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--foam);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Booking-Band ---------- */
|
||||||
|
|
||||||
|
.booking {
|
||||||
|
margin-top: calc(var(--slant) * -.5);
|
||||||
|
padding: calc(var(--slant) + 3rem) 0 clamp(3.5rem, 8vw, 5rem);
|
||||||
|
background: var(--bolt);
|
||||||
|
color: var(--deep);
|
||||||
|
clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
|
||||||
|
}
|
||||||
|
.booking .display { font-size: clamp(3rem, 10vw, 7rem); line-height: .85; }
|
||||||
|
.booking p { margin: 1rem 0 .5rem; font-size: 1.15rem; }
|
||||||
|
.booking__mail {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: clamp(1.6rem, 6.5vw, 4rem);
|
||||||
|
line-height: 1.1;
|
||||||
|
color: var(--deep);
|
||||||
|
text-decoration-thickness: .08em;
|
||||||
|
text-underline-offset: .12em;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
.booking__mail:hover { color: var(--red); }
|
||||||
|
.booking :focus-visible { outline-color: var(--deep); }
|
||||||
|
|
||||||
|
/* ---------- Footer ---------- */
|
||||||
|
|
||||||
|
.site-footer {
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
color: var(--mist);
|
||||||
|
font-size: .95rem;
|
||||||
|
}
|
||||||
|
.is-home .site-footer { border-top: 0; }
|
||||||
|
|
||||||
|
.site-footer__inner,
|
||||||
|
.site-footer__legal {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1.5rem;
|
||||||
|
max-width: var(--wrap);
|
||||||
|
margin-inline: auto;
|
||||||
|
padding: 2.5rem var(--gutter);
|
||||||
|
}
|
||||||
|
.site-footer__legal {
|
||||||
|
padding-block: 1.25rem 2rem;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.site-footer__legal p { margin: 0; }
|
||||||
|
.site-footer__legal a + a { margin-left: 1.25rem; }
|
||||||
|
|
||||||
|
.site-footer__lead { margin: 0 0 .25rem; }
|
||||||
|
.site-footer__mail {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: clamp(1.5rem, 4vw, 2.25rem);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--foam);
|
||||||
|
text-decoration: none;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
.site-footer__mail:hover { color: var(--bolt); }
|
||||||
|
|
||||||
|
.site-footer__social { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
|
||||||
|
.site-footer a { color: var(--foam); }
|
||||||
|
.site-footer__social a {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.site-footer__social a:hover,
|
||||||
|
.site-footer__legal a:hover { color: var(--bolt); }
|
||||||
|
|
||||||
|
/* ---------- Sonstiges ---------- */
|
||||||
|
|
||||||
|
.plain-list { padding-left: 1.25rem; }
|
||||||
|
.plain-list a { color: var(--bolt); }
|
||||||
|
|
||||||
|
.notfound { padding-block: clamp(4rem, 12vw, 8rem); }
|
||||||
|
.notfound p { margin: 1.5rem 0 2rem; font-size: 1.2rem; color: var(--mist); }
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*, *::before, *::after { transition: none !important; animation: none !important; }
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
// Spotify-Player erst nach Klick laden, damit vorher keine Daten an Spotify gehen.
|
||||||
|
document.querySelectorAll("[data-spotify-load]").forEach(function (button) {
|
||||||
|
button.addEventListener("click", function () {
|
||||||
|
var box = button.closest("[data-spotify-src]");
|
||||||
|
var iframe = document.createElement("iframe");
|
||||||
|
iframe.src = box.getAttribute("data-spotify-src");
|
||||||
|
iframe.height = "352";
|
||||||
|
iframe.title = "Deepwater Survival auf Spotify";
|
||||||
|
iframe.allow = "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture";
|
||||||
|
iframe.loading = "lazy";
|
||||||
|
box.replaceChildren(iframe);
|
||||||
|
box.classList.add("is-loaded");
|
||||||
|
iframe.focus();
|
||||||
|
});
|
||||||
|
});
|
||||||
+4
-15
@@ -135,24 +135,13 @@ Die von Ihnen an uns per Kontaktanfragen übersandten Daten verbleiben bei uns,
|
|||||||
|
|
||||||
## 5. Plugins und Tools
|
## 5. Plugins und Tools
|
||||||
|
|
||||||
### Google Fonts
|
### Schriftarten
|
||||||
Diese Seite nutzt zur einheitlichen Darstellung von Schriftarten so genannte Google Fonts, die von Google bereitgestellt werden. Beim Aufruf einer Seite lädt Ihr Browser die benötigten Fonts in ihren Browsercache, um Texte und Schriftarten korrekt anzuzeigen.
|
Die auf dieser Website verwendeten Schriftarten werden lokal von unserem eigenen Server geladen. Es findet dabei keine Verbindung zu Servern Dritter (z. B. Google) statt.
|
||||||
|
|
||||||
Zu diesem Zweck muss der von Ihnen verwendete Browser Verbindung zu den Servern von Google aufnehmen. Hierdurch erlangt Google Kenntnis darüber, dass über Ihre IP-Adresse diese Website aufgerufen wurde. Die Nutzung von Google Fonts erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. Der Websitebetreiber hat ein berechtigtes Interesse an der einheitlichen Darstellung des Schriftbildes auf seiner Website. Sofern eine entsprechende Einwilligung abgefragt wurde, erfolgt die Verarbeitung ausschließlich auf Grundlage von Art. 6 Abs. 1 lit. a DSGVO und § 25 Abs. 1 TDDDG, soweit die Einwilligung die Speicherung von Cookies oder den Zugriff auf Informationen im Endgerät des Nutzers (z. B. Device-Fingerprinting) im Sinne des TDDDG umfasst. Die Einwilligung ist jederzeit widerrufbar.
|
|
||||||
|
|
||||||
Wenn Ihr Browser Google Fonts nicht unterstützt, wird eine Standardschrift von Ihrem Computer genutzt.
|
|
||||||
|
|
||||||
Weitere Informationen zu Google Fonts finden Sie unter [https://developers.google.com/fonts/faq](https://developers.google.com/fonts/faq) und in der Datenschutzerklärung von Google: [https://policies.google.com/privacy?hl=de](https://policies.google.com/privacy?hl=de
|
|
||||||
|
|
||||||
Das Unternehmen verfügt über eine Zertifizierung nach dem „EU-US Data Privacy Framework“ (DPF). Der
|
|
||||||
DPF ist ein Übereinkommen zwischen der Europäischen Union und den USA, der die Einhaltung
|
|
||||||
europäischer Datenschutzstandards bei Datenverarbeitungen in den USA gewährleisten soll. Jedes nach
|
|
||||||
dem DPF zertifizierte Unternehmen verpflichtet sich, diese Datenschutzstandards einzuhalten. Weitere
|
|
||||||
Informationen hierzu erhalten Sie vom Anbieter unter folgendem Link:
|
|
||||||
https://www.dataprivacyframework.gov/participant/5780.
|
|
||||||
|
|
||||||
### Spotify
|
### Spotify
|
||||||
|
|
||||||
|
Der Spotify-Player wird erst geladen, wenn Sie ihn durch einen Klick auf „Spotify-Player laden“ aktiv anfordern. Vorher werden keine Daten an Spotify übertragen.
|
||||||
|
|
||||||
Auf dieser Website sind Funktionen des Musik-Dienstes Spotify eingebunden. Anbieter ist die Spotify AB,
|
Auf dieser Website sind Funktionen des Musik-Dienstes Spotify eingebunden. Anbieter ist die Spotify AB,
|
||||||
Birger Jarlsgatan 61, 113 56 Stockholm in Schweden. Die Spotify Plugins erkennen Sie an dem grünen Logo
|
Birger Jarlsgatan 61, 113 56 Stockholm in Schweden. Die Spotify Plugins erkennen Sie an dem grünen Logo
|
||||||
auf dieser Website. Eine Übersicht über die Spotify-Plugins finden Sie unter:
|
auf dieser Website. Eine Übersicht über die Spotify-Plugins finden Sie unter:
|
||||||
|
|||||||
@@ -5,13 +5,12 @@ layout: page
|
|||||||
url: "/impressum/"
|
url: "/impressum/"
|
||||||
---
|
---
|
||||||
|
|
||||||
Lucas Hahmann
|
**Lucas Hahmann**
|
||||||
|
|
||||||
Postfach 2002
|
Postfach 2002
|
||||||
Güterstr. 56
|
Güterstr. 56
|
||||||
54295 Trier
|
54295 Trier
|
||||||
|
|
||||||
E-Mail: <p>info [at] deepwatersurvival [dot] de</p>
|
E-Mail: info [at] deepwatersurvival [dot] de
|
||||||
|
|
||||||
|
|
||||||
## Disclaimer – rechtliche Hinweise
|
## Disclaimer – rechtliche Hinweise
|
||||||
|
|||||||
+9
-2
@@ -1,5 +1,12 @@
|
|||||||
---
|
---
|
||||||
title: "Home"
|
title: "Home"
|
||||||
|
tagline: "Punkrock aus Trier. Roh, laut und ehrlich."
|
||||||
|
headline: "Punk mit Haltung"
|
||||||
---
|
---
|
||||||
Willkommen auf der offiziellen Seite von **Deepwater Survival** – dreckiger, lauter Punk Rock.
|
Mit energiegeladenem Punkrock, ehrlichen Texten und unverblümter Direktheit meldet sich **Deepwater Survival** zurück. Die Band aus Trier spielt einen Sound, der roh, mitreißend und ehrlich ist – für alteingesessene Punkfans genauso wie für neue Hörer:innen.
|
||||||
```
|
|
||||||
|
Bevor 2025 das Debütalbum **„Ocean Tales“** erschien, kamen bereits die Singles „Chirus“ (2023), „Let It Go“ (2024), „Addiction“ und „My Own Home“ heraus. Die Songs sind fast unverändert auf dem Album gelandet und zeigen die musikalische und emotionale Bandbreite der Band.
|
||||||
|
|
||||||
|
Die Texte drehen sich um Identität, Zugehörigkeit, Abschied und Neuanfang. Die Musik lädt dazu ein, laut mitzusingen, nachzudenken und gemeinsam mit der Band ein Stück Erinnerung und Hoffnung zu teilen.
|
||||||
|
|
||||||
|
Klar, ungeschönt, direkt. Für alle, die Musik nicht nur hören, sondern fühlen wollen.
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
title: "Band"
|
||||||
|
url: "/about/"
|
||||||
|
layout: band
|
||||||
|
description: "Olly, Lucas, Ahrens und Felix sind Deepwater Survival – Punkrock aus Trier."
|
||||||
|
members:
|
||||||
|
- name: "Olly"
|
||||||
|
role: "Leadgitarre und Gesang"
|
||||||
|
image: "/img/about/Olly_compressed.jpg"
|
||||||
|
- name: "Lucas"
|
||||||
|
role: "Rhythmusgitarre"
|
||||||
|
image: "/img/about/Lucas_compressed.jpg"
|
||||||
|
- name: "Ahrens"
|
||||||
|
role: "Schlagzeug"
|
||||||
|
image: "/img/about/Ahrens_compressed.jpg"
|
||||||
|
- name: "Felix"
|
||||||
|
role: "Bass"
|
||||||
|
image: "/img/about/Felix_compressed.jpg"
|
||||||
|
groupImage: "/img/about/Gruppenbild_compressed.jpg"
|
||||||
|
---
|
||||||
|
Vier Leute, zwei Gitarren, ein Bass, ein Schlagzeug. Deepwater Survival sind Olly, Lucas, Ahrens und Felix aus Trier.
|
||||||
+13
-1
@@ -1,5 +1,17 @@
|
|||||||
---
|
---
|
||||||
title: "Musik"
|
title: "Musik"
|
||||||
|
description: "Das Debütalbum „Ocean Tales“ und alle Singles von Deepwater Survival."
|
||||||
|
album:
|
||||||
|
title: "Ocean Tales"
|
||||||
|
kind: "Debütalbum"
|
||||||
|
year: 2025
|
||||||
|
text: "Alle bisherigen Singles sind fast unverändert auf dem Album gelandet."
|
||||||
|
singles:
|
||||||
|
- title: "Chirus"
|
||||||
|
year: 2023
|
||||||
|
- title: "Let It Go"
|
||||||
|
year: 2024
|
||||||
|
- title: "Addiction"
|
||||||
|
- title: "My Own Home"
|
||||||
---
|
---
|
||||||
Unsere Releases, Singles und Alben.
|
Unsere Releases, Singles und Alben.
|
||||||
```
|
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: "Pink Future"
|
||||||
|
date: 2023-09-15
|
||||||
|
location: Skatehalle Trier West
|
||||||
|
poster: /img/shows/2023_Pink_Future_compressed.jpg
|
||||||
|
---
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: "Pink Future"
|
||||||
|
date: 2024-06-07
|
||||||
|
location: Palastgarten Trier
|
||||||
|
poster: /img/shows/2024_Pink_Future.jpeg
|
||||||
|
---
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: "Album Release Party"
|
||||||
|
date: 2025-07-18
|
||||||
|
location: Rothaus Trier
|
||||||
|
poster: /img/shows/2025_Album_Release_Party.jpeg
|
||||||
|
---
|
||||||
@@ -2,5 +2,5 @@
|
|||||||
title: "Bullenhitze"
|
title: "Bullenhitze"
|
||||||
date: 2025-08-30
|
date: 2025-08-30
|
||||||
location: Salmtal
|
location: Salmtal
|
||||||
poster: /img/shows/2025_Bullenhitze.jpg
|
poster: /img/shows/2025_Bullenhitze.jpeg
|
||||||
---
|
---
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: "Riez Kapellen-Contest"
|
||||||
|
date: 2025-02-01
|
||||||
|
location: Riez Rockbar, Bausendorf
|
||||||
|
poster: /img/shows/2025_Riez_Kapellenkontest_compressed.jpg
|
||||||
|
---
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: "Altstadtfest Trier"
|
||||||
|
date: 2026-06-28
|
||||||
|
location: Hauptmarkt Bühne
|
||||||
|
poster: /img/shows/2026_Altstadtfest.jpeg
|
||||||
|
---
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: "Halloween Rock"
|
||||||
|
date: 2026-10-31
|
||||||
|
location: Gutweiler
|
||||||
|
poster: /img/shows/2026_Haloween.jpeg
|
||||||
|
---
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: "Highway to Kell"
|
||||||
|
date: 2026-07-24
|
||||||
|
location: Kell
|
||||||
|
poster: /img/shows/2026_Highway_to_Kell.jpeg
|
||||||
|
---
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: "Lucky´s Luke"
|
||||||
|
date: 2026-05-30
|
||||||
|
location: Trier
|
||||||
|
poster: /img/shows/2026_Luke.jpeg
|
||||||
|
---
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
---
|
---
|
||||||
title: "Shows"
|
title: "Shows"
|
||||||
|
description: "Kommende Konzerte und alle bisherigen Shows von Deepwater Survival."
|
||||||
---
|
---
|
||||||
Hier findest du alle kommenden Live-Termine.
|
Hier findest du alle kommenden Live-Termine und die Plakate der letzten Jahre.
|
||||||
@@ -1,9 +1,49 @@
|
|||||||
title = "Deepwater Survival"
|
title = "Deepwater Survival"
|
||||||
baseURL = "https://www.deepwatersurvival.de/"
|
baseURL = "https://www.deepwatersurvival.de/"
|
||||||
theme = ""
|
|
||||||
languageCode = "de"
|
languageCode = "de"
|
||||||
[pagination]
|
defaultContentLanguage = "de"
|
||||||
pagerSize = 10
|
disableKinds = ["taxonomy", "term", "RSS"]
|
||||||
|
|
||||||
|
[params]
|
||||||
|
description = "Deepwater Survival – Punkrock aus Trier. Debütalbum „Ocean Tales“ jetzt überall, wo es Musik gibt."
|
||||||
|
email = "info@deepwatersurvival.de"
|
||||||
|
spotify = "https://open.spotify.com/artist/2TQ9HNBTNCmUthpg9ippHs"
|
||||||
|
spotifyEmbed = "https://open.spotify.com/embed/artist/2TQ9HNBTNCmUthpg9ippHs?utm_source=generator&theme=0"
|
||||||
|
instagram = "https://www.instagram.com/deepwatersurvival/"
|
||||||
|
youtube = "https://www.youtube.com/@deepwatersurvival730"
|
||||||
|
|
||||||
|
[[menu.main]]
|
||||||
|
name = "Home"
|
||||||
|
url = "/"
|
||||||
|
weight = 1
|
||||||
|
[[menu.main]]
|
||||||
|
name = "Band"
|
||||||
|
url = "/about/"
|
||||||
|
weight = 2
|
||||||
|
[[menu.main]]
|
||||||
|
name = "Shows"
|
||||||
|
url = "/shows/"
|
||||||
|
weight = 3
|
||||||
|
[[menu.main]]
|
||||||
|
name = "Musik"
|
||||||
|
url = "/music/"
|
||||||
|
weight = 4
|
||||||
|
|
||||||
[markup.goldmark.renderer]
|
[markup.goldmark.renderer]
|
||||||
unsafe = true # Allow HTML in md files
|
unsafe = true # Allow HTML in md files
|
||||||
|
|
||||||
|
[minify]
|
||||||
|
minifyOutput = true
|
||||||
|
|
||||||
|
# Bilder aus static/img zusätzlich als Hugo-Ressourcen bereitstellen,
|
||||||
|
# damit Templates verkleinerte WebP-Versionen erzeugen können.
|
||||||
|
[module]
|
||||||
|
[[module.mounts]]
|
||||||
|
source = "static"
|
||||||
|
target = "static"
|
||||||
|
[[module.mounts]]
|
||||||
|
source = "static/img"
|
||||||
|
target = "assets/img"
|
||||||
|
[[module.mounts]]
|
||||||
|
source = "assets"
|
||||||
|
target = "assets"
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{{ define "main" }}
|
||||||
|
<section class="wrap wrap--narrow notfound">
|
||||||
|
<h1 class="display display--xl">Abgesoffen</h1>
|
||||||
|
<p>Diese Seite gibt es nicht (mehr). Vielleicht hat sich der Link vertippt.</p>
|
||||||
|
<a class="button button--bolt" href="/">Zur Startseite</a>
|
||||||
|
</section>
|
||||||
|
{{ end }}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
{{ define "main" }}
|
||||||
|
<header class="page-head wrap">
|
||||||
|
<h1 class="display display--xl">{{ .Title }}</h1>
|
||||||
|
{{ with .Content }}<div class="page-head__lead">{{ . }}</div>{{ end }}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="wrap" aria-label="Bandmitglieder">
|
||||||
|
<ul class="members">
|
||||||
|
{{ range .Params.members }}
|
||||||
|
<li class="member">
|
||||||
|
<div class="member__photo">
|
||||||
|
{{ partial "img.html" (dict "src" .image "alt" (printf "%s live auf der Bühne" .name) "sizes" "(min-width: 900px) 25vw, 50vw" "widths" (slice 400 800)) }}
|
||||||
|
</div>
|
||||||
|
<h2 class="member__name">{{ .name }}</h2>
|
||||||
|
<p class="member__role">{{ .role }}</p>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{{ with .Params.groupImage }}
|
||||||
|
<figure class="group-photo">
|
||||||
|
{{ partial "img.html" (dict "src" . "alt" "Gruppenfoto von Deepwater Survival im Backstage-Flur" "sizes" "100vw" "widths" (slice 800 1400 2000)) }}
|
||||||
|
</figure>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
@@ -1,19 +1,37 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>{{ .Title }} | Deepwater Survival</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="/css/style.css">
|
{{ $title := cond .IsHome (printf "%s – Punkrock aus Trier" site.Title) (printf "%s | %s" .Title site.Title) -}}
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
{{ $desc := .Params.description | default site.Params.description -}}
|
||||||
</head>
|
<title>{{ $title }}</title>
|
||||||
|
<meta name="description" content="{{ $desc }}">
|
||||||
|
<meta name="theme-color" content="#081226">
|
||||||
|
<link rel="canonical" href="{{ .Permalink }}">
|
||||||
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||||
|
|
||||||
<body>
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="{{ $title }}">
|
||||||
|
<meta property="og:description" content="{{ $desc }}">
|
||||||
|
<meta property="og:url" content="{{ .Permalink }}">
|
||||||
|
<meta property="og:locale" content="de_DE">
|
||||||
|
{{ with resources.Get "img/AlbumReleaseParty_Stage_compressed.jpg" }}{{ with .Resize "1200x jpg q80" }}
|
||||||
|
<meta property="og:image" content="{{ .Permalink }}">{{ end }}{{ end }}
|
||||||
|
|
||||||
|
<link rel="preload" href="/fonts/big-shoulders-display-latin-900-normal.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/fonts/archivo-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
{{ $css := resources.Get "css/main.css" | minify | fingerprint }}
|
||||||
|
<link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
|
||||||
|
</head>
|
||||||
|
<body class="{{ if .IsHome }}is-home{{ end }}">
|
||||||
|
<a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
|
||||||
{{ partial "header.html" . }}
|
{{ partial "header.html" . }}
|
||||||
<main>
|
<main id="inhalt">
|
||||||
{{ block "main" . }}{{ end }}
|
{{ block "main" . }}{{ end }}
|
||||||
<div class="spacer"></div>
|
|
||||||
</main>
|
</main>
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
</body>
|
{{ $js := resources.Get "js/site.js" | minify | fingerprint }}
|
||||||
|
<script src="{{ $js.RelPermalink }}" defer></script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,8 +1,11 @@
|
|||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<h1>{{ .Title }}</h1>
|
<article class="wrap wrap--narrow">
|
||||||
<ul>
|
<header class="page-head page-head--compact">
|
||||||
{{ range .Pages }}
|
<h1 class="display display--l">{{ .Title }}</h1>
|
||||||
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
|
</header>
|
||||||
{{ end }}
|
{{ with .Content }}<div class="prose">{{ . }}</div>{{ end }}
|
||||||
</ul>
|
<ul class="plain-list">
|
||||||
|
{{ range .Pages }}<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>{{ end }}
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
@@ -1,6 +1,10 @@
|
|||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<article>
|
<article class="wrap wrap--narrow">
|
||||||
<h1>{{ .Title }}</h1>
|
<header class="page-head page-head--compact">
|
||||||
{{ .Content }}
|
<h1 class="display display--l">{{ .Title }}</h1>
|
||||||
|
</header>
|
||||||
|
<div class="prose prose--legal">
|
||||||
|
{{ .Content }}
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
+49
-20
@@ -1,27 +1,56 @@
|
|||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<section>
|
{{ $shows := where site.RegularPages "Section" "shows" }}
|
||||||
<link rel="stylesheet" href="/css/index.css">
|
{{ $upcoming := (where $shows "Date" "ge" now).ByDate }}
|
||||||
<div id="main_image">
|
{{ $past := first 3 (where $shows "Date" "lt" now).ByDate.Reverse }}
|
||||||
<img src="/img/AlbumReleaseParty_Stage_compressed.jpg" alt="" width="1000" height="667">
|
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero__media">
|
||||||
|
{{ partial "img.html" (dict "src" "/img/AlbumReleaseParty_Stage_compressed.jpg" "alt" "Deepwater Survival live bei der Album-Release-Party, Publikum vor der blau beleuchteten Bühne" "sizes" "100vw" "widths" (slice 800 1400 2000) "eager" true) }}
|
||||||
</div>
|
</div>
|
||||||
<section style="padding: 2rem; max-width: 800px; margin: auto; line-height: 1.6; ">
|
<div class="hero__content">
|
||||||
<h1 style="font-size: 2rem; margin-bottom: 1rem; text-align: center;">Deepwater Survival – Frischer Wind aus der deutschen Punk-Szene</h1>
|
<h1 class="hero__logo">
|
||||||
|
<img src="/img/logo-crop.png" alt="Deepwater Survival" width="1600" height="675">
|
||||||
<p>Mit energiegeladenem Punkrock, ehrlichen Texten und unverblümter Direktheit meldet sich <strong>Deepwater Survival</strong> zurück. Die Band aus Trier besticht durch einen Sound, der roh, mitreißend und ehrlich ist – und schafft es damit, sowohl alteingesessene Punkfans als auch neue Hörer:innen zu begeistern.</p>
|
</h1>
|
||||||
|
<p class="hero__tagline">{{ .Params.tagline }}</p>
|
||||||
<p>Bevor das Debütalbum <strong>„Ocean Tales“</strong> 2025 erschien, veröffentlichte die Band bereits eine Reihe kraftvoller Singles: <em>„Chirus“ (2023), „Let It Go“ (2024) sowie „Addiction“ und „My Own Home“</em>. Diese Songs, die fast unverändert auf dem Album zu finden sind, geben einen klaren Einblick in die musikalische und emotionale Bandbreite von Deepwater Survival.</p>
|
<div class="hero__actions">
|
||||||
|
<a class="button button--bolt" href="/music/">Ocean Tales anhören</a>
|
||||||
<p>Die Texte greifen Themen wie Identität, Zugehörigkeit, Abschied und Neuanfang auf – universelle Inhalte, die in der Hektik unserer Zeit für viele relevant sind. Die Musik von Deepwater Survival lädt dazu ein, laut mitzusingen, nachzudenken und gemeinsam mit der Band ein Stück Erinnerung und Hoffnung zu teilen.</p>
|
<a class="button button--ghost" href="/shows/">Live-Termine</a>
|
||||||
|
|
||||||
<p><strong>Deepwater Survival</strong> steht für Punk mit Haltung – klar, ungeschönt, direkt. Für alle, die Musik nicht nur hören, sondern fühlen wollen.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h2 style="text-align: center;">Intresse geweckt? Dann gerne hier melden: info@deepwatersurvival.de</h2>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div id="spotify_link">
|
<section class="intro wrap">
|
||||||
<iframe data-testid="embed-iframe" style="border-radius:12px" src="https://open.spotify.com/embed/artist/2TQ9HNBTNCmUthpg9ippHs?utm_source=generator&theme=0" width="40%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
|
<div class="intro__head">
|
||||||
|
<h2 class="display">{{ .Params.headline }}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="intro__body prose">
|
||||||
|
{{ .Content }}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="live wrap">
|
||||||
|
<header class="section-head">
|
||||||
|
<h2 class="display">Live</h2>
|
||||||
|
<a class="text-link" href="/shows/">Alle Shows</a>
|
||||||
|
</header>
|
||||||
|
{{ if $upcoming }}
|
||||||
|
<div class="flyer-wall">
|
||||||
|
{{ range $upcoming }}{{ partial "show-card.html" . }}{{ end }}
|
||||||
|
</div>
|
||||||
|
{{ else }}
|
||||||
|
<p class="live__empty">Gerade sind keine Termine angekündigt. Ihr wollt uns auf eurer Bühne? Schreibt an <a href="mailto:{{ site.Params.email }}">{{ site.Params.email }}</a>.</p>
|
||||||
|
<h3 class="live__sub">Zuletzt gespielt</h3>
|
||||||
|
<div class="flyer-wall">
|
||||||
|
{{ range $past }}{{ partial "show-card.html" . }}{{ end }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="booking">
|
||||||
|
<div class="wrap booking__inner">
|
||||||
|
<h2 class="display">Lust auf Lärm?</h2>
|
||||||
|
<p>Für Booking, Presse und alles andere erreicht ihr uns per Mail.</p>
|
||||||
|
<a class="booking__mail" href="mailto:{{ site.Params.email }}">{{ site.Params.email }}</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
{{ define "main" }}
|
||||||
|
<header class="page-head wrap">
|
||||||
|
<h1 class="display display--xl">{{ .Title }}</h1>
|
||||||
|
{{ with .Content }}<div class="page-head__lead">{{ . }}</div>{{ end }}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="wrap release">
|
||||||
|
{{ with .Params.album }}
|
||||||
|
<div class="release__album">
|
||||||
|
<p class="release__kind">{{ .kind }}, {{ .year }}</p>
|
||||||
|
<h2 class="release__title">{{ .title }}</h2>
|
||||||
|
{{ with .text }}<p class="release__text">{{ . }}</p>{{ end }}
|
||||||
|
<a class="button button--bolt" href="{{ site.Params.spotify }}" target="_blank" rel="noopener">Auf Spotify hören</a>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
<div class="release__player">
|
||||||
|
{{ partial "spotify.html" . }}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{{ with .Params.singles }}
|
||||||
|
<section class="wrap singles" aria-labelledby="singles">
|
||||||
|
<h2 id="singles" class="display">Singles</h2>
|
||||||
|
<ol class="tracklist">
|
||||||
|
{{ range . }}
|
||||||
|
<li>
|
||||||
|
<span class="tracklist__title">{{ .title }}</span>
|
||||||
|
{{ with .year }}<span class="tracklist__year">{{ . }}</span>{{ end }}
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<section class="wrap elsewhere" aria-labelledby="elsewhere">
|
||||||
|
<h2 id="elsewhere" class="display">Mehr von uns</h2>
|
||||||
|
<ul class="elsewhere__list">
|
||||||
|
<li><a href="{{ site.Params.spotify }}" target="_blank" rel="noopener"><strong>Spotify</strong> Alle Songs und das Album</a></li>
|
||||||
|
<li><a href="{{ site.Params.youtube }}" target="_blank" rel="noopener"><strong>YouTube</strong> Videos und Live-Mitschnitte</a></li>
|
||||||
|
<li><a href="{{ site.Params.instagram }}" target="_blank" rel="noopener"><strong>Instagram</strong> Neuigkeiten aus dem Proberaum</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
{{ end }}
|
||||||
@@ -1,18 +1,17 @@
|
|||||||
<link rel="stylesheet" href="/css/footer.css">
|
<footer class="site-footer">
|
||||||
|
<div class="site-footer__inner">
|
||||||
<footer id="site_footer">
|
<div class="site-footer__contact">
|
||||||
<div class="footer-container">
|
<p class="site-footer__lead">Booking, Presse, Fragen:</p>
|
||||||
<div class="footer-left">
|
<a class="site-footer__mail" href="mailto:{{ site.Params.email }}">{{ site.Params.email }}</a>
|
||||||
<p>© 2025 Deepwater Survival</p>
|
|
||||||
<p>
|
|
||||||
<a href="/impressum/" target="_self" rel="noopener">Impressum</a> |
|
|
||||||
<a href="/datenschutz/" target="_self" rel="noopener">Datenschutzerklärung</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-right">
|
<nav class="site-footer__social" aria-label="Social Media">
|
||||||
<a href="https://open.spotify.com/artist/2TQ9HNBTNCmUthpg9ippHs" target="_blank" rel="noopener">Spotify</a>
|
<a href="{{ site.Params.spotify }}" target="_blank" rel="noopener">Spotify</a>
|
||||||
<a href="https://www.instagram.com/deepwatersurvival/" target="_blank" rel="noopener">Instagram</a>
|
<a href="{{ site.Params.instagram }}" target="_blank" rel="noopener">Instagram</a>
|
||||||
<a href="https://www.youtube.com/@deepwatersurvival730" target="_blank" rel="noopener">YouTube</a>
|
<a href="{{ site.Params.youtube }}" target="_blank" rel="noopener">YouTube</a>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="site-footer__legal">
|
||||||
|
<p>© {{ now.Year }} Deepwater Survival</p>
|
||||||
|
<p><a href="/impressum/">Impressum</a> <a href="/datenschutz/">Datenschutz</a></p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
@@ -1,14 +1,14 @@
|
|||||||
<header>
|
{{ $current := . -}}
|
||||||
<link rel="stylesheet" href="/css/header.css">
|
<header class="site-header">
|
||||||
<div id="logo">
|
<div class="site-header__inner">
|
||||||
<img src="/img/Logo_compressed.png" alt="" height="218" width="600">
|
<a class="site-header__logo" href="/" aria-label="Deepwater Survival – Startseite">
|
||||||
</div>
|
<img src="/img/logo-crop.png" alt="Deepwater Survival" width="1600" height="675">
|
||||||
|
</a>
|
||||||
<nav id="main_navigation">
|
<nav class="site-nav" aria-label="Hauptnavigation">
|
||||||
<a href="/">Home</a>
|
{{ range site.Menus.main -}}
|
||||||
<a href="/about/">Über uns</a>
|
{{ $active := or (eq $current.RelPermalink .URL) (and (ne .URL "/") (hasPrefix $current.RelPermalink .URL)) -}}
|
||||||
<a href="/shows/">Shows</a>
|
<a href="{{ .URL }}"{{ if $active }} aria-current="page"{{ end }}>{{ .Name }}</a>
|
||||||
<a href="/music/">Musik</a>
|
{{ end -}}
|
||||||
</nav>
|
</nav>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
{{/*
|
||||||
|
Responsives Bild aus static/img (über assets/img gemountet).
|
||||||
|
Parameter: src (z. B. "/img/about/Olly_compressed.jpg"), alt, sizes, widths, class, eager
|
||||||
|
*/}}
|
||||||
|
{{- $src := .src -}}
|
||||||
|
{{- $alt := .alt | default "" -}}
|
||||||
|
{{- $sizes := .sizes | default "100vw" -}}
|
||||||
|
{{- $widths := .widths | default (slice 480 960 1600) -}}
|
||||||
|
{{- $loading := cond (.eager | default false) "eager" "lazy" -}}
|
||||||
|
{{- $r := resources.Get (strings.TrimPrefix "/" $src) -}}
|
||||||
|
{{- if and $r (in (slice ".jpg" ".jpeg" ".png") (lower (path.Ext $src))) -}}
|
||||||
|
{{- $set := slice -}}
|
||||||
|
{{- $fallback := "" -}}
|
||||||
|
{{- range $widths -}}
|
||||||
|
{{- if le . $r.Width -}}
|
||||||
|
{{- $img := $r.Resize (printf "%dx webp q78" .) -}}
|
||||||
|
{{- $set = $set | append (printf "%s %dw" $img.RelPermalink $img.Width) -}}
|
||||||
|
{{- $fallback = $img -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- if not $fallback -}}{{- $fallback = $r -}}{{- end -}}
|
||||||
|
<img src="{{ $fallback.RelPermalink }}"{{ with $set }} srcset="{{ delimit . ", " }}" sizes="{{ $sizes }}"{{ end }} width="{{ $r.Width }}" height="{{ $r.Height }}" alt="{{ $alt }}" loading="{{ $loading }}" decoding="async"{{ with $.class }} class="{{ . }}"{{ end }}>
|
||||||
|
{{- else -}}
|
||||||
|
<img src="{{ $src }}" alt="{{ $alt }}" loading="{{ $loading }}"{{ with .class }} class="{{ . }}"{{ end }}>
|
||||||
|
{{- end -}}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
{{- $r := "" -}}
|
||||||
|
{{- with .Params.poster }}{{ $r = resources.Get (strings.TrimPrefix "/" .) }}{{ end -}}
|
||||||
|
<article class="flyer{{ if not $r }} flyer--blank{{ end }}">
|
||||||
|
{{- if $r }}
|
||||||
|
<a class="flyer__poster" href="{{ .Params.poster }}" target="_blank" rel="noopener" aria-label="Plakat {{ .Title }} in voller Größe öffnen">
|
||||||
|
{{ partial "img.html" (dict "src" .Params.poster "alt" (printf "Plakat: %s" .Title) "sizes" "(min-width: 900px) 280px, 45vw" "widths" (slice 320 640)) }}
|
||||||
|
</a>
|
||||||
|
{{- else }}
|
||||||
|
<div class="flyer__poster flyer__poster--type" aria-hidden="true">
|
||||||
|
<span>{{ .Title }}</span>
|
||||||
|
</div>
|
||||||
|
{{- end }}
|
||||||
|
<div class="flyer__caption">
|
||||||
|
<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date | time.Format "2. January 2006" }}</time>
|
||||||
|
<h3>{{ .Title }}</h3>
|
||||||
|
{{ with .Params.location }}<p>{{ . }}</p>{{ end }}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
<div class="spotify" data-spotify-src="{{ site.Params.spotifyEmbed }}">
|
||||||
|
<p class="spotify__note">Der Player wird von Spotify geladen. Dabei werden Daten an Spotify übertragen (<a href="/datenschutz/">Datenschutz</a>).</p>
|
||||||
|
<button class="button button--bolt" type="button" data-spotify-load>Spotify-Player laden</button>
|
||||||
|
<a class="spotify__direct" href="{{ site.Params.spotify }}" target="_blank" rel="noopener">Oder direkt auf Spotify öffnen</a>
|
||||||
|
</div>
|
||||||
+25
-52
@@ -1,59 +1,32 @@
|
|||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
|
{{ $upcoming := (where .Pages "Date" "ge" now).ByDate }}
|
||||||
|
{{ $past := (where .Pages "Date" "lt" now).ByDate.Reverse }}
|
||||||
|
|
||||||
<h1>{{ .Title }}</h1>
|
<header class="page-head wrap">
|
||||||
<ul>
|
<h1 class="display display--xl">{{ .Title }}</h1>
|
||||||
{{ range .Pages }}
|
{{ with .Content }}<div class="page-head__lead">{{ . }}</div>{{ end }}
|
||||||
|
</header>
|
||||||
|
|
||||||
<div id="shows">
|
<section class="wrap shows-block" aria-labelledby="kommend">
|
||||||
<div class="shows-row">
|
<h2 id="kommend" class="display">Kommende Termine</h2>
|
||||||
<div id="shows-image">
|
{{ with $upcoming }}
|
||||||
<img src="{{ .Params.poster}}" width="300" height="300">
|
<div class="flyer-wall">
|
||||||
|
{{ range . }}{{ partial "show-card.html" . }}{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<div class="shows-text">
|
{{ else }}
|
||||||
<strong>{{ .Params.date.Format "2006-01-02" }}</strong> – {{ .Params.location }} – {{ .Title }}
|
<p class="live__empty">Gerade sind keine Termine angekündigt. Ihr wollt uns auf eurer Bühne? Schreibt an <a href="mailto:{{ site.Params.email }}">{{ site.Params.email }}</a>.</p>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</section>
|
||||||
|
|
||||||
<style>
|
<section class="wrap shows-block" aria-labelledby="archiv">
|
||||||
#shows {
|
<h2 id="archiv" class="display">Archiv</h2>
|
||||||
max-width: 1000px;
|
{{ range $past.GroupByDate "2006" }}
|
||||||
margin: 0 auto;
|
<div class="year-group">
|
||||||
padding: 2rem;
|
<h3 class="year-group__year">{{ .Key }}</h3>
|
||||||
}
|
<div class="flyer-wall">
|
||||||
|
{{ range .Pages }}{{ partial "show-card.html" . }}{{ end }}
|
||||||
.shows-row {
|
</div>
|
||||||
display: flex;
|
</div>
|
||||||
align-items: center;
|
{{ end }}
|
||||||
justify-content: space-between;
|
</section>
|
||||||
margin: 2rem 0;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shows-text {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shows-image img {
|
|
||||||
width: 300px;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.shows-row {
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.shows-image img {
|
|
||||||
width: 80%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>{{ .Title }} | {{ site.Title }}</title>
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
<link rel="canonical" href="{{ .Parent.Permalink }}">
|
||||||
|
<meta http-equiv="refresh" content="0; url={{ .Parent.RelPermalink }}">
|
||||||
|
</head>
|
||||||
|
<body><a href="{{ .Parent.RelPermalink }}">Zu allen Shows</a></body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
|
<rect width="64" height="64" rx="10" fill="#081226"/>
|
||||||
|
<path d="M30 6h18L36 28h12L28 58l6-24H20z" fill="#fff200"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 186 B |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Reference in new issue
Block a user