💄 Style optimized

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

View File

@ -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.

View File

@ -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) => (

View File

@ -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>

View File

@ -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>

View File

@ -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>