From 688334611c4c75ffea092aca0da0afc78c091208 Mon Sep 17 00:00:00 2001
From: sakrecoer <setto@dyne.org>
Date: Sun, 18 May 2025 21:28:22 +0200
Subject: [PATCH] styling the shit out of this crap

---
 themes/basspistol2025/assets/css/reset.css    |   4 +
 themes/basspistol2025/assets/css/style.css    | 214 +++++-------------
 .../layouts/_default/baseof.html              |   5 +-
 .../layouts/_default/index.html               |  13 +-
 .../layouts/partials/body/discog.html         |  85 +++++++
 .../layouts/partials/body/gancio.html         | 113 +++++++++
 .../layouts/partials/body/gang.html           |  89 ++++++++
 .../layouts/partials/body/navigation.html     |  32 +++
 .../layouts/partials/body/peertube.html       |  68 ++++++
 .../layouts/partials/body/radio.html          |  74 ++++++
 .../partials/head/static-links-head.html      |   1 +
 11 files changed, 535 insertions(+), 163 deletions(-)
 create mode 100644 themes/basspistol2025/layouts/partials/body/gancio.html
 create mode 100644 themes/basspistol2025/layouts/partials/body/navigation.html
 create mode 100644 themes/basspistol2025/layouts/partials/body/peertube.html
 create mode 100644 themes/basspistol2025/layouts/partials/body/radio.html

