diff --git a/.gitignore b/.gitignore index 016b48d..c33a33f 100644 --- a/.gitignore +++ b/.gitignore @@ -67,3 +67,7 @@ bower_components # AWS stuff for publishing static files .aws-credentials.json .awspublish* + +# Hugo-Bildcache +resources/_gen/ +.hugo_build.lock diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..3da6419 --- /dev/null +++ b/assets/css/main.css @@ -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; } +} diff --git a/assets/js/site.js b/assets/js/site.js new file mode 100644 index 0000000..3b46cd5 --- /dev/null +++ b/assets/js/site.js @@ -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(); + }); +}); diff --git a/content/Datenschutz.md b/content/Datenschutz.md index bad0cd7..5a00fbe 100644 --- a/content/Datenschutz.md +++ b/content/Datenschutz.md @@ -135,24 +135,13 @@ Die von Ihnen an uns per Kontaktanfragen übersandten Daten verbleiben bei uns, ## 5. Plugins und Tools -### Google Fonts -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. - -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. +### Schriftarten +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. ### 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, 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: diff --git a/content/Impressum.md b/content/Impressum.md index b9a2703..7b20e7e 100644 --- a/content/Impressum.md +++ b/content/Impressum.md @@ -5,13 +5,12 @@ layout: page url: "/impressum/" --- -Lucas Hahmann - -Postfach 2002 -Güterstr. 56 +**Lucas Hahmann** +Postfach 2002 +Güterstr. 56 54295 Trier -E-Mail:

info [at] deepwatersurvival [dot] de

+E-Mail: info [at] deepwatersurvival [dot] de ## Disclaimer – rechtliche Hinweise diff --git a/content/_index.md b/content/_index.md index 85998d3..b357312 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,5 +1,12 @@ --- 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. diff --git a/content/about.md b/content/about.md new file mode 100644 index 0000000..fbd6827 --- /dev/null +++ b/content/about.md @@ -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. diff --git a/content/music/_index.md b/content/music/_index.md index bc52991..94059a6 100644 --- a/content/music/_index.md +++ b/content/music/_index.md @@ -1,5 +1,17 @@ --- 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. -``` diff --git a/content/shows/2023_Pink_Future.md b/content/shows/2023_Pink_Future.md new file mode 100644 index 0000000..53fd7d9 --- /dev/null +++ b/content/shows/2023_Pink_Future.md @@ -0,0 +1,6 @@ +--- +title: "Pink Future" +date: 2023-09-15 +location: Skatehalle Trier West +poster: /img/shows/2023_Pink_Future_compressed.jpg +--- diff --git a/content/shows/2024_Pink_Future copy.md b/content/shows/2024_Pink_Future copy.md new file mode 100644 index 0000000..0b9f390 --- /dev/null +++ b/content/shows/2024_Pink_Future copy.md @@ -0,0 +1,6 @@ +--- +title: "Pink Future" +date: 2024-06-07 +location: Palastgarten Trier +poster: /img/shows/2024_Pink_Future.jpeg +--- diff --git a/content/shows/2025_Album_Release_Party.md b/content/shows/2025_Album_Release_Party.md new file mode 100644 index 0000000..e464c1a --- /dev/null +++ b/content/shows/2025_Album_Release_Party.md @@ -0,0 +1,6 @@ +--- +title: "Album Release Party" +date: 2025-07-18 +location: Rothaus Trier +poster: /img/shows/2025_Album_Release_Party.jpeg +--- diff --git a/content/shows/2025_Bullenhitze.md b/content/shows/2025_Bullenhitze.md index 20d86d5..7110f6e 100644 --- a/content/shows/2025_Bullenhitze.md +++ b/content/shows/2025_Bullenhitze.md @@ -2,5 +2,5 @@ title: "Bullenhitze" date: 2025-08-30 location: Salmtal -poster: /img/shows/2025_Bullenhitze.jpg ---- \ No newline at end of file +poster: /img/shows/2025_Bullenhitze.jpeg +--- diff --git a/content/shows/2025_Riez_Kapellenkontest.md b/content/shows/2025_Riez_Kapellenkontest.md new file mode 100644 index 0000000..1950498 --- /dev/null +++ b/content/shows/2025_Riez_Kapellenkontest.md @@ -0,0 +1,6 @@ +--- +title: "Riez Kapellen-Contest" +date: 2025-02-01 +location: Riez Rockbar, Bausendorf +poster: /img/shows/2025_Riez_Kapellenkontest_compressed.jpg +--- diff --git a/content/shows/2026_Altstadtfest_Trier.md b/content/shows/2026_Altstadtfest_Trier.md new file mode 100644 index 0000000..7aec87d --- /dev/null +++ b/content/shows/2026_Altstadtfest_Trier.md @@ -0,0 +1,6 @@ +--- +title: "Altstadtfest Trier" +date: 2026-06-28 +location: Hauptmarkt Bühne +poster: /img/shows/2026_Altstadtfest.jpeg +--- diff --git a/content/shows/2026_Haloween.md b/content/shows/2026_Haloween.md new file mode 100644 index 0000000..a5e81f6 --- /dev/null +++ b/content/shows/2026_Haloween.md @@ -0,0 +1,6 @@ +--- +title: "Halloween Rock" +date: 2026-10-31 +location: Gutweiler +poster: /img/shows/2026_Haloween.jpeg +--- diff --git a/content/shows/2026_Highway_to_Kell.md b/content/shows/2026_Highway_to_Kell.md new file mode 100644 index 0000000..0176bf7 --- /dev/null +++ b/content/shows/2026_Highway_to_Kell.md @@ -0,0 +1,6 @@ +--- +title: "Highway to Kell" +date: 2026-07-24 +location: Kell +poster: /img/shows/2026_Highway_to_Kell.jpeg +--- diff --git a/content/shows/2026_Luke.md b/content/shows/2026_Luke.md new file mode 100644 index 0000000..fcb1ecd --- /dev/null +++ b/content/shows/2026_Luke.md @@ -0,0 +1,6 @@ +--- +title: "Lucky´s Luke" +date: 2026-05-30 +location: Trier +poster: /img/shows/2026_Luke.jpeg +--- diff --git a/content/shows/_index.md b/content/shows/_index.md index 023db3a..46e3026 100644 --- a/content/shows/_index.md +++ b/content/shows/_index.md @@ -1,4 +1,5 @@ --- 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. diff --git a/hugo.toml b/hugo.toml index 0fb4790..ac51a08 100644 --- a/hugo.toml +++ b/hugo.toml @@ -1,9 +1,49 @@ title = "Deepwater Survival" baseURL = "https://www.deepwatersurvival.de/" -theme = "" languageCode = "de" -[pagination] -pagerSize = 10 +defaultContentLanguage = "de" +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] - unsafe = true # Allow HTML in md files \ No newline at end of file + 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" diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..94858f0 --- /dev/null +++ b/layouts/404.html @@ -0,0 +1,7 @@ +{{ define "main" }} +
+

