From 8253f879d600a2c6bdac78bccd65d0b45f49d245 Mon Sep 17 00:00:00 2001
From: Tirey Morris <tirey@hey.com>
Date: Wed, 17 Jul 2024 17:05:23 -0500
Subject: [PATCH] increase usability of light mode

---
 public/styles/uno.css       | 50 ++++++++++++++++---------------------
 src/components/Articles.tsx |  6 ++---
 src/components/Layout.tsx   |  4 +--
 3 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/public/styles/uno.css b/public/styles/uno.css
index 8a9502b..9d8ccf6 100644
--- a/public/styles/uno.css
+++ b/public/styles/uno.css
@@ -11,67 +11,58 @@
 .h-8{height:2rem;}
 .min-h-screen{min-height:100vh;}
 .w-12{width:3rem;}
-.w-full,
-[w-full=""]{width:100%;}
-[h1=""]{height:0.25rem;}
-.flex,
-[flex=""]{display:flex;}
+.w-full{width:100%;}
+.flex{display:flex;}
 .flex-col{flex-direction:column;}
 .hover\:-translate-y-1:hover{--un-translate-y:-0.25rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .cursor-pointer{cursor:pointer;}
-.items-center,
-[items-center=""]{align-items:center;}
+.items-center{align-items:center;}
 .justify-center{justify-content:center;}
 .gap-2{gap:0.5rem;}
 .gap-3{gap:0.75rem;}
 .gap-4{gap:1rem;}
 .overflow-hidden{overflow:hidden;}
 .border{border-width:1px;}
+.border-l-4{border-left-width:4px;}
+.border-blue-500{--un-border-opacity:1;border-color:rgb(59 130 246 / var(--un-border-opacity));}
 .border-gray-2{--un-border-opacity:1;border-color:rgb(229 231 235 / var(--un-border-opacity));}
 .focus\:border-blue-200:focus{--un-border-opacity:1;border-color:rgb(191 219 254 / var(--un-border-opacity));}
 .rounded-lg{border-radius:0.5rem;}
 .rounded-md{border-radius:0.375rem;}
 .rounded-sm{border-radius:0.125rem;}
-.border-none{border-style:none;}
+.border-none,
+.dark .dark\:border-none{border-style:none;}
 .border-solid{border-style:solid;}
 .bg-blue-300{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity)) /* #93c5fd */;}
+.bg-sky-100{--un-bg-opacity:1;background-color:rgb(224 242 254 / var(--un-bg-opacity)) /* #e0f2fe */;}
+.bg-slate-100{--un-bg-opacity:1;background-color:rgb(241 245 249 / var(--un-bg-opacity)) /* #f1f5f9 */;}
 .bg-transparent{background-color:transparent /* transparent */;}
-.bg-white,
-[bg-white=""]{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity)) /* #fff */;}
 .dark .dark\:bg-gray-800{--un-bg-opacity:1;background-color:rgb(31 41 55 / var(--un-bg-opacity)) /* #1f2937 */;}
-.dark .dark\:bg-gray-900,
-.dark [dark\:bg-gray-900=""]{--un-bg-opacity:1;background-color:rgb(17 24 39 / var(--un-bg-opacity)) /* #111827 */;}
+.dark .dark\:bg-gray-900{--un-bg-opacity:1;background-color:rgb(17 24 39 / var(--un-bg-opacity)) /* #111827 */;}
 .hover\:bg-blue-400:hover{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity)) /* #60a5fa */;}
