fix: fixes Haiku box placement and uptdating of bar for page highlighting

Refs: OPS-11
This commit is contained in:
0xjrx 2025-02-25 14:22:55 +01:00
parent 0dc2b53579
commit f66b20d1e9
2 changed files with 30 additions and 17 deletions

View file

@ -25,13 +25,24 @@
<div class="hidden md:block"> <div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4"> <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" --> <!-- 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" <a href="{{ url_for('index') }}"
aria-current="page">Start</a> class="rounded-md px-3 py-2 text-sm font-medium
<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"> {% 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 Haiku
</a> <a href="#" </a>
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 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> </div>
<div class="hidden md:block"> <div class="hidden md:block">

View file

@ -1,18 +1,20 @@
{% extends "base.jinja" %} {% extends "base.jinja" %}
{% block content %} {% block content %}
<div class="bg-violet-900 min-h-screen flex flex-col items-center justify-center text-white"> <div class="bg-violet-900 min-h-screen flex items-center justify-center text-white">
<div class="bg-white text-gray-900 p-6 rounded-lg shadow-lg max-w-lg text-center"> <div class="text-center">
<h1 class="text-3xl font-bold text-violet-700 mb-4">Haiku of the Day</h1> <div class="bg-white text-gray-900 p-10 rounded-lg shadow-lg max-w-2xl mx-auto transform -translate-y-10">
<p class="text-xl italic"> <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> An old silent pond<br>
A frog jumps into the pond—<br> A frog jumps into the pond—<br>
Splash! Silence again. Splash! Silence again.
</p> </p>
</div> </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"> <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 Back to Home
</a> </a>
</div> </div>
</div>
{% endblock %} {% endblock %}