From 0cea759e0c88fc6d00ad22ffd4a7c4449693f607 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Mon, 30 Jun 2025 22:43:41 +1000
Subject: [PATCH] Update style and make words smaller to display more content

---
 links/templates/links/link_list.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/links/templates/links/link_list.html b/links/templates/links/link_list.html
index 3267694..8d87eda 100644
--- a/links/templates/links/link_list.html
+++ b/links/templates/links/link_list.html
@@ -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">