fixing layout issues in website

static/css/main.css

@@ -41,6 +41,7 @@
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -311,6 +312,15 @@
   .mx-8 {
     margin-inline: calc(var(--spacing) * 8);
   }
+  .mx-10 {
+    margin-inline: calc(var(--spacing) * 10);
+  }
+  .mx-16 {
+    margin-inline: calc(var(--spacing) * 16);
+  }
+  .mx-24 {
+    margin-inline: calc(var(--spacing) * 24);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -462,6 +472,9 @@
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
+  .h-80 {
+    height: calc(var(--spacing) * 80);
+  }
   .h-full {
     height: 100%;
   }
@@ -477,6 +490,9 @@
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
+  .w-3\/4 {
+    width: calc(3/4 * 100%);
+  }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
@@ -510,6 +526,9 @@
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
   .w-auto {
     width: auto;
   }
@@ -866,6 +885,10 @@
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));

templates/index.html

@@ -1,11 +1,12 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="flex items-center flex-col mt-16">
+<div class="flex flex-col items-center">
-  <h1 class="text-xl text-bold">
+    <div class="flex flex-col mt-16 w-3/4">
-    {{ config.extra.index.title }}
+        <h1 class="text-3xl text-bold">
+            {{ config.extra.index.title }} 🎉
         </h1>
-  <img class="rounded-full h-40 w-40" src="{{ config.extra.index.image }}" alt="{{ config.extra.index.image_alt }}">
+        <!-- <img class="rounded-full h-40 w-40" src="{{ config.extra.index.image }}" alt="{{ config.extra.index.image_alt }}"> -->
         <div class="flex flex-wrap space-x-4 mt-7">
             {% if config.extra.social.codeberg %}
             <a href="{{config.extra.social.codeberg}}" target="_blank">
@@ -74,8 +75,9 @@
         </div>
 
         <!-- Content -->
-        <div class="text-bold mt-2 w-2/3 text-center p-4">
+        <div class="text-bold mt-2">
             {{ section.content | safe }}
         </div>
+    </div>
 </div>
 {% endblock content %}