small changes

index.html

@@ -25,27 +25,28 @@
         </div>
       </div>
       <div id="nowplaying-placeholder"></div>
-      <hr>
+      <div>
         <h3 class="sidebar-caption">Check out my friends!</h3>
         <a href="https://cassiecandles.net/">
           <img title="Incredibly talented dreampop musician" class="sidebar-webring" alt="Cassie Candles website icon" src="/assets/img/webring/cassiecandles/1056x372.webp"></img>
         </a>
-      <hr>
-        <h3 class="sidebar-caption">Webrings</h3>
+      </div>
+      <div>
+      <h3 class="sidebar-caption">Webrings</h3>
         <div class="webrings">
-          <div class="sidebar-webring pinkborder">
+          <div class="sidebar-webring textonly">
             <a href="https://baccyflap.com/noai" target="_blank">No AI webring</a><br>
             <a href="https://baccyflap.com/noai/?prv&s=mom" target="_top" title="previous">«</a>
             <a href="https://baccyflap.com/noai/?rnd" target="_top" title="random">random</a>
             <a href="https://baccyflap.com/noai/?nxt&s=mom" target="_top" title="next">»</a>
           </div>
-          <div class="sidebar-webring pinkborder">
+          <div class="sidebar-webring textonly">
             <a href="https://fediring.net" target="_blank">Fediring</a><br>
             <a href="https://fediring.net/previous?host=pogmom.me" target="_top" title="previous">«</a>
             <a href="https://fediring.net/random" target="_top" title="random">random</a>
             <a href="https://fediring.net/next?host=pogmom.me" target="_top" title="next">»</a>
           </div>
-          <div class="sidebar-webring pinkborder">
+          <div class="sidebar-webring textonly">
             <a href="http://geekring.net" target="_blank">Geekring</a><br>
             <a href="http://geekring.net/site/473/previous" target="_top" title="previous">«</a>
             <a href="http://geekring.net/site/473/random" target="_top" title="random">random</a>
@@ -64,8 +65,10 @@
             <script type="text/javascript" src="https://teethinvitro.neocities.org/webring/linuxring/script/onionring-widget.js"></script>
           </div>
         </div>
-      <hr>
-      <a class="mastodon-feed" href="https://masto.pogmom.me/@pogmommy" data-toot-limit="3" data-toot-account-id="110533482420174821" data-exclude-replies="true" data-exclude-reblogs="true"><p id="emfed-placeholder" class="sidebar-caption">Enable javascript to load mastodon posts</p></a>
+      </div>
+      <div>
+        <a class="mastodon-feed" href="https://masto.pogmom.me/@pogmommy" data-toot-limit="3" data-toot-account-id="110533482420174821" data-exclude-replies="true" data-exclude-reblogs="true"><p id="emfed-placeholder" class="sidebar-caption">Enable javascript to load mastodon posts</p></a>
+      </div>
     </div>
     <script type="module" src="https://esm.sh/emfed@1"></script>
     <script>

style/css/style.css

@@ -21,7 +21,12 @@ body {
 .sidebar {
   max-width: 400px;
   flex-grow: 1;
-  background: rgba(from var(--secondary-bg-color) r g b / 0.2);
+  &>div {
+    background: rgba(from var(--secondary-bg-color) r g b / 0.2);
+    padding: 10px 20px;
+    margin: 10px 0px;
+    border-radius: 8px;
+  }
   height: fit-content;
   width: fit-content;
   margin: 0 1vw auto;
@@ -38,15 +43,20 @@ body {
   border-radius: 8px;
 }
 .webrings{
-  height: 200px;
+  height: 190px;
+  width: 100%;
+  margin: auto;
   overflow: auto;
 }
 .sidebar-webring {
-  width: 40%;
-  margin: 1vmax auto;
+  width: 60%;
+  margin: 1vmin auto;
   display: block;
   border-radius: 4px;
   text-align: center;
+  &.textonly {
+    border-top: 2px dotted var(--main-fg-color);
+  }
 }
 .sidebar-caption {
   text-align: center;
@@ -133,7 +143,7 @@ p {
 .pinkborder {
   border-style: solid;
   border-color: var(--main-fg-color);
-  border-width: 3px;
+  border-width: 0px;
   border-radius: 8px;
 }
 .bubble:first-child {
@@ -257,6 +267,9 @@ a.now-playing {
 }
 .toot {
   padding: 1rem;
+  &:not(:last-child) {
+    border-bottom: 2px dotted var(--main-fg-color);
+  }
 }
 @keyframes show {
   100% {
@@ -339,3 +352,6 @@ a.now-playing {
   height: 100%;
   object-fit: cover;
 }
+.toot time {
+  display: none;
+}

style/js/lastfm-nowplaying.js

@@ -39,17 +39,17 @@ function getNowPlaying() {
 
 
 var nowPlayingNode = null;
-var nowPlayingBorder = null;
+//var nowPlayingBorder = null;
 
 function renderNowPlaying(track) {
   console.log(track);
-  if (nowPlayingBorder) {
-    nowPlayingBorder.remove();
-  }
+//  if (nowPlayingBorder) {
+//    nowPlayingBorder.remove();
+//  }
   if (nowPlayingNode) {
     nowPlayingNode.remove();
   }
-  nowPlayingBorder = document.createElement("hr");
+  //nowPlayingBorder = document.createElement("hr");
   nowPlayingNode = document.createElement("a");
   nowPlayingNode.setAttribute("class", "flexrow now-playing");
 
@@ -73,7 +73,7 @@ function renderNowPlaying(track) {
   nowPlayingNode.setAttribute("href", track.url);
 
   //document.body.appendChild(nowPlayingNode);
-  document.getElementById("nowplaying-placeholder").appendChild(nowPlayingBorder)
+//  document.getElementById("nowplaying-placeholder").appendChild(nowPlayingBorder)
   document.getElementById("nowplaying-placeholder").appendChild(nowPlayingNode);
 
   setTimeout(function() {