From 6fbe150d50ac51e6ee5d314670a503f695349562 Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Sun, 18 May 2025 20:29:35 +0200
Subject: [PATCH] Prefer pattern

---
 public/diagonal-stripes.svg |  2 +-
 src/components/UrlItem.tsx  | 16 ++++++++--------
 src/index.css               | 18 +++++++++---------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/public/diagonal-stripes.svg b/public/diagonal-stripes.svg
index 1237279..e4ccaa7 100644
--- a/public/diagonal-stripes.svg
+++ b/public/diagonal-stripes.svg
@@ -1,5 +1,5 @@
 <svg width="40" height="40" viewBox="0 0 40 40"
     xmlns="http://www.w3.org/2000/svg">
     <!-- <path stroke="black" stroke-width="1" d="M0,40 L40,0 M20,0 L0,20 M40,20 L20,40" /> -->
-    <path stroke="currentColor" stroke-width="4" d="M0,0 L40,40 M20,0 L40,20 M0,20 L20,40" />
+    <path stroke="currentColor" stroke-width="4" d="M-2,-2 L42,42 M18,-2 L42,22 M-2,18 L22,42" />
 </svg>
diff --git a/src/components/UrlItem.tsx b/src/components/UrlItem.tsx
index 47adfd9..d4428d6 100644
--- a/src/components/UrlItem.tsx
+++ b/src/components/UrlItem.tsx
@@ -1,19 +1,18 @@
-import { createResource } from "solid-js";
+import { createEffect, createResource } from "solid-js";
 import getDocument from "../getDocument";
 
 export default function UrlItem({ url }: { url: URL }) {
   const [document] = createResource(url, getDocument);
 
-  const title = () => document()?.title ?? url.hostname;
-  // classList={{
-  //   "relative  after:absolute after:inset-0 after:bg-[url(/public/diagonal-stripes.svg)] after:animate-stripes *:opacity-70 after:starting:opacity-0 after:transition-all after:transition-discrete after:duration-1000":
-  //     document.loading,
-  // }}
+  const title = () => document()?.title || url.hostname;
+
   return (
     <a
       href={url.href}
+      target="_blank"
+      rel="noreferrer"
       data-is-loading={document.loading || undefined}
-      class="group relative flex overflow-clip flex-col items-center justify-around p-4 size-28 border-4 rounded-3xl focus-visible:border-orange-500 focus-visible:text-orange-500 focus:outline-none text-center align-middle content-center data-is-loading:border-stone-400 "
+      class="group relative flex overflow-clip flex-col items-center justify-around p-4 size-28 border-4 rounded-3xl focus-visible:border-orange-500 focus-visible:text-orange-500 focus:outline-none text-center align-middle content-center data-is-loading:border-stone-900 outline-transparent hover:outline-stone-900 -outline-offset-4 hover:-outline-offset-6 outline-4 outline-solid transition-[outline]"
     >
       {/* <img
                   src={`https://icons.duckduckgo.com/ip3/${destination.url.hostname}.ico`}
@@ -27,9 +26,10 @@ export default function UrlItem({ url }: { url: URL }) {
       />
       <span>{title()}</span>
 
+      {/* Pattern based on tailwindcss.com */}
       <div
         data-name="stripes-animation"
-        class="hidden group-data-is-loading:block absolute inset-0 bg-[url(/public/diagonal-stripes.svg)] animate-stripes opacity-0 group-data-is-loading:opacity-100 text-stone-300 starting:opacity-0 transition-[display_opacity] duration-1000 transition-discrete"
+        class="hidden group-data-is-loading:block absolute inset-0 bg-[image:repeating-linear-gradient(45deg,_var(--pattern-fg)_0,_var(--pattern-fg)_4px,_transparent_0,_transparent_50%)] bg-[size:40px_40px] bg-fixed [--pattern-fg:var(--color-stone-900)] animate-stripes opacity-0 group-data-is-loading:opacity-100 text-stone-300 starting:opacity-0 transition-[display_opacity] duration-1000 transition-discrete"
       />
     </a>
   );
diff --git a/src/index.css b/src/index.css
index 44d8825..3765ed2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,17 +1,17 @@
 @import "tailwindcss";
 
 :root {
-  @apply bg-stone-100 text-stone-900;
+    @apply bg-stone-100 text-stone-900 caret-orange-600 accent-orange-500 selection:bg-stone-900 selection:text-orange-500;
 }
 
 @theme {
-  --animate-stripes: stripes 5s linear infinite;
-  @keyframes stripes {
-    from {
-      background-position: 0 0;
+    --animate-stripes: stripes 1.5s linear infinite;
+    @keyframes stripes {
+        from {
+            background-position: 0 0;
+        }
+        to {
+            background-position: 40px -40px;
+        }
     }
-    to {
-      background-position: 40px -40px;
-    }
-  }
 }
-- 
2.51.2