Improved font sizing and layouting

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>
+<div>
-<h3 class="text-xl lg:text-2xl text-secondary-content mb-3">The most KISS single user URL shortener there is.</h3>
+	<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>

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) {
+	@if (Id is null) {
-        <h1 class="text-3xl lg:text-5xl font-bold text-primary-content">Welcome to Just Short It!</h1>
+		<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>
+		<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>
+		<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 {
+	} else {
-        <p class="text-error" aria-role="alert">@ErrorMessage</p>
+		<p class="text-error" aria-role="alert">@ErrorMessage</p>
-    }
+	}
 </div>
 
 @code {

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">

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")],