brief optimization of markup for new font

src/app.css

@@ -27,9 +27,9 @@
   --color-warning-content: oklch(100% 0 0);
   --color-error: oklch(70% 0.191 22.216);
   --color-error-content: oklch(100% 0 0);
-  --radius-selector: 0.25rem;
+  --radius-selector: 0rem;
-  --radius-field: 0.25rem;
+  --radius-field: 0rem;
-  --radius-box: 0.25rem;
+  --radius-box: 0rem;
   --size-selector: 0.1875rem;
   --size-field: 0.1875rem;
   --border: 1px;
@@ -63,9 +63,9 @@
   --color-warning-content: oklch(0% 0 0);
   --color-error: oklch(63% 0.237 25.331);
   --color-error-content: oklch(100% 0 0);
-  --radius-selector: 0.25rem;
+  --radius-selector: 0rem;
-  --radius-field: 0.25rem;
+  --radius-field: 0rem;
-  --radius-box: 0.25rem;
+  --radius-box: 0rem;
   --size-selector: 0.1875rem;
   --size-field: 0.1875rem;
   --border: 1px;

src/routes/app-menu/tabs/scene/scene.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div class="flex flex-col gap-4 w-full h-full">
-  <p class="text-lg font-bold">Scene Configuration</p>
+  <p class="text-lg">Scene Configuration</p>
   <NekoView />
   <NekoReposition />
 </div>

src/routes/app-menu/tabs/your-dolls/index.svelte

@@ -48,7 +48,7 @@
 
 <div class="dolls-page flex flex-col gap-4 max-h-full h-full">
   <div class="flex justify-between items-center">
-    <h2 class="text-lg font-bold">Your Nekos</h2>
+    <h2 class="text-lg">Your Nekos</h2>
     <button class="btn btn-primary btn-sm" on:click={openCreateModal}>
       Add a Neko
     </button>

src/routes/client-config/+page.svelte

@@ -84,7 +84,7 @@
 <div class="p-6 flex flex-col gap-4 w-full h-full justify-between">
   <div class="flex flex-col gap-4 w-full">
     <div class="flex flex-col gap-1">
-      <p class="text-xl font-semibold">Client Configuration</p>
+      <p class="text-xl">Client Configuration</p>
       <p class="opacity-70 text-sm">Set a custom API endpoint.</p>
     </div>
 

src/routes/health-manager/+page.svelte

@@ -27,8 +27,8 @@
   <div class="flex flex-col gap-4 size-full justify-between">
     <div class="flex flex-col gap-4">
       <div class="flex flex-col gap-2">
-        <p class="text-md font-light">Something is not right...</p>
+        <p class="text-md">Something is not right...</p>
-        <p class="opacity-70 text-3xl font-bold">
+        <p class="opacity-70 text-3xl">
           Seems like the server is inaccessible. Check your network?
         </p>
       </div>

src/routes/scene/components/debug-bar.svelte

@@ -52,7 +52,7 @@
 </script>
 
 <div
-  class="size-max mx-auto bg-base-100 border-base-200 border p-1 rounded-lg shadow-md"
+  class="size-max mx-auto bg-base-100 border-base-200 border p-1 rounded-box shadow-md"
 >
   <div class="flex flex-row gap-1 items-center text-center">
     <div>

src/routes/scene/components/pet-menu/pet-menu.svelte

@@ -119,7 +119,7 @@
         handleActionClick(action);
       }}
     >
-      <span class="text-[11px] font-semibold leading-none">{action.icon}</span>
+      <span class="text-[11px] leading-none">{action.icon}</span>
     </button>
   {/each}
 
@@ -129,7 +129,7 @@
 
   <button
     type="button"
-    class={`absolute inset-0 z-30 rounded-full transition-all duration-200 ease-out focus:outline-none ${
+    class={`absolute inset-0 z-30 transition-all duration-200 ease-out focus:outline-none ${
       $sceneInteractive
         ? "cursor-pointer"
         : "pointer-events-none cursor-default"

src/routes/scene/components/pet-menu/pet-name.svelte

@@ -9,7 +9,7 @@
 
 {#if name}
   <div
-    class={`absolute left-1/2 top-full z-10 mt-3 w-max max-w-32 -translate-x-1/2 rounded-md border border-base-300/80 bg-base-100/90 px-2 py-1 text-center text-[10px] font-medium leading-tight text-base-content/80 shadow-sm backdrop-blur-sm transition-all duration-200 ease-out ${
+    class={`absolute left-1/2 top-full z-10 mt-3 w-max max-w-32 -translate-x-1/2 rounded-field border border-base-300/80 bg-base-100/90 px-2 py-1 text-center text-[10px] font-medium leading-tight text-base-content/80 shadow-sm backdrop-blur-sm transition-all duration-200 ease-out ${
       visible
         ? "translate-y-0 opacity-100"
         : "pointer-events-none -translate-y-1 opacity-0"

src/routes/welcome/+page.svelte

@@ -100,11 +100,9 @@
         <div class="flex flex-col gap-6">
           <div class="flex flex-col gap-2">
             <div class="flex flex-row gap-2">
-              <p class="text-xl font-light">meow? nyaaa!!</p>
+              <p class="text-xl opacity-70">meow? nyaaa!!</p>
             </div>
-            <p class="opacity-70 text-3xl font-bold">
+            <p class="text-2xl">a cute passive socialization layer!</p>
-              a cute passive socialization layer!
-            </p>
           </div>
           <div class="flex flex-col gap-3">
             <span>Sign in with</span>
@@ -118,15 +116,13 @@
                   class="flex flex-row justify-start items-center z-1 h-full p-1 pr-0"
                 >
                   <div
-                    class="bg-linear-to-t from-base-100/50 to-base-100 rounded-sm"
+                    class="bg-linear-to-t from-base-100/50 to-base-100 rounded-selector"
                   >
                     <div class="scale-70">
                       <Google />
                     </div>
                   </div>
-                  <span class="text-xl font-semibold px-3 text-primary-content"
+                  <span class="text-xl px-3 text-primary-content">Google</span>
-                    >Google</span
-                  >
                 </div>
               </button>
               <button
@@ -138,15 +134,13 @@
                   class="flex flex-row justify-start items-center z-1 h-full p-1 pr-0"
                 >
                   <div
-                    class="bg-linear-to-t from-base-100/50 to-base-100 rounded-sm"
+                    class="bg-linear-to-t from-base-100/50 to-base-100 rounded-selector"
                   >
                     <div class="scale-70">
                       <Discord />
                     </div>
                   </div>
-                  <span class="text-xl font-semibold px-3 text-primary-content"
+                  <span class="text-xl px-3 text-primary-content">Discord</span>
-                    >Discord</span
-                  >
                 </div>
               </button>
             </div>