From 61067252eb0cb4a0cee0641c99af39986fe117c9 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Fri, 9 Feb 2024 11:02:52 +0100
Subject: [PATCH] merge dark and light style (CSS)

---
 src/app.postcss                        | 31 +++++++++++++++++---------
 src/lib/components/Info.svelte         |  4 ++--
 src/lib/components/Portrait.svelte     | 11 +++++----
 src/lib/components/Press.svelte        | 10 ++++-----
 src/lib/components/SoftwareCard.svelte | 10 +++++----
 src/routes/+layout.svelte              |  4 ++--
 src/routes/articles/+page.svelte       |  2 +-
 src/routes/guides/+page.svelte         |  2 +-
 8 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/src/app.postcss b/src/app.postcss
index 65ff92a..dd03884 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -1,8 +1,4 @@
-/* Write your global styles here, in PostCSS syntax */
 @tailwind base;
-
-
-
 @layer utilities {
 
     .animate-gradient {
@@ -29,47 +25,60 @@
     .no-scrollbar::-webkit-scrollbar {
         display: none;
     }
+
     /* Hide scrollbar for IE, Edge and Firefox */
     .no-scrollbar {
           -ms-overflow-style: none;  /* IE and Edge */
           scrollbar-width: none;  /* Firefox */
     }
+
     .sideli {
       @apply text-xl ml-0;
     }
+
     .sidemenu-style {
-      @apply p-4 w-40 min-h-full bg-neutral-800 dark:bg-base-300 text-base-content overflow-hidden;
+      @apply p-4 w-40 min-h-full bg-neutral-800 text-base-content overflow-hidden;
     }
+
     .footer-style {
-      @apply ml-0 pl-0 pb-4 pt-4 bg-neutral-800 dark:bg-base-300 justify-between pr-16;
+      @apply ml-0 pl-0 pb-4 pt-4 bg-neutral-800 justify-between pr-16;
     }
+
     .mobile-menu-link {
       @apply text-gray-100 hover:text-orange-300 flex md:hidden;
     }
+
     .sidebar-link {
-      @apply text-white hover:text-orange-300;
+      @apply text-white hover:text-orange-300 hover:bg-neutral-700;
     }
+
     .titlebar-link {
       @apply text-gray-100 hover:text-orange-300 flex md:hidden;
     }
+
     .website-title {
       @apply text-3xl uppercase font-bold bg-gradient-to-r from-orange-300 via-red-300 to-orange-200 text-transparent bg-clip-text animate-gradient
     }
 }
 
 @layer base {
+
   .inline-picture {
-      @apply w-24 inline;
+    @apply w-24 inline;
   }
+
   a {
     @apply text-orange-300;
   }
+
   p {
-    @apply text-xl;
+    @apply text-xl text-white;
   }
+
   li {
-    @apply list-disc text-xl py-1 ml-8;
+    @apply list-disc text-xl text-white py-1 ml-8;
   }
+
   h1 {
     @apply text-3xl border-b-2 dark:border-b-white border-b-gray-400 py-2 font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200;
   }
@@ -90,7 +99,7 @@
     @apply my-2
   }
   blockquote {
-    @apply bg-gray-900 py-4 px-4 mx-4 my-4 border-l-4 text-xl
+    @apply bg-gray-900 py-4 px-4 mx-4 my-4 border-l-4 text-xl text-white
   }
 }
 @tailwind components;
diff --git a/src/lib/components/Info.svelte b/src/lib/components/Info.svelte
index dab02b2..9875b09 100644
--- a/src/lib/components/Info.svelte
+++ b/src/lib/components/Info.svelte
@@ -14,7 +14,7 @@
   });
 </script>
 
-<div class="alert bg-base-300 dark:bg-base-300">
+<div class="alert bg-neutral-600 border-none">
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
@@ -27,5 +27,5 @@
       d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
     /></svg
   >
-  <span class="text-xl">{@html info}</span>
+  <span class="text-xl text-white">{@html info}</span>
 </div>
diff --git a/src/lib/components/Portrait.svelte b/src/lib/components/Portrait.svelte
index d20ad53..74bb3b3 100644
--- a/src/lib/components/Portrait.svelte
+++ b/src/lib/components/Portrait.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <div
-  class="mx-2 w-72 my-4 bg-base-300 dark:bg-base-300 border border-gray-200 rounded-lg shadow dark:border-gray-700"
+  class="mx-2 w-72 my-4 bg-neutral-800 rounded-lg shadow dark:border-gray-700"
 >
   <div class="flex justify-end px-4 pt-4" />
   <div class="flex flex-col items-center pb-10">
@@ -16,12 +16,15 @@
       src={image}
       alt="Portrait"
     />
-    <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
+    <h5 class="mb-1 text-xl font-medium text-white">
       {name}
     </h5>
-    <span class="text-sm text-gray-500 dark:text-gray-400">{description}</span>
+    <span class="text-sm text-gray-400">{description}</span>
     <div class="flex mt-4 space-x-3 md:mt-6">
