Update style and make words smaller to display more content

This commit is contained in:
2025-06-30 22:43:41 +10:00
parent 7fc3fc3157
commit 0cea759e0c
+8 -8
View File
@@ -3,8 +3,8 @@
{% block content %}
<!-- Popular Links Section -->
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">{% trans "Popular Links" %}</h2>
<div class="mb-6">
<h2 class="text-lg font-semibold text-gray-700 mb-3 uppercase tracking-wide text-sm">{% trans "Popular Links" %}</h2>
<div class="flex flex-row gap-2 sm:grid sm:grid-cols-3 sm:gap-6">
{% for item in popular_links %}
<div class="flex-1 sm:flex-none rounded-lg overflow-hidden shadow-md min-w-0" style="background-color: {{ item.color }};">
@@ -22,9 +22,9 @@
</div>
<!-- Latest Posts Section -->
<div class="mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-gray-800">{% trans "Latest Posts" %}</h2>
<div class="mb-6">
<div class="flex justify-between items-center mb-3">
<h2 class="text-lg font-semibold text-gray-700 uppercase tracking-wide text-sm">{% trans "Latest Posts" %}</h2>
<a href="{% url 'post-list' %}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">{% trans "View all posts" %} →</a>
</div>
{% if latest_posts %}
@@ -60,8 +60,8 @@
</div>
<!-- Random Images Section -->
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">{% trans "Random Images" %}</h2>
<div class="mb-6">
<h2 class="text-lg font-semibold text-gray-700 mb-3 uppercase tracking-wide text-sm">{% trans "Random Images" %}</h2>
<div class="grid grid-cols-2 gap-4">
<!-- Random Image Box 1 -->
<div class="aspect-square bg-gray-100 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-200">
@@ -91,7 +91,7 @@
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<div class="p-4 sm:p-6 bg-gray-50 border-b border-gray-200">
<h1 class="text-2xl font-bold text-gray-800 mb-4">{% trans "Link List" %}</h1>
<h1 class="text-lg font-semibold text-gray-700 mb-3 uppercase tracking-wide text-sm">{% trans "Link List" %}</h1>
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between space-y-4 sm:space-y-0">
<div class="w-full sm:w-64 relative">
<input type="text" id="search-alias-input" placeholder="{% trans 'Search links...' %}" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">