From 6fb0bcc9c60dbcab734e66a3d445dcbb1cd16225 Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Fri, 30 Jun 2023 10:54:54 -0400
Subject: [PATCH] :bug: dark mode

---
 static/css/styles.css    | 89 ++++++++++++++--------------------------
 templates/news/list.html | 18 ++++----
 2 files changed, 40 insertions(+), 67 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index ab54b3bc..5ef031dd 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1267,14 +1267,18 @@ input[type=file] {
   margin-left: 0.5rem;
 }
 
-.-mt-8 {
-  margin-top: -2rem;
+.-ml-4 {
+  margin-left: -1rem;
 }
 
 .mb-10 {
   margin-bottom: 2.5rem;
 }
 
+.-mt-8 {
+  margin-top: -2rem;
+}
+
 .ml-5 {
   margin-left: 1.25rem;
 }
@@ -1283,14 +1287,6 @@ input[type=file] {
   margin-left: 1rem;
 }
 
-.-ml-5 {
-  margin-left: -1.25rem;
-}
-
-.-ml-4 {
-  margin-left: -1rem;
-}
-
 .block {
   display: block;
 }
@@ -1455,6 +1451,18 @@ input[type=file] {
   width: 70%;
 }
 
+.w-\[160px\] {
+  width: 160px;
+}
+
+.w-\[50px\] {
+  width: 50px;
+}
+
+.w-\[70px\] {
+  width: 70px;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -1475,42 +1483,6 @@ input[type=file] {
   width: 200px;
 }
 
-.w-2\/5 {
-  width: 40%;
-}
-
-.w-2\/6 {
-  width: 33.333333%;
-}
-
-.w-3\/6 {
-  width: 50%;
-}
-
-.w-\[50px\] {
-  width: 50px;
-}
-
-.w-\[150px\] {
-  width: 150px;
-}
-
-.w-\[160px\] {
-  width: 160px;
-}
-
-.w-\[180px\] {
-  width: 180px;
-}
-
-.w-\[70px\] {
-  width: 70px;
-}
-
-.w-\[170px\] {
-  width: 170px;
-}
-
 .min-w-0 {
   min-width: 0px;
 }
@@ -1611,10 +1583,6 @@ input[type=file] {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
 .grid-rows-1 {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
@@ -1884,14 +1852,14 @@ input[type=file] {
   border-bottom-width: 2px;
 }
 
-.border-b-4 {
-  border-bottom-width: 4px;
-}
-
 .border-l-2 {
   border-left-width: 2px;
 }
 
+.border-b-4 {
+  border-bottom-width: 4px;
+}
+
 .border-gray-700 {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -2191,6 +2159,11 @@ input[type=file] {
   padding-bottom: 3.5rem;
 }
 
+.py-\[1px\] {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
 .pl-11 {
   padding-left: 2.75rem;
 }
@@ -3052,6 +3025,10 @@ input[type=file] {
     margin-bottom: 1.5rem;
   }
 
+  .md\:ml-6 {
+    margin-left: 1.5rem;
+  }
+
   .md\:ml-\[200px\] {
     margin-left: 200px;
   }
@@ -3060,10 +3037,6 @@ input[type=file] {
     margin-left: -213px;
   }
 
-  .md\:ml-6 {
-    margin-left: 1.5rem;
-  }
-
   .md\:block {
     display: block;
   }
diff --git a/templates/news/list.html b/templates/news/list.html
index 3c5d8c00..3746886b 100644
--- a/templates/news/list.html
+++ b/templates/news/list.html
@@ -66,34 +66,34 @@
           <div class="mt-6 text-sm text-left w-[160px]">
             <a href="{{ entry.get_absolute_url }}">{{ entry.display_publish_at }}</a>
           </div>
-          <div class="pt-6 border-l-2 border-white w-[50px]">
+          <div class="pt-6 border-l-2 border-white w-[50px] dark:border-slate">
             {% if entry.tag == "link" %}
               {% url 'news-link-list' as target_url %}
-              <a href="{{ target_url }}" title="Link" class="px-2 -ml-4 bg-white rounded-full w-[30px] h-[30px]">
+              <a href="{{ target_url }}" title="Link" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate">
                 <i class="text-gray-400 fas fa-link dark:text-white/60"></i>
               </a>
             {% elif entry.tag == "news" %}
               {% url 'news-news-list' as target_url %}
-              <a href="{{ target_url }}" title="News" class="px-2 -ml-4 bg-white rounded-full w-[30px] h-[30px]">
+              <a href="{{ target_url }}" title="News" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate">
                 <i class="text-gray-400 fas fa-bullhorn dark:text-white/60"></i>
               </a>
             {% elif entry.tag == "blogpost" %}
               {% url 'news-blogpost-list' as target_url %}
-              <a href="{{ target_url }}" title="Blog Post" class="px-2 -ml-4 bg-white rounded-full w-[30px] h-[30px]">
+              <a href="{{ target_url }}" title="Blog Post" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 py-[1px] w-[30px] h-[30px] dark:bg-slate">
                 <i class="text-gray-400 fas fa-newspaper dark:text-white/60"></i>
               </a>
             {% elif entry.tag == "poll" %}
               {% url 'news-poll-list' as target_url %}
-              <a href="{{ target_url }}" title="Poll" class="px-2 -ml-4 bg-white rounded-full w-[30px] h-[30px]">
+              <a href="{{ target_url }}" title="Poll" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate">
                 <i class="text-gray-400 fas fa-poll dark:text-white/60"></i>
               </a>
             {% elif entry.tag == "video" %}
               {% url 'news-video-list' as target_url %}
-              <a href="{{ target_url }}" title="Video" class="px-2 -ml-4 bg-white rounded-full w-[30px] h-[30px]">
+              <a href="{{ target_url }}" title="Video" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate">
                 <i class="text-gray-400 fas fa-video dark:text-white/60"></i>
               </a>
             {% else %}
-              <i class="text-gray-400 fas fa-calendar-alt dark:text-white/60" class="px-2 -ml-4 bg-white rounded-full w-[30px] h-[30px]"></i>
+              <i class="text-gray-400 fas fa-calendar-alt dark:text-white/60" class="px-2 -ml-4 bg-white rounded-full dark:text-gray-300 w-[30px] h-[30px] dark:bg-slate"></i>
             {% endif %}
           </div>
           <div class="pt-2 mt-4 text-xs text-left w-[70px]">
@@ -107,11 +107,11 @@
           </div>
           <div class="block p-6 mb-10 w-full bg-white rounded-lg md:ml-6 dark:bg-charcoal">
             <div class="flex justify-between">
-              <a class="text-lg font-semibold transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700" {% if entry.tag == "link" %}target="_blank"{% endif %} href="{% if entry.tag == "link" %}{{ entry.external_url }}{% else %}{{ entry.get_absolute_url }}{% endif %}">
+              <a class="text-xl font-semibold transition duration-150 ease-in-out text-orange hover:text-info-600 focus:text-info-600 active:text-info-700" {% if entry.tag == "link" %}target="_blank"{% endif %} href="{% if entry.tag == "link" %}{{ entry.external_url }}{% else %}{{ entry.get_absolute_url }}{% endif %}">
                 {{ entry.title }}
               </a>
             </div>
-            <p class="text-gray-500 dark:text-white/70">{{ entry.content|truncatechars:300 }}</p>
+            <p class="text-base text-gray-500 dark:text-white/70">{{ entry.content|truncatechars:300 }}</p>
           </div>
         </div>
         {% endfor %}