temp style for horsering and audio

Author: ukriu

index.html

@@ -51,12 +51,25 @@ <h1>ukriu!</h1>
          </div>
       </main>
       <footer>
-         <p style="text-align:center;">
-            <a id="playButton" href="#" onclick="event.preventDefault(); togglePlayPause();">
-            ~♫ 泣きながら「命に嫌われている。」歌ってみた【こはならむ】 ♫~
-            </a>
-         </p>
          <audio id="audioPlayer" src="./res/media/bg.m4a" type="audio/m4a"></audio>
+         <div id="containRing">
+            <div id="left">
+            <p style="text-align:center;">
+               <a class="link" href="https://horser.ing/prev/ukriu" rel="nofollow"><-&nbsp;&nbsp;</a>
+               <a class="link" href="http://horser.ing" rel="nofollow">horsering</a>
+               <a class="link" href="https://horser.ing/next/ukriu" rel="nofollow">&nbsp;&nbsp;-></a>
+            </p>
+            </div>
+            <div id="middle"><p style="text-align:center;"><a>|</a></p></div>
+            <div id="right">
+              <p style="text-align:center;">
+                <a id="playButton" href="#" onclick="event.preventDefault(); togglePlayPause();">
+                    ~ ♫ ~
+                </a>
+                    <!-- ~♫ 泣きながら「命に嫌われている。」歌ってみた【こはならむ】 ♫~ -->
+              </p>
+            </div>
+         </div>
          <hr>
          <div id="container">
             <div id="left">

res/style.css

@@ -89,12 +89,18 @@ a:active {color: var(--active-color);;}
 }
 .nav .link.active {color: var(--active-color);;}
 
+#containRing {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: -1rem;
+}
 #container {
   display: flex;
   justify-content: space-between;
   width: 100%;
 }
-#left, #right {width: auto;}
+#left, #middle, #right {width: auto;}
 
 .author {
   font-size: 0.8rem;