From ec4b4f95ed8cd716ae5d820e613816131d47a8f8 Mon Sep 17 00:00:00 2001
From: pax <pax@staff.libraryofcode.org>
Date: Tue, 15 Oct 2024 19:36:37 +0400
Subject: [PATCH] fix styling clash with hover effect

---
 index.html | 98 +++++++++++++++++++++++++++---------------------------
 1 file changed, 49 insertions(+), 49 deletions(-)

diff --git a/index.html b/index.html
index 4d823a2..f22a2b3 100644
--- a/index.html
+++ b/index.html
@@ -17,18 +17,18 @@
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
                 <title>Time Tracking</title>
                 <!-- Outer Circle (Clock shape) -->
-                <circle cx="50" cy="50" r="45" stroke="#333" stroke-width="4" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></circle>
+                <circle cx="50" cy="50" r="45" stroke="#96928d" stroke-width="4" fill="none"></circle>
                 
                 <!-- Clock Hands -->
-                <line x1="50" y1="50" x2="50" y2="20" stroke="#333" stroke-width="3" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #5c564c;"></line>
-                <line x1="50" y1="50" x2="75" y2="50" stroke="#333" stroke-width="3" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #5c564c;"></line>
+                <line x1="50" y1="50" x2="50" y2="20" stroke="#645D54" stroke-width="3" ></line>
+                <line x1="50" y1="50" x2="75" y2="50" stroke="#645D54" stroke-width="3" ></line>
                 
                 <!-- Curly Braces (Code symbol) -->
-                <text x="15" y="55" font-size="30" font-family="monospace" fill="#333" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;">{</text>
-                <text x="70" y="55" font-size="30" font-family="monospace" fill="#333" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;">}</text>
+                <text x="15" y="55" font-size="30" font-family="monospace" fill="#96928d">{</text>
+                <text x="70" y="55" font-size="30" font-family="monospace" fill="#96928d" >}</text>
                 
                 <!-- Service Name (Library of Code) -->
-                <text x="50%" y="75" font-size="10" font-family="Arial" fill="#333" text-anchor="middle" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;">
+                <text x="50%" y="75" font-size="10" font-family="Arial" fill="#96928d" text-anchor="middle">
                   Time tracking
                 </text></svg>              
 
@@ -37,18 +37,18 @@
             <title>Web Mail</title>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
                 <!-- Outer Circle -->
-                <circle cx="50" cy="50" r="45" stroke="#333" stroke-width="3" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></circle>
+                <circle cx="50" cy="50" r="45" stroke="#96928d" stroke-width="3" fill="none"></circle>
               
                 <!-- Envelope Icon (Webmail symbol) -->
-                <rect x="30" y="35" width="40" height="25" stroke="#333" stroke-width="2" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></rect>
-                <polyline points="30,35 50,50 70,35" stroke="#333" stroke-width="2" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></polyline>
+                <rect x="30" y="35" width="40" height="25" stroke="#96928d" stroke-width="2" fill="none" ></rect>
+                <polyline points="30,35 50,50 70,35" stroke="#96928d" stroke-width="2" fill="none" ></polyline>
                 
                 <!-- Workflow Arrows -->
-                <path d="M35 65 L50 75 L65 65" stroke="#333" stroke-width="2" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></path>
-                <line x1="50" y1="55" x2="50" y2="75" stroke="#333" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #5c564c;"></line>
+                <path d="M35 65 L50 75 L65 65" stroke="#96928d" stroke-width="2" fill="none" ></path>
+                <line x1="50" y1="55" x2="50" y2="75" stroke="#96928d" stroke-width="2" ></line>
               
                 <!-- Service Name (Optional) -->
-                <text x="50%" y="85" font-size="10" font-family="Arial" fill="#333" text-anchor="middle" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;">
+                <text x="50%" y="85" font-size="10" font-family="Arial" fill="#96928d" text-anchor="middle" >
                   Web Mail
                 </text>
               </svg>
@@ -58,44 +58,44 @@
             <title>Human Resources</title>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
                 <!-- Outer Circle -->
-                <circle cx="50" cy="50" r="45" stroke="#333" stroke-width="3" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></circle>
+                <circle cx="50" cy="50" r="45" stroke="#96928d" stroke-width="3" fill="none"></circle>
               
                 <!-- Abstract Person Icon (HR symbol) -->
-                <circle cx="50" cy="35" r="8" fill="#333" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;"></circle> <!-- Head -->
-                <path d="M50 43 L40 60 L60 60 Z" fill="#333" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #1c2020;"></path> <!-- Body -->
+                <circle cx="50" cy="35" r="8" fill="#96928d" ></circle> <!-- Head -->
+                <path d="M50 43 L40 60 L60 60 Z" fill="#1c2020"></path> <!-- Body -->
               
                 <!-- Briefcase (Business/HR symbol) -->
