Reformat

games/static/base.css

@@ -910,6 +910,18 @@ select {
   height: 1.5rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.min-h-24 {
+  min-height: 6rem;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -946,6 +958,10 @@ select {
   max-width: 20rem;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1082,6 +1098,22 @@ 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;
 }

games/templates/base.html

@@ -23,8 +23,8 @@
             height="24"
             width="24"
             alt="loading indicator" />
-        <div class="dark:bg-gray-800 min-h-screen">
+        <div class="flex flex-col min-h-screen">
-            <nav class="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
+            <nav class="dark:bg-gray-900 border-gray-200 h-24 flex items-center">
                 <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">
@@ -104,12 +104,14 @@
                         </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>

games/templates/list_sessions.html

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