-      <a href={site} class="btn btn-tertiary">Site</a>
+      <a
+        href={site}
+        class="btn btn-tertiary border-none bg-neutral-700 text-white">Site</a
+      >
     </div>
   </div>
 </div>
diff --git a/src/lib/components/Press.svelte b/src/lib/components/Press.svelte
index e517ee9..890e260 100644
--- a/src/lib/components/Press.svelte
+++ b/src/lib/components/Press.svelte
@@ -10,25 +10,23 @@
 </script>
 
 <div
-  class="max-w-sm my-4 w-80 h-fit bg-base-300 dark:bg-base-300 border border-gray-300 rounded-lg shadow-md dark:border-gray-700"
+  class="max-w-sm my-4 w-80 h-fit rounded-lg shadow-md bg-neutral-800 hover:bg-neutral-700"
 >
   <a href="#">
     <img class="rounded-t-lg h-48 w-80 object-cover" src={image} alt="" />
   </a>
   <div class="p-5">
     <a href="#">
-      <h5
-        class="mb-2 text-lg font-bold tracking-tight text-gray-900 dark:text-white"
-      >
+      <h5 class="mb-2 text-lg font-bold tracking-tight text-white">
         {truncateString(title, 50)}
       </h5>
     </a>
-    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+    <p class="mb-3 font-normal text-gray-400">
       {description}
     </p>
     <a
       href={link}
-      class="inline-flex items-center btn btn-primary text-sm font-medium text-center"
+      class="inline-flex items-center btn btn-primary text-sm font-medium text-center text-white"
     >
       En savoir plus
     </a>
diff --git a/src/lib/components/SoftwareCard.svelte b/src/lib/components/SoftwareCard.svelte
index dd053b0..65cf828 100644
--- a/src/lib/components/SoftwareCard.svelte
+++ b/src/lib/components/SoftwareCard.svelte
@@ -8,7 +8,7 @@
 
 <a
   href={link}
-  class="flex flex-col items-center rounded-lg shadow md:flex-row dark:hover:bg-base-100 hover:bg-base-100 bg-base-300 dark:bg-base-300"
+  class="flex flex-col items-center bg-neutral-800 hover:bg-neutral-700 rounded-lg shadow md:flex-row"
 >
   <img
     class="object-cover w-full rounded-t-lg h-96 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
@@ -18,10 +18,12 @@
   <div class="flex flex-col items-start md:items-end w-full">
     <div class="flex flex-col justify-between p-4 leading-normal w-full">
       <div class="flex justify-between">
-      <h5 class="inline mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" > {name} </h5>
-      <p class="inline text-right">{creator}</p>
+        <h5 class="inline mb-2 text-2xl font-bold tracking-tight text-white">
+          {name}
+        </h5>
+        <p class="inline text-right text-orange-300">{creator}</p>
       </div>
-      <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+      <p class="mb-3 font-normal text-gray-400">
         {description}
       </p>
     </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2fb8a95..f092820 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div>
-  <div class="bg-neutral-800 dark:bg-base-300">
+  <div class="bg-neutral-800">
     <nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8">
       <div class="flex items-center justify-between">
         <a
@@ -60,7 +60,7 @@
   </div>
 </div>
 
-<main class="bg-gray-100 dark:bg-base-100">
+<main class="bg-neutral-900">
   <div class="drawer lg:drawer-open">
     <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
     <div class="drawer-content space-y-4 flex flex-col lg:px-16 px-4 py-8">
diff --git a/src/routes/articles/+page.svelte b/src/routes/articles/+page.svelte
index ea9a59a..f9975b6 100644
--- a/src/routes/articles/+page.svelte
+++ b/src/routes/articles/+page.svelte
@@ -16,7 +16,7 @@
 <ul class="">
   {#each data.articles as post}
     <li
-      class="ml-0 list-none px-4 pb-4 my-4 rounded-lg bg-base-300 dark:bg-base-300 hover:bg-base-200 hover:dark:bg-base-200 border-1 border-color-base-100"
+      class="ml-0 list-none px-4 pb-4 my-4 rounded-lg border-1 border-color-base-100 bg-neutral-800 hover:bg-neutral-700"
     >
       <h2>
         <a href={post.path}>
diff --git a/src/routes/guides/+page.svelte b/src/routes/guides/+page.svelte
index b4671e0..0bf7655 100644
--- a/src/routes/guides/+page.svelte
+++ b/src/routes/guides/+page.svelte
@@ -15,7 +15,7 @@
 <ul>
   {#each data.guides as post}
     <li
-      class="ml-0 list-none px-4 pb-4 my-4 rounded-lg bg-base-300 dark:bg-base-300 hover:bg-base-200 hover:dark:bg-base-200 border-1 border-color-base-100"
+      class="ml-0 list-none px-4 pb-4 my-4 rounded-lg border-1 border-color-base-100 bg-neutral-800 hover:bg-neutral-700"
     >
       <h2>
         <a href={post.path}>