Spaces:

michaelkri
/

focal

Running

App Files Files Community

michaelkri commited on Oct 5, 2025

Commit

75536e6

1 Parent(s): 458433b

Dark mode improvements

Browse files

Files changed (1) hide show

app/templates/index.html +13 -13

app/templates/index.html CHANGED Viewed

@@ -20,7 +20,7 @@
     </style>
 </head>
-<body>
     <nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-300 dark:bg-gray-800 dark:border-gray-700">
         <div class="px-3 py-3 lg:px-5 lg:pl-3">
             <div class="flex items-center justify-between">
@@ -42,7 +42,7 @@
                     </a>
                 </div>
                 <div class="flex items-center">
-                    <span class="text-sm text-gray-600">
                         <script>
                             document.addEventListener("DOMContentLoaded", function () {
                                 const dateSpan = document.getElementById("today-date");
@@ -59,9 +59,9 @@
     </nav>
     <aside id="logo-sidebar"
-        class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-gray-50 border-r border-gray-300 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
         aria-label="Sidebar">
-        <div class="flex flex-col justify-between h-full px-3 pb-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
             <ul class="space-y-2 font-medium">
                 {% for category in categorized_articles.keys() %}
                 <li>
@@ -116,26 +116,26 @@
     <div class="p-8 sm:ml-64 mt-14">
         {% for category, articles in categorized_articles.items() %}
         <div id="{{ category }}"
-            class="block w-full mb-8 rounded-lg border border-gray-300 border-l-4 border-l-blue-500 bg-white p-6">
-            <h1 class="text-2xl font-semibold tracking-tight text-gray-900">{{ category | capitalize }}</h1>
             {% for article in articles %}
             <article>
                 <hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
-                <span class="utc-timestamp text-sm text-gray-500" data-timestamp-utc="{{ article.date }}">
                     {{ article.date }}
                 </span>
-                <h2 class="mb-4 mt-4 text-xl font-semibold tracking-tight text-gray-900">
                     {{ article.title }}
                 </h2>
                 {% if article.image_url %}
                 <img class="w-full h-48 object-cover rounded-lg mb-4 mt-4" src="{{ article.image_url }}" />
                 {% endif %}
-                <p class="text-base mb-4">
                     {{ article.content }}
                 </p>
                 <button type="button"
-                    class="toggle-button cursor-pointer flex items-center space-x-1 text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-100 hover:bg-gray-100 font-semibold rounded-lg text-sm px-4 py-2 me-2 mb-2"
                     aria-expanded="false" aria-controls="content-to-toggle">
                     <div class="icon-container relative w-4 h-4">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
@@ -156,12 +156,12 @@
                     <span>Sources ({{ article.sources | length }})</span>
                 </button>
                 <div class="collapsible-content">
-                    <div class="bg-gray-100 p-4 rounded-lg mt-4 {% if not article.sources %}hidden{% endif %}">
-                        <h3 class="text-gray-600 uppercase mb-2">Sources</h3>
                         <ul class="list-inside mb-4">
                             {% for source in article.sources %}
                             <li>
-                                <a href="{{ source.url }}" class="flex justify-start items-center space-x-2 mb-2">
                                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                         stroke-linejoin="round" class="h-3 w-3 flex-shrink-0" aria-hidden="true">

     </style>
 </head>
+<body class="bg-white dark:bg-gray-800">
     <nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-300 dark:bg-gray-800 dark:border-gray-700">
         <div class="px-3 py-3 lg:px-5 lg:pl-3">
             <div class="flex items-center justify-between">
                     </a>
                 </div>
                 <div class="flex items-center">
+                    <span class="text-sm text-gray-600 dark:text-gray-300">
                         <script>
                             document.addEventListener("DOMContentLoaded", function () {
                                 const dateSpan = document.getElementById("today-date");
     </nav>
     <aside id="logo-sidebar"
+        class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-gray-50 border-r border-gray-300 sm:translate-x-0 dark:bg-gray-900 dark:border-gray-700"
         aria-label="Sidebar">
+        <div class="flex flex-col justify-between h-full px-3 pb-4 overflow-y-auto bg-gray-50 dark:bg-gray-900">
             <ul class="space-y-2 font-medium">
                 {% for category in categorized_articles.keys() %}
                 <li>
     <div class="p-8 sm:ml-64 mt-14">
         {% for category, articles in categorized_articles.items() %}
         <div id="{{ category }}"
+            class="block w-full mb-8 rounded-lg border border-gray-300 border-l-4 border-l-blue-500 bg-white p-6 dark:bg-gray-800 dark:border-gray-700 dark:border-l-blue-500">
+            <h1 class="text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">{{ category | capitalize }}</h1>
             {% for article in articles %}
             <article>
                 <hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
+                <span class="utc-timestamp text-sm text-gray-600 dark:text-gray-300" data-timestamp-utc="{{ article.date }}">
                     {{ article.date }}
                 </span>
+                <h2 class="mb-4 mt-4 text-xl font-semibold tracking-tight text-black dark:text-white">
                     {{ article.title }}
                 </h2>
                 {% if article.image_url %}
                 <img class="w-full h-48 object-cover rounded-lg mb-4 mt-4" src="{{ article.image_url }}" />
                 {% endif %}
+                <p class="text-base mb-4 text-black dark:text-gray-300">
                     {{ article.content }}
                 </p>
                 <button type="button"
+                    class="toggle-button cursor-pointer flex items-center space-x-1 text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-100 hover:bg-gray-100 font-semibold rounded-lg text-sm px-4 py-2 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
                     aria-expanded="false" aria-controls="content-to-toggle">
                     <div class="icon-container relative w-4 h-4">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                     <span>Sources ({{ article.sources | length }})</span>
                 </button>
                 <div class="collapsible-content">
+                    <div class="bg-gray-100 p-4 rounded-lg mt-4 dark:bg-gray-700 {% if not article.sources %}hidden{% endif %}">
+                        <h3 class="text-sm font-medium text-gray-600 uppercase mb-2 dark:text-gray-300">Sources</h3>
                         <ul class="list-inside mb-4">
                             {% for source in article.sources %}
                             <li>
+                                <a href="{{ source.url }}" class="flex justify-start items-center space-x-2 mb-2 text-black dark:text-white">
                                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                         stroke-linejoin="round" class="h-3 w-3 flex-shrink-0" aria-hidden="true">