Abgesoffen

+

Diese Seite gibt es nicht (mehr). Vielleicht hat sich der Link vertippt.

+ Zur Startseite +
+{{ end }} diff --git a/layouts/_default/band.html b/layouts/_default/band.html new file mode 100644 index 0000000..0a75898 --- /dev/null +++ b/layouts/_default/band.html @@ -0,0 +1,26 @@ +{{ define "main" }} +
+

{{ .Title }}

+ {{ with .Content }}
{{ . }}
{{ end }} +
+ +
+ +
+ +{{ with .Params.groupImage }} +
+ {{ partial "img.html" (dict "src" . "alt" "Gruppenfoto von Deepwater Survival im Backstage-Flur" "sizes" "100vw" "widths" (slice 800 1400 2000)) }} +
+{{ end }} +{{ end }} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4a05339..4e77f32 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,19 +1,37 @@ - - - {{ .Title }} | Deepwater Survival - - - + + + + {{ $title := cond .IsHome (printf "%s – Punkrock aus Trier" site.Title) (printf "%s | %s" .Title site.Title) -}} + {{ $desc := .Params.description | default site.Params.description -}} + {{ $title }} + + + + - - {{ partial "header.html" . }} -
- {{ block "main" . }}{{ end }} -
-
- {{ partial "footer.html" . }} - + + + + + + {{ with resources.Get "img/AlbumReleaseParty_Stage_compressed.jpg" }}{{ with .Resize "1200x jpg q80" }} + {{ end }}{{ end }} - \ No newline at end of file + + + {{ $css := resources.Get "css/main.css" | minify | fingerprint }} + + + + + {{ partial "header.html" . }} +
+ {{ block "main" . }}{{ end }} +
+ {{ partial "footer.html" . }} + {{ $js := resources.Get "js/site.js" | minify | fingerprint }} + + + diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 06c49c9..e6ab71f 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,8 +1,11 @@ {{ define "main" }} -

