From 1bfc0eae292fdc919399957c30a765daf9772494 Mon Sep 17 00:00:00 2001
From: Mia Winter <mia@miawinter.de>
Date: Fri, 29 Mar 2024 20:08:12 +0100
Subject: [PATCH] Improved font sizing and layouting

---
 Components/Pages/About.razor |  8 +++++---
 Components/Pages/Index.razor | 14 +++++++-------
 Components/Pages/Urls.razor  |  6 +++---
 tailwind.config.js           | 25 +++++++++++++++++++++++++
 4 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/Components/Pages/About.razor b/Components/Pages/About.razor
index 217a924..5b9cb2a 100644
--- a/Components/Pages/About.razor
+++ b/Components/Pages/About.razor
@@ -2,10 +2,12 @@
 
 <PageTitle>About - Just Short It</PageTitle>
 
-<h1 class="text-3xl lg:text-5xl text-primary-content mb-6 font-light">About</h1>
 
-<h2 class="text-2xl lg:text-4xl text-primary-content mb-3">Just Short It</h2>
-<h3 class="text-xl lg:text-2xl text-secondary-content mb-3">The most KISS single user URL shortener there is.</h3>
+<div>
+	<h1 class="text-3xl lg:text-5xl text-primary-content font-light mb-3">About</h1>
+	<h2 class="text-2xl lg:text-4xl text-primary-content">Just Short It</h2>
+	<h3 class="text-xl lg:text-2xl text-secondary-content">The most KISS single user URL shortener there is.</h3>
+</div>
 
 <section class="flex flex-col gap-4">
     <p>
diff --git a/Components/Pages/Index.razor b/Components/Pages/Index.razor
index 8035371..b5c813e 100644
--- a/Components/Pages/Index.razor
+++ b/Components/Pages/Index.razor
@@ -8,13 +8,13 @@
 <PageTitle>Startpage - Just Short It</PageTitle>
 
 <div class="text-center flex flex-col items-center gap-4">
-    @if (Id is null) {
-        <h1 class="text-3xl lg:text-5xl font-bold text-primary-content">Welcome to Just Short It!</h1>
-        <h2 class="text-xl lg:text-3xl font-bold text-secondary-content">The KISS single-user URL shortener!</h2>
-        <a class="btn btn-primary btn-lg min-h-0 h-12" href="/Urls" data-enhance-nav="false">Start shorting URLs</a>
-    } else {
-        <p class="text-error" aria-role="alert">@ErrorMessage</p>
-    }
+	@if (Id is null) {
+		<h1 class="text-3xl lg:text-5xl font-bold text-primary-content">Welcome to Just Short It!</h1>
+		<h2 class="text-xl lg:text-3xl font-bold text-secondary-content">The KISS single-user URL shortener!</h2>
+		<a class="btn btn-primary btn-lg btn-wide min-h-0 h-12 my-3" href="/Urls" data-enhance-nav="false">Start shorting URLs</a>
+	} else {
+		<p class="text-error" aria-role="alert">@ErrorMessage</p>
+	}
 </div>
 
 @code {
diff --git a/Components/Pages/Urls.razor b/Components/Pages/Urls.razor
index 7c7a62e..7ea3018 100644
--- a/Components/Pages/Urls.razor
+++ b/Components/Pages/Urls.razor
@@ -19,7 +19,7 @@
 
 <div class="grid place-items-center h-full text-primary-content">
     <section class="w-full md:max-w-lg">
-        <h1 class="text-3xl lg:text-5xl text-primary-content text-center mb-6">
+        <h1 class="text-3xl text-primary-content text-center mb-6">
             Urls Administration
         </h1>
         <MessageComponent Message="@Message" Type="MessageType" LinkToCopy="@Link" />
@@ -27,7 +27,7 @@
         <EditForm class="mb-6" method="post" id="inspect-form" 
                   FormName="inspect" Model="Inspect" OnValidSubmit="Submit_Inspect">
             <DataAnnotationsValidator />
-            <h2 class="text-xl lg:text-2xl mb-3">Inspect URL</h2>
+            <h2 class="text-xl mb-3">Inspect URL</h2>
 
             <div class="join w-full">
                 <label class="join-item btn btn-outline no-animation text-primary-content border-white">
@@ -49,7 +49,7 @@
         <EditForm method="post" id="new-form"
                   FormName="new" Model="New" OnValidSubmit="Submit_New">
             <DataAnnotationsValidator />
-            <h2 class="text-xl lg:text-2xl mb-3">New URL</h2>
+            <h2 class="text-xl mb-3">New URL</h2>
 
             <div class="form-control w-full">
                 <span class="label">
diff --git a/tailwind.config.js b/tailwind.config.js
index f46c32e..e3542a3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,31 @@ module.exports = {
     content: ["Pages/**/*.cshtml", "Components/**/*.razor"],
     theme: {
         extend: {
+            screens: {
+                '3xl': "1792px",
+                '4xl': "2048px",
+                '5xl': "2304px",
+                '6xl': "2560px",
+                '8xl': "3072px"
+            },
+            container: {
+                'max-width': {
+                    '3xl': "1792px",
+                    '4xl': "2048px",
+                    '5xl': "2304px",
+                    '6xl': "2560px",
+                    '8xl': "3072px"
+                }
+            }
+        },
+        fontSize: {
+            sm: '0.750rem',
+            base: '1rem',
+            xl: '1.333rem',
+            '2xl': '1.777rem',
+            '3xl': '2.369rem',
+            '4xl': '3.158rem',
+            '5xl': '4.210rem'
         }
     },
     plugins: [require("daisyui")],