From 296a297b7f998294b60804b1ac208c5f793e860b Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Wed, 4 Sep 2024 02:33:59 +0000
Subject: [PATCH] Update link styling

---
 app/public/index.css | 19 +++++++++++++++++++
 app/src/Home.tsx     | 11 ++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/app/public/index.css b/app/public/index.css
index 3bfdea2..a61a0a9 100644
--- a/app/public/index.css
+++ b/app/public/index.css
@@ -3,6 +3,7 @@ body {
     background: #f7f7fa;
     font-family: 'Satoshi', sans-serif;
     font-size: 16px;
+    color: #1E2122;
 }
 
 article {
@@ -46,3 +47,21 @@ ul {
     margin: 0;
     padding: 0;
 }
+
+.ensip-list li a {
+
+}
+
+.ensip-list li[data-X=true] a {
+    color: #DE5999;
+}
+
+.link {
+    color: #3889FF;
+}
+
+.link:hover {
+    cursor: pointer;
+    text-decoration: underline;
+    color: #056AFF;
+}
diff --git a/app/src/Home.tsx b/app/src/Home.tsx
index ef9ae42..aca7843 100644
--- a/app/src/Home.tsx
+++ b/app/src/Home.tsx
@@ -10,10 +10,15 @@ export const Home: FC<{ ensips: ENSIPData[] }> = ({ ensips }) => {
             <article>
                 <Navbar />
                 <h1>ENSIPs</h1>
-                <ul>
+                <ul className="ensip-list">
                     {ensips.map(({ path, title }) => (
-                        <li key={path}>
-                            <a href={`/${path}`}>{title}</a>
+                        <li
+                            key={path}
+                            data-X={title.toLowerCase().startsWith('ensip-x')}
+                        >
+                            <a href={`/${path}`} className="link">
+                                {title}
+                            </a>
                         </li>
                     ))}
                 </ul>