From 6c1819d29dd870b56572ff264099e21560c29de0 Mon Sep 17 00:00:00 2001
From: Toni <toni@kukec.dev>
Date: Mon, 26 Aug 2024 20:55:08 +0200
Subject: [PATCH 1/2] pronounce v2

slower and not in mentions
---
 lab/login/style.css | 79 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 75 insertions(+), 4 deletions(-)

diff --git a/lab/login/style.css b/lab/login/style.css
index 3f3e0d7a..11b5ea93 100644
--- a/lab/login/style.css
+++ b/lab/login/style.css
@@ -251,18 +251,69 @@
 /* =========== */
 /* PodeTond 💚 */
 /* =========== */
-.name-PodeTond.💚 {
+@supports not (-moz-appearance:none) { /* not firefox */
+    .name-PodeTond.💚 {
+        background: linear-gradient(
+            to right,
+          #eaacb8 20%,
+          #7acbf5 40%,
+            var(--green) 40%,
+            var(--green) 100%
+        );
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        display: inline-block; /* so it doesnt cut the heart */
+        font-family: "JetBrains Mono", sans-serif;
+    }
+}
+
+@supports (-moz-appearance:none) { /* firefox */
+    .name-PodeTond.💚 {
+      background: linear-gradient(
+        to right,
+        #eaacb8 5%,
+        #7acbf5 42%,
+        var(--green) 42%,
+        var(--green) 55%,
+        #eaacb8 55%,
+        #7acbf5 100%
+      );
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      display: inline-block; /* so it doesnt cut the heart */
+      font-family: "JetBrains Mono", sans-serif;
+    }
+}
+
+.name-PodeTond.💚::after {
+  content: " he/him   ";
   background: linear-gradient(
     to right,
     #eaacb8 20%,
-    #7acbf5 80%,
-    var(--green) 80%,
-    var(--green) 100%
+    #7acbf5 80%
   );
   -webkit-text-fill-color: transparent;
   background-clip: text;
   display: inline-block; /* so it doesnt cut the heart */
   font-family: "JetBrains Mono", sans-serif;
+  animation: pronounce 30s linear infinite;
+}
+
+.at-PodeTond.💚::after {
+  content: "";
+  animation: none;
+}
+
+.at-PodeTond.💚 {
+  background: linear-gradient(
+    to right,
+   #eaacb8 20%,
+   #7acbf5 80%,
+    var(--green) 80%,
+    var(--green) 100%
+  );
+  background-clip: text;
+  display: inline-block; 
 }
 
 .at-PodeTond.💚:hover {
@@ -273,6 +324,26 @@
   -webkit-text-fill-color: unset;
 }
 
+
+
+@media (prefers-reduced-motion: no-preference) {
+    @keyframes pronounce {
+            0%{content: " he/him   "; opacity:1} /* nbspaces for gradient */
+         8.33%{opacity:1}
+        16.66%{opacity:0}
+           25%{opacity:1}
+        33.33%{content: " they/them"; opacity:1}
+        41.66%{opacity:1}
+           50%{opacity:0}
+        58.33%{opacity:1}
+        66.66%{content: " she/her  "; opacity:1}
+           75%{opacity:1}
+        83.32%{opacity:0}
+        91.66%{opacity:1}
+          100%{content: " he/him   "; opacity:1}
+    }
+}
+
 /* ==== */
 /*  El  */
 /* ==== */

From 27167ea9e25a16ac3b2093e3ec952f8c30ffa041 Mon Sep 17 00:00:00 2001
From: Toni <toni@kukec.dev>
Date: Mon, 26 Aug 2024 22:54:16 +0200
Subject: [PATCH 2/2] fix issues on firefox android

its probably better this way
---
 lab/login/style.css | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/lab/login/style.css b/lab/login/style.css
index 11b5ea93..957950b4 100644
--- a/lab/login/style.css
+++ b/lab/login/style.css
@@ -272,10 +272,10 @@
       background: linear-gradient(
         to right,
         #eaacb8 5%,
-        #7acbf5 42%,
-        var(--green) 42%,
-        var(--green) 55%,
-        #eaacb8 55%,
+        #7acbf5 40%,
+        var(--green) 40%,
+        var(--green) 53%,
+        #eaacb8 53%,
         #7acbf5 100%
       );
       -webkit-text-fill-color: transparent;
@@ -286,7 +286,9 @@
 }
 
 .name-PodeTond.💚::after {
-  content: " he/him   ";
+  content: "he/him";
+  width: 6em;
+  padding-left: 0.6em;
   background: linear-gradient(
     to right,
     #eaacb8 20%,
@@ -301,14 +303,16 @@
 
 .at-PodeTond.💚::after {
   content: "";
+  width:0;
+  padding-left:0;
   animation: none;
 }
 
 .at-PodeTond.💚 {
   background: linear-gradient(
     to right,
-   #eaacb8 20%,
-   #7acbf5 80%,
+    #eaacb8 20%,
+    #7acbf5 80%,
     var(--green) 80%,
     var(--green) 100%
   );
@@ -328,19 +332,19 @@
 
 @media (prefers-reduced-motion: no-preference) {
     @keyframes pronounce {
-            0%{content: " he/him   "; opacity:1} /* nbspaces for gradient */
+            0%{content: "he/him"; opacity:1}
          8.33%{opacity:1}
         16.66%{opacity:0}
            25%{opacity:1}
-        33.33%{content: " they/them"; opacity:1}
+        33.33%{content: "they/them"; opacity:1}
         41.66%{opacity:1}
            50%{opacity:0}
         58.33%{opacity:1}
-        66.66%{content: " she/her  "; opacity:1}
+        66.66%{content: "she/her"; opacity:1}
            75%{opacity:1}
         83.32%{opacity:0}
         91.66%{opacity:1}
-          100%{content: " he/him   "; opacity:1}
+          100%{content: "he/him"; opacity:1}
     }
 }