From 351c0bed6e25ba11bd320541bd266b39d9251941 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.space>
Date: Fri, 13 Feb 2026 17:05:12 +0000
Subject: [PATCH 1/2] fix alignment for music releases with many links

---
 public/style/music.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/style/music.css b/public/style/music.css
index 4973e44..190e642 100644
--- a/public/style/music.css
+++ b/public/style/music.css
@@ -93,7 +93,7 @@ h3.music-type-upcoming {
     gap: .5rem;
     flex-wrap: wrap;
     line-height: 1.7em;
-    justify-content: center;
+    justify-content: start;
 }
 
 .music-links li {

From a7c52fd177690e37f6024ef04e41d66439f3a689 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.space>
Date: Mon, 27 Apr 2026 09:26:40 +0100
Subject: [PATCH 2/2] add melon-ring webring to index

---
 public/style/index.css    | 28 ++++++++++++++++++++++++++++
 templates/html/index.html | 10 ++++++++++
 2 files changed, 38 insertions(+)

diff --git a/public/style/index.css b/public/style/index.css
index b970c17..8e20435 100644
--- a/public/style/index.css
+++ b/public/style/index.css
@@ -332,3 +332,31 @@ div#web-buttons {
 .live-viewers {
     opacity: .5;
 }
+
+.webring {
+    display: flex;
+    flex-direction: row;
+}
+.webring a {
+    border: 1px solid var(--links);
+    height: 1.5em;
+    padding: 0 0.5em;
+    text-align: center;
+    line-height: 1.7em;
+    transition: color .1s linear, background-color .1s linear, box-shadow .1s linear;
+}
+.webring a:nth-child(1) {
+    border-radius: 2px 0 0 2px;
+    border-right: none;
+}
+.webring a:nth-child(3) {
+    border-radius: 0 2px 2px 0;
+    border-left: none;
+}
+.webring a:hover {
+    color: #eee;
+    border-color: #eee;
+    background-color: var(--links) !important;
+    text-decoration: none;
+    box-shadow: 0 0 1em var(--links);
+}
diff --git a/templates/html/index.html b/templates/html/index.html
index 5255196..fbe1b18 100644
--- a/templates/html/index.html
+++ b/templates/html/index.html
@@ -273,5 +273,15 @@
         </a>
         <img src="/img/buttons/misc/blink.gif" alt="closeup anime blink" width="88" height="31">
     </div>
+
+    <h2 class="typeout">
+        ## webring
+    </h2>
+
+    <div class="webring">
+        <a href="https://melon-ring.pathetic.systems/arimelody/previous">◀</a>
+        <a href="https://melon-ring.pathetic.systems">melon-ring</a>
+        <a href="https://melon-ring.pathetic.systems/arimelody/next">▶</a>
+    </div>
 </main>
 {{end}}