diff --git a/themes/basspistol2025/assets/css/reset.css b/themes/basspistol2025/assets/css/reset.css
index 9e98124..6be8324 100644
--- a/themes/basspistol2025/assets/css/reset.css
+++ b/themes/basspistol2025/assets/css/reset.css
@@ -8,6 +8,10 @@
   margin: 0;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 /* 3. Enable keyword animations */
 @media (prefers-reduced-motion: no-preference) {
   html {
diff --git a/themes/basspistol2025/assets/css/style.css b/themes/basspistol2025/assets/css/style.css
index 9f684d1..e0dd4f1 100644
--- a/themes/basspistol2025/assets/css/style.css
+++ b/themes/basspistol2025/assets/css/style.css
@@ -1,8 +1,8 @@
-
+/* Root stuff */
 * {
   filter: grayscale(100%);
   transition: filter 17s linear;
-
+  scroll-behavior: smooth;
 }
 *:hover {
   filter: grayscale(0%) !important;
@@ -16,18 +16,32 @@ img:hover {
   filter: blur(0px) !important;
 }
 
+
 body {
+
   font-family: Sigoil, Space-Grotesk, 'Arial', 'Helvetica', sans-serif;
   font-weight: normal;
   width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
 
+  position: absolute;
   background-color: black;
   color: orange;
-
+  display: block;
 }
-#main {
+#main-wrapper {
   display: flex;
-
+  padding: 0;
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+section {
+ width: 100%;
+}
+a {
+  text-decoration: none;
 }
 h1, h2, h3, h4, h5, h6, h7, h8 {
 
@@ -51,20 +65,42 @@ strong {
 }
 
 main {
- width: 100%;
- height: 100%;
+ width: 100vw;
+ height: 100vh;
  display: flex;
  flex-wrap: wrap;
 }
+
+/* Screen size root */
+
+@media screen and (max-width: 1024px) {
+  img {
+    filter: blur(0px) !important;
+  }
+  h1 {
+    font-size: 12em;
+  }
+}
+
+/* Sections */
+
+
+
 #hero {
   margin: 0;
   background-color: purple;
   border-style: double;
   border-color: orange;
   border-width: 10px;
-  width: 100%;
+  width: 100vw;
   padding:0;
-  overflow: hidden;
+  transition: all 2s linear;
+}
+#hero:hover {
+    background-color: orange;
+    border-color: purple;
+    color: purple;
+    transition: all 2s linear;
 }
 
 /* FORMS */
@@ -85,159 +121,17 @@ margin: 0;
 .inf-submit {}
 
 /* Profiles */
-#gang {
+
+
+
+
+footer {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  a {
-    text-decoration: none;
-  }
-  article {
-    margin:2px;
-    flex: 1 1 300px;
-
-  }
-  h2 {
-    font-size: 24em;
-/*    text-transform: uppercase;*/
-    line-height: 1em;
-    flex: 1 1 100%;
-  }
-  p {
-    flex: 1 1 100%;
-    font-size: 1.5em;
-    line-height: 1em;
-  }
-
-  figure {
-    padding: 4px;
-    margin: auto;
-
-
-
-    border-style: double;
-    border-color: purple;
-    border-width: 10px;
-
-    img {
-      width: 100%;
-      object-fit: cover;
-      border-style: double;
-      border-color: purple;
-      border-width: 10px;
-      max-height: 300px;
-    }
-
-
-  }
-  figcaption {
-    font-family: Outward, 'Arial', 'Helvetica', sans-serif;
-    font-size: 9em;
-    line-height: 0.3em;
-    height: 100px;
-    font-weight: bold;
-/*    font-style: italic;*/
-    background-color: black;
-    color: white;
-    padding: 20px;
-    text-align: center;
-    border-style: double;
-    border-color: purple;
-    border-width: 10px;
-    color: orange;
-    z-index: 100;
-    position: relative;
-    text-decoration: none;
-    margin-bottom: 4px;
-    text-transform: lowercase;
- }
- .section-headers {
-   padding: 80px;
-   border-style: double;
-   border-color: purple;
-   border-width: 10px;
-   flex: 1 0 100%;
-   max-width: 100%;
-   margin-top: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
 }
-}
-
-/* Discographys */
-#discog {
-display: flex;
-flex-wrap: wrap;
-justify-content: space-between;
-
-a {
-  text-decoration: none;
-}
-article {
-  margin:2px;
-  flex: 1 1 300px;
-
-}
-h2 {
-  font-size: 24em;
-  /*    text-transform: uppercase;*/
-  line-height: 1em;
-  flex: 1 1 100%;
-}
-p {
-  flex: 1 1 100%;
-  font-size: 1.5em;
-  line-height: 1em;
-}
-
-figure {
-  padding: 4px;
-  margin: auto;
-
-
-
+.border {
   border-style: double;
-  border-color: purple;
   border-width: 10px;
-
-  img {
-    width: 100%;
-    object-fit: cover;
-    border-style: double;
-    border-color: purple;
-    border-width: 10px;
-    max-height: 300px;
-  }
-
-
-}
-figcaption {
-  font-family: Sigoil, Outward, 'Arial', 'Helvetica', sans-serif;
-  font-size: 1.3em;
-  line-height: 1em;
-  height: 100px;
-  font-weight: bold;
-  /*    font-style: italic;*/
-  background-color: black;
-  color: white;
-  padding: 20px;
-  text-align: center;
-  border-style: double;
-  border-color: purple;
-  border-width: 10px;
-  color: orange;
-  z-index: 100;
-  position: relative;
-  text-decoration: none;
-  margin-bottom: 4px;
-  text-transform: uppercase;
-}
-.section-headers {
-  padding: 80px;
-  border-style: double;
-  border-color: purple;
-  border-width: 10px;
-  flex: 1 0 100%;
-  max-width: 100%;
-  margin-top: 0;
-}
 }
diff --git a/themes/basspistol2025/layouts/_default/baseof.html b/themes/basspistol2025/layouts/_default/baseof.html
index 1e288cf..1ae218e 100644
--- a/themes/basspistol2025/layouts/_default/baseof.html
+++ b/themes/basspistol2025/layouts/_default/baseof.html
@@ -15,7 +15,10 @@
 
 <body>
 <!-- Wrapper -->
-<nav></nav>
+
+ {{ block "navigation" . }}{{ end }}
+
+
 
 <main id="main-wrapper">
 
diff --git a/themes/basspistol2025/layouts/_default/index.html b/themes/basspistol2025/layouts/_default/index.html
index d39c335..bb4a555 100644
--- a/themes/basspistol2025/layouts/_default/index.html
+++ b/themes/basspistol2025/layouts/_default/index.html
@@ -1,3 +1,6 @@
+{{ define "navigation" }}
+{{ partial "body/navigation.html" . }}
+{{ end }}
 
 {{ define "hero" }}
 <section id="hero">
@@ -7,15 +10,21 @@
 
 {{ define "main" }}
 
+{{ partial "body/peertube.html" . }}
 
+{{ partial "body/discog.html" . }}
+
+{{ partial "body/gancio.html" . }}
+
+{{ partial "body/radio.html" . }}
 
 {{ partial "body/gang.html" . }}
 
-{{ partial "body/discog.html" . }}
+
 
 
 {{ end }}
 
 {{ define "footer"}}
-{{ partial "body/newsletter.html" . }}
+
 {{ end }}
diff --git a/themes/basspistol2025/layouts/partials/body/discog.html b/themes/basspistol2025/layouts/partials/body/discog.html
index 4abece0..c623f57 100644
--- a/themes/basspistol2025/layouts/partials/body/discog.html
+++ b/themes/basspistol2025/layouts/partials/body/discog.html
@@ -1,3 +1,88 @@
+<style>
+
+/* Discographys */
+#discog {
+display: flex;
+flex-wrap: wrap;
+justify-content: space-between;
+
+a {
+  text-decoration: none;
+}
+article {
+  margin:2px;
+  flex: 1 1 300px;
+
+}
+h2 {
+  font-size: 24em;
+  /*    text-transform: uppercase;*/
+  line-height: 1em;
+  flex: 1 1 100%;
+}
+@media screen and (max-width: 1024px) {
+  h2 {
+    font-size: 8em;
+  }
+}
+p {
+  flex: 1 1 100%;
+  font-size: 1.5em;
+  line-height: 1em;
+}
+
+figure {
+  padding: 4px;
+  margin: auto;
+
+
+
+  border-style: double;
+  border-color: purple;
+  border-width: 10px;
+
+  img {
+    width: 100%;
+    object-fit: cover;
+    max-height: 300px;
+  }
+
+
+}
+figcaption {
+  font-family: Sigoil, Outward, 'Arial', 'Helvetica', sans-serif;
+  font-size: 1.3em;
+  line-height: 1em;
+  height: 100px;
+  font-weight: bold;
+  /*    font-style: italic;*/
+  background-color: black;
+  color: white;
+  padding: 20px;
+  text-align: center;
+
+  border-color: purple;
+  border-width: 10px;
+  color: orange;
+  z-index: 100;
+  position: relative;
+  text-decoration: none;
+  margin-bottom: 4px;
+  text-transform: uppercase;
+}
+.section-headers {
+  padding: 80px;
+  border-style: double;
+  border-color: purple;
+  border-width: 10px;
+  flex: 1 0 100%;
+  max-width: 100%;
+  margin-top: 0;
+}
+}
+
+</style>
+
 <section id="discog">
   <article class="section-headers">
     <h2>Discography</h2>
diff --git a/themes/basspistol2025/layouts/partials/body/gancio.html b/themes/basspistol2025/layouts/partials/body/gancio.html
new file mode 100644
index 0000000..8a30778
--- /dev/null
+++ b/themes/basspistol2025/layouts/partials/body/gancio.html
@@ -0,0 +1,113 @@
+<style>
+#gancio {
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  a {
+    text-decoration: none;
+  }
+  article {
+    margin:2px;
+    flex: 1 1 300px;
+
+  }
+  h2 {
+    font-size: 24em;
+/*    text-transform: uppercase;*/
+    line-height: 1em;
+    flex: 1 1 100%;
+  }
+  @media screen and (max-width: 1024px) {
+    h2 {
+      font-size: 12em;
+    }
+  }
+  p {
+    flex: 1 1 100%;
+    font-size: 1.5em;
+    line-height: 1em;
+  }
+
+  figure {
+    padding: 4px;
+    margin: auto;
+
+
+
+    border-style: double;
+    border-color: purple;
+    border-width: 10px;
+
+    img {
+      width: 100%;
+      object-fit: cover;
+      border-style: double;
+      border-color: purple;
+      border-width: 10px;
+      max-height: 300px;
+    }
+
+
+  }
+  figcaption {
+    font-family: Outward, 'Arial', 'Helvetica', sans-serif;
+    font-size: 9em;
+    line-height: 0.3em;
+
+    font-weight: bold;
+/*    font-style: italic;*/
+    background-color: black;
+    color: white;
+    padding: 20px;
+    text-align: center;
+    border-style: double;
+    border-color: purple;
+    border-width: 10px;
+    color: orange;
+    z-index: 100;
+    position: relative;
+    text-decoration: none;
+    margin-bottom: 4px;
+    text-transform: lowercase;
+ }
+ @media screen and (max-width: 1024px) {
+   figcaption {
+     font-size: 7em;
+         line-height: 0.35em;
+   }
+ }
+  .section-headers {
+    padding: 80px;
+    border-style: double;
+    border-color: purple;
+    border-width: 10px;
+    flex: 1 1 300px;
+
+    margin-top: 0;
+  }
+  .border {
+    border-color: purple;
+    padding: 40px;
+    width: 100%;
+  }
+
+}
+
+</style>
+
+<section id="gancio">
+  <article class="section-headers">
+    <h2>Agenda</h2>
+    <p>Outernational Party people <br />
+    Powerful. Syndicated. Artists.</p>
+  </article>
+
+  <div class="border">
+    <script src="https://do.basspistol.org/gancio-events.es.js"></script>
+    <gancio-events baseurl="https://do.basspistol.org" collection="Music" show_recurrent="true" maxlength=7 sidebar="false" theme="dark"></gancio-events>
+
+  </div>
+
+</section>
diff --git a/themes/basspistol2025/layouts/partials/body/gang.html b/themes/basspistol2025/layouts/partials/body/gang.html
index 2125046..d17d43f 100644
--- a/themes/basspistol2025/layouts/partials/body/gang.html
+++ b/themes/basspistol2025/layouts/partials/body/gang.html
@@ -1,3 +1,92 @@
+<style>
+#gang {
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  a {
+    text-decoration: none;
+  }
+  article {
+    margin:2px;
+    flex: 1 1 300px;
+
+  }
+  h2 {
+    font-size: 24em;
+/*    text-transform: uppercase;*/
+    line-height: 1em;
+    flex: 1 1 100%;
+  }
+  @media screen and (max-width: 1024px) {
+    h2 {
+      font-size: 12em;
+    }
+  }
+  p {
+    flex: 1 1 100%;
+    font-size: 1.5em;
+    line-height: 1em;
+  }
+
+  figure {
+    padding: 4px;
+    margin: auto;
+
+
+
+    border-style: double;
+    border-color: purple;
+    border-width: 10px;
+
+    img {
+      width: 100%;
+      object-fit: cover;
+
+      max-height: 300px;
+    }
+
+
+  }
+  figcaption {
+    font-family: Outward, 'Arial', 'Helvetica', sans-serif;
+    font-size: 9em;
+    line-height: 0.3em;
+
+    font-weight: bold;
+/*    font-style: italic;*/
+    background-color: black;
+    color: white;
+    padding: 20px;
+    text-align: center;
+
+    color: orange;
+    z-index: 100;
+    position: relative;
+    text-decoration: none;
+    margin-bottom: 4px;
+    text-transform: lowercase;
+ }
+ @media screen and (max-width: 1024px) {
+   figcaption {
+     font-size: 7em;
+         line-height: 0.35em;
+   }
+ }
+ .section-headers {
+   padding: 80px;
+   border-style: double;
+   border-color: purple;
+   border-width: 10px;
+   flex: 1 0 100%;
+   max-width: 100%;
+   margin-top: 0;
+  }
+}
+
+</style>
+
 <section id="gang">
   <article class="section-headers">
     <h2>Gung</h2>
