💄 Style optimized

This commit is contained in:
2024-02-18 11:42:01 +08:00
parent 55a20e18bb
commit cc2aa8ef40
33 changed files with 49 additions and 105 deletions

@ -1,5 +1,5 @@
:root { :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, html,
@ -7,130 +7,117 @@ body {
font-family: var(--bs-body-font-family); font-family: var(--bs-body-font-family);
} }
/* ibm-plex-serif-100 - latin */ /* ibm-plex-sans-100 - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: normal;
font-weight: 100; 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-sans-100italic - latin */
/* ibm-plex-serif-100italic - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: italic;
font-weight: 100; 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-sans-200 - latin */
/* ibm-plex-serif-200 - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: normal;
font-weight: 200; 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-sans-200italic - latin */
/* ibm-plex-serif-200italic - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: italic;
font-weight: 200; 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-sans-300 - latin */
/* ibm-plex-serif-300 - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: normal;
font-weight: 300; 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-sans-300italic - latin */
/* ibm-plex-serif-300italic - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: italic;
font-weight: 300; 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-sans-regular - latin */
/* ibm-plex-serif-regular - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: normal;
font-weight: 400; 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-sans-italic - latin */
/* ibm-plex-serif-italic - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: italic;
font-weight: 400; 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-sans-500 - latin */
/* ibm-plex-serif-500 - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: normal;
font-weight: 500; 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-sans-500italic - latin */
/* ibm-plex-serif-500italic - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: italic;
font-weight: 500; 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-sans-600 - latin */
/* ibm-plex-serif-600 - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: normal;
font-weight: 600; 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-sans-600italic - latin */
/* ibm-plex-serif-600italic - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: italic;
font-weight: 600; 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-sans-700 - latin */
/* ibm-plex-serif-700 - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: normal;
font-weight: 700; 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-sans-700italic - latin */
/* ibm-plex-serif-700italic - latin */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ 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-style: italic;
font-weight: 700; 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 */ /* noto-serif-sc-200 - chinese-simplified */

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -1,7 +1,6 @@
import { For, Match, Show, Switch } from "solid-js"; import { For, Match, Show, Switch } from "solid-js";
import { clearUserinfo, useUserinfo } from "../../stores/userinfo.tsx"; import { clearUserinfo, useUserinfo } from "../../stores/userinfo.tsx";
import { useNavigate } from "@solidjs/router"; import { useNavigate } from "@solidjs/router";
import { useWellKnown } from "../../stores/wellKnown.tsx";
interface MenuItem { interface MenuItem {
label: string; label: string;
@ -20,7 +19,6 @@ export default function Navbar() {
} }
]; ];
const wellKnown = useWellKnown();
const userinfo = useUserinfo(); const userinfo = useUserinfo();
const navigate = useNavigate(); const navigate = useNavigate();
@ -32,52 +30,11 @@ export default function Navbar() {
return ( return (
<div class="navbar bg-base-100 shadow-md px-5 z-10 fixed top-0"> <div class="navbar bg-base-100 shadow-md px-5 z-10 fixed top-0">
<div class="navbar-start"> <div class="navbar-start">
<div class="dropdown"> <a class="btn btn-ghost text-xl p-2 w-[48px] h-[48px] max-lg:ml-2.5" href="/">
<div tabIndex={0} role="button" class="btn btn-ghost lg:hidden"> <img width="40" height="40" src="/favicon.svg" alt="Logo" />
<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> </a>
</div> </div>
<div class="navbar-center hidden lg:flex"> <div class="navbar-center flex">
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal px-1">
<For each={nav}> <For each={nav}>
{(item) => ( {(item) => (

@ -32,7 +32,7 @@ export default function DashboardPage() {
} }
return ( 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"> <div id="greeting" class="px-5">
<h1 class="text-2xl font-bold">{userinfo?.displayName}</h1> <h1 class="text-2xl font-bold">{userinfo?.displayName}</h1>
<p>{getGreeting()}</p> <p>{getGreeting()}</p>

@ -55,7 +55,7 @@ export default function PersonalPage() {
} }
return ( 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"> <div class="px-5">
<h1 class="text-2xl font-bold">Personalize</h1> <h1 class="text-2xl font-bold">Personalize</h1>
<p>Customize your account and let us provide a better service to you.</p> <p>Customize your account and let us provide a better service to you.</p>

@ -71,7 +71,7 @@ export default function DashboardPage() {
readEvents(); readEvents();
return ( 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"> <div id="greeting" class="px-5">
<h1 class="text-2xl font-bold">Security</h1> <h1 class="text-2xl font-bold">Security</h1>
<p>Here is your account status of security.</p> <p>Here is your account status of security.</p>