lapikud
/
tipilan
mirror of https://github.com/Lapikud/tipilan
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix turniirid page html and css, including fixing the page's responsiveness

Browse Source
pull/24/head
TFT 4 months ago
parent e04f1f4517
commit 299fa10460
1 changed files with 104 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 81
      src/app/turniirid/page.tsx

81
src/app/turniirid/page.tsx
Unescape View File

@ -2,15 +2,14 @@ import { vipnagorgialla } from "@/components/Vipnagorgialla";
import Link from "next/link"; import Link from "next/link";
export default function Tourney() { export default function Tourney() {
const headingStyle = `text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5]`; const headingStyle = `text-3xl md:text-5xl lg:text-5xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] -skew-x-2 md:-skew-x-5`;
const SectionDivider = () => <div className="border-b-[3px] border-[#1F5673] w-full" />; const SectionDivider = () => <hr className="border-t-[3px] border-[#1F5673]" />;
return ( return (
<div className="flex flex-col min-h-[90vh] mt-16"> <div className="flex flex-col min-h-[90vh] mt-16">
<div className={"md:m-16"}>
<h1 <h1
className={`${headingStyle}`} className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4 m-6 md:m-16`}
> >
Turniirid Turniirid
</h1> </h1>
@ -19,28 +18,28 @@ export default function Tourney() {
{/* Kui tahate oma oskusi proovile panna, siis vaadake siia tagasi! Rohkem*/} {/* Kui tahate oma oskusi proovile panna, siis vaadake siia tagasi! Rohkem*/}
{/* infot lähiajal.*/} {/* infot lähiajal.*/}
{/*</p>*/} {/*</p>*/}
<div className="flex flex-col gap-8 md:gap-16">
<div className={"flex flex-row flex-wrap gap-8 md:gap-38"}> <div className={"flex flex-row gap-8 md:gap-16"}>
<div className={"-skew-x-2 md:-skew-x-5 pl-4 md:pl-28 md:w-180"}> <div className={"flex-auto ml-8 md:ml-28 -skew-x-2 md:-skew-x-5"}>
<h2 className={`${headingStyle} mt-12`}> <h2 className={`${headingStyle}`}>
CS2 turniir CS2 turniir
</h2> </h2>
<p className={"text-xs mb-4 text-neutral-500"}> <p className={"text-2xl mb-4 text-neutral-500"}>
Toimumisaeg veel selgumisel Toimumisaeg veel selgumisel
</p> </p>
<p> <p className="text-balance">
TipiLANil toimub Eesti ühe suurima auhinnafondiga CS2 turniire juba sel sügisel. Haara kaasa TipiLANil toimub Eesti ühe suurima auhinnafondiga CS2 turniire juba sel sügisel. Haara kaasa
sõbrad ja sõbrad ja
saa osa adrenaliinirohkest kogemusest! saa osa adrenaliinirohkest kogemusest!
</p> </p>
<br /> <br />
<p> <p className="text-balance">
Auhinnafond on suuruses 5250€, mis jaotatakse TOP3 meeskonna vahel ära. Iga tiimiliige saab Auhinnafond on suuruses 5250€, mis jaotatakse TOP3 meeskonna vahel ära. Iga tiimiliige saab
vastavalt vastavalt
saavutatud kohale auhinnaks kas 600€, 300€ või 150€. saavutatud kohale auhinnaks kas 600€, 300€ või 150€.
</p> </p>
<br /> <br />
<div className={"flex flex-row flex-wrap gap-8"}> <div className={"flex flex-row flex-wrap gap-4 md:gap-8"}>
<Link href="/kodukord" target="_blank"> <Link href="/kodukord" target="_blank">
<button <button
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`} className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
@ -48,41 +47,49 @@ export default function Tourney() {
LOE REEGLEID LOE REEGLEID
</button> </button>
</Link> </Link>
<Link href="https://fienta.com/et/tipilan" target="_blank"> <a href="https://fienta.com/et/tipilan" target="_blank">
<button <button
className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`} className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
> >
OSTA PILET OSTA PILET
</button> </button>
</Link> </a>
</div>
</div> </div>
<div className={"mr-4 md:mr-40 md:w-180"}>
<div className={"-skew-x-2 md:-skew-x-5"}>
{/* Image needs to be the div that has the skew. Outside div needs to remain so that overflow wont occur*/}
</div> </div>
</div> </div>
{/* Image placeholder */}
</div> </div>
<SectionDivider /> <SectionDivider />
<div className={"flex flex-row gap-8 md:gap-38 mt-8 mb-12"}> <div className={"flex flex-row gap-8 md:gap-16"}>
<div className={"pl-4 md:pl-40 md:w-180"}></div> <div className={"ml-4 md:ml-40 md:w-180"}>
{/* Image placeholder */} <div className={"-skew-x-2 md:-skew-x-5"}>
<div className={"-skew-x-2 md:-skew-x-5 flex-auto md:w-180 pr-4 md:pr-42 text-right"}> {/* Image needs to be the div that has the skew. Outside div needs to remain so that overflow wont occur*/}
</div>
</div>
<div className={"flex-auto mr-8 md:mr-42 text-right -skew-x-2 md:-skew-x-5"}>
<h2 className={`${headingStyle}`}> <h2 className={`${headingStyle}`}>
LoL turniir LoL turniir
</h2> </h2>
<p className={"text-xs mb-4 text-neutral-500"}> <p className={"text-2xl mb-4 text-neutral-500"}>
Toimumisaeg veel selgumisel Toimumisaeg veel selgumisel
</p> </p>
<p> <p className="text-balance">
TipiLANil toimub Eesti ühe suurima auhinnafondiga LoL turniire juba sel sügisel. TipiLANil toimub Eesti ühe suurima auhinnafondiga LoL turniire juba sel sügisel.
Haara kaasa sõbrad ja saa osa adrenaliinirohkest kogemusest! Haara kaasa sõbrad ja saa osa adrenaliinirohkest kogemusest!
</p> </p>
<br /> <br />
<p> <p className="text-balance">
Auhinnafond on suuruses 3500€, mis jaotatakse TOP3 meeskonna vahel ära. Iga tiimiliige saab Auhinnafond on suuruses 3500€, mis jaotatakse TOP3 meeskonna vahel ära. Iga tiimiliige saab
vastavalt saavutatud kohale auhinnaks kas 400€, 200€ või 100€. vastavalt saavutatud kohale auhinnaks kas 400€, 200€ või 100€.
</p> </p>
<br /> <br />
<div className="flex flex-row flex-wrap gap-8 justify-end"> <div className="flex flex-row flex-wrap gap-4 md:gap-8 justify-end">
<Link href="/kodukord" target="_blank"> <Link href="/kodukord" target="_blank">
<button <button
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`} className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
@ -90,37 +97,38 @@ export default function Tourney() {
LOE REEGLEID LOE REEGLEID
</button> </button>
</Link> </Link>
<Link href="https://fienta.com/et/tipilan" target="_blank"> <a href="https://fienta.com/et/tipilan" target="_blank">
<button <button
className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`} className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
> >
OSTA PILET OSTA PILET
</button> </button>
</Link> </a>
</div> </div>
</div> </div>
</div> </div>
<SectionDivider /> <SectionDivider />
<div className={"-skew-x-2 md:-skew-x-5 pl-4 md:pl-40 md:w-180 mt-8 mb-12"}> <div className={"flex flex-row gap-8 md:gap-16"}>
<div className={"ml-8 md:ml-40 -skew-x-2 md:-skew-x-5"}>
<h2 className={`${headingStyle}`}> <h2 className={`${headingStyle}`}>
Miniturniirid Mini&shy;turniirid
</h2> </h2>
<p className={"text-xs mb-4 text-neutral-500"}> <p className={"text-2xl mb-4 text-neutral-500"}>
Toimumisaeg veel selgumisel Toimumisaeg veel selgumisel
</p> </p>
<p> <p className="text-balance">
TipiLANil toimub mitmeid erinevaid lõbusaid ja võistlushimu tekitavaid miniturniire. TipiLANil toimub mitmeid erinevaid lõbusaid ja võistlushimu tekitavaid miniturniire.
Miniturniirid toimuvad järgnevates mängudes: Tetris, SimRacing, Tekken. FIFA, Minecraft Bedwards, Miniturniirid toimuvad järgnevates mängudes: Tetris, SimRacing, Tekken. FIFA, Minecraft Bedwards,
Buckshot Roulette, LostGamer. Buckshot Roulette, LostGamer.
</p> </p>
<br /> <br />
<p> <p className="text-balance">
Auhinnafond on kõigi turniiride peale 1250€ ja reeglina saab rahalise auhinna miniturniiri võitja. Auhinnafond on kõigi turniiride peale 1250€ ja reeglina saab rahalise auhinna miniturniiri võitja.
</p> </p>
<br /> <br />
<div className={"flex flex-row flex-wrap gap-8"}> <div className={"flex flex-row flex-wrap gap-4 md:gap-8"}>
<Link href="/kodukord" target="_blank"> <Link href="/kodukord" target="_blank">
<button <button
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`} className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
@ -128,18 +136,25 @@ export default function Tourney() {
LOE REEGLEID LOE REEGLEID
</button> </button>
</Link> </Link>
<Link href="https://fienta.com/et/tipilan" target="_blank"> <a href="https://fienta.com/et/tipilan" target="_blank">
<button <button
className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`} className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
> >
OSTA PILET OSTA PILET
</button> </button>
</Link> </a>
</div>
</div>
<div className={"mr-4 md:mr-40 md:w-180"}>
<div className={"-skew-x-2 md:-skew-x-5"}>
{/* Image needs to be the div that has the skew. Outside div needs to remain so that overflow wont occur*/}
</div> </div>
</div> </div>
{/* Image placeholder */}
</div>
<SectionDivider /> <SectionDivider />
</div>
</div> </div>
); );
} }
Write Preview
Loading…
Cancel
Save