|
33 | 33 | .post-artifact-desc{font-size:13px;color:var(--muted);margin:0 0 12px} |
34 | 34 | .post-artifact-link{display:inline-block;margin-right:10px;font-size:13px} |
35 | 35 | .post-nav{display:flex;gap:20px;margin-top:40px;padding-top:20px;border-top:1px solid var(--stroke);font-size:14px} |
| 36 | + |
| 37 | + /* ── petrarch audio player ───────────────────────── */ |
| 38 | + .petrarch-player { |
| 39 | + margin-top: 36px; |
| 40 | + padding: 16px 18px; |
| 41 | + border: 1px solid var(--stroke); |
| 42 | + border-radius: 8px; |
| 43 | + background: rgba(255,255,255,.02); |
| 44 | + display: flex; |
| 45 | + flex-direction: column; |
| 46 | + gap: 10px; |
| 47 | + } |
| 48 | + .petrarch-player-label { |
| 49 | + display: flex; |
| 50 | + align-items: center; |
| 51 | + gap: 8px; |
| 52 | + font-size: 11px; |
| 53 | + text-transform: uppercase; |
| 54 | + letter-spacing: .08em; |
| 55 | + color: var(--muted); |
| 56 | + } |
| 57 | + .petrarch-player-label svg { |
| 58 | + flex-shrink: 0; |
| 59 | + opacity: .6; |
| 60 | + } |
| 61 | + .petrarch-player-label strong { |
| 62 | + color: var(--fg); |
| 63 | + font-weight: 600; |
| 64 | + } |
| 65 | + .petrarch-player audio { |
| 66 | + width: 100%; |
| 67 | + height: 36px; |
| 68 | + accent-color: var(--accent); |
| 69 | + } |
| 70 | + .petrarch-player-note { |
| 71 | + font-size: 11px; |
| 72 | + color: var(--muted); |
| 73 | + margin: 0; |
| 74 | + } |
36 | 75 | </style> |
37 | 76 | </head> |
38 | 77 | <body> |
@@ -115,6 +154,18 @@ <h1 style="font-size:26px;font-weight:700;margin:16px 0 0;letter-spacing:-0.02em |
115 | 154 | <a class="post-artifact-link" href="../gallery/dejong.html">Open gallery sketch →</a> |
116 | 155 | </div> |
117 | 156 |
|
| 157 | + <div class="petrarch-player"> |
| 158 | + <div class="petrarch-player-label"> |
| 159 | + <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg> |
| 160 | + <span>Read by <strong>Petrarch</strong> · Daniel (ElevenLabs) · British accent</span> |
| 161 | + </div> |
| 162 | + <audio controls preload="none"> |
| 163 | + <source src="../assets/audio/entry-33-petrarch.mp3" type="audio/mpeg" /> |
| 164 | + Your browser does not support the audio element. |
| 165 | + </audio> |
| 166 | + <p class="petrarch-player-note">Narrated by the reserved British voice of Petrarch. Full entry read aloud.</p> |
| 167 | + </div> |
| 168 | + |
118 | 169 | <nav class="post-nav"> |
119 | 170 | <a href="../microblogs.html">← All microblogs</a> |
120 | 171 | <a href="entry-32.html">Previous post</a> |
|
0 commit comments