From 39b32dd3d9567c9015bf0fed0efd14d45efd5cbb Mon Sep 17 00:00:00 2001 From: Haoyu Xu Date: Sun, 22 Oct 2023 22:22:44 -0400 Subject: [PATCH] feat(directory): update home.jsx mobile layout --- directory/index.html | 17 +- directory/src/App.scss | 32 +- .../src/component/scss/border.module.scss | 6 + .../src/component/scss/dropdown.module.scss | 2 +- directory/src/routes/path/Home.jsx | 2 + directory/src/scss/_main_share.scss | 9 +- directory/src/scss/_page_base.scss | 52 +- directory/src/scss/root/Root.module.scss | 16 +- directory/src/scss/root/drawer.module.scss | 4 +- directory/src/scss/root/footer.module.scss | 2 + directory/src/scss/root/header.module.scss | 8 +- package.json | 16 +- pnpm-lock.yaml | 589 +++++++++--------- 13 files changed, 424 insertions(+), 331 deletions(-) diff --git a/directory/index.html b/directory/index.html index 1846262..cec761f 100644 --- a/directory/index.html +++ b/directory/index.html @@ -26,7 +26,7 @@ transition: opacity cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;; } - .loader .icon { + .loader .icon, .loader .flasher { display: block; margin: 0 auto; width: 2rem; @@ -36,11 +36,16 @@ border-right: 0.3rem solid; border-top: 0.3rem solid; transform: translateY(-0.3rem) rotate(-45deg); - animation: icon-flash 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite; box-shadow: inset 0 0 16px 2px rgb(200 14 0), 0 0 18px 5px rgb(200 14 0); border-color: rgba(54, 0, 0, 87%); } + .loader .flasher { + position: absolute; + box-shadow: unset; + animation: icon-flash 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; + } + @media (prefers-color-scheme: dark) { .loader { background-color: #131313; @@ -54,8 +59,11 @@ } @keyframes icon-flash { - 50% { - opacity: 0.2; + 100%{ + opacity: 0; + width: 4rem; + height: 4rem; + border-color: rgb(0, 0, 0); } } @@ -65,6 +73,7 @@
+
diff --git a/directory/src/App.scss b/directory/src/App.scss index 5d5c094..dd8dd14 100644 --- a/directory/src/App.scss +++ b/directory/src/App.scss @@ -52,6 +52,17 @@ color: var(--text-color); background-color: var(--root-background-color); min-height: 100vh; + + @media only screen and (max-width: 430px) { + & { + font-size: 12px; + } + } + @media only screen and (max-width: 1600px) { + & { + font-size: 14px; + } + } } #root { @@ -62,27 +73,6 @@ min-height: 100vh; } -*::-webkit-scrollbar { - width: 12px; -} - -*::-webkit-scrollbar-track { - background-color: transparent; -} - -*::-webkit-scrollbar-thumb { - background-color: var(--border-color); - border-radius: 100px; - border: 5px solid transparent; - background-clip: padding-box; - transition: all 0.3s ease-in-out; -} - -*::-webkit-scrollbar-thumb:hover { - border: 4px solid transparent; - background-color: var(--text-color); -} - a { color: var(--text-color); text-decoration: none; diff --git a/directory/src/component/scss/border.module.scss b/directory/src/component/scss/border.module.scss index 8aecbb9..d14284a 100644 --- a/directory/src/component/scss/border.module.scss +++ b/directory/src/component/scss/border.module.scss @@ -18,5 +18,11 @@ } &:after { left: 100%; + @media only screen and (max-width: 430px) { + & { + width: 0; + height: 0; + } + } } } diff --git a/directory/src/component/scss/dropdown.module.scss b/directory/src/component/scss/dropdown.module.scss index 471eb94..8bf3622 100644 --- a/directory/src/component/scss/dropdown.module.scss +++ b/directory/src/component/scss/dropdown.module.scss @@ -90,7 +90,7 @@ .date { font-family: "Bender", 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans', sans-serif; font-weight: bold; - font-size: 24px; + font-size: 1.5rem; display: flex; flex-direction: row; flex-wrap: nowrap; diff --git a/directory/src/routes/path/Home.jsx b/directory/src/routes/path/Home.jsx index 508406d..2b35d00 100644 --- a/directory/src/routes/path/Home.jsx +++ b/directory/src/routes/path/Home.jsx @@ -227,6 +227,7 @@ export default function Home() { return (