lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-08-08 17:49:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #130 from Lapikud/development

Browse Source 
adjust text size on different screen types
This commit is contained in:
Randel Mandre
2026-06-29 17:08:14 +03:00
committed by GitHub
parent fc757ef9ef 181b310d53
commit 644554fd69
5 changed files with 120 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/[locale]/kodukord/page.tsx
View File

@@ -57,7 +57,8 @@ export default async function Page({
return ( return (
<h1 <h1
id={id} 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} {props.children}
</h1> </h1>
@@ -81,12 +82,12 @@ export default async function Page({
</ul> </ul>
), ),
p: (props) => ( p: (props) => (
<p className="text-white text-xl"> <p className="text-white lg:text-xl sm:text-sm">
{props.children} {props.children}
</p> </p>
), ),
li: (props) => ( li: (props) => (
<li className="text-white text-xl mb-3"> <li className="text-white lg:text-xl sm:text-sm mb-3">
{props.children} {props.children}
</li> </li>
), ),

35
src/app/[locale]/turniirid/cs2/page.tsx
View File

@@ -32,7 +32,7 @@ export default async function CS2Tournament({
return ( 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="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 */} {/* Main content */}
<div> <div>
{/* Header */} {/* Header */}
@@ -68,7 +68,7 @@ export default async function CS2Tournament({
> >
{t("cs2page.intro.title")} {t("cs2page.intro.title")}
</h2> </h2>
<p className="text-white mb-6 leading-[19px]"> <p className="text-white mb-6">
{t("cs2page.intro.description")} {t("cs2page.intro.description")}
</p> </p>
@@ -77,8 +77,8 @@ export default async function CS2Tournament({
> >
{t("cs2page.intro.previousWinners")} {t("cs2page.intro.previousWinners")}
</h3> </h3>
<p className="text-white font-bold leading-[19px]">2025</p> <p className="text-white font-bold">2025</p>
<ol className="text-white list-decimal list-inside mb-4 leading-[19px]"> <ol className="text-white list-decimal list-inside mb-4">
<li>RAID (Eesti)</li> <li>RAID (Eesti)</li>
<li>hypewrld (Läti)</li> <li>hypewrld (Läti)</li>
<li>CSDIILIT (Soome/Eesti)</li> <li>CSDIILIT (Soome/Eesti)</li>
@@ -92,7 +92,7 @@ export default async function CS2Tournament({
> >
{t("cs2page.info.title")} {t("cs2page.info.title")}
</h2> </h2>
<p className="text-white leading-[19px]"> <p className="text-white ">
{t("cs2page.info.description")} {t("cs2page.info.description")}
</p> </p>
</section> </section>
@@ -110,7 +110,7 @@ export default async function CS2Tournament({
> >
{t("cs2page.prizes.mainTitle")} {t("cs2page.prizes.mainTitle")}
</h3> </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.mainPlace1")}</li>
<li>{t("cs2page.prizes.mainPlace2")}</li> <li>{t("cs2page.prizes.mainPlace2")}</li>
<li>{t("cs2page.prizes.mainPlace3")}</li> <li>{t("cs2page.prizes.mainPlace3")}</li>
@@ -124,11 +124,11 @@ export default async function CS2Tournament({
> >
{t("cs2page.prizes.secondTitle")} {t("cs2page.prizes.secondTitle")}
</h3> </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.secondPlace1")}</li>
<li>{t("cs2page.prizes.secondPlace2")}</li> <li>{t("cs2page.prizes.secondPlace2")}</li>
</ul> </ul>
<p className="text-white/80 text-sm leading-[19px]"> <p className="text-white/80 text-sm">
{t("cs2page.prizes.secondNote")} {t("cs2page.prizes.secondNote")}
</p> </p>
</section> </section>
@@ -140,13 +140,13 @@ export default async function CS2Tournament({
> >
{t("cs2page.format.title")} {t("cs2page.format.title")}
</h2> </h2>
<p className="text-white mb-4 leading-[19px]"> <p className="text-white mb-4">
{t("cs2page.format.description")} {t("cs2page.format.description")}
</p> </p>
<p className="text-white leading-[19px]"> <p className="text-white">
{t("cs2page.format.day1")} {t("cs2page.format.day1")}
</p> </p>
<p className="text-white leading-[19px]"> <p className="text-white">
{t("cs2page.format.day23")} {t("cs2page.format.day23")}
</p> </p>
</section> </section>
@@ -158,10 +158,10 @@ export default async function CS2Tournament({
> >
{t("cs2page.vrs.title")} {t("cs2page.vrs.title")}
</h2> </h2>
<p className="text-white mb-4 leading-[19px]"> <p className="text-white mb-4">
{t("cs2page.vrs.description1")} {t("cs2page.vrs.description1")}
</p> </p>
<p className="text-white leading-[19px]"> <p className="text-white">
{t("cs2page.vrs.description2")} {t("cs2page.vrs.description2")}
</p> </p>
</section> </section>
@@ -191,23 +191,24 @@ export default async function CS2Tournament({
> >
{t("cs2page.rules.title")} {t("cs2page.rules.title")}
</h2> </h2>
<p className="text-white mb-6 leading-[19px]"> <p className="text-white mb-6">
{t("cs2page.rules.description")} {t("cs2page.rules.description")}
</p> </p>
<RulesContent sections={t.raw("cs2page.rules.sections")} /> <RulesContent sections={t.raw("cs2page.rules.sections")} />
{/* Contact info */}
<div className="mt-8"> <div className="mt-8">
<p className="text-white mb-2 leading-[19px]"> <p className="text-white mb-2">
{t("cs2page.rules.contact")} {t("cs2page.rules.contact")}
</p> </p>
<p className="text-[#00A3E0] font-bold"> <p className="text-[#00A3E0] font-bold">
{t("cs2page.rules.contactName")} {t("cs2page.rules.contactName")}
</p> </p>
<p className="text-white leading-[19px]"> <p className="text-white">
{t("cs2page.rules.contactRole")} {t("cs2page.rules.contactRole")}
</p> </p>
<p className="text-white leading-[19px]"> <p className="text-white">
Discord:{" "} Discord:{" "}
<a <a
href="https://discord.com/users/292372329747710013" href="https://discord.com/users/292372329747710013"

35
src/app/[locale]/turniirid/lol/page.tsx
View File

@@ -29,9 +29,9 @@ export default async function LoLTournament({
})); }));
return ( 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="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 */} {/* Main content */}
<div> <div>
{/* Header */} {/* Header */}
@@ -54,23 +54,23 @@ export default async function LoLTournament({
</div> </div>
{/* SISSEJUHATUS */} {/* 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 <h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`} className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
> >
{t("lolpage.intro.title")} {t("lolpage.intro.title")}
</h2> </h2>
<p className="text-white mb-6 leading-[19px]"> <p className="mb-8">
{t("lolpage.intro.description")} {t("lolpage.intro.description")}
</p> </p>
<h3 <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")} {t("lolpage.intro.previousWinners")}
</h3> </h3>
<p className="text-white font-bold leading-[19px]">2025</p> <p className="font-bold mb-2">2025</p>
<ol className="text-white list-decimal list-inside mb-4 leading-[19px]"> <ol className="list-decimal list-inside">
<li>Ükssilm (Eesti)</li> <li>Ükssilm (Eesti)</li>
<li>Eesti Rästikud (Eesti)</li> <li>Eesti Rästikud (Eesti)</li>
<li>LOMiks (Läti)</li> <li>LOMiks (Läti)</li>
@@ -84,7 +84,7 @@ export default async function LoLTournament({
> >
{t("lolpage.info.title")} {t("lolpage.info.title")}
</h2> </h2>
<p className="text-white leading-[19px]"> <p>
{t("lolpage.info.description")} {t("lolpage.info.description")}
</p> </p>
</section> </section>
@@ -102,12 +102,12 @@ export default async function LoLTournament({
> >
{t("lolpage.prizes.mainTitle")} {t("lolpage.prizes.mainTitle")}
</h3> </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.place1")}</li>
<li>{t("lolpage.prizes.place2")}</li> <li>{t("lolpage.prizes.place2")}</li>
<li>{t("lolpage.prizes.place3")}</li> <li>{t("lolpage.prizes.place3")}</li>
</ul> </ul>
<p className="text-white/80 text-sm leading-[19px]"> <p className="text-white/80 text-sm">
{t("lolpage.prizes.note")} {t("lolpage.prizes.note")}
</p> </p>
</section> </section>
@@ -119,13 +119,13 @@ export default async function LoLTournament({
> >
{t("lolpage.format.title")} {t("lolpage.format.title")}
</h2> </h2>
<p className="text-white mb-4 leading-[19px]"> <p className="mb-4 font-bold">
{t("lolpage.format.description")} {t("lolpage.format.description")}
</p> </p>
<p className="text-white leading-[19px]"> <p>
{t("lolpage.format.day1")} {t("lolpage.format.day1")}
</p> </p>
<p className="text-white leading-[19px]"> <p>
{t("lolpage.format.day2")} {t("lolpage.format.day2")}
</p> </p>
</section> </section>
@@ -155,23 +155,24 @@ export default async function LoLTournament({
> >
{t("lolpage.rules.title")} {t("lolpage.rules.title")}
</h2> </h2>
<p className="text-white mb-6 leading-[19px]"> <p className="mb-4">
{t("lolpage.rules.description")} {t("lolpage.rules.description")}
</p> </p>
<RulesContent sections={t.raw("lolpage.rules.sections")} /> <RulesContent sections={t.raw("lolpage.rules.sections")} />
{/* Contact info */}
<div className="mt-8"> <div className="mt-8">
<p className="text-white mb-2 leading-[19px]"> <p>
{t("lolpage.rules.contact")} {t("lolpage.rules.contact")}
</p> </p>
<p className="text-[#00A3E0] font-bold"> <p className="text-[#00A3E0] font-bold">
{t("lolpage.rules.contactName")} {t("lolpage.rules.contactName")}
</p> </p>
<p className="text-white leading-[19px]"> <p>
{t("lolpage.rules.contactRole")} {t("lolpage.rules.contactRole")}
</p> </p>
<p className="text-white leading-[19px]"> <p>
Discord:{" "} Discord:{" "}
<a <a
href="https://discord.com/users/125585160761638912" href="https://discord.com/users/125585160761638912"

25
src/app/globals.css
View File

@@ -213,3 +213,28 @@ body {
will-change: auto; 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;
}

103
src/components/RulesContent.tsx
View File

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