Merge pull request #58 from jcode-works/develop

release: promote landing lighthouse accessibility fix

Author: jb-thery

packages/ragmir-landing/src/components/hero-demo.tsx

@@ -282,7 +282,7 @@ export function HeroDemo({ translations }: HeroDemoProps): React.JSX.Element {
                     style={{ fontSize: "0.58rem" }}
                     type="button"
                   >
-                    <span className="text-muted-foreground/70" style={{ fontSize: "0.46rem" }}>
+                    <span className="text-foreground/70" style={{ fontSize: "0.46rem" }}>
                       {String(index + 1).padStart(2, "0")}
                     </span>
                     <Icon aria-hidden="true" className="size-2.5 shrink-0" />

packages/ragmir-landing/src/components/landing-navbar.tsx

@@ -30,14 +30,11 @@ const GITHUB_URL = "https://github.com/jcode-works/jcode-ragmir"
 
 export function RagmirLogo(): React.JSX.Element {
   return (
-    <span className="logo-stack font-black text-2xl text-foreground leading-none tracking-tight md:text-3xl">
-      <span className="logo-index-1">Ragmir</span>
-      <span aria-hidden="true" className="logo-index-2">
-        Ragmir
-      </span>
-      <span aria-hidden="true" className="logo-index-3">
-        Ragmir
-      </span>
+    <span
+      className="logo-stack font-black text-2xl text-foreground leading-none tracking-tight md:text-3xl"
+      data-logo-text="Ragmir"
+    >
+      <span className="logo-index-1 logo-text">Ragmir</span>
     </span>
   )
 }

packages/ragmir-landing/src/components/ragmir-logo.astro

@@ -2,8 +2,9 @@
 
 ---
 
-<span class="logo-stack font-black text-2xl text-foreground leading-none tracking-tight md:text-3xl">
-  <span class="logo-index-1">Ragmir</span>
-  <span aria-hidden="true" class="logo-index-2">Ragmir</span>
-  <span aria-hidden="true" class="logo-index-3">Ragmir</span>
+<span
+  class="logo-stack font-black text-2xl text-foreground leading-none tracking-tight md:text-3xl"
+  data-logo-text="Ragmir"
+>
+  <span class="logo-index-1 logo-text">Ragmir</span>
 </span>

packages/ragmir-landing/src/pages/404.astro

@@ -25,10 +25,9 @@ const homeUrl = getLocalizedUrl("/", defaultLang)
     <a aria-label="Ragmir" class="flex items-center transition hover:opacity-80" href={homeUrl}>
       <span
         class="logo-stack font-black text-2xl text-foreground leading-none tracking-tight md:text-3xl"
+        data-logo-text="Ragmir"
       >
-        <span class="logo-index-1">Ragmir</span>
-        <span aria-hidden="true" class="logo-index-2">Ragmir</span>
-        <span aria-hidden="true" class="logo-index-3">Ragmir</span>
+        <span class="logo-index-1 logo-text">Ragmir</span>
       </span>
     </a>
 

packages/ragmir-landing/src/pages/500.astro

@@ -25,10 +25,9 @@ const homeUrl = getLocalizedUrl("/", defaultLang)
     <a aria-label="Ragmir" class="flex items-center transition hover:opacity-80" href={homeUrl}>
       <span
         class="logo-stack font-black text-2xl text-foreground leading-none tracking-tight md:text-3xl"
+        data-logo-text="Ragmir"
       >
-        <span class="logo-index-1">Ragmir</span>
-        <span aria-hidden="true" class="logo-index-2">Ragmir</span>
-        <span aria-hidden="true" class="logo-index-3">Ragmir</span>
+        <span class="logo-index-1 logo-text">Ragmir</span>
       </span>
     </a>
 

packages/ragmir-landing/src/styles/global.css

@@ -166,7 +166,9 @@ textarea {
   --logo-glitch-b: #22d3ee;
 }
 
-.logo-stack span {
+.logo-stack::before,
+.logo-stack::after,
+.logo-stack .logo-text {
   grid-row-start: 1;
   grid-column-start: 1;
   --stack-height: calc(100% / var(--stacks) - 1px);
@@ -177,28 +179,34 @@ textarea {
   animation: logo-glitch ease infinite 2s alternate-reverse;
 }
 
-.logo-stack span:nth-child(odd) {
-  --glitch-translate: 8px;
+.logo-stack::before,
+.logo-stack::after {
+  content: attr(data-logo-text);
+  pointer-events: none;
 }
 
-.logo-stack span:nth-child(even) {
+.logo-stack::before {
+  --index: 1;
   --glitch-translate: -8px;
 }
 
-.logo-index-1 {
-  --index: 0;
-}
-
-.logo-index-2 {
-  --index: 1;
+.logo-stack::after {
+  --index: 2;
+  --glitch-translate: 8px;
 }
 
-.logo-index-3 {
-  --index: 2;
+.logo-index-1 {
+  --index: 0;
+  --glitch-translate: 8px;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .logo-stack span {
+  .logo-stack::before,
+  .logo-stack::after {
+    content: none;
+  }
+
+  .logo-stack .logo-text {
     animation: none;
     clip-path: none;
   }