{{ .Title }}

- -{{ end }} \ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 2665880..7b202cf 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,6 +1,10 @@ {{ define "main" }} -
-

{{ .Title }}

-{{ .Content }} +
+
+

{{ .Title }}

+
+
+ {{ .Content }} +
-{{ end }} \ No newline at end of file +{{ end }} diff --git a/layouts/index.html b/layouts/index.html index aa9961e..0e0ea0b 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,27 +1,56 @@ {{ define "main" }} -
- -
- +{{ $shows := where site.RegularPages "Section" "shows" }} +{{ $upcoming := (where $shows "Date" "ge" now).ByDate }} +{{ $past := first 3 (where $shows "Date" "lt" now).ByDate.Reverse }} + +
+
+ {{ 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) }}
-
-

Deepwater Survival – Frischer Wind aus der deutschen Punk-Szene

- -

Mit energiegeladenem Punkrock, ehrlichen Texten und unverblümter Direktheit meldet sich Deepwater Survival 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.

- -

Bevor das Debütalbum „Ocean Tales“ 2025 erschien, veröffentlichte die Band bereits eine Reihe kraftvoller Singles: „Chirus“ (2023), „Let It Go“ (2024) sowie „Addiction“ und „My Own Home“. 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.

- -

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.

- -

Deepwater Survival steht für Punk mit Haltung – klar, ungeschönt, direkt. Für alle, die Musik nicht nur hören, sondern fühlen wollen.

-
- -
-

Intresse geweckt? Dann gerne hier melden: info@deepwatersurvival.de

-
- -
-{{ end }} \ No newline at end of file + +
+
+

{{ .Params.headline }}

+
+
+ {{ .Content }} +
+
+ +
+
+

Live

+ Alle Shows +
+ {{ if $upcoming }} +
+ {{ range $upcoming }}{{ partial "show-card.html" . }}{{ end }} +
+ {{ else }} +

Gerade sind keine Termine angekündigt. Ihr wollt uns auf eurer Bühne? Schreibt an {{ site.Params.email }}.

+

Zuletzt gespielt

+
+ {{ range $past }}{{ partial "show-card.html" . }}{{ end }} +
+ {{ end }} +
+ +
+
+

Lust auf Lärm?

+

Für Booking, Presse und alles andere erreicht ihr uns per Mail.

+ {{ site.Params.email }} +
+
+{{ end }} diff --git a/layouts/music/list.html b/layouts/music/list.html new file mode 100644 index 0000000..6ff250f --- /dev/null +++ b/layouts/music/list.html @@ -0,0 +1,43 @@ +{{ define "main" }} +
+

{{ .Title }}

+ {{ with .Content }}
{{ . }}
{{ end }} +
+ +
+ {{ with .Params.album }} +
+

{{ .kind }}, {{ .year }}

+

{{ .title }}

+ {{ with .text }}

{{ . }}

{{ end }} + Auf Spotify hören +
+ {{ end }} +
+ {{ partial "spotify.html" . }} +
+
+ +{{ with .Params.singles }} +
+

Singles

+
    + {{ range . }} +
  1. + {{ .title }} + {{ with .year }}{{ . }}{{ end }} +
    2. + {{ end }} +
+
+{{ end }} + +
+

Mehr von uns

+ +
+{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 0a169ab..8e2a5af 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,18 +1,17 @@ - - - diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 559cfeb..1a9268e 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,14 +1,14 @@ -
- - - -
+ diff --git a/layouts/partials/img.html b/layouts/partials/img.html new file mode 100644 index 0000000..829eb65 --- /dev/null +++ b/layouts/partials/img.html @@ -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 -}} + {{ $alt }} +{{- else -}} + {{ $alt }} +{{- end -}} diff --git a/layouts/partials/show-card.html b/layouts/partials/show-card.html new file mode 100644 index 0000000..49cdf5f --- /dev/null +++ b/layouts/partials/show-card.html @@ -0,0 +1,18 @@ +{{- $r := "" -}} +{{- with .Params.poster }}{{ $r = resources.Get (strings.TrimPrefix "/" .) }}{{ end -}} + diff --git a/layouts/partials/spotify.html b/layouts/partials/spotify.html new file mode 100644 index 0000000..2216c90 --- /dev/null +++ b/layouts/partials/spotify.html @@ -0,0 +1,5 @@ +
+

Der Player wird von Spotify geladen. Dabei werden Daten an Spotify übertragen (Datenschutz).

