diff --git a/docs/devnotes.md b/docs/devnotes.md
index 6e10652..577c968 100644
--- a/docs/devnotes.md
+++ b/docs/devnotes.md
@@ -84,64 +84,3 @@ But, sometimes you need a redesigned (sometimes better) tool for the generic usa
- *What* this new tool does?
- *How* this tool works?
- Clean up code regularly. Don't keep the unused code forever.
-
-## Managing CSS
-
-Two techniques are still:
-
-- Styled compoenent (solid-styled)
-- Native CSS with CSS layering
-
-The second is recommended for massive use. A stylesheet for a component can be placed alongside
-the component's file. The stylesheet must use the same name as the component's file name, but replace the extension with
-`.css`. Say there is a component file "PreviewCard.tsx", the corresponding stylesheet is "PreviewCard.css". They are imported
-by the component file, so the side effect will be applied by the bundler.
-
-The speicifc component uses a root class to scope the rulesets' scope. This convention allows the component's style can be influenced
-by the other stylesheets. It works because Tutu is an end-user application, we gain the control of all stylesheets in the app (kind of).
-Keep in mind that the native stylesheets will be applied globally at any time, you must carefully craft the stylesheet to avoid leaking
-of style.
-
-Three additional CSS layers are declared as:
-
-- compat: Compatibility rules, like normalize.css
-- theme: The theme rules
-- material: The internal material styles
-
-When working on the material package, if the style is intended to work with the user styles,
-it must be declared under the material layer. Otherwise the unlayer, which has the
-highest priority in the author's, can be used.
-
-Styled component is still existing. Though styled component, using attributes for scoping,
-may not be as performant as the techniques with CSS class names;
-it's still provided in the code infrastructure for its ease.
-
-The following is an example of the recommended usage of solid-styled:
-
-```tsx
-// An example of using solid-styled
-import { css } from "solid-styled";
-import { createSignal } from "solid-js";
-
-const Component = () => {
- const [width, setWidth] = createSignal(100);
-
- css`
- .root {
- width: ${width()}%;
- }
- `
- return
-};
-```
-
-When developing new component, you can use styled component at first, and migrate
-to native css slowly.
-
-Before v2.0.0, there are CSS modules in use, but they are removed:
-
-- Duplicated loads
-- Unaware of order (failed composing)
-- Not-ready for hot reload
-
-In short, CSS module does not works well if the stylesheet will be accessed from more than one component.
diff --git a/src/App.css b/src/App.css
index d2643a9..70ee2fb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,46 +1,41 @@
-@layer compat, theme, material;
+@import "normalize.css/normalize.css";
+@import "./material/theme.css";
-@import "normalize.css/normalize.css" layer(compat);
-@import "./material/theme.css" layer(theme);
-@import "./material/material.css" layer(material);
+:root {
+ --safe-area-inset-top: env(safe-area-inset-top);
+ --safe-area-inset-left: env(safe-area-inset-left);
+ --safe-area-inset-bottom: env(safe-area-inset-bottom);
+ --safe-area-inset-right: env(safe-area-inset-right);
+ background-color: var(--tutu-color-surface, transparent);
+}
-@layer compat {
- :root {
- --safe-area-inset-top: env(safe-area-inset-top);
- --safe-area-inset-left: env(safe-area-inset-left);
- --safe-area-inset-bottom: env(safe-area-inset-bottom);
- --safe-area-inset-right: env(safe-area-inset-right);
- background-color: var(--tutu-color-surface, transparent);
+/*
+Fix the bottom gap on iOS standalone.
+https://stackoverflow.com/questions/66005655/pwa-ios-child-of-body-not-taking-100-height-gap-on-bottom
+*/
+@media screen and (display-mode: standalone) {
+ body {
+ width: 100%;
+ height: 100vh;
}
- /*
- Fix the bottom gap on iOS standalone.
- https://stackoverflow.com/questions/66005655/pwa-ios-child-of-body-not-taking-100-height-gap-on-bottom
- */
- @media screen and (display-mode: standalone) {
- body {
- width: 100%;
- height: 100vh;
- }
-
- #root {
- position: fixed;
- top: 0;
- left: 0;
- height: 100vh;
- width: 100vw;
- }
- }
-
- h1 {
- margin: 0;
- }
-
- * {
- user-select: none;
+ #root {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100vh;
+ width: 100vw;
}
}
.custom-emoji {
width: 1em;
-}
\ No newline at end of file
+}
+
+h1 {
+ margin: 0;
+}
+
+* {
+ user-select: none;
+}
diff --git a/src/accounts/MastodonOAuth2Callback.css b/src/accounts/MastodonOAuth2Callback.css
deleted file mode 100644
index c150d03..0000000
--- a/src/accounts/MastodonOAuth2Callback.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.MastodonOAuth2Callback {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 448px;
-
- @media (max-width: 600px) {
- & {
- position: static;
- height: 100%;
- width: 100%;
- left: 0;
- right: 0;
- transform: none;
- display: grid;
- grid-template-rows: 1fr auto;
- height: 100vh;
- overflow: auto;
- }
- }
-}
\ No newline at end of file
diff --git a/src/accounts/MastodonOAuth2Callback.tsx b/src/accounts/MastodonOAuth2Callback.tsx
index d530095..ae7255c 100644
--- a/src/accounts/MastodonOAuth2Callback.tsx
+++ b/src/accounts/MastodonOAuth2Callback.tsx
@@ -8,7 +8,7 @@ import {
} from "solid-js";
import { acceptAccountViaAuthCode } from "./stores";
import { $settings } from "../settings/stores";
-import "~material/cards.css";
+import cards from "~material/cards.module.css";
import { LinearProgress } from "@suid/material";
import Img from "~material/Img";
import { createRestAPIClient } from "masto";
@@ -92,11 +92,11 @@ const MastodonOAuth2Callback: Component = () => {
});
return (
<>
- Back from {siteTitle()}
-
-
.account.avatar})