From 42367cf8e2a9c16b90148f01afec45994ff7fbf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katri=20Lotam=C3=B5is?= <katrilotamois@outlook.com>
Date: Fri, 26 Jun 2026 14:30:59 +0300
Subject: [PATCH 1/5] adjust text size on different screen types

---
 src/app/[locale]/kodukord/page.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/[locale]/kodukord/page.tsx b/src/app/[locale]/kodukord/page.tsx
index 45ac2e0..e05517c 100644
--- a/src/app/[locale]/kodukord/page.tsx
+++ b/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>
                     ),

From 85fea205842584d8e6ef5dc3d9c70fe5fc5dbf88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katri=20Lotam=C3=B5is?= <katrilotamois@outlook.com>
Date: Fri, 26 Jun 2026 15:40:02 +0300
Subject: [PATCH 2/5] improve LoL page readability

---
 src/app/[locale]/turniirid/lol/page.tsx |  36 +++++----
 src/app/[locale]/turniirid/style.css    |  21 +++++
 src/components/RulesContent.tsx         | 103 +++++++++++++-----------
 3 files changed, 94 insertions(+), 66 deletions(-)
 create mode 100644 src/app/[locale]/turniirid/style.css

diff --git a/src/app/[locale]/turniirid/lol/page.tsx b/src/app/[locale]/turniirid/lol/page.tsx
index b3c9b83..ae3836b 100644
--- a/src/app/[locale]/turniirid/lol/page.tsx
+++ b/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"
diff --git a/src/app/[locale]/turniirid/style.css b/src/app/[locale]/turniirid/style.css
new file mode 100644
index 0000000..b6f0abb
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/RulesContent.tsx b/src/components/RulesContent.tsx
index 16dbb1f..4bb8a33 100644
--- a/src/components/RulesContent.tsx
+++ b/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} />
             ))}

From 670755f64c4374eb9572b5e71c37f1bb8d478925 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katri=20Lotam=C3=B5is?= <katrilotamois@outlook.com>
Date: Fri, 26 Jun 2026 15:42:47 +0300
Subject: [PATCH 3/5] improve CS page readability

---
 src/app/[locale]/turniirid/cs2/page.tsx | 33 +++++++++++++------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/app/[locale]/turniirid/cs2/page.tsx b/src/app/[locale]/turniirid/cs2/page.tsx
index d330638..62aaf55 100644
--- a/src/app/[locale]/turniirid/cs2/page.tsx
+++ b/src/app/[locale]/turniirid/cs2/page.tsx
@@ -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"

From 91ace76d026d9f67a41a6405586e0665deef8290 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katri=20Lotam=C3=B5is?= <katrilotamois@outlook.com>
Date: Fri, 26 Jun 2026 15:46:48 +0300
Subject: [PATCH 4/5] add missing css import

---
 src/app/[locale]/turniirid/cs2/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/[locale]/turniirid/cs2/page.tsx b/src/app/[locale]/turniirid/cs2/page.tsx
index 62aaf55..06df301 100644
--- a/src/app/[locale]/turniirid/cs2/page.tsx
+++ b/src/app/[locale]/turniirid/cs2/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: "cs2page.nav.intro" },

From 181b310d532187cc03af918208dc8c3bcc719bce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katri=20Lotam=C3=B5is?= <katrilotamois@outlook.com>
Date: Mon, 29 Jun 2026 12:28:17 +0300
Subject: [PATCH 5/5] reorganize styles to global css file

---
 src/app/[locale]/turniirid/cs2/page.tsx |  3 +--
 src/app/[locale]/turniirid/lol/page.tsx |  5 ++---
 src/app/[locale]/turniirid/style.css    | 21 ---------------------
 src/app/globals.css                     | 25 +++++++++++++++++++++++++
 4 files changed, 28 insertions(+), 26 deletions(-)
 delete mode 100644 src/app/[locale]/turniirid/style.css

diff --git a/src/app/[locale]/turniirid/cs2/page.tsx b/src/app/[locale]/turniirid/cs2/page.tsx
index 06df301..4ed6035 100644
--- a/src/app/[locale]/turniirid/cs2/page.tsx
+++ b/src/app/[locale]/turniirid/cs2/page.tsx
@@ -4,7 +4,6 @@ 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: "cs2page.nav.intro" },
@@ -33,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 */}
diff --git a/src/app/[locale]/turniirid/lol/page.tsx b/src/app/[locale]/turniirid/lol/page.tsx
index ae3836b..ab43c33 100644
--- a/src/app/[locale]/turniirid/lol/page.tsx
+++ b/src/app/[locale]/turniirid/lol/page.tsx
@@ -4,7 +4,6 @@ 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" },
@@ -30,9 +29,9 @@ export default async function LoLTournament({
   }));
 
   return (
-    <div className="bg-[#0E0F19] min-h-screen pt-16 md:pt-20">
+    <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-30">
+        <div className="tournament-page-scope grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8 lg:gap-30">
           {/* Main content */}
           <div>
             {/* Header */}
diff --git a/src/app/[locale]/turniirid/style.css b/src/app/[locale]/turniirid/style.css
deleted file mode 100644
index b6f0abb..0000000
--- a/src/app/[locale]/turniirid/style.css
+++ /dev/null
@@ -1,21 +0,0 @@
-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;
-}
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 7c075ad..4143ae7 100644
--- a/src/app/globals.css
+++ b/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;
+}
\ No newline at end of file