diff --git a/docs/devnotes.md b/docs/devnotes.md
index 577c968..6e10652 100644
--- a/docs/devnotes.md
+++ b/docs/devnotes.md
@@ -84,3 +84,64 @@ 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 70ee2fb..d2643a9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,41 +1,46 @@
-@import "normalize.css/normalize.css";
-@import "./material/theme.css";
+@layer compat, theme, 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);
-}
+@import "normalize.css/normalize.css" layer(compat);
+@import "./material/theme.css" layer(theme);
+@import "./material/material.css" layer(material);
-/*
-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;
+@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);
}
- #root {
- position: fixed;
- top: 0;
- left: 0;
- height: 100vh;
- width: 100vw;
+ /*
+ 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;
}
}
.custom-emoji {
width: 1em;
-}
-
-h1 {
- margin: 0;
-}
-
-* {
- user-select: none;
-}
+}
\ No newline at end of file
diff --git a/src/accounts/MastodonOAuth2Callback.css b/src/accounts/MastodonOAuth2Callback.css
new file mode 100644
index 0000000..c150d03
--- /dev/null
+++ b/src/accounts/MastodonOAuth2Callback.css
@@ -0,0 +1,22 @@
+.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 ae7255c..d530095 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 cards from "~material/cards.module.css";
+import "~material/cards.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})