fix: improve text responsiveness

stanislavovsky · Oct 21, 2024 · 0486f75 · 0486f75
1 parent fd867f2
commit 0486f75
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -6,17 +6,17 @@ export default function Home() {
         <img src="/sparkle1.png" className="absolute top-1/4 right-1/10" />
         <img src="/sparkle.png" className="absolute bottom-1/4 left-1/3" />
         <div className="m-auto">
-          <h1 className="tf-logo font-bold text-6xl">TrollFactory</h1>
+          <h1 className="tf-logo font-bold text-center text-4xl md:text-5xl lg:text-6xl">TrollFactory</h1>
           <div className="card bg-wt-50 mt-7 mb-20">
             <div className="card-body">
-              <select className="input tf-input tf-input-top text-tf-0 select font-medium text-base text-last-center w-full">
+              <select className="input tf-input tf-input-top text-tf-0 select font-medium text-sm md:text-base text-last-center w-full">
                 <option disabled selected>Dataset</option>
                 <option>🇵🇱 polski / Polska</option>
                 <option>🇺🇸 English / USA</option>
                 <option>🇨🇳 中国人 / 中国</option>
               </select>
               <label className="input flex items-center gap-2 tf-input tf-input-middle">
-                <span className="tf-input-label pl-1 w-28 font-medium font-mono text-tf-0">Sex</span>
+                <span className="tf-input-label pl-1 w-28 hidden md:block text-sm md:text-base font-medium font-mono text-tf-0">Sex</span>
                 <div className="form-control">
                   <label className="label cursor-pointer pl-0">
                     <span className="label-text pr-2">Female</span>
@@ -37,11 +37,11 @@ export default function Home() {
                 </div>
               </label>
               <label className="input flex items-center gap-2 tf-input tf-input-middle">
-                <span className="tf-input-label pl-1 w-28 font-medium font-mono text-tf-0">First name</span>
+                <span className="tf-input-label pl-1 w-28 hidden md:block text-sm md:text-base font-medium font-mono text-tf-0">First name</span>
                 <input type="text" className="grow text-sm" placeholder="First name" />
               </label>
               <label className="input flex items-center gap-2 tf-input tf-input-bottom">
-                <span className="tf-input-label pl-1 w-28 font-medium font-mono text-tf-0">Last name</span>
+                <span className="tf-input-label pl-1 w-28 hidden md:block text-sm md:text-base font-medium font-mono text-tf-0">Last name</span>
                 <input type="text" className="grow text-sm" placeholder="Last name" />
               </label>
             </div>