new: text toggle, 'now' threading, 'now' post

now.css

@@ -4,38 +4,69 @@ main {
   font-family: "mono", monospace;
 }
 
-section.now {
+.now {
   position: relative;
   background-color: var(--blog-box);
   padding: 5px;
-  margin: 15px 0;
+  margin: 20px 0;
+}
+div.now {
+  margin-bottom: 8px;
 }
 
-section.now h1,
-section.now h2 {
-    width: calc(100% - 200px);
-    margin: 0 10px;
+.now h1,
+.thread h1,
+.now h2,
+.thread h2 {
+  width: calc(100% - 200px);
+  margin: 0 10px;
 }
-section.now h1 {
-  margin-top: 8px;
-}
-
-section.now h3 {
-  margin: 0;
-}
-section.now h2 {
+.now h2,
+.thread h2 {
   font-size: large;
 }
-section.now h3 {
+.now h3 {
   position: absolute;
-  color: var(--subtitle);
-  font-size: medium;
+  margin: 0;
   right: 15px;
   top: 15px;
+  font-size: medium;
+  color: var(--subtitle);
 }
-section.now p {
+.now hgroup,
+.thread hgroup {
+  margin: 10px 0;
+}
+.now p {
   margin: 10px 20px;
 }
-section.now audio {
+.now audio,
+.thread audio {
   width: 100%;
 }
+
+.thread-update {
+  position: relative;
+  background-color: var(--blog-box-alt);
+  margin: 8px 0;
+  margin-left: 5%;
+  padding: 0;
+  list-style-type: none;
+}
+.thread-update li {
+  padding: 10px;
+}
+.thread-update h3 {
+  position: absolute;
+  margin: 0;
+  right: 15px;
+  top: 15px;
+  font-size: small;
+  color: var(--subtitle);
+}
+
+.lyrics {
+  display: none;
+  width: 80%;
+  margin: 16px auto;
+}

now.html

@@ -6,6 +6,7 @@
     <meta name="tdm-reservation" content="1" />
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="now.css" />
+    <script src="res/asset-js-audio.js"></script>
 
     <link
       rel="icon"
@@ -136,18 +137,82 @@
     </aside>
 
     <main id="main">
-      <section class="now">
-        <hgroup>
-          <h1>'Chest'</h1>
-          <h2>A Preview</h2>
-          <h3>2025-02-28T10:30Z</h3>
-        </hgroup>
-        <p>
+      <section class="thread">
+        <div class="now">
+          <hgroup>
+            <h1>'Chest'</h1>
+            <h2>A Preview</h2>
+            <h3>2025-02-28T10:30Z</h3>
+          </hgroup>
           <audio preload="none" controls="">
-            <source src="res/prvw-mus-2025-02-28-Chest.ogg" type="audio/ogg" />
-            <source src="res/prvw-mus-2025-02-28-Chest.mp3" type="audio/mp3" />
+            <source src="res/prvw-mus-2025-02-28-chest.ogg" type="audio/ogg" />
+            <source src="res/prvw-mus-2025-02-28-chest.mp3" type="audio/mp3" />
           </audio>
-        </p>
+          <button
+            type="button"
+            onclick="blockToggle('chest-20250228T1030Z-000')"
+          >
+            Toggle Lyrics
+          </button>
+          <p class="lyrics" id="chest-20250228T1030Z-000">
+            Take it you were the one with the weapon, <br />
+            push a hole through my head and send me to heaven
+            <br /><br />
+            I don't think I recognise the person you think I am
+            <br /><br />
+            Tell them lies in your head that make me seem like someone else
+            <br /><br />
+            To be honest I just want to rest my head on your chest
+          </p>
+        </div>
+        <ul class="thread-update">
+          <li>
+            <hgroup>
+              <h1>'Chest' Update</h1>
+              <h2>With new but <em>non-final</em> lyrics</h2>
+              <h3>2025-03-02T11:30Z</h3>
+            </hgroup>
+            <audio preload="none" controls="">
+              <source
+                src="res/prvw-mus-2025-03-02-chest.ogg"
+                type="audio/ogg"
+              />
+              <source
+                src="res/prvw-mus-2025-03-02-chest.mp3"
+                type="audio/mp3"
+              />
+            </audio>
+            <button
+              type="button"
+              onclick="blockToggle('chest-20250228T1030Z-001')"
+            >
+              Toggle Lyrics
+            </button>
+            <p class="lyrics" id="chest-20250228T1030Z-001">
+              I - take - it - you were the one with the weapon
+              <br /><br />
+              You pressed a hole through my cortex, couldn't take any more of
+              this <br />
+              And I swear my ribs were choking my lungs, all pointed inward
+              <br />
+              &ensp;(With the weapon)
+              <br /><br />
+              Take it you were the one with the weapon, didn't recognise me, who
+              you thought I was <br />And I rest my head on your chest <br />
+              &ensp;(Take it you were the one with the weapon)
+              <br /><br />
+              Girl, why are you so eager to be shooting at people <br />
+              Don't you know I need you <br />
+              Does that not keep you <br />
+              Do we not mean any to you?
+              <br /><br />
+              You pressed - a hole - through - me
+              <br /><br />
+              (I feel so lost without you, lost without you) <br />
+              (I feel so lost without you, lost without you)
+            </p>
+          </li>
+        </ul>
       </section>
 
       <section class="now">

res/asset-js-audio.js

@@ -17,3 +17,13 @@ function onlyPlayOneIn(container) {
 document.addEventListener("DOMContentLoaded", function () {
   onlyPlayOneIn(document.body);
 });
+
+function blockToggle(id) {
+  var blockID = document.getElementById(id);
+
+  if (blockID.style.display === "block") {
+    blockID.style.display = "none";
+  } else {
+    blockID.style.display = "block";
+  }
+}

style.css

@@ -16,6 +16,7 @@
   --text-background: #000000cc;
   --text-highlight: #3c362e;
   --blog-box: #2b2f32;
+  --blog-box-alt: #242627;
 
   --load-0: #abb5ba61;
   --load-1: #4a525761;
@@ -81,6 +82,17 @@ a:hover {
   }
 }
 
+button {
+  border: none;
+  color: var(--accent-1);
+  background-color: transparent;
+  text-align: center;
+}
+button:hover {
+  cursor: pointer;
+  color: var(--max-1);
+}
+
 #content-warnings {
   margin: 15px 0;
   padding: 2px;