feat: hide old content behind "more" link

Author: pahund

src/App.css

@@ -50,6 +50,45 @@
   border-radius: 8px;
 }
 
+.more-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 1.5rem;
+  padding: 0;
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 1.2rem;
+  font-family: inherit;
+  cursor: pointer;
+  opacity: 0.8;
+}
+
+.more-toggle:hover {
+  opacity: 1;
+}
+
+.more-arrow {
+  display: inline-block;
+  font-size: 0.85em;
+  transition: transform 600ms ease;
+}
+
+.more-arrow--down {
+  transform: rotate(90deg);
+}
+
+.more-content {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 1000ms ease;
+}
+
+.more-content--open {
+  max-height: 600px;
+}
+
 @media (prefers-color-scheme: light) {
   .logo:hover {
     filter: drop-shadow(0 0 2em #6b7280);

src/App.tsx

@@ -1,7 +1,10 @@
+import { useState } from "react";
 import zappermentRocksLogo from "./assets/zapperment-rocks-logo.png";
 import "./App.css";
 
 function App() {
+  const [showMore, setShowMore] = useState(false);
+
   return (
     <>
       <div>
@@ -25,21 +28,28 @@ function App() {
         </audio>
       </div>
 
-      <div className="audio-player">
-        <h2>Ten Pounds Lost in Ten Minutes</h2>
-        <p>Version 2, 26 Jun 2025</p>
-        <audio controls>
-          <source
-            src="./audio/zapperment.rocks - Ten Pounds Lost in Ten Minutes.mp3"
-            type="audio/mpeg"
-          />
-          Your browser does not support the audio element.
-        </audio>
-      </div>
+      <button className="more-toggle" onClick={() => setShowMore(!showMore)}>
+        <span className={`more-arrow ${showMore ? "more-arrow--down" : ""}`}>▶</span>
+        More
+      </button>
 
-      <h2>
-        <a href="https://soundcloud.com/hund-1">More on SoundCloud…</a>
-      </h2>
+      <div className={`more-content ${showMore ? "more-content--open" : ""}`}>
+        <div className="audio-player">
+          <h2>Ten Pounds Lost in Ten Minutes</h2>
+          <p>Version 2, 26 Jun 2025</p>
+          <audio controls>
+            <source
+              src="./audio/zapperment.rocks - Ten Pounds Lost in Ten Minutes.mp3"
+              type="audio/mpeg"
+            />
+            Your browser does not support the audio element.
+          </audio>
+        </div>
+
+        <h2>
+          <a href="https://soundcloud.com/hund-1">More on SoundCloud…</a>
+        </h2>
+      </div>
     </>
   );
 }