Refactor code structure for improved readability and maintainability

Author: Rabithua

.hintrc

@@ -11,6 +11,7 @@
         ]
       }
     ],
-    "no-inline-styles": "off"
+    "no-inline-styles": "off",
+    "meta-viewport": "off"
   }
 }

web/index.html

@@ -5,7 +5,13 @@
     <title>Rote</title>
     <meta name="description" content="Personal note like twitter" />
     <link rel="icon" type="image/svg+xml" href="/ico.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- 让页面在移动端使用 viewport 缩放规则 -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    <!-- 禁止 Safari 拖动刷新效果（有些页面不希望有 bounce） -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
     <!-- Import Google Font -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -17,11 +23,11 @@
     <!-- Import manifest -->
     <link rel="manifest" href="/manifest.json" />
     <!-- Some meta -->
-    <link rel="apple-touch-icon" href="https://r2.rote.ink/others/icons/icon@180w.png" />
+    <link rel="apple-touch-icon" href="/icon@180w.png" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme:light)" />
-    <meta name="theme-color" content="#000000" media="(prefers-color-scheme:dark)" />
+    <meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme:dark)" />
     <!-- Umami -->
     <script
       defer

web/public/icon@180w.png

@@ -41,10 +41,8 @@ const AppWrapper = () => {
       <HelmetProvider>
         <Helmet>
           <title>Rote</title>
-          <link rel="icon" href="https://r2.rote.ink/others/logo.png" />
           <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-          <meta name="description" content="Web site created using create-react-app" />
-          <link rel="apple-touch-startup-image" href="https://r2.rote.ink/others/logo.png" />
+          <link rel="apple-touch-startup-image" href="/logo.png" />
         </Helmet>
         <SWRConfig
           value={{

web/public/logo.png

@@ -95,8 +95,8 @@ html {
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
+  --background: rgb(10, 10, 10);
+  --foreground: lch(98.27% 0.01 296.81);
   --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);