Added 3XL

Added tailwind selector 3XL (width: 1900px )
Modified Layouts and Navigation to be wider for 2xl
This commit is contained in:
Cyril Šebek 2024-07-06 15:52:20 +02:00
parent 992c5fa86e
commit cdfc43024b
Signed by: blboun3
SSH Key Fingerprint: SHA256:n9dMtOPzgsD+CCerUJslEnU2dzVanbaIv0XDQVRVjeg
4 changed files with 6 additions and 3 deletions

View File

@ -4,7 +4,7 @@
class="sm:grid sm:grid-cols-6 lg:grid-cols-12" class="sm:grid sm:grid-cols-6 lg:grid-cols-12"
> >
<div <div
class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 2xl:col-start-4 2xl:col-end-10 " class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 3xl:col-start-4 3xl:col-end-10 "
> >
<div <div
class="container mx-auto px-6 py-2 flex items-center justify-between" class="container mx-auto px-6 py-2 flex items-center justify-between"

View File

@ -1,7 +1,7 @@
<div class="snap-start h-screen overflow-clip pt-14"> <div class="snap-start h-screen overflow-clip pt-14">
<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12"> <div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
<div <div
class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 xl:col-start-3 xl:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6" class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 xl:col-start-3 xl:col-end-11 3xl:col-start-4 3xl:col-end-10 h-full p-2 sm:p-6"
> >
<slot /> <slot />
</div> </div>

View File

@ -1,7 +1,7 @@
<div class="h-screen pt-14"> <div class="h-screen pt-14">
<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12"> <div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
<div <div
class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 xl:col-start-3 xl:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6" class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 xl:col-start-3 xl:col-end-11 3xl:col-start-4 3xl:col-end-10 h-full p-2 sm:p-6"
> >
<slot /> <slot />
</div> </div>

View File

@ -27,6 +27,9 @@ module.exports = {
}, },
}, },
extend: { extend: {
screens: {
"3xl": "1900px"
},
colors: { colors: {
bkg: withOpacity('--color-bkg'), bkg: withOpacity('--color-bkg'),
bkgNavbar: withOpacity('--color-bkgNavbar'), bkgNavbar: withOpacity('--color-bkgNavbar'),