games/static/base.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -850,10 +850,6 @@ select {
   margin-bottom: 1rem;
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
-}
-
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -870,6 +866,10 @@ select {
   margin-top: 1rem;
 }
 
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .block {
   display: block;
 }
@@ -910,18 +910,6 @@ select {
   height: 1.5rem;
 }
 
-.h-24 {
-  height: 6rem;
-}
-
-.h-screen {
-  height: 100vh;
-}
-
-.min-h-24 {
-  min-height: 6rem;
-}
-
 .min-h-screen {
   min-height: 100vh;
 }
@@ -958,10 +946,6 @@ select {
   max-width: 20rem;
 }
 
-.flex-1 {
-  flex: 1 1 0%;
-}
-
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1098,22 +1082,6 @@ select {
   padding-top: 0.25rem;
 }
 
-.pt-8 {
-  padding-top: 2rem;
-}
-
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
-.pb-8 {
-  padding-bottom: 2rem;
-}
-
-.pb-16 {
-  padding-bottom: 4rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1264,7 +1232,7 @@ a:hover {
   transition: all 0.2s ease-out;
 }
 
-:is(.dark form label) {
+:is(:where(.dark) form label) {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity));
 }
@@ -1274,7 +1242,7 @@ a:hover {
   margin-right: auto;
 }
 
-:is(.dark .responsive-table) {
+:is(:where(.dark) .responsive-table) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
@@ -1305,8 +1273,8 @@ a:hover {
   border-left-color: rgb(100 116 139 / var(--tw-border-opacity));
 }
 
-:is(.dark form input),:is(.dark 
-select),:is(.dark 
+:is(:where(.dark) form input),:is(:where(.dark) 
+select),:is(:where(.dark) 
 textarea) {
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -1317,8 +1285,8 @@ textarea) {
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
 
-:is(.dark form input:disabled),:is(.dark 
-select:disabled),:is(.dark 
+:is(:where(.dark) form input:disabled),:is(:where(.dark) 
+select:disabled),:is(:where(.dark) 
 textarea:disabled) {
   --tw-bg-opacity: 1;
   background-color: rgb(51 65 85 / var(--tw-bg-opacity));
@@ -1518,36 +1486,6 @@ th label {
   display: block;
 }
 
-:is(.dark .dark\:bg-gray-800) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-gray-900) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:text-slate-400) {
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-slate-500) {
-  --tw-text-opacity: 1;
-  color: rgb(100 116 139 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-slate-600) {
-  --tw-text-opacity: 1;
-  color: rgb(71 85 105 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-white) {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 @media (min-width: 640px) {
   .sm\:inline {
     display: inline;
@@ -1632,3 +1570,33 @@ th label {
     max-width: 32rem;
   }
 }
+
+:is(:where(.dark) .dark\:bg-gray-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+:is(:where(.dark) .dark\:bg-gray-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+:is(:where(.dark) .dark\:text-slate-400) {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+:is(:where(.dark) .dark\:text-slate-500) {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+:is(:where(.dark) .dark\:text-slate-600) {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
+:is(:where(.dark) .dark\:text-white) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}

games/templates/base.html

@@ -23,8 +23,8 @@
              height="24"
              width="24"
              alt="loading indicator" />
-        <div class="flex flex-col min-h-screen">
-            <nav class="dark:bg-gray-900 border-gray-200 h-24 flex items-center">
+        <div class="dark:bg-gray-800 min-h-screen">
+            <nav class="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
                 <div class="container flex flex-wrap items-center justify-between mx-auto">
                     <a href="{% url 'list_sessions_recent' %}" class="flex items-center">
                         <span class="text-4xl">
@@ -39,7 +39,6 @@
                     <div class="w-full md:block md:w-auto">
                         <ul class="flex flex-col md:flex-row p-4 mt-4 dark:text-white">
                             <li class="relative group">
-                                {% if user.is_authenticated %}
                                 <a class="block py-2 pl-3 pr-4 hover:underline"
                                    href="{% url 'add_game' %}">New</a>
                                 <ul class="absolute hidden text-gray-700 pt-1 group-hover:block  w-auto whitespace-nowrap">
@@ -94,25 +93,18 @@
                                     <a class="block py-2 pl-3 pr-4 hover:underline"
                                        href="{% url 'list_sessions' %}">All Sessions</a>
                                 </li>
-                                        <li>
-                                            <a class="block py-2 pl-3 pr-4 hover:underline"
-                                                href="{% url 'logout' %}">Log Out</a>
-                                        </li>
-                                    {% endif %}
                             {% endif %}
                         </ul>
                     </div>
                 </div>
             </nav>
-                <div class="flex flex-1 dark:bg-gray-800 justify-center pt-8 pb-16">
             {% block content %}
                 No content here.
             {% endblock content %}
         </div>
         {% load version %}
         <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
-            </div>
         {% block scripts %}
         {% endblock scripts %}
     </body>
-    </html>
+</html>

games/templates/list_sessions.html

@@ -4,7 +4,6 @@
     {{ title }}
 {% endblock title %}
 {% block content %}
-    <div class="flex-col">
     {% if dataset_count >= 1 %}
         {% url 'list_sessions_start_session_from_session' last.id as start_session_url %}
         <div class="mx-auto text-center my-4">
@@ -68,5 +67,4 @@
     {% else %}
         <div class="mx-auto text-center text-slate-300 text-xl">No sessions found.</div>
     {% endif %}
-    </div>
 {% endblock content %}

games/templates/registration/login.html

@@ -5,10 +5,9 @@
     Login
 {% endblock title %}
 {% block content %}
-    <div class="flex items-center flex-col">
-        <h2 class="text-3xl text-white mb-8">Please log in to continue</h2>
+    <h2 class="text-3xl text-white mb-8 mx-auto text-center">Please log in to continue</h2>
     <form method="post">
-            <table>
+            <table class="mx-auto">
         {% csrf_token %}
         {{ form.as_table }}
         <tr>
@@ -19,5 +18,4 @@
         </tr>
         </form>
     </table>
-    </div>
 {% endblock content %}