-.from-blue-500,
-[from-blue-500=""]{--un-gradient-from-position:0%;--un-gradient-from:rgb(59 130 246 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(59 130 246 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
-.to-purple-500,
-[to-purple-500=""]{--un-gradient-to-position:100%;--un-gradient-to:rgb(168 85 247 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
-.bg-gradient-to-r,
-[bg-gradient-to-r=""]{--un-gradient-shape:to right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
+.from-blue-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(59 130 246 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(59 130 246 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
+.to-purple-500{--un-gradient-to-position:100%;--un-gradient-to:rgb(168 85 247 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
+.bg-gradient-to-r{--un-gradient-shape:to right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
 .p-0{padding:0;}
+.p-3{padding:0.75rem;}
 .p-4{padding:1rem;}
-.px-4,
-[px-4=""]{padding-left:1rem;padding-right:1rem;}
+.px-4{padding-left:1rem;padding-right:1rem;}
 .py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
-.py-2,
-[py-2=""]{padding-top:0.5rem;padding-bottom:0.5rem;}
+.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
 .pl-3{padding-left:0.75rem;}
 .pr-10{padding-right:2.5rem;}
 .text-base{font-size:1rem;line-height:1.5rem;}
-.text-lg{font-size:1.125rem;line-height:1.75rem;}
 .text-sm{font-size:0.875rem;line-height:1.25rem;}
 .text-xl{font-size:1.25rem;line-height:1.75rem;}
 .dark .dark\:text-blue-400{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity)) /* #60a5fa */;}
 .dark .dark\:text-gray-400{--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity)) /* #9ca3af */;}
 .dark .dark\:text-white,
-.dark [dark\:text-white=""],
-.text-white,
-[text-white=""]{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
+.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
 .text-black{--un-text-opacity:1;color:rgb(0 0 0 / var(--un-text-opacity)) /* #000 */;}
-.text-blue-600{--un-text-opacity:1;color:rgb(37 99 235 / var(--un-text-opacity)) /* #2563eb */;}
 .text-gray-500{--un-text-opacity:1;color:rgb(107 114 128 / var(--un-text-opacity)) /* #6b7280 */;}
 .text-neutral-500{--un-text-opacity:1;color:rgb(115 115 115 / var(--un-text-opacity)) /* #737373 */;}
+.text-sky-700{--un-text-opacity:1;color:rgb(3 105 161 / var(--un-text-opacity)) /* #0369a1 */;}
 .text-slate-900{--un-text-opacity:1;color:rgb(15 23 42 / var(--un-text-opacity)) /* #0f172a */;}
 .dark .dark\:visited\:text-purple-400:visited{--un-text-opacity:1;color:rgb(192 132 252 / var(--un-text-opacity)) /* #c084fc */;}
 .visited\:text-purple-600:visited{--un-text-opacity:1;color:rgb(147 51 234 / var(--un-text-opacity)) /* #9333ea */;}
@@ -79,10 +70,11 @@
 .hover\:text-blue-800:hover{--un-text-opacity:1;color:rgb(30 64 175 / var(--un-text-opacity)) /* #1e40af */;}
 .font-bold{font-weight:700;}
 .font-semibold{font-weight:600;}
+.leading-relaxed{line-height:1.625;}
+.tracking-wider{letter-spacing:0.05em;}
 .font-serif{font-family:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;}
 .italic{font-style:italic;}
-.shadow-lg,
-[shadow-lg=""]{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .shadow-md{--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .hover\:shadow-2xl:hover{--un-shadow:var(--un-shadow-inset) 0 25px 50px -12px var(--un-shadow-color, rgb(0 0 0 / 0.25));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .outline{outline-style:solid;}
diff --git a/src/components/Articles.tsx b/src/components/Articles.tsx
index 3078d76..98c298e 100644
--- a/src/components/Articles.tsx
+++ b/src/components/Articles.tsx
@@ -10,12 +10,12 @@ export default function Articles(props: { articles: Article[] }) {
       {props.articles.map((article) => (
         <div
           key={article.id}
-          className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-2xl transition-shadow duration-300 transform hover:-translate-y-1"
+          className="bg-sky-100 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-2xl transition-shadow duration-300 transform hover:-translate-y-1 border-l-4 border-blue-500 dark:border-none"
         >
-          <div className="p-4">
+          <div className="p-3">
             <a
               href={article.link}
-              className="text-lg font-semibold text-blue-600 hover:text-blue-800 visited:text-purple-600 dark:text-blue-400 dark:hover:text-blue-600 dark:visited:text-purple-400 transition-colors duration-300"
+              className="tracking-wider leading-relaxed text-md font-semibold text-sky-700 hover:text-blue-800 visited:text-purple-600 dark:text-blue-400 dark:hover:text-blue-600 dark:visited:text-purple-400 transition-colors duration-300"
               target="_blank"
               rel="noopener noreferrer"
             >
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 60a33e4..1ebe3ce 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -12,7 +12,7 @@ export default function Layout({ title, children, lastUpdated }: LayoutProps) {
   return (
     <html
       lang="en"
-      className="dark:bg-gray-900 bg-white dark:text-white text-black"
+      className="dark:bg-gray-900 bg-slate-100 dark:text-white text-black"
     >
       <head>
         <meta charSet="utf-8" />
@@ -28,7 +28,7 @@ export default function Layout({ title, children, lastUpdated }: LayoutProps) {
         <script src="/scripts/hyperwave.js"></script>
         <style>{`* { box-sizing: border-box; margin: 0; outline: none; color: unset; }`}</style>
       </head>
-      <body className="m-0 bg-white dark:bg-gray-900 p-0 text-black dark:text-white">
+      <body className="m-0 bg-slate-100 dark:bg-gray-900 p-0 text-black dark:text-white">
         <Header lastUpdated={lastUpdated} />
         {children}
       </body>