feat(fonts): replace Montserrat with Inter for better readablity

app/Resources/styles/fonts.css

@@ -4,6 +4,7 @@
     font-family: "Kumbh Sans";
     font-style: normal;
     font-weight: 400;
+    font-display: swap;
     src: url("/fonts/kumbh-sans-regular.woff2") format("woff2");
   }
 
@@ -12,22 +13,25 @@
     font-family: "Kumbh Sans";
     font-style: normal;
     font-weight: 700;
+    font-display: swap;
     src: url("/fonts/kumbh-sans-700.woff2") format("woff2");
   }
 
-  /* montserrat-regular */
+  /* inter-regular */
   @font-face {
-    font-family: "Montserrat";
+    font-family: "Inter";
     font-style: normal;
     font-weight: 400;
-    src: url("/fonts/montserrat-regular.woff2") format("woff2");
+    font-display: swap;
+    src: url("/fonts/inter-regular.woff2") format("woff2");
   }
 
-  /* montserrat-600 - latin */
+  /* inter-600 */
   @font-face {
-    font-family: "Montserrat";
+    font-family: "Inter";
     font-style: normal;
     font-weight: 600;
-    src: url("/fonts/montserrat-600.woff2") format("woff2");
+    font-display: swap;
+    src: url("/fonts/inter-600.woff2") format("woff2");
   }
 }

app/Views/Components/Forms/Input.php

@@ -10,7 +10,7 @@ class Input extends FormComponent
 
     public function render(): string
     {
-        $class = 'px-3 py-2 rounded-lg border-3 focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 ' . $this->class;
+        $class = 'px-3 py-2 bg-white rounded-lg border-3 focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 ' . $this->class;
 
         if (session()->has('errors')) {
             $error = session('errors')[$this->name];

tailwind.config.js

 /* eslint-disable */
+const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
   mode: "jit",
@@ -12,9 +13,9 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["Montserrat", "sans-serif"],
-        display: ["Kumbh Sans", "sans-serif"],
-        body: ["Montserrat", "sans-serif"],
+        sans: ["Inter", ...defaultTheme.fontFamily.sans],
+        display: ["Kumbh Sans", ...defaultTheme.fontFamily.sans],
+        // body: ["Inter", ...defaultTheme.fontFamily.sans],
       },
       colors: {
         pine: {

themes/cp_admin/page/create.php

@@ -14,20 +14,21 @@
 <?= form_open(route_to('page-create'), [
     'class' => 'flex flex-col max-w-3xl',
 ]) ?>
-<form action="<?= route_to('page-create') ?>" method="POST" class="flex flex-col max-w-3xl">
+<form action="<?= route_to('page-create') ?>" method="POST" class="flex flex-col max-w-3xl gap-y-4">
 <?= csrf_field() ?>
 
 <Forms.Field
     name="title"
     label="<?= lang('Page.form.title') ?>"
     required="true"
-    data-slugify="title" />
+    data-slugify="title"
+    class="max-w-sm" />
 
 <div>
     <Forms.Label for="slug"><?= lang('Page.form.permalink') ?></Forms.Label>
     <permalink-edit class="inline-flex items-center text-xs" edit-label="<?= lang('Common.edit') ?>" copy-label="<?= lang('Common.copy') ?>" copied-label="<?= lang('Common.copied') ?>">
         <span slot="domain"><?= base_url('pages') . '/' ?></span>
-        <Forms.Input name="slug" value="<?= $episode->slug ?>" required="true" data-slugify="slug" slot="slug-input" class="flex-1 text-xs" />
+        <Forms.Input name="slug" required="true" data-slugify="slug" slot="slug-input" class="flex-1 text-xs" />
     </permalink-edit>
 </div>
 

themes/cp_admin/person/create.php

@@ -11,7 +11,7 @@
 
 <?= $this->section('content') ?>
 
-<form action="<?= route_to('person-create') ?>" method="POST" class="flex flex-col" enctype="multipart/form-data">
+<form action="<?= route_to('person-create') ?>" method="POST" class="flex flex-col max-w-sm" enctype="multipart/form-data">
 <?= csrf_field() ?>
 
 <Forms.Field

themes/cp_install/cache_config.php

@@ -7,7 +7,7 @@
 ]) ?>
 <?= csrf_field() ?>
 
-<h1 class="mb-4 text-xl font-bold font-display"><span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-700 border-pine-700 font-body">3/4</span><?= lang(
+<h1 class="mb-4 text-xl font-bold font-display"><span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-700 border-pine-700">3/4</span><?= lang(
     'Install.form.cache_config',
 ) ?></h1>
 

themes/cp_install/create_superadmin.php

@@ -7,7 +7,7 @@
 ]) ?>
 <?= csrf_field() ?>
 
-<h1 class="mb-4 text-xl font-bold font-display"><span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-700 border-pine-700 font-body">4/4</span><?= lang(
+<h1 class="mb-4 text-xl font-bold font-display"><span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-700 border-pine-700">4/4</span><?= lang(
     'Install.form.create_superadmin',
 ) ?></h1>
 

themes/cp_install/database_config.php

@@ -8,7 +8,7 @@
 ]) ?>
 <?= csrf_field() ?>
 
-<h1 class="mb-2 text-xl font-bold font-display"><span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-700 border-pine-700 font-body">2/4</span><?= lang(
+<h1 class="mb-2 text-xl font-bold font-display"><span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-700 border-pine-700">2/4</span><?= lang(
     'Install.form.database_config',
 ) ?></h1>
 

themes/cp_install/instance_config.php

@@ -8,7 +8,7 @@ adz
     '/instance-config' ?>" class="flex flex-col w-full max-w-sm" method="post" accept-charset="utf-8">
 <?= csrf_field() ?>
 
-<h1 class="mb-4 text-xl font-bold font-display"><span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-700 border-pine-700 font-body">1/4</span><?= lang(
+<h1 class="mb-4 text-xl font-bold font-display"><span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-700 border-pine-700">1/4</span><?= lang(
         'Install.form.instance_config',
     ) ?></h1>
 <?= form_label(lang('Install.form.hostname'), 'hostname') ?>