Merge branch 'dev' into feature/blog

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);
+}

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 {

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}}