Merge pull request #130 from Lapikud/development

adjust text size on different screen types

src/app/[locale]/kodukord/page.tsx

@@ -57,7 +57,8 @@ export default async function Page({
                       return (
                         <h1
                           id={id}
-                          className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4 mt-12 first:mt-0 scroll-mt-24 md:scroll-mt-28`}
+                          className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white 
+                            uppercase mb-4 mt-12 first:mt-0 scroll-mt-24 md:scroll-mt-28`}
                         >
                           {props.children}
                         </h1>
@@ -81,12 +82,12 @@ export default async function Page({
                       </ul>
                     ),
                     p: (props) => (
-                      <p className="text-white text-xl">
+                      <p className="text-white lg:text-xl sm:text-sm">
                         {props.children}
                       </p>
                     ),
                     li: (props) => (
-                      <li className="text-white text-xl mb-3">
+                      <li className="text-white lg:text-xl sm:text-sm mb-3">
                         {props.children}
                       </li>
                     ),

src/app/[locale]/turniirid/cs2/page.tsx

@@ -32,7 +32,7 @@ export default async function CS2Tournament({
   return (
     <div className="bg-[#0E0F19] min-h-screen pt-16 md:pt-20">
       <div className="max-w-480 mx-auto px-4 sm:px-6 md:px-12 lg:px-64 py-10 md:py-20">
-        <div className="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8 lg:gap-16">
+        <div className="tournament-page-scope grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8 lg:gap-16">
           {/* Main content */}
           <div>
             {/* Header */}
@@ -68,7 +68,7 @@ export default async function CS2Tournament({
               >
                 {t("cs2page.intro.title")}
               </h2>
-              <p className="text-white mb-6 leading-[19px]">
+              <p className="text-white mb-6">
                 {t("cs2page.intro.description")}
               </p>
 
@@ -77,8 +77,8 @@ export default async function CS2Tournament({
               >
                 {t("cs2page.intro.previousWinners")}
               </h3>
-              <p className="text-white font-bold leading-[19px]">2025</p>
-              <ol className="text-white list-decimal list-inside mb-4 leading-[19px]">
+              <p className="text-white font-bold">2025</p>
+              <ol className="text-white list-decimal list-inside mb-4">
                 <li>RAID (Eesti)</li>
                 <li>hypewrld (Läti)</li>
                 <li>CSDIILIT (Soome/Eesti)</li>
@@ -92,7 +92,7 @@ export default async function CS2Tournament({
               >
                 {t("cs2page.info.title")}
               </h2>
-              <p className="text-white leading-[19px]">
+              <p className="text-white ">
                 {t("cs2page.info.description")}
               </p>
             </section>
@@ -110,7 +110,7 @@ export default async function CS2Tournament({
               >
                 {t("cs2page.prizes.mainTitle")}
               </h3>
-              <ul className="text-white mb-2 leading-[19px]">
+              <ul className="text-white mb-2">
                 <li>{t("cs2page.prizes.mainPlace1")}</li>
                 <li>{t("cs2page.prizes.mainPlace2")}</li>
                 <li>{t("cs2page.prizes.mainPlace3")}</li>
@@ -124,11 +124,11 @@ export default async function CS2Tournament({
               >
                 {t("cs2page.prizes.secondTitle")}
               </h3>
-              <ul className="text-white mb-2 leading-[19px]">
+              <ul className="text-white mb-2">
                 <li>{t("cs2page.prizes.secondPlace1")}</li>
                 <li>{t("cs2page.prizes.secondPlace2")}</li>
               </ul>
-              <p className="text-white/80 text-sm leading-[19px]">
+              <p className="text-white/80 text-sm">
                 {t("cs2page.prizes.secondNote")}
               </p>
             </section>
@@ -140,13 +140,13 @@ export default async function CS2Tournament({
               >
                 {t("cs2page.format.title")}
               </h2>
-              <p className="text-white mb-4 leading-[19px]">
+              <p className="text-white mb-4">
                 {t("cs2page.format.description")}
               </p>
-              <p className="text-white leading-[19px]">
+              <p className="text-white">
                 {t("cs2page.format.day1")}
               </p>
-              <p className="text-white leading-[19px]">
+              <p className="text-white">
                 {t("cs2page.format.day23")}
               </p>
             </section>
@@ -158,10 +158,10 @@ export default async function CS2Tournament({
               >
                 {t("cs2page.vrs.title")}
               </h2>
-              <p className="text-white mb-4 leading-[19px]">
+              <p className="text-white mb-4">
                 {t("cs2page.vrs.description1")}
               </p>
-              <p className="text-white leading-[19px]">
+              <p className="text-white">
                 {t("cs2page.vrs.description2")}
               </p>
             </section>
@@ -191,23 +191,24 @@ export default async function CS2Tournament({
               >
                 {t("cs2page.rules.title")}
               </h2>
-              <p className="text-white mb-6 leading-[19px]">
+              <p className="text-white mb-6">
                 {t("cs2page.rules.description")}
               </p>
 
               <RulesContent sections={t.raw("cs2page.rules.sections")} />
 
+              {/* Contact info */}
               <div className="mt-8">
-                <p className="text-white mb-2 leading-[19px]">
+                <p className="text-white mb-2">
                   {t("cs2page.rules.contact")}
                 </p>
                 <p className="text-[#00A3E0] font-bold">
                   {t("cs2page.rules.contactName")}
                 </p>
-                <p className="text-white leading-[19px]">
+                <p className="text-white">
                   {t("cs2page.rules.contactRole")}
                 </p>
-                <p className="text-white leading-[19px]">
+                <p className="text-white">
                   Discord:{" "}
                   <a
                     href="https://discord.com/users/292372329747710013"

src/app/[locale]/turniirid/lol/page.tsx

@@ -31,7 +31,7 @@ export default async function LoLTournament({
   return (
     <div className=" bg-[#0E0F19] min-h-screen pt-16 md:pt-20">
       <div className="max-w-480 mx-auto px-4 sm:px-6 md:px-12 lg:px-64 py-10 md:py-20">
-        <div className="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8 lg:gap-16">
+        <div className="tournament-page-scope grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8 lg:gap-30">
           {/* Main content */}
           <div>
             {/* Header */}
@@ -54,23 +54,23 @@ export default async function LoLTournament({
             </div>
 
             {/* SISSEJUHATUS */}
-            <section id="intro" className="mb-12 scroll-mt-24 md:scroll-mt-28">
+            <section id="intro" className="mb-12 scroll-mt-24 md:scroll-mt-28 text-justify">
               <h2
                 className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
               >
                 {t("lolpage.intro.title")}
               </h2>
-              <p className="text-white mb-6 leading-[19px]">
+              <p className="mb-8">
                 {t("lolpage.intro.description")}
               </p>
 
               <h3
-                className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2`}
+                className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-4`}
               >
                 {t("lolpage.intro.previousWinners")}
               </h3>
-              <p className="text-white font-bold leading-[19px]">2025</p>
-              <ol className="text-white list-decimal list-inside mb-4 leading-[19px]">
+              <p className="font-bold mb-2">2025</p>
+              <ol className="list-decimal list-inside">
                 <li>Ükssilm (Eesti)</li>
                 <li>Eesti Rästikud (Eesti)</li>
                 <li>LOMiks (Läti)</li>
@@ -84,7 +84,7 @@ export default async function LoLTournament({
               >
                 {t("lolpage.info.title")}
               </h2>
-              <p className="text-white leading-[19px]">
+              <p>
                 {t("lolpage.info.description")}
               </p>
             </section>
@@ -102,12 +102,12 @@ export default async function LoLTournament({
               >
                 {t("lolpage.prizes.mainTitle")}
               </h3>
-              <ul className="text-white mb-2 leading-[19px]">
+              <ul className="text-white mb-2">
                 <li>{t("lolpage.prizes.place1")}</li>
                 <li>{t("lolpage.prizes.place2")}</li>
                 <li>{t("lolpage.prizes.place3")}</li>
               </ul>
-              <p className="text-white/80 text-sm leading-[19px]">
+              <p className="text-white/80 text-sm">
                 {t("lolpage.prizes.note")}
               </p>
             </section>
@@ -119,13 +119,13 @@ export default async function LoLTournament({
               >
                 {t("lolpage.format.title")}
               </h2>
-              <p className="text-white mb-4 leading-[19px]">
+              <p className="mb-4 font-bold">
                 {t("lolpage.format.description")}
               </p>
-              <p className="text-white leading-[19px]">
+              <p>
                 {t("lolpage.format.day1")}
               </p>
-              <p className="text-white leading-[19px]">
+              <p>
                 {t("lolpage.format.day2")}
               </p>
             </section>
@@ -155,23 +155,24 @@ export default async function LoLTournament({
               >
                 {t("lolpage.rules.title")}
               </h2>
-              <p className="text-white mb-6 leading-[19px]">
+              <p className="mb-4">
                 {t("lolpage.rules.description")}
               </p>
 
               <RulesContent sections={t.raw("lolpage.rules.sections")} />
               
+              {/* Contact info */}
               <div className="mt-8">
-                <p className="text-white mb-2 leading-[19px]">
+                <p>
                   {t("lolpage.rules.contact")}
                 </p>
                 <p className="text-[#00A3E0] font-bold">
                   {t("lolpage.rules.contactName")}
                 </p>
-                <p className="text-white leading-[19px]">
+                <p>
                   {t("lolpage.rules.contactRole")}
                 </p>
-                <p className="text-white leading-[19px]">
+                <p>
                   Discord:{" "}
                   <a
                     href="https://discord.com/users/125585160761638912"

src/app/globals.css

@@ -213,3 +213,28 @@ body {
         will-change: auto;
     }
 }
+
+.tournament-page-scope p,
+.tournament-page-scope li {
+    color: #ffffff;
+    text-align: justify;
+}
+
+@media (min-width: 640px) {
+    .tournament-page-scope p,
+    .tournament-page-scope li {
+        font-size: 0.875rem;
+    }
+}
+
+@media (min-width: 1024px) {
+    .tournament-page-scope p,
+    .tournament-page-scope li {
+        font-size: 1.25rem;
+    }
+}
+
+.tournament-page-scope ol {
+    color: #ffffff;
+    list-style-position: inside;
+}

src/components/RulesContent.tsx

@@ -25,47 +25,52 @@ function RuleItem({
 }) {
   if (typeof rule === "string") {
     return (
-      <li className="text-white mb-2 leading-[19px]">
-        <span className="text-white mr-2">{index}.</span>
-        {rule}
+        <li className="flex items-start text-white mb-2">
+          {/* Fixed min-width prevents numbers from shifting text as digits grow (e.g., 9. vs 10.) */}
+          <span className="text-white font-mono min-w-[2rem] shrink-0 select-none">{index}.</span>
+          <div>{rule}</div>
         </li>
     );
   }
 
   return (
-    <li className="text-white mb-3 leading-[19px]">
-      <span className="text-white mr-2">{index}.</span>
-      {rule.main}
+      <li className="text-white mb-4">
+        {/* Main rule row */}
+        <div className="flex items-start">
+          <span className="text-white font-mono min-w-[2rem] shrink-0 select-none">{index}.</span>
+          <div>{rule.main}</div>
+        </div>
+
         {rule.sub && rule.sub.length > 0 && (
-        <ol className="ml-6 mt-2">
+            <ol className="ml-8 mt-2 space-y-2">
               {rule.sub.map((subRule, subIndex) => {
                 if (typeof subRule === "string") {
                   return (
-                <li key={subIndex} className="text-white mb-1 leading-[19px]">
-                  <span className="text-white mr-2">
+                      <li key={subIndex} className="flex items-start text-white">
+                  <span className="text-white font-mono min-w-[3rem] shrink-0 select-none">
                     {index}.{subIndex + 1}.
                   </span>
-                  {subRule}
+                        <div>{subRule}</div>
                       </li>
                   );
                 }
                 return (
-              <li key={subIndex} className="text-white mb-2 leading-[19px]">
-                <span className="text-white mr-2">
+                    <li key={subIndex} className="text-white">
+                      <div className="flex items-start">
+                  <span className="text-white font-mono min-w-[3rem] shrink-0 select-none">
                     {index}.{subIndex + 1}.
                   </span>
-                {subRule.main}
+                        <div>{subRule.main}</div>
+                      </div>
+
                       {subRule.sub && subRule.sub.length > 0 && (
-                  <ol className="ml-6 mt-1">
+                          <ol className="ml-12 mt-2 space-y-2">
                             {subRule.sub.map((subSubRule, subSubIndex) => (
-                      <li
-                        key={subSubIndex}
-                        className="text-white/80 mb-1 leading-[19px]"
-                      >
-                        <span className="text-white/80 mr-2">
+                                <li key={subSubIndex} className="flex items-start text-white/80">
+                        <span className="text-white/80 font-mono min-w-[4rem] shrink-0 select-none">
                           {index}.{subIndex + 1}.{subSubIndex + 1}.
                         </span>
-                        {subSubRule}
+                                  <div>{subSubRule}</div>
                                 </li>
                             ))}
                           </ol>
@@ -89,7 +94,7 @@ export default function RulesContent({ sections }: RulesContentProps) {
           >
             {sectionIndex + 1}) {section.title}
           </h3>
-          <ol className="list-none">
+          <ol>
             {section.rules.map((rule, ruleIndex) => (
               <RuleItem key={ruleIndex} rule={rule} index={ruleIndex + 1} />
             ))}