update: phone style

apps/web/src/containers/Alloc.css

@@ -8,7 +8,7 @@
     .allocation-input {
         display: flex;
         gap: 0;
-        height: 2rem;
+        height: calc(2rem * var(--ratio));
         border: 0.0625rem solid var(--grade-color);
         color: var(--grade-color);
         box-sizing: border-box;
@@ -46,11 +46,12 @@
         left: 0;
         transform: translateY(-100%);
         margin: 0;
+        font-size: calc(1rem * var(--ratio-font));
         li {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            height: 2rem;
+            height: calc(2rem * var(--ratio));
             padding: 0 0.5rem;
             gap: 0.5rem;
         }
@@ -67,6 +68,7 @@
         margin: 0;
         list-style: none;
         width: 100%;
+        font-size: calc(1rem * var(--ratio-font));
         > li {
             flex: 1 0;
             display: flex;
@@ -77,7 +79,7 @@
             gap: 0;
             > span {
                 width: 100%;
-                height: 2rem;
+                height: calc(2rem * var(--ratio));
                 color: var(--base-background-color);
                 background: var(--grade-color);
                 border: 0.0625rem solid var(--grade-color);
@@ -100,8 +102,8 @@
             > button {
                 --style-color: var(--left-color);
                 flex: 1;
-                font-size: 1rem;
-                height: 2rem;
+                font-size: calc(1rem * var(--ratio-font));
+                height: calc(2rem * var(--ratio));
                 width: 6rem;
                 padding: 0;
             }

apps/web/src/containers/Home.css

@@ -5,15 +5,7 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        h1 {
-            font-size: 4rem;
-            margin: 0;
-            font-weight: bold;
-        }
-        h2 {
-            font-size: 2rem;
-            margin: 0;
-        }
+        .main { font-weight: bold; }
     }
     .theme-toggle-btn {
         position: fixed;

apps/web/src/containers/Home.tsx

@@ -1,4 +1,5 @@
 import { useRemake } from '@remake/hooks'
+import { TextSvg } from '@/components/TextSvg'
 import { ThemeToggle } from '@/components/ThemeToggle'
 import './Home.css'
 
@@ -7,10 +8,10 @@ export default function Home() {
     return (
         <div className="screen home">
             <div className="title">
-                <h1>人生重开模拟器</h1>
-                <h2>这垃圾人生一秒也不想待了</h2>
+                <TextSvg text="人生重开模拟器" className="main" />
+                <TextSvg text="这垃圾人生一秒也不想待了" className="sub" />
             </div>
-            <button className="primary" onClick={remake}>
+            <button className="primary focus" onClick={remake}>
                 立即重开
             </button>
             <ThemeToggle />

apps/web/src/containers/Play.css

@@ -107,8 +107,8 @@
         > button {
             flex: 1 0;
             min-width: 6rem;
-            font-size: 1.25rem;
-            height: 2.5rem;
+            font-size: calc(1.25rem * var(--ratio-font));
+            height: calc(2.5rem * var(--ratio));
         }
     }
 }

apps/web/src/containers/Summary.css

@@ -37,7 +37,7 @@
     ul.talent-list {
         display: flex;
         flex-direction: column;
-        gap: 0.5rem;
+        gap: calc(0.5rem * var(--ratio));
         width: 100%;
     }
 }

apps/web/src/containers/TalentPick.css

@@ -7,7 +7,7 @@
     ul.talent-list {
         display: flex;
         flex-direction: column;
-        gap: 0.5rem;
+        gap: calc(0.5rem * var(--ratio));
         li {
             display: flex;
             align-items: center;

apps/web/src/containers/TalentPick.tsx

@@ -14,8 +14,11 @@ export default function TalentPick() {
     if (!pulled)
         return (
             <div className="screen talent-pick">
-                <button className="primary font-mono" onClick={() => puller()}>
-                    {PullCount}连抽!
+                <button
+                    className="primary font-mono focus"
+                    onClick={() => puller()}
+                >
+                    {PullCount} 连抽!
                 </button>
             </div>
         )