style: use Tailwind CSS

src/components/Layout/style.module.css

@@ -1,4 +1,4 @@
 .body {
   background-color: rgb(26, 26, 26);
-  color: rgb(224, 237, 94);
+  color: rgb(0, 237, 94);
 }

src/components/LocationStat/PeriodStat.tsx

@@ -15,7 +15,7 @@ const PeriodStat = ({ onClick }: { onClick: (_period: string) => void }) => {
             key={type}
             value={`${IS_CHINESE && titleForType(type)} ${times} `}
             description={type + (times>1 ? "s" : "") }
-            citySize={1}
+            citySize={5}
             onClick={() => onClick(type)}
           />
         ))}

src/components/Stat/index.tsx

@@ -19,7 +19,7 @@ const Stat = ({
     <span className={`text-${citySize || 5}xl font-bold italic`}>
       {intComma(value.toString())}
     </span>
-    <span className="text-lg font-semibold italic">{description}</span>
+    <span className="text-2xl font-semibold italic">{description}</span>
   </div>
 );
 

src/components/WorkoutStat/index.tsx

@@ -4,14 +4,14 @@ import { MAIN_COLOR } from '@/utils/const';
 
 const WorkoutStat = ({value, description, pace, className, distance, onClick, color=MAIN_COLOR}:
                          { value: string, description:string, pace: string, className: string, distance: string, onClick: (_year: string) => void , color: string}) =>
-    (<div className={`${className} pb2 w-100`} onClick={onClick} style={{'color': color}}>
-    <span className={`f1 fw9 i`}>{intComma(value)}</span>
-    <span className="f3 fw6 i">{description}</span>
-    { pace && (<span className="f1 fw9 i">{ " " +pace}</span>)}
-    { pace && (<span className="f3 fw6 i"> Pace</span>)}
+    (<div className={`${className || " "} pb-2 w-100`} onClick={onClick} style={{'color': color}}>
+    <span className={`text-5xl font-bold italic`}>{intComma(value)}</span>
+    <span className="text-2xl font-semibold italic">{description}</span>
+    { pace && (<span className="text-5xl font-bold italic">{ " " +pace}</span>)}
+    { pace && (<span className="text-2xl font-semibold italic"> Pace</span>)}
 
-    { distance && (<span className="f1 fw9 i">{ " " + distance}</span>)}
-    { distance && (<span className="f3 fw6 i"> KM</span>)}
+    { distance && (<span className="text-5xl font-bold italic">{ " " + distance}</span>)}
+    { distance && (<span className="text-2xl font-semibold italic"> KM</span>)}
 
   </div>
 );

src/pages/index.tsx

@@ -193,7 +193,7 @@ const Index = () => {
 
   return (
     <Layout>
-      <div className="w-full lg:w-1/3">
+      <div className="w-full lg:w-1/4">
         <h1 className="my-12 text-5xl font-extrabold italic">
           <a href="/">{siteTitle}</a>
         </h1>

yarn.lock

@@ -548,6 +548,11 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
+"@surbowl/world-geo-json-zh@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@surbowl/world-geo-json-zh/-/world-geo-json-zh-2.1.3.tgz#e446e27fa89b67d70d47ab8f79ddfe2c194f809a"
+  integrity sha512-6m/eVcSsWvFXYkaEQLHCxJqFSkTMVaDgfTg9weQr2lozyrxxH+SsRTq24DFfCqFX7L9zKtDQcP6+5VKemY1Rcg==
+
 "@svgr/[email protected]":
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz#4001f5d5dd87fa13303e36ee106e3ff3a7eb8b22"