+ + Oder direkt auf Spotify öffnen +
diff --git a/layouts/shows/list.html b/layouts/shows/list.html index b575a68..aa4d320 100644 --- a/layouts/shows/list.html +++ b/layouts/shows/list.html @@ -1,59 +1,32 @@ {{ define "main" }} +{{ $upcoming := (where .Pages "Date" "ge" now).ByDate }} +{{ $past := (where .Pages "Date" "lt" now).ByDate.Reverse }} -

{{ .Title }}

- - - + + {{ end }} +
{{ end }} - diff --git a/layouts/shows/single.html b/layouts/shows/single.html new file mode 100644 index 0000000..60fb9b2 --- /dev/null +++ b/layouts/shows/single.html @@ -0,0 +1,11 @@ + + + + + {{ .Title }} | {{ site.Title }} + + + + +Zu allen Shows + diff --git a/static/favicon.svg b/static/favicon.svg new file mode 100644 index 0000000..217a6cb --- /dev/null +++ b/static/favicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/fonts/archivo-latin-400-italic.woff2 b/static/fonts/archivo-latin-400-italic.woff2 new file mode 100644 index 0000000..c9766f1 Binary files /dev/null and b/static/fonts/archivo-latin-400-italic.woff2 differ diff --git a/static/fonts/archivo-latin-400-normal.woff2 b/static/fonts/archivo-latin-400-normal.woff2 new file mode 100644 index 0000000..5b3f5ac Binary files /dev/null and b/static/fonts/archivo-latin-400-normal.woff2 differ diff --git a/static/fonts/archivo-latin-600-normal.woff2 b/static/fonts/archivo-latin-600-normal.woff2 new file mode 100644 index 0000000..ffc0c24 Binary files /dev/null and b/static/fonts/archivo-latin-600-normal.woff2 differ diff --git a/static/fonts/big-shoulders-display-latin-800-normal.woff2 b/static/fonts/big-shoulders-display-latin-800-normal.woff2 new file mode 100644 index 0000000..96a557a Binary files /dev/null and b/static/fonts/big-shoulders-display-latin-800-normal.woff2 differ diff --git a/static/fonts/big-shoulders-display-latin-900-normal.woff2 b/static/fonts/big-shoulders-display-latin-900-normal.woff2 new file mode 100644 index 0000000..ea725b2 Binary files /dev/null and b/static/fonts/big-shoulders-display-latin-900-normal.woff2 differ diff --git a/static/img/logo-crop.png b/static/img/logo-crop.png new file mode 100644 index 0000000..a498380 Binary files /dev/null and b/static/img/logo-crop.png differ diff --git a/static/img/shows/2024_Pink_Future.jpeg b/static/img/shows/2024_Pink_Future.jpeg new file mode 100644 index 0000000..5c63060 Binary files /dev/null and b/static/img/shows/2024_Pink_Future.jpeg differ diff --git a/static/img/shows/2025_Album_Release_Party.jpeg b/static/img/shows/2025_Album_Release_Party.jpeg new file mode 100644 index 0000000..15c5388 Binary files /dev/null and b/static/img/shows/2025_Album_Release_Party.jpeg differ diff --git a/static/img/shows/2025_Bullenhitze.jpeg b/static/img/shows/2025_Bullenhitze.jpeg new file mode 100644 index 0000000..af4b4d2 Binary files /dev/null and b/static/img/shows/2025_Bullenhitze.jpeg differ diff --git a/static/img/shows/2026_Altstadtfest.jpeg b/static/img/shows/2026_Altstadtfest.jpeg new file mode 100644 index 0000000..7f87e4c Binary files /dev/null and b/static/img/shows/2026_Altstadtfest.jpeg differ diff --git a/static/img/shows/2026_Haloween.jpeg b/static/img/shows/2026_Haloween.jpeg new file mode 100644 index 0000000..9ddbf48 Binary files /dev/null and b/static/img/shows/2026_Haloween.jpeg differ diff --git a/static/img/shows/2026_Highway_to_Kell.jpeg b/static/img/shows/2026_Highway_to_Kell.jpeg new file mode 100644 index 0000000..41963fb Binary files /dev/null and b/static/img/shows/2026_Highway_to_Kell.jpeg differ diff --git a/static/img/shows/2026_Luke.jpeg b/static/img/shows/2026_Luke.jpeg new file mode 100644 index 0000000..0579eb8 Binary files /dev/null and b/static/img/shows/2026_Luke.jpeg differ