styling, consistency and responsivity

tailwind.config.js

@@ -5,6 +5,15 @@ module.exports = {
     '!./templates/email/**/*'          
   ],
    theme: {
+    container: {
+      padding: {
+        DEFAULT: '1rem',
+        sm: '2rem',
+        lg: '4rem',
+        xl: '5rem',
+        '2xl': '6rem',
+      },      
+    },
     extend: {
       typography: {
         DEFAULT: {

templates/auth/account.html

@@ -5,7 +5,7 @@
     opacity: 0.5;
   }
 </style>
-<main class="flex-grow flex flex-col prose container mx-auto p-5">
+<main class="flex-grow flex flex-col prose container mx-auto mt-2">
   <h1 class="text-center">Account Settings</h1>
   <div class="form-control">
     <label class="label">

templates/auth/signin_form.html

@@ -6,7 +6,7 @@
   }
 </style>
 
-<div class="min-h-screen container mx-auto px-4 sm:px-0 sm:max-w-md flex justify-center flex-col">
+<div class="min-h-[100dvh] container mx-auto px-4 sm:px-0 sm:max-w-md flex justify-center flex-col">
   <h1
     class="text-5xl sm:text-6xl py-4 pt-10 font-bold bg-gradient-to-r from-primary to-secondary text-center text-transparent bg-clip-text">
     Minne

templates/auth/signup_form.html

@@ -7,7 +7,7 @@
   }
 </style>
 
-<div class="min-h-screen container mx-auto px-4 sm:px-0 sm:max-w-md flex justify-center flex-col">
+<div class="min-h-[100dvh] container mx-auto px-4 sm:px-0 sm:max-w-md flex justify-center flex-col">
   <h1
     class="text-5xl sm:text-6xl py-4 pt-10 font-bold bg-gradient-to-r from-primary to-secondary text-center text-transparent bg-clip-text">
     Minne

templates/body_base.html

@@ -12,7 +12,6 @@
         <div>
           <ul class="menu menu-horizontal px-1">
             <li><a hx-boost="true" class="" href="/documentation">Docs</a></li>
-            <li><a hx-boost="true" class="" href="/privacy-policy">Privacy</a></li>
             {% if user %}
             <li><a hx-boost="true" class="" href="/account">Account</a></li>
             <li><a hx-boost="true" href="/signout">Sign out</a></li>

templates/documentation/index.html

@@ -1,8 +1,8 @@
 {% extends "body_base.html" %}
 {% block main %}
-<div class="flex justify-center flex-grow mt-0 sm:mt-4">
+<main class="flex justify-center flex-grow mt-2 sm:mt-4">
   <div class="container">
-    <div class="grid grid-cols-1 lg:grid-cols-[auto,1fr] gap-4 p-4">
+    <div class="grid grid-cols-1 lg:grid-cols-[auto,1fr] gap-4">
       <!-- Documentation Menu -->
       <aside class="bg-base-200 rounded-lg p-4">
         {% include "documentation/menu.html" %}
@@ -31,5 +31,5 @@
       </article>
     </div>
   </div>
-</div>
+</main>
 {% endblock %}

templates/documentation/menu.html

@@ -1,5 +1,6 @@
 <ul class="menu bg-base-200 rounded-box">
   <li><a hx-boost="true" href="/documentation">Start</a></li>
+  <li><a hx-boost="true" class="" href="/privacy-policy">Privacy Policy</a></li>
   <li>
     <details open>
       <summary>Core Concepts</summary>

templates/errors/error.html

@@ -1,7 +1,7 @@
 {% extends "body_base.html" %}
 
 {% block main %}
-<div class="container mx-auto px-4 flex items-center justify-center">
+<div class="container mx-auto flex items-center justify-center">
   <div class="flex flex-col space-y-4 text-center">
     <h1 class="text-2xl font-bold  text-error">
       {{ status_code }}

templates/index/hero.html

@@ -1,6 +1,6 @@
-<div class="hero flex-grow flex justify-center ">
-  <div class="hero-content text-center">
-    <div class="max-w-4xl space-y-8">
+<main class="hero flex-grow flex justify-center ">
+  <div class="container hero-content text-center">
+    <div class="space-y-8">
       <!-- Hero Section -->
       <h1
         class="text-5xl sm:text-6xl py-4 pt-10 font-bold bg-gradient-to-r from-primary to-secondary text-transparent bg-clip-text">
@@ -48,4 +48,4 @@
 
     </div>
   </div>
-</div>
+</main>