webring modification

This commit is contained in:
gablaxy 2026-04-07 14:33:24 +02:00
parent 59c445d3c2
commit 16936fde3b

View file

@ -3,9 +3,14 @@ const JSON_WEBRING = "https://git.gablaxy.xyz/api/v1/repos/gablaxy/webring/raw/w
const template = document.createElement("template"); const template = document.createElement("template");
template.innerHTML = ` template.innerHTML = `
<style> <style>
:root{
--webring-texte: #c296f5;
--webring-links: #9162c7;
}
#webring-container{ #webring-container{
margin-top: 10px; margin-top: 10px;
border: 1px solid #9162c7; border: 1px solid var(--webring-links);
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
display: inline-flex; display: inline-flex;
@ -13,28 +18,33 @@ template.innerHTML = `
} }
#webring-title{ #webring-title{
font-family: Title; color: var(--webring-texte);
color: #c296f5;
margin-top: 0; margin-top: 0;
margin-bottom: 3px; margin-bottom: 3px;
padding: 0 5px; padding: 0 5px;
font-size: 1.2em; font-size: 1.2em;
text-align: center; text-align: center;
display: flex;
align-items: center;
justify-content: space-between;
}
#webring-title .spacer {
width: 1em;
} }
#webring-inner a{ #webring-inner a{
color: #9162c7; color: var(--webring-links);
text-decoration: none; text-decoration: none;
padding: 0 5px; padding: 0 5px;
} }
#webring-inner a:hover{ #webring-inner a:hover{
color: #c296f5; color: var(--webring-texte);
} }
#webring-inner{ #webring-inner{
font-family: FreePixel; color: var(--webring-texte);
color: #c296f5;
padding: 0 5px; padding: 0 5px;
} }
</style> </style>
@ -66,7 +76,7 @@ class Webring extends HTMLElement {
if (matchedSiteIndex === -1) { if (matchedSiteIndex === -1) {
this.shadowRoot.querySelector("#webring-inner").insertAdjacentHTML("afterbegin", ` this.shadowRoot.querySelector("#webring-inner").insertAdjacentHTML("afterbegin", `
<h3 id="webring-title">grossomodo</h3> <h3 id="webring-title"><span class="spacer"></span><span>grossomodo</span><a class="hub" href="https://hub.gablaxy.xyz/">X</a></h3>
<p>T'es pas dans le gang bozo</p> <p>T'es pas dans le gang bozo</p>
`); `);
return; return;
@ -79,7 +89,7 @@ class Webring extends HTMLElement {
if (nextSiteIndex >= sites.length) nextSiteIndex = 0; if (nextSiteIndex >= sites.length) nextSiteIndex = 0;
const content = ` const content = `
<h3 id="webring-title">grossomodo</h3> <h3 id="webring-title"><span class="spacer"></span><span>grossomodo</span><a class="hub" href="https://hub.gablaxy.xyz/">X</a></h3>
<a href="${sites[previousSiteIndex].url}" rel="prev noreferrer external">&lt; avant</a> <a href="${sites[previousSiteIndex].url}" rel="prev noreferrer external">&lt; avant</a>
/ /
<a rel="external noreferrer" href="${sites[matchedSiteIndex].url}">${sites[matchedSiteIndex].name}</a> <a rel="external noreferrer" href="${sites[matchedSiteIndex].url}">${sites[matchedSiteIndex].name}</a>
@ -94,7 +104,7 @@ class Webring extends HTMLElement {
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
const content = ` const content = `
<h3 id="webring-title">grossomodo</h3> <h3 id="webring-title"><span class="spacer"></span><span>grossomodo</span><a class="hub" href="https://hub.gablaxy.xyz/">X</a></h3>
<p>T'es pas dans le gang bozo</p> <p>T'es pas dans le gang bozo</p>
`; `;
@ -105,4 +115,4 @@ class Webring extends HTMLElement {
} }
} }
window.customElements.define("webring-iutechno", Webring); window.customElements.define("webring-iutechno", Webring);