-                <rect x="38" y="60" width="24" height="12" fill="none" stroke="#333" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></rect>
-                <line x1="43" y1="60" x2="43" y2="72" stroke="#333" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #5c564c;"></line>
-                <line x1="57" y1="60" x2="57" y2="72" stroke="#333" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #5c564c;"></line>
-                <rect x="47" y="56" width="6" height="4" fill="#333" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;"></rect> <!-- Handle -->
+                <rect x="38" y="60" width="24" height="12" fill="none" stroke="#96928d" stroke-width="2"></rect>
+                <line x1="43" y1="60" x2="43" y2="72" stroke="#96928d" stroke-width="2" ></line>
+                <line x1="57" y1="60" x2="57" y2="72" stroke="#96928d" stroke-width="2" ></line>
+                <rect x="47" y="56" width="6" height="4" fill="#96928d"></rect> <!-- Handle -->
               
                 <!-- Service Name (Optional) -->
-                <text x="50%" y="83" font-size="10" font-family="Arial" fill="#333" text-anchor="middle" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;">
+                <text x="50%" y="83" font-size="10" font-family="Arial" fill="#96928d" text-anchor="middle">
                   HR
                 </text>
               </svg>
 
         </a>
         <a href="https://skb.libraryofcode.org/" class="bento-item large">
-            <title>Staff Knowledge base</title>
+            <title>Staff Knowledge Base</title>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
       <!-- Outer Circle -->
-      <circle cx="50" cy="50" r="45" stroke="#333" stroke-width="3" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></circle>
+      <circle cx="50" cy="50" r="45" stroke="#96928d" stroke-width="3" fill="none"></circle>
     
       <!-- Book Icon (Knowledge symbol) -->
-      <rect x="30" y="35" width="40" height="30" fill="none" stroke="#333" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></rect>
-      <line x1="50" y1="35" x2="50" y2="65" stroke="#333" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #5c564c;"></line> <!-- Book spine -->
-      <line x1="30" y1="40" x2="50" y2="40" stroke="#333" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #5c564c;"></line> <!-- Top page -->
-      <line x1="50" y1="40" x2="70" y2="40" stroke="#333" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #5c564c;"></line> <!-- Top page -->
+      <rect x="30" y="35" width="40" height="30" fill="none" stroke="#96928d" stroke-width="2"></rect>
+      <line x1="50" y1="35" x2="50" y2="65" stroke="#96928d" stroke-width="2" ></line> <!-- Book spine -->
+      <line x1="30" y1="40" x2="50" y2="40" stroke="#96928d" stroke-width="2" ></line> <!-- Top page -->
+      <line x1="50" y1="40" x2="70" y2="40" stroke="#96928d" stroke-width="2" ></line> <!-- Top page -->
     
       <!-- Information Icon (i symbol) -->
-      <circle cx="50" cy="25" r="4" fill="#333" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;"></circle>
-      <rect x="48" y="29" width="4" height="10" fill="#333" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;"></rect>
+      <circle cx="50" cy="25" r="4" fill="#96928d" ></circle>
+      <rect x="48" y="29" width="4" height="10" fill="#96928d"></rect>
     
       <!-- Centered Service Name -->
-      <text x="50" y="82" font-size="10" font-family="Arial" fill="#333" text-anchor="middle" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;">
-    Staff wiki
+      <text x="50" y="82" font-size="10" font-family="Arial" fill="#96928d" text-anchor="middle">
+        Staff KB
       </text>
     </svg>
         </a>
@@ -103,10 +103,10 @@
             <title>Gitea</title>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
                 <!-- Outer Circle -->
-                <circle cx="50" cy="50" r="45" stroke="#333" stroke-width="3" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></circle>
+                <circle cx="50" cy="50" r="45" stroke="#96928d" stroke-width="3" fill="none"></circle>
               
                 <!-- Code Tags with "Gitea" -->
-                <text x="50%" y="55" font-size="16" font-family="monospace" fill="#333" text-anchor="middle" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;">
+                <text x="50%" y="55" font-size="16" font-family="monospace" fill="#96928d" text-anchor="middle">
                   &lt;/Gitea&gt;
                 </text>
               </svg>
@@ -116,14 +116,14 @@
             <title>Mailing lists</title>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
                 <!-- Outer Circle -->
-                <circle cx="50" cy="50" r="45" stroke="#333" stroke-width="3" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></circle>
+                <circle cx="50" cy="50" r="45" stroke="#96928d" stroke-width="3" fill="none" ></circle>
               
                 <!-- Envelope Icon -->
