From 0ffb7a06d69e245d8486a4169a5669355f0541f4 Mon Sep 17 00:00:00 2001
From: Mylloon <kennel.anri@tutanota.com>
Date: Thu, 30 May 2024 10:13:22 +0200
Subject: [PATCH] use text-shadow instead of text-stroke

---
 static/css/constants.css | 14 ++++++++------
 static/js/index.js       |  6 ++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/static/css/constants.css b/static/css/constants.css
index a868006..20c1e95 100644
--- a/static/css/constants.css
+++ b/static/css/constants.css
@@ -1,3 +1,11 @@
+:root {
+  color-scheme: light dark;
+
+  /* Global parameters */
+  --font-size: 1.15rem;
+  --font-family: "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", system-ui;
+}
+
 /* Parameters light */
 @media (prefers-color-scheme: light) {
   :root {
@@ -15,9 +23,3 @@
     --link-color: #ff80bf;
   }
 }
-
-/* Global parameters */
-:root {
-  --font-size: 1.15rem;
-  --font-family: "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", system-ui;
-}
diff --git a/static/js/index.js b/static/js/index.js
index 37a281c..40420be 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -13,8 +13,6 @@ window.addEventListener("load", () => {
     color: transparent;
   `;
 
-  const text_stroke = "-webkit-text-stroke: 0.2px var(--font-color);";
-
   const tags = [
     new Tag("Comment ça marche un PC 😵‍💫"),
     new Tag("Idiot certifié"),
@@ -27,7 +25,7 @@ window.addEventListener("load", () => {
       `
         background: linear-gradient(to bottom right, red 0%, red 50%, black 50%);
         ${clipping_text}
-        ${text_stroke}
+        text-shadow: 0px 0px 20px light-dark(transparent, var(--font-color));
       `
     ),
     new Tag("Nul en CSS", "font-family: 'Comic Sans MS', cursive"),
@@ -46,7 +44,7 @@ window.addEventListener("load", () => {
         background: conic-gradient(at 30% 60%, transparent 230deg, red 0, red 310deg, transparent 0),
                     linear-gradient(to bottom, black 45%, white 45%, white 67%, DarkGreen 67%);
         ${clipping_text}
-        ${text_stroke}
+        text-shadow: 0px 0px 20px var(--font-color);
       `
     ),
   ];