verso2

commit ea1406cc4334bf1c56fddf8ac5eae7c8e2238cb1
parent a75e6840406ce479c31d9fb3dcbf59c160250470
Author: Nathaniel Chappelle <nathaniel@chappelle.dev>
Date:   Thu,  5 Feb 2026 00:48:02 -0800

Add listen page

Diffstat:
M
content/assets/style.css
 | 
67
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A
content/listen.md
 | 
42
++++++++++++++++++++++++++++++++++++++++++
M
verso.conf
 | 
2
+-

3 files changed, 110 insertions(+), 1 deletion(-)
diff --git a/content/assets/style.css b/content/assets/style.css
@@ -66,3 +66,70 @@ footer table { font-style: italic; width: 100%; }
   img, p { break-inside: avoid; }
   h1, h2, h3 { break-after: avoid; }
 }
+
+/* Song Gallery Stuff */
+.song-gallery {
+    display: grid;
+    /* Fits roughly 3 columns in your 42em max-width */
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 1em;
+    margin: 2em 0;
+}
+
+.song-card {
+    background: #fff;
+    border: 2px solid #000; /* Match pre block border */
+    padding: 8px; /* Give it that nested border look */
+    display: flex;
+    flex-direction: column;
+}
+
+.song-card:hover {
+    background-color: #eeeeee; /* Match table hover effect */
+    outline: 2px solid yellow; /* Hint at the link hover style */
+}
+
+.song-card img {
+    width: 100%;
+    aspect-ratio: 1/1;
+    object-fit: cover;
+    border: 1px solid #000; /* Hard edge on art */
+    margin-bottom: 8px;
+}
+
+.song-info {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.song-title {
+    font-weight: bold;
+    font-size: 1em;
+    line-height: 1.2;
+    display: block;
+}
+
+.artist-name {
+    color: #555; /* Match .meta color */
+    font-size: 0.9em;
+    font-style: italic;
+    margin-bottom: 12px;
+}
+
+.song-link {
+    margin-top: auto;
+    text-align: center;
+    font-weight: bold;
+    font-family: monospace; /* Match your logo/code style */
+    text-transform: uppercase;
+    text-decoration: none;
+    border: 1px solid #000;
+    padding: 4px;
+    background: #fff;
+    color: #000;
+}
+
+.song-link:hover {
+    background-color: yellow; /* The classic Verso 2 hover */
+}
diff --git a/content/listen.md b/content/listen.md
@@ -0,0 +1,42 @@
+---
+title: Listen
+show_meta: no
+---
+
+An overview of music and podcasts I currently have on repeat.
+
+## Music
+
+<section class="song-gallery">
+
+  <div class="song-card">
+    <img src="https://f4.bcbits.com/img/a2130853213_10.jpg" alt="Rondo Acapricio Album Art">
+    <div class="song-info">
+      <span class="song-title">Rondo Acapricio</span>
+      <span class="artist-name">Tosca</span>
+      <a href="https://music.youtube.com/watch?v=7nZCqxXrFXU&si=d5YExHGt4PvxRJyw" class="song-link">Listen</a>
+    </div>
+  </div>
+
+  <div class="song-card">
+    <img src="https://i.scdn.co/image/ab67616d0000b273fffdb6bc2a61d5a151bb0cca" alt="Le voyage de Pénélope Album Art">
+    <div class="song-info">
+      <span class="song-title">Le voyage de Pénélope</span>
+      <span class="artist-name">Air</span>
+      <a href="https://music.youtube.com/watch?v=e0JOSjzuX5g&si=oxuchfQCZD9kKfk-" class="song-link">Listen</a>
+    </div>
+  </div>
+
+  <div class="song-card">
+    <img src="https://i.scdn.co/image/ab67616d0000b273573cff1d3368acdb113f24a9" alt="Strangers Album Art">
+    <div class="song-info">
+      <span class="song-title">Strangers</span>
+      <span class="artist-name">Portishead</span>
+      <a href="https://music.youtube.com/watch?v=wCAURNnKqFo&si=Ra_WWwhwvdQZwW6d" class="song-link">Listen</a>
+    </div>
+  </div>
+</section>
+
+---
+
+_Updated via verso_2_
diff --git a/verso.conf b/verso.conf
@@ -15,7 +15,7 @@ TEMPLATE_DIR="templates"
 
 # Markdown processor (lowdown, cmark, markdown, discount, etc.)
 MD_PROCESSOR="lowdown"
-MD_FLAGS=""
+MD_FLAGS="-thtml --html-no-skiphtml --html-no-escapehtml"
 
 # File handling
 COPY_EXTENSIONS="jpg jpeg png gif svg pdf css js ico webp woff woff2 ttf"