-                <rect x="30" y="35" width="40" height="25" fill="none" stroke="#333" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></rect>
-                <polyline points="30,35 50,50 70,35" stroke="#333" stroke-width="2" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></polyline> <!-- Envelope flap -->
+                <rect x="30" y="35" width="40" height="25" fill="none" stroke="#96928d" stroke-width="2" ></rect>
+                <polyline points="30,35 50,50 70,35" stroke="#96928d" stroke-width="2" fill="none" ></polyline> <!-- Envelope flap -->
                 
                 <!-- Mailing List Text -->
-                <text x="50%" y="74" font-size="10" font-family="Arial" fill="#333" text-anchor="middle" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;">
+                <text x="50%" y="74" font-size="10" font-family="Arial" fill="#96928d" text-anchor="middle">
                   Mailing Lists
                 </text>
               </svg>
@@ -132,18 +132,18 @@
             <title>Status page</title>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
                 <!-- Outer Circle -->
-                <circle cx="50" cy="50" r="45" stroke="#333" stroke-width="3" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></circle>
+                <circle cx="50" cy="50" r="45" stroke="#96928d" stroke-width="3" fill="none" ></circle>
               
                 <!-- Status Page Text in Green -->
-                <text x="61.5%" y="55" font-size="11" font-family="Arial" fill="green" text-anchor="middle" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #56bf56;">
+                <text x="61.5%" y="55" font-size="11" font-family="Arial" fill="#56bf56" text-anchor="middle">
                   Status Page
                 </text>
               
                 <!-- Green Status Dot moved to cx="20" cy="50" -->
-                <circle cx="20" cy="50" r="8" fill="green" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #56bf56;"></circle> <!-- Status Dot -->
+                <circle cx="20" cy="50" r="8" fill="#56bf56"></circle> <!-- Status Dot -->
               
                 <!-- Checkmark moved to cx="20" cy="50" -->
-                <path d="M15 50 L20 55 L25 45" stroke="white" stroke-width="3" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #aeadaa;"></path> <!-- Checkmark -->
+                <path d="M15 50 L20 55 L25 45" stroke="#aeadaa" stroke-width="3" fill="none"></path> <!-- Checkmark -->
               </svg>
 
         </a>
@@ -151,21 +151,21 @@
             <title>Public Knowledge base</title>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
                 <!-- Outer Circle -->
-                <circle cx="50" cy="50" r="45" stroke="#333" stroke-width="3" fill="none" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #96928d;"></circle>
+                <circle cx="50" cy="50" r="45" stroke="#96928d" stroke-width="3" fill="none" ></circle>
               
                 <!-- Book Icon (Knowledge symbol) -->
-                <rect x="30" y="35" width="40" height="30" fill="#4CAF50" stroke="#333" stroke-width="2" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #2e6930; --darkreader-inline-stroke: #96928d;"></rect> <!-- Green Book Cover -->
-                <line x1="50" y1="35" x2="50" y2="65" stroke="#333" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #5c564c;"></line> <!-- Book spine -->
-                <line x1="30" y1="40" x2="50" y2="40" stroke="#333" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #5c564c;"></line> <!-- Top page -->
-                <line x1="50" y1="40" x2="70" y2="40" stroke="#333" stroke-width="2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: #5c564c;"></line> <!-- Top page -->
+                <rect x="30" y="35" width="40" height="30" fill="#4CAF50" stroke="#96928d" stroke-width="2"></rect> <!-- Green Book Cover -->
+                <line x1="50" y1="35" x2="50" y2="65" stroke="#96928d" stroke-width="2" ></line> <!-- Book spine -->
+                <line x1="30" y1="40" x2="50" y2="40" stroke="#96928d" stroke-width="2" ></line> <!-- Top page -->
+                <line x1="50" y1="40" x2="70" y2="40" stroke="#96928d" stroke-width="2" ></line> <!-- Top page -->
               
                 <!-- Lock Icon (symbolizing internal access) -->
-                <rect x="44" y="25" width="12" height="8" fill="#FFC107" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #bf9516;"></rect> <!-- Yellow lock body -->
-                <rect x="48" y="20" width="4" height="5" fill="#FFC107" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #bf9516;"></rect> <!-- Yellow lock shackle -->
+                <rect x="44" y="25" width="12" height="8" fill="#FFC107"></rect> <!-- Yellow lock body -->
+                <rect x="48" y="20" width="4" height="5" fill="#FFC107" ></rect> <!-- Yellow lock shackle -->
               
                 <!-- Centered Service Name -->
-                <text x="50" y="80" font-size="10" font-family="Arial" fill="#333" text-anchor="middle" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #96928d;">
-                  public Wiki
+                <text x="50" y="80" font-size="10" font-family="Arial" fill="#96928d" text-anchor="middle">
+                Public KB
                 </text>
               </svg>
 
-- 
2.20.1