💄 Style optimized

pkg/view/src/assets/fonts/fonts.css

@@ -1,5 +1,5 @@
 :root {
-  --bs-body-font-family: "IBM Plex Serif", "Noto Serif SC", sans-serif !important;
+  --bs-body-font-family: "IBM Plex Sans", "Noto Serif SC", sans-serif !important;
 }
 
 html,
@@ -7,130 +7,117 @@ body {
   font-family: var(--bs-body-font-family);
 }
 
-/* ibm-plex-serif-100 - latin */
+/* ibm-plex-sans-100 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: normal;
   font-weight: 100;
-  src: url("./ibm-plex-serif-v19-latin-100.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-100italic - latin */
+/* ibm-plex-sans-100italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: italic;
   font-weight: 100;
-  src: url("./ibm-plex-serif-v19-latin-100italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-200 - latin */
+/* ibm-plex-sans-200 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: normal;
   font-weight: 200;
-  src: url("./ibm-plex-serif-v19-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-200italic - latin */
+/* ibm-plex-sans-200italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: italic;
   font-weight: 200;
-  src: url("./ibm-plex-serif-v19-latin-200italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-300 - latin */
+/* ibm-plex-sans-300 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: normal;
   font-weight: 300;
-  src: url("./ibm-plex-serif-v19-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-300italic - latin */
+/* ibm-plex-sans-300italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: italic;
   font-weight: 300;
-  src: url("./ibm-plex-serif-v19-latin-300italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-regular - latin */
+/* ibm-plex-sans-regular - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: normal;
   font-weight: 400;
-  src: url("./ibm-plex-serif-v19-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-italic - latin */
+/* ibm-plex-sans-italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: italic;
   font-weight: 400;
-  src: url("./ibm-plex-serif-v19-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-500 - latin */
+/* ibm-plex-sans-500 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: normal;
   font-weight: 500;
-  src: url("./ibm-plex-serif-v19-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-500italic - latin */
+/* ibm-plex-sans-500italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: italic;
   font-weight: 500;
-  src: url("./ibm-plex-serif-v19-latin-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-600 - latin */
+/* ibm-plex-sans-600 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: normal;
   font-weight: 600;
-  src: url("./ibm-plex-serif-v19-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-600italic - latin */
+/* ibm-plex-sans-600italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: italic;
   font-weight: 600;
-  src: url("./ibm-plex-serif-v19-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-700 - latin */
+/* ibm-plex-sans-700 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: normal;
   font-weight: 700;
-  src: url("./ibm-plex-serif-v19-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* ibm-plex-serif-700italic - latin */
+/* ibm-plex-sans-700italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "IBM Plex Serif";
+  font-family: 'IBM Plex Sans';
   font-style: italic;
   font-weight: 700;
-  src: url("./ibm-plex-serif-v19-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('./ibm-plex-sans-v19-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
 /* noto-serif-sc-200 - chinese-simplified */

pkg/view/src/layouts/shared/Navbar.tsx

@@ -1,7 +1,6 @@
 import { For, Match, Show, Switch } from "solid-js";
 import { clearUserinfo, useUserinfo } from "../../stores/userinfo.tsx";
 import { useNavigate } from "@solidjs/router";
-import { useWellKnown } from "../../stores/wellKnown.tsx";
 
 interface MenuItem {
   label: string;
@@ -20,7 +19,6 @@ export default function Navbar() {
     }
   ];
 
-  const wellKnown = useWellKnown();
   const userinfo = useUserinfo();
   const navigate = useNavigate();
 
@@ -32,52 +30,11 @@ export default function Navbar() {
   return (
     <div class="navbar bg-base-100 shadow-md px-5 z-10 fixed top-0">
       <div class="navbar-start">
-        <div class="dropdown">
-          <div tabIndex={0} role="button" class="btn btn-ghost lg:hidden">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M4 6h16M4 12h8m-8 6h16"
-              />
-            </svg>
-          </div>
-          <ul
-            tabIndex={0}
-            class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
-          >
-            <For each={nav}>
-              {(item) => (
-                <li>
-                  <a href={item.href}>{item.label}</a>
-                  <Show when={item.children}>
-                    <ul class="p-2">
-                      <For each={item.children}>
-                        {(item) =>
-                          <li>
-                            <a href={item.href}>{item.label}</a>
-                          </li>
-                        }
-                      </For>
-                    </ul>
-                  </Show>
-                </li>
-              )}
-            </For>
-          </ul>
-        </div>
-        <a href="/" class="btn btn-ghost text-xl">
-          {wellKnown?.name ?? "Goatpass"}
+        <a class="btn btn-ghost text-xl p-2 w-[48px] h-[48px] max-lg:ml-2.5" href="/">
+          <img width="40" height="40" src="/favicon.svg" alt="Logo" />
         </a>
       </div>
-      <div class="navbar-center hidden lg:flex">
+      <div class="navbar-center flex">
         <ul class="menu menu-horizontal px-1">
           <For each={nav}>
             {(item) => (

pkg/view/src/pages/dashboard.tsx

@@ -32,7 +32,7 @@ export default function DashboardPage() {
   }
 
   return (
-    <div class="max-w-[720px] mx-auto px-5 pt-12">
+    <div class="max-w-[720px] mx-auto pt-12">
       <div id="greeting" class="px-5">
         <h1 class="text-2xl font-bold">{userinfo?.displayName}</h1>
         <p>{getGreeting()}</p>

pkg/view/src/pages/personalise.tsx

@@ -55,7 +55,7 @@ export default function PersonalPage() {
   }
 
   return (
-    <div class="max-w-[720px] mx-auto px-5 pt-12">
+    <div class="max-w-[720px] mx-auto pt-12">
       <div class="px-5">
         <h1 class="text-2xl font-bold">Personalize</h1>
         <p>Customize your account and let us provide a better service to you.</p>

pkg/view/src/pages/security.tsx

@@ -71,7 +71,7 @@ export default function DashboardPage() {
   readEvents();
 
   return (
-    <div class="max-w-[720px] mx-auto px-5 pt-12">
+    <div class="max-w-[720px] mx-auto pt-12">
       <div id="greeting" class="px-5">
         <h1 class="text-2xl font-bold">Security</h1>
         <p>Here is your account status of security.</p>