diff --git a/themes/basspistol2025/layouts/partials/body/navigation.html b/themes/basspistol2025/layouts/partials/body/navigation.html
new file mode 100644
index 0000000..2f70855
--- /dev/null
+++ b/themes/basspistol2025/layouts/partials/body/navigation.html
@@ -0,0 +1,32 @@
+<style>
+nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100vw;
+  height: 100px;
+  background-color: rgba(128, 0, 128, .5);
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+      color: orange;
+  ul {
+    display: flex;
+    list-style-type: none;
+  }
+  li > a {
+        color: orange;
+  }
+}
+
+</style>
+
+<nav>
+  <ul>
+    <li><a href="/2025/#video">Video</a></li>
+    <li><a href="/2025/#about">About</a></li>
+    <li><a href="/2025/#radio">Radio</a></li>
+    <li><a href="/2025/#discog">Discography</a></li>
+  </ul>
+</nav>
+
diff --git a/themes/basspistol2025/layouts/partials/body/peertube.html b/themes/basspistol2025/layouts/partials/body/peertube.html
new file mode 100644
index 0000000..df3c6b0
--- /dev/null
+++ b/themes/basspistol2025/layouts/partials/body/peertube.html
@@ -0,0 +1,68 @@
+<style>
+
+#peertube {
+
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+
+
+
+  article {
+    margin:2px;
+    flex: 1 1 300px;
+
+  }
+  h2 {
+    font-size: 24em;
+/*    text-transform: uppercase;*/
+    line-height: 1em;
+    flex: 1 1 100%;
+  }
+  @media screen and (max-width: 1024px) {
+    h2 {
+      font-size: 12em;
+    }
+  }
+  p {
+    flex: 1 1 100%;
+    font-size: 1.5em;
+    line-height: 1em;
+  }
+
+  .border {
+    border-style: double;
+    border-color: purple;
+    border-width: 10px;
+
+    flex: 1 1 300px;
+    padding: 80px;
+  }
+ .section-headers {
+   padding: 80px;
+   border-style: double;
+   border-color: purple;
+   border-width: 10px;
+   flex: 1 1 300px;
+   max-width: 100%;
+
+
+   h2 {
+
+    }
+  }
+}
+
+</style>
+
+
+<section id="peertube">
+  <article class="section-headers">
+    <h2>RadioStation</h2>
+    <p>Basspistol Radio Station! 777% without commercials! RobotDJ-sets and live interventions! This is the sound of freedom.</p>
+  </article>
+  <div class="border">
+    <div style="position: relative; padding-top: 56.25%;"><iframe title="PeerTube Selected Music Videos" width="100%" height="100%" src="https://v.basspistol.org/video-playlists/embed/tubcTiUQaJ29JxeCzRqvUc" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" style="position: absolute; inset: 0px;"></iframe></div>
+  </div>
+
+</section>
diff --git a/themes/basspistol2025/layouts/partials/body/radio.html b/themes/basspistol2025/layouts/partials/body/radio.html
new file mode 100644
index 0000000..b7dabaf
--- /dev/null
+++ b/themes/basspistol2025/layouts/partials/body/radio.html
@@ -0,0 +1,74 @@
+<style>
+
+#radio {
+
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+
+
+
+  article {
+    margin:2px;
+    flex: 1 1 300px;
+
+  }
+  h2 {
+    font-size: 24em;
+/*    text-transform: uppercase;*/
+    line-height: 1em;
+    flex: 1 1 100%;
+  }
+  @media screen and (max-width: 1024px) {
+    h2 {
+      font-size: 12em;
+    }
+  }
+  p {
+    flex: 1 1 100%;
+    font-size: 1.5em;
+    line-height: 1em;
+  }
+
+  .border {
+    border-style: double;
+    border-color: purple;
+    border-width: 10px;
+
+    flex: 1 1 300px;
+    padding: 80px;
+  }
+ .section-headers {
+   padding: 80px;
+   border-style: double;
+   border-color: purple;
+   border-width: 10px;
+   flex: 1 1 300px;
+   max-width: 100%;
+
+
+   h2 {
+
+    }
+  }
+}
+
+</style>
+
+
+<section id="radio">
+  <article class="section-headers">
+    <h2>RadioStation</h2>
+    <p>Basspistol Radio Station! 777% without commercials! RobotDJ-sets and live interventions! This is the sound of freedom.</p>
+  </article>
+  <div class="border">
+    <iframe src="https://radio.basspistol.com/public/basspistol/embed?theme=dark" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 150px; border: 0;"></iframe>
+    <iframe src="https://radio.basspistol.com/public/basspistol/history?theme=dark" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 480px; border: 0;"></iframe>
+  </div>
+<!--  <div class="border">
+    <iframe src="https://radio.basspistol.com/public/basspistol/embed-requests?theme=dark" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 950px; border: 0;"></iframe>
+  </div>-->
+<!--  <div class="border">
+    <iframe src="https://radio.basspistol.com/public/basspistol/schedule/embed?theme=dark" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 1280px; border: 0;"></iframe>
+  </div>-->
+</section>
diff --git a/themes/basspistol2025/layouts/partials/head/static-links-head.html b/themes/basspistol2025/layouts/partials/head/static-links-head.html
index 52af788..906a277 100644
--- a/themes/basspistol2025/layouts/partials/head/static-links-head.html
+++ b/themes/basspistol2025/layouts/partials/head/static-links-head.html
@@ -11,3 +11,4 @@
 <link rel="apple-touch-icon" href='{{ "apple-touch-icon.png" | absURL }}'>
 <link rel="icon" type="image/png" href='{{ "touch-icon.png" | absURL }}' sizes="192x192">
 <link rel="shortcut icon" href='{{ "siteicon.png" | absURL }}' type="image/png" />
+