From f66b20d1e9259b8662de3cb6fdac1deefc286fdf Mon Sep 17 00:00:00 2001
From: 0xjrx <mmarquard737@gmail.com>
Date: Tue, 25 Feb 2025 14:22:55 +0100
Subject: [PATCH] fix: fixes Haiku box placement and uptdating of bar for page
 highlighting

Refs: OPS-11
---
 senju/templates/base.jinja  | 23 +++++++++++++++++------
 senju/templates/haiku.jinja | 24 +++++++++++++-----------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/senju/templates/base.jinja b/senju/templates/base.jinja
index 7bd2a1f..03ae7f4 100644
--- a/senju/templates/base.jinja
+++ b/senju/templates/base.jinja
@@ -25,13 +25,24 @@
 						<div class="hidden md:block">
 							<div class="ml-10 flex items-baseline space-x-4">
 								<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-								<a href="#" class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
-									aria-current="page">Start</a>
-								<a href="{{ url_for('haiku_page') }}" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">
+								<a href="{{ url_for('index') }}" 
+   class="rounded-md px-3 py-2 text-sm font-medium 
+   {% if request.endpoint == 'index' %} bg-gray-900 text-white {% else %} text-gray-300 hover:bg-gray-700 hover:text-white {% endif %}"
+>
+    Start
+</a>
+
+<a href="{{ url_for('haiku_page') }}" 
+   class="rounded-md px-3 py-2 text-sm font-medium 
+   {% if request.endpoint == 'haiku_page' %} bg-gray-900 text-white {% else %} text-gray-300 hover:bg-gray-700 hover:text-white {% endif %}"
+>
     Haiku
-</a>								<a href="#"
-									class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Information</a>
-							</div>
+</a>
+
+<a href="#" 
+   class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">
+    Information
+</a>							</div>
 						</div>
 					</div>
 					<div class="hidden md:block">
diff --git a/senju/templates/haiku.jinja b/senju/templates/haiku.jinja
index e97b557..384f4ab 100644
--- a/senju/templates/haiku.jinja
+++ b/senju/templates/haiku.jinja
@@ -1,18 +1,20 @@
 {% extends "base.jinja" %}
 
 {% block content %}
-<div class="bg-violet-900 min-h-screen flex flex-col items-center justify-center text-white">
-    <div class="bg-white text-gray-900 p-6 rounded-lg shadow-lg max-w-lg text-center">
-        <h1 class="text-3xl font-bold text-violet-700 mb-4">Haiku of the Day</h1>
-        <p class="text-xl italic">
-            An old silent pond<br> 
-            A frog jumps into the pond—<br> 
-            Splash! Silence again.
-        </p>
+<div class="bg-violet-900 min-h-screen flex items-center justify-center text-white">
+    <div class="text-center">
+        <div class="bg-white text-gray-900 p-10 rounded-lg shadow-lg max-w-2xl mx-auto transform -translate-y-10">
+            <h1 class="text-4xl font-bold text-violet-700 mb-6">Haiku of the Day</h1>
+            <p class="text-2xl italic leading-relaxed">
+                An old silent pond<br> 
+                A frog jumps into the pond—<br> 
+                Splash! Silence again.
+            </p>
+        </div>
+        <a href="{{ url_for('index') }}" class=" inline-block bg-violet-600 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded-lg">
+            Back to Home
+        </a>
     </div>
-    <a href="{{ url_for('index') }}" class="mt-6 bg-violet-600 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded-lg">
-        Back to Home
-    </a>
 </div>
 {% endblock %}