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 (