improve LoL page readability

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

@@ -4,6 +4,7 @@ import RulesContent from "@/components/RulesContent";
 import RulesLastChanged from "@/components/RulesLastChanged";
 import Link from "next/link";
 import { getTranslations, setRequestLocale } from "next-intl/server";
+import '../style.css';
 
 const sectionKeys = [
   { id: "intro", labelKey: "lolpage.nav.intro" },
@@ -31,7 +32,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="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8 lg:gap-30">
           {/* Main content */}
           <div>
             {/* Header */}
@@ -54,23 +55,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 +85,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 +103,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 +120,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 +156,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/[locale]/turniirid/style.css

@@ -0,0 +1,21 @@
+p, li {
+    color: #ffffff;
+    text-align: justify;
+}
+
+@media (min-width: 640px) {
+p, li {
+        font-size: 0.875rem;
+    }
+}
+
+@media (min-width: 1024px) {
+p, li {
+        font-size: 1.25rem;
+    }
+}
+
+ol {
+    color: #ffffff;
+    list-style-position: inside;
+}

src/components/RulesContent.tsx

@@ -15,67 +15,72 @@ interface RulesContentProps {
 }
 
 function RuleItem({
-  rule,
-  index,
-}: {
+                    rule,
+                    index,
+                  }: {
   rule:
-    | string
-    | { main: string; sub: (string | { main: string; sub: string[] })[] };
+      | string
+      | { main: string; sub: (string | { main: string; sub: string[] })[] };
   index: number;
 }) {
   if (typeof rule === "string") {
     return (
-      <li className="text-white mb-2 leading-[19px]">
-        <span className="text-white mr-2">{index}.</span>
-        {rule}
-      </li>
+        <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}
-      {rule.sub && rule.sub.length > 0 && (
-        <ol className="ml-6 mt-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 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-8 mt-2 space-y-2">
+              {rule.sub.map((subRule, subIndex) => {
+                if (typeof subRule === "string") {
+                  return (
+                      <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}
-                </li>
-              );
-            }
-            return (
-              <li key={subIndex} className="text-white mb-2 leading-[19px]">
-                <span className="text-white mr-2">
-                  {index}.{subIndex + 1}.
-                </span>
-                {subRule.main}
-                {subRule.sub && subRule.sub.length > 0 && (
-                  <ol className="ml-6 mt-1">
-                    {subRule.sub.map((subSubRule, subSubIndex) => (
-                      <li
-                        key={subSubIndex}
-                        className="text-white/80 mb-1 leading-[19px]"
-                      >
-                        <span className="text-white/80 mr-2">
+                        <div>{subRule}</div>
+                      </li>
+                  );
+                }
+                return (
+                    <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>
+                        <div>{subRule.main}</div>
+                      </div>
+
+                      {subRule.sub && subRule.sub.length > 0 && (
+                          <ol className="ml-12 mt-2 space-y-2">
+                            {subRule.sub.map((subSubRule, subSubIndex) => (
+                                <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}
-                      </li>
-                    ))}
-                  </ol>
-                )}
-              </li>
-            );
-          })}
-        </ol>
-      )}
-    </li>
+                                  <div>{subSubRule}</div>
+                                </li>
+                            ))}
+                          </ol>
+                      )}
+                    </li>
+                );
+              })}
+            </ol>
+        )}
+      </li>
   );
 }
 
@@ -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} />
             ))}