From da10f323beca2f0ee1751fe429f43aea77eb1aa9 Mon Sep 17 00:00:00 2001
From: gablaxy <32848524+gablaxy@users.noreply.github.com>
Date: Thu, 5 Oct 2023 09:36:40 +0200
Subject: [PATCH] Update webring.js

---
 webring.js | 39 ++++++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/webring.js b/webring.js
index 341badc..d2163a8 100644
--- a/webring.js
+++ b/webring.js
@@ -3,26 +3,46 @@ const JSON_WEBRING = "https://raw.githubusercontent.com/gablaxy/webring/main/web
 const template = document.createElement("template");
 template.innerHTML = `
 <style>
+#webring-container{
+    margin-top: 10px;
+    border: 1px solid #9162c7;
+    border-radius: 5px;
+    padding: 5px;
+    display: inline-flex;
+    background-color: #222326;
+}
+
+#webring-title{
+    font-family: Title;
+    color: #c296f5;
+    margin-top: 0;
+    margin-bottom: 3px;
+    padding: 0 5px;
+    font-size: 0.8em;
+}
+
 #webring-inner a{
-    color: var(--titres);
+    color: #9162c7;
     text-decoration: none;
+    padding: 0 5px;
 }
 
 #webring-inner a:hover{
-    color: var(--hover);
+    color: #c296f5;
 }
 
 #webring-inner{
-    color: var(--texte);
+    font-family: FreePixel;
+    color: #c296f5;
+    padding: 0 5px;
 }
-
 </style>
 
-<br>
-<b class="black" id="webring-inner">
-    <!-- Webring content -->
-</b>
-<br>
+<div id="webring-container">
+    <b class="black" id="webring-inner">
+        <!-- Webring content -->
+    </b>
+</div>
 `;
 
 class Webring extends HTMLElement {
@@ -52,6 +72,7 @@ class Webring extends HTMLElement {
 
                 
                 const content = `
+                <h3 id="webring-title">grossomodo</h3>
                 <a href="${sites[previousSiteIndex].url}" rel="prev noreferrer external">&lt; avant</a>
                 /   
                <a rel="external noreferrer" href="${sites[matchedSiteIndex].url}">${sites[matchedSiteIndex].name}</a>