diff --git a/README.md b/README.md index eecfc17..91f0dd7 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,49 @@ # KNACSS -**Né en 2012 et après plus de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations est officiellement obsolète, n'est plus maintenu et ne sera plus mis à jour.** + -## Documentation version v8 (v8 = Reborn) +KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign, grille de mise en forme). -- Site web de présentation de KNACSS Reborn : +**Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn.** + +## Documentation version actuelle (v8 = Reborn) + +- Site web de présentation de KNACSS Reborn : - [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html) ## Documentation anciennes versions (v7) - [**Documentation KNACSS v7**](https://www.knacss.com/doc-old.html) -- [**Pense-bête PDF KNACSS v7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf) +- [**Pense-bête PDF version 7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf) +## Modulaire + +Principe de briques modulaires : + +- KNACSS Reborn est constitué uniquement des fichiers "Core". +- Les fichiers "Utils" seront des briques optionnelles (= les `@import` seront commentés par défaut). + +```scss +// CORE +@import "abstracts/variables-sass"; + +@import "base/reset-base"; +@import "base/reset-accessibility"; +@import "base/reset-forms"; +@import "base/reset-print"; +@import "base/layout"; + +@import "abstracts/mixins-sass"; + +// UTILITY CLASSES +// @import "utils/utils-global"; +// @import "utils/utils-spacers"; +// @import "utils/grillade"; + +// COMPONENTS (add them only if you need) +// @import "components/button"; +// @import "components/burger"; +// @import "components/checkbox"; +// @import "components/radio"; +// @import "components/quote"; +``` diff --git a/changelog.md b/changelog.md index a0609cb..1c1c6cb 100755 --- a/changelog.md +++ b/changelog.md @@ -1,11 +1,5 @@ # Changelog -- 24 janvier 2022 (8.2.1) : corrections des radio / checkbox -- 19 janvier 2022 (8.2) : refonte des variables d'espacement -- 5 janvier 2022 (8.1) : refonte des variables de couleur -- 9 juillet 2021 (8.0.5) : suppression min-height: 0 par défaut -- 26 avril 2021 : taille de base 100% (et non plus 62.5%) et corrections Grillade -- 5 mars 2021 : les classes utilitaires font à présent partie du Core - 26 novembre 2020 : Documentation + V1.0.0 - 22 octobre 2020 : grosse remise à jour. V0.9.0 - 12 octobre 2020 : début de refonte classes utilitaires @@ -97,7 +91,7 @@ Né en 2012 et après près de 10 années de bons et loyaux services, le projet - regroupement des styles des tableaux - renommage des variables couleur de projets - renommage des variables de composants - - renommage des variables d'espacement (`$tiny-value` -> `$spacer-micro`) + - renommage des variables d'espacement (`$tiny-value` -> `$spacer-tiny`) - automatisation des classes utilitaires via Sass - suppression du namespace "kna-" - refonte : diff --git a/css/grillade/grillade.css b/css/grillade/grillade.css index 0c440b5..fa6d9da 100644 --- a/css/grillade/grillade.css +++ b/css/grillade/grillade.css @@ -1 +1 @@ -.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.gap-0{gap:0}.gap-x-0{column-gap:0}.gap-y-0{row-gap:0}.gap-5{gap:.313rem}.gap-x-5{column-gap:.313rem}.gap-y-5{row-gap:.313rem}.gap-10{gap:.625rem}.gap-x-10{column-gap:.625rem}.gap-y-10{row-gap:.625rem}.gap-16{gap:1rem}.gap-x-16{column-gap:1rem}.gap-y-16{row-gap:1rem}.gap-20{gap:1.25rem}.gap-x-20{column-gap:1.25rem}.gap-y-20{row-gap:1.25rem}.gap-36{gap:2.25rem}.gap-x-36{column-gap:2.25rem}.gap-y-36{row-gap:2.25rem}.col-start-1{grid-column-start:1}.col-end-1{grid-column-end:1}.col-span-1{grid-column:span 1/span 1}.row-start-1{grid-row-start:1}.row-end-1{grid-row-end:1}.row-span-1{grid-row:span 1/span 1}.col-start-2{grid-column-start:2}.col-end-2{grid-column-end:2}.col-span-2{grid-column:span 2/span 2}.row-start-2{grid-row-start:2}.row-end-2{grid-row-end:2}.row-span-2{grid-row:span 2/span 2}.col-start-3{grid-column-start:3}.col-end-3{grid-column-end:3}.col-span-3{grid-column:span 3/span 3}.row-start-3{grid-row-start:3}.row-end-3{grid-row-end:3}.row-span-3{grid-row:span 3/span 3}.col-start-4{grid-column-start:4}.col-end-4{grid-column-end:4}.col-span-4{grid-column:span 4/span 4}.row-start-4{grid-row-start:4}.row-end-4{grid-row-end:4}.row-span-4{grid-row:span 4/span 4}.col-start-5{grid-column-start:5}.col-end-5{grid-column-end:5}.col-span-5{grid-column:span 5/span 5}.row-start-5{grid-row-start:5}.row-end-5{grid-row-end:5}.row-span-5{grid-row:span 5/span 5}.col-start-6{grid-column-start:6}.col-end-6{grid-column-end:6}.col-span-6{grid-column:span 6/span 6}.col-span-full{grid-column:1/-1}.row-start-6{grid-row-start:6}.row-end-6{grid-row-end:6}.row-span-6{grid-row:span 6/span 6}@media (min-width:576px){.sm\:grid{display:grid}.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:gap-0{gap:0}.sm\:gap-x-0{column-gap:0}.sm\:gap-y-0{row-gap:0}.sm\:gap-5{gap:.313rem}.sm\:gap-x-5{column-gap:.313rem}.sm\:gap-y-5{row-gap:.313rem}.sm\:gap-10{gap:.625rem}.sm\:gap-x-10{column-gap:.625rem}.sm\:gap-y-10{row-gap:.625rem}.sm\:gap-16{gap:1rem}.sm\:gap-x-16{column-gap:1rem}.sm\:gap-y-16{row-gap:1rem}.sm\:gap-20{gap:1.25rem}.sm\:gap-x-20{column-gap:1.25rem}.sm\:gap-y-20{row-gap:1.25rem}.sm\:gap-36{gap:2.25rem}.sm\:gap-x-36{column-gap:2.25rem}.sm\:gap-y-36{row-gap:2.25rem}.sm\:col-start-1{grid-column-start:1}.sm\:col-end-1{grid-column-end:1}.sm\:col-span-1{grid-column:span 1/span 1}.sm\:row-start-1{grid-row-start:1}.sm\:row-end-1{grid-row-end:1}.sm\:row-span-1{grid-row:span 1/span 1}.sm\:col-start-2{grid-column-start:2}.sm\:col-end-2{grid-column-end:2}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:row-start-2{grid-row-start:2}.sm\:row-end-2{grid-row-end:2}.sm\:row-span-2{grid-row:span 2/span 2}.sm\:col-start-3{grid-column-start:3}.sm\:col-end-3{grid-column-end:3}.sm\:col-span-3{grid-column:span 3/span 3}.sm\:row-start-3{grid-row-start:3}.sm\:row-end-3{grid-row-end:3}.sm\:row-span-3{grid-row:span 3/span 3}.sm\:col-start-4{grid-column-start:4}.sm\:col-end-4{grid-column-end:4}.sm\:col-span-4{grid-column:span 4/span 4}.sm\:row-start-4{grid-row-start:4}.sm\:row-end-4{grid-row-end:4}.sm\:row-span-4{grid-row:span 4/span 4}.sm\:col-start-5{grid-column-start:5}.sm\:col-end-5{grid-column-end:5}.sm\:col-span-5{grid-column:span 5/span 5}.sm\:row-start-5{grid-row-start:5}.sm\:row-end-5{grid-row-end:5}.sm\:row-span-5{grid-row:span 5/span 5}.sm\:col-start-6{grid-column-start:6}.sm\:col-end-6{grid-column-end:6}.sm\:col-span-6{grid-column:span 6/span 6}.sm\:col-span-full{grid-column:1/-1}.sm\:row-start-6{grid-row-start:6}.sm\:row-end-6{grid-row-end:6}.sm\:row-span-6{grid-row:span 6/span 6}}@media (min-width:992px){.md\:grid{display:grid}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:gap-0{gap:0}.md\:gap-x-0{column-gap:0}.md\:gap-y-0{row-gap:0}.md\:gap-5{gap:.313rem}.md\:gap-x-5{column-gap:.313rem}.md\:gap-y-5{row-gap:.313rem}.md\:gap-10{gap:.625rem}.md\:gap-x-10{column-gap:.625rem}.md\:gap-y-10{row-gap:.625rem}.md\:gap-16{gap:1rem}.md\:gap-x-16{column-gap:1rem}.md\:gap-y-16{row-gap:1rem}.md\:gap-20{gap:1.25rem}.md\:gap-x-20{column-gap:1.25rem}.md\:gap-y-20{row-gap:1.25rem}.md\:gap-36{gap:2.25rem}.md\:gap-x-36{column-gap:2.25rem}.md\:gap-y-36{row-gap:2.25rem}.md\:col-start-1{grid-column-start:1}.md\:col-end-1{grid-column-end:1}.md\:col-span-1{grid-column:span 1/span 1}.md\:row-start-1{grid-row-start:1}.md\:row-end-1{grid-row-end:1}.md\:row-span-1{grid-row:span 1/span 1}.md\:col-start-2{grid-column-start:2}.md\:col-end-2{grid-column-end:2}.md\:col-span-2{grid-column:span 2/span 2}.md\:row-start-2{grid-row-start:2}.md\:row-end-2{grid-row-end:2}.md\:row-span-2{grid-row:span 2/span 2}.md\:col-start-3{grid-column-start:3}.md\:col-end-3{grid-column-end:3}.md\:col-span-3{grid-column:span 3/span 3}.md\:row-start-3{grid-row-start:3}.md\:row-end-3{grid-row-end:3}.md\:row-span-3{grid-row:span 3/span 3}.md\:col-start-4{grid-column-start:4}.md\:col-end-4{grid-column-end:4}.md\:col-span-4{grid-column:span 4/span 4}.md\:row-start-4{grid-row-start:4}.md\:row-end-4{grid-row-end:4}.md\:row-span-4{grid-row:span 4/span 4}.md\:col-start-5{grid-column-start:5}.md\:col-end-5{grid-column-end:5}.md\:col-span-5{grid-column:span 5/span 5}.md\:row-start-5{grid-row-start:5}.md\:row-end-5{grid-row-end:5}.md\:row-span-5{grid-row:span 5/span 5}.md\:col-start-6{grid-column-start:6}.md\:col-end-6{grid-column-end:6}.md\:col-span-6{grid-column:span 6/span 6}.md\:col-span-full{grid-column:1/-1}.md\:row-start-6{grid-row-start:6}.md\:row-end-6{grid-row-end:6}.md\:row-span-6{grid-row:span 6/span 6}}@media (min-width:1330px){.lg\:grid{display:grid}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:gap-0{gap:0}.lg\:gap-x-0{column-gap:0}.lg\:gap-y-0{row-gap:0}.lg\:gap-5{gap:.313rem}.lg\:gap-x-5{column-gap:.313rem}.lg\:gap-y-5{row-gap:.313rem}.lg\:gap-10{gap:.625rem}.lg\:gap-x-10{column-gap:.625rem}.lg\:gap-y-10{row-gap:.625rem}.lg\:gap-16{gap:1rem}.lg\:gap-x-16{column-gap:1rem}.lg\:gap-y-16{row-gap:1rem}.lg\:gap-20{gap:1.25rem}.lg\:gap-x-20{column-gap:1.25rem}.lg\:gap-y-20{row-gap:1.25rem}.lg\:gap-36{gap:2.25rem}.lg\:gap-x-36{column-gap:2.25rem}.lg\:gap-y-36{row-gap:2.25rem}.lg\:col-start-1{grid-column-start:1}.lg\:col-end-1{grid-column-end:1}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:row-start-1{grid-row-start:1}.lg\:row-end-1{grid-row-end:1}.lg\:row-span-1{grid-row:span 1/span 1}.lg\:col-start-2{grid-column-start:2}.lg\:col-end-2{grid-column-end:2}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:row-start-2{grid-row-start:2}.lg\:row-end-2{grid-row-end:2}.lg\:row-span-2{grid-row:span 2/span 2}.lg\:col-start-3{grid-column-start:3}.lg\:col-end-3{grid-column-end:3}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:row-start-3{grid-row-start:3}.lg\:row-end-3{grid-row-end:3}.lg\:row-span-3{grid-row:span 3/span 3}.lg\:col-start-4{grid-column-start:4}.lg\:col-end-4{grid-column-end:4}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:row-start-4{grid-row-start:4}.lg\:row-end-4{grid-row-end:4}.lg\:row-span-4{grid-row:span 4/span 4}.lg\:col-start-5{grid-column-start:5}.lg\:col-end-5{grid-column-end:5}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:row-start-5{grid-row-start:5}.lg\:row-end-5{grid-row-end:5}.lg\:row-span-5{grid-row:span 5/span 5}.lg\:col-start-6{grid-column-start:6}.lg\:col-end-6{grid-column-end:6}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-full{grid-column:1/-1}.lg\:row-start-6{grid-row-start:6}.lg\:row-end-6{grid-row-end:6}.lg\:row-span-6{grid-row:span 6/span 6}} \ No newline at end of file +.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.gap-0{gap:0}.gap-x-0{column-gap:0}.gap-y-0{row-gap:0}.gap-1{gap:.5rem}.gap-x-1{column-gap:.5rem}.gap-y-1{row-gap:.5rem}.gap-2{gap:.75rem}.gap-x-2{column-gap:.75rem}.gap-y-2{row-gap:.75rem}.gap-3{gap:1rem}.gap-x-3{column-gap:1rem}.gap-y-3{row-gap:1rem}.gap-4{gap:1.5rem}.gap-x-4{column-gap:1.5rem}.gap-y-4{row-gap:1.5rem}.gap-5{gap:2rem}.gap-x-5{column-gap:2rem}.gap-y-5{row-gap:2rem}.gap-6{gap:3rem}.gap-x-6{column-gap:3rem}.gap-y-6{row-gap:3rem}.gap-7{gap:5rem}.gap-x-7{column-gap:5rem}.gap-y-7{row-gap:5rem}.gap-auto{gap:auto}.gap-x-auto{column-gap:auto}.gap-y-auto{row-gap:auto}.col-start-1{grid-column-start:1}.col-end-1{grid-column-end:1}.col-span-1{grid-column:span 1/span 1}.row-start-1{grid-row-start:1}.row-end-1{grid-row-end:1}.row-span-1{grid-row:span 1/span 1}.col-start-2{grid-column-start:2}.col-end-2{grid-column-end:2}.col-span-2{grid-column:span 2/span 2}.row-start-2{grid-row-start:2}.row-end-2{grid-row-end:2}.row-span-2{grid-row:span 2/span 2}.col-start-3{grid-column-start:3}.col-end-3{grid-column-end:3}.col-span-3{grid-column:span 3/span 3}.row-start-3{grid-row-start:3}.row-end-3{grid-row-end:3}.row-span-3{grid-row:span 3/span 3}.col-start-4{grid-column-start:4}.col-end-4{grid-column-end:4}.col-span-4{grid-column:span 4/span 4}.row-start-4{grid-row-start:4}.row-end-4{grid-row-end:4}.row-span-4{grid-row:span 4/span 4}.col-start-5{grid-column-start:5}.col-end-5{grid-column-end:5}.col-span-5{grid-column:span 5/span 5}.row-start-5{grid-row-start:5}.row-end-5{grid-row-end:5}.row-span-5{grid-row:span 5/span 5}.col-start-6{grid-column-start:6}.col-end-6{grid-column-end:6}.col-span-6{grid-column:span 6/span 6}.col-span-full{grid-column:1/-1}.row-start-6{grid-row-start:6}.row-end-6{grid-row-end:6}.row-span-6{grid-row:span 6/span 6}@media (min-width:576px){.sm\:grid{display:grid}.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:gap-0{gap:0}.sm\:gap-x-0{column-gap:0}.sm\:gap-y-0{row-gap:0}.sm\:gap-1{gap:.5rem}.sm\:gap-x-1{column-gap:.5rem}.sm\:gap-y-1{row-gap:.5rem}.sm\:gap-2{gap:.75rem}.sm\:gap-x-2{column-gap:.75rem}.sm\:gap-y-2{row-gap:.75rem}.sm\:gap-3{gap:1rem}.sm\:gap-x-3{column-gap:1rem}.sm\:gap-y-3{row-gap:1rem}.sm\:gap-4{gap:1.5rem}.sm\:gap-x-4{column-gap:1.5rem}.sm\:gap-y-4{row-gap:1.5rem}.sm\:gap-5{gap:2rem}.sm\:gap-x-5{column-gap:2rem}.sm\:gap-y-5{row-gap:2rem}.sm\:gap-6{gap:3rem}.sm\:gap-x-6{column-gap:3rem}.sm\:gap-y-6{row-gap:3rem}.sm\:gap-7{gap:5rem}.sm\:gap-x-7{column-gap:5rem}.sm\:gap-y-7{row-gap:5rem}.sm\:gap-auto{gap:auto}.sm\:gap-x-auto{column-gap:auto}.sm\:gap-y-auto{row-gap:auto}.sm\:col-start-1{grid-column-start:1}.sm\:col-end-1{grid-column-end:1}.sm\:col-span-1{grid-column:span 1/span 1}.sm\:row-start-1{grid-row-start:1}.sm\:row-end-1{grid-row-end:1}.sm\:row-span-1{grid-row:span 1/span 1}.sm\:col-start-2{grid-column-start:2}.sm\:col-end-2{grid-column-end:2}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:row-start-2{grid-row-start:2}.sm\:row-end-2{grid-row-end:2}.sm\:row-span-2{grid-row:span 2/span 2}.sm\:col-start-3{grid-column-start:3}.sm\:col-end-3{grid-column-end:3}.sm\:col-span-3{grid-column:span 3/span 3}.sm\:row-start-3{grid-row-start:3}.sm\:row-end-3{grid-row-end:3}.sm\:row-span-3{grid-row:span 3/span 3}.sm\:col-start-4{grid-column-start:4}.sm\:col-end-4{grid-column-end:4}.sm\:col-span-4{grid-column:span 4/span 4}.sm\:row-start-4{grid-row-start:4}.sm\:row-end-4{grid-row-end:4}.sm\:row-span-4{grid-row:span 4/span 4}.sm\:col-start-5{grid-column-start:5}.sm\:col-end-5{grid-column-end:5}.sm\:col-span-5{grid-column:span 5/span 5}.sm\:row-start-5{grid-row-start:5}.sm\:row-end-5{grid-row-end:5}.sm\:row-span-5{grid-row:span 5/span 5}.sm\:col-start-6{grid-column-start:6}.sm\:col-end-6{grid-column-end:6}.sm\:col-span-6{grid-column:span 6/span 6}.sm\:col-span-full{grid-column:1/-1}.sm\:row-start-6{grid-row-start:6}.sm\:row-end-6{grid-row-end:6}.sm\:row-span-6{grid-row:span 6/span 6}}@media (min-width:768px){.md\:grid{display:grid}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:gap-0{gap:0}.md\:gap-x-0{column-gap:0}.md\:gap-y-0{row-gap:0}.md\:gap-1{gap:.5rem}.md\:gap-x-1{column-gap:.5rem}.md\:gap-y-1{row-gap:.5rem}.md\:gap-2{gap:.75rem}.md\:gap-x-2{column-gap:.75rem}.md\:gap-y-2{row-gap:.75rem}.md\:gap-3{gap:1rem}.md\:gap-x-3{column-gap:1rem}.md\:gap-y-3{row-gap:1rem}.md\:gap-4{gap:1.5rem}.md\:gap-x-4{column-gap:1.5rem}.md\:gap-y-4{row-gap:1.5rem}.md\:gap-5{gap:2rem}.md\:gap-x-5{column-gap:2rem}.md\:gap-y-5{row-gap:2rem}.md\:gap-6{gap:3rem}.md\:gap-x-6{column-gap:3rem}.md\:gap-y-6{row-gap:3rem}.md\:gap-7{gap:5rem}.md\:gap-x-7{column-gap:5rem}.md\:gap-y-7{row-gap:5rem}.md\:gap-auto{gap:auto}.md\:gap-x-auto{column-gap:auto}.md\:gap-y-auto{row-gap:auto}.md\:col-start-1{grid-column-start:1}.md\:col-end-1{grid-column-end:1}.md\:col-span-1{grid-column:span 1/span 1}.md\:row-start-1{grid-row-start:1}.md\:row-end-1{grid-row-end:1}.md\:row-span-1{grid-row:span 1/span 1}.md\:col-start-2{grid-column-start:2}.md\:col-end-2{grid-column-end:2}.md\:col-span-2{grid-column:span 2/span 2}.md\:row-start-2{grid-row-start:2}.md\:row-end-2{grid-row-end:2}.md\:row-span-2{grid-row:span 2/span 2}.md\:col-start-3{grid-column-start:3}.md\:col-end-3{grid-column-end:3}.md\:col-span-3{grid-column:span 3/span 3}.md\:row-start-3{grid-row-start:3}.md\:row-end-3{grid-row-end:3}.md\:row-span-3{grid-row:span 3/span 3}.md\:col-start-4{grid-column-start:4}.md\:col-end-4{grid-column-end:4}.md\:col-span-4{grid-column:span 4/span 4}.md\:row-start-4{grid-row-start:4}.md\:row-end-4{grid-row-end:4}.md\:row-span-4{grid-row:span 4/span 4}.md\:col-start-5{grid-column-start:5}.md\:col-end-5{grid-column-end:5}.md\:col-span-5{grid-column:span 5/span 5}.md\:row-start-5{grid-row-start:5}.md\:row-end-5{grid-row-end:5}.md\:row-span-5{grid-row:span 5/span 5}.md\:col-start-6{grid-column-start:6}.md\:col-end-6{grid-column-end:6}.md\:col-span-6{grid-column:span 6/span 6}.md\:col-span-full{grid-column:1/-1}.md\:row-start-6{grid-row-start:6}.md\:row-end-6{grid-row-end:6}.md\:row-span-6{grid-row:span 6/span 6}}@media (min-width:1024px){.lg\:grid{display:grid}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:gap-0{gap:0}.lg\:gap-x-0{column-gap:0}.lg\:gap-y-0{row-gap:0}.lg\:gap-1{gap:.5rem}.lg\:gap-x-1{column-gap:.5rem}.lg\:gap-y-1{row-gap:.5rem}.lg\:gap-2{gap:.75rem}.lg\:gap-x-2{column-gap:.75rem}.lg\:gap-y-2{row-gap:.75rem}.lg\:gap-3{gap:1rem}.lg\:gap-x-3{column-gap:1rem}.lg\:gap-y-3{row-gap:1rem}.lg\:gap-4{gap:1.5rem}.lg\:gap-x-4{column-gap:1.5rem}.lg\:gap-y-4{row-gap:1.5rem}.lg\:gap-5{gap:2rem}.lg\:gap-x-5{column-gap:2rem}.lg\:gap-y-5{row-gap:2rem}.lg\:gap-6{gap:3rem}.lg\:gap-x-6{column-gap:3rem}.lg\:gap-y-6{row-gap:3rem}.lg\:gap-7{gap:5rem}.lg\:gap-x-7{column-gap:5rem}.lg\:gap-y-7{row-gap:5rem}.lg\:gap-auto{gap:auto}.lg\:gap-x-auto{column-gap:auto}.lg\:gap-y-auto{row-gap:auto}.lg\:col-start-1{grid-column-start:1}.lg\:col-end-1{grid-column-end:1}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:row-start-1{grid-row-start:1}.lg\:row-end-1{grid-row-end:1}.lg\:row-span-1{grid-row:span 1/span 1}.lg\:col-start-2{grid-column-start:2}.lg\:col-end-2{grid-column-end:2}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:row-start-2{grid-row-start:2}.lg\:row-end-2{grid-row-end:2}.lg\:row-span-2{grid-row:span 2/span 2}.lg\:col-start-3{grid-column-start:3}.lg\:col-end-3{grid-column-end:3}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:row-start-3{grid-row-start:3}.lg\:row-end-3{grid-row-end:3}.lg\:row-span-3{grid-row:span 3/span 3}.lg\:col-start-4{grid-column-start:4}.lg\:col-end-4{grid-column-end:4}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:row-start-4{grid-row-start:4}.lg\:row-end-4{grid-row-end:4}.lg\:row-span-4{grid-row:span 4/span 4}.lg\:col-start-5{grid-column-start:5}.lg\:col-end-5{grid-column-end:5}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:row-start-5{grid-row-start:5}.lg\:row-end-5{grid-row-end:5}.lg\:row-span-5{grid-row:span 5/span 5}.lg\:col-start-6{grid-column-start:6}.lg\:col-end-6{grid-column-end:6}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-full{grid-column:1/-1}.lg\:row-start-6{grid-row-start:6}.lg\:row-end-6{grid-row-end:6}.lg\:row-span-6{grid-row:span 6/span 6}}@media (min-width:1330px){.xl\:grid{display:grid}.xl\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:gap-0{gap:0}.xl\:gap-x-0{column-gap:0}.xl\:gap-y-0{row-gap:0}.xl\:gap-1{gap:.5rem}.xl\:gap-x-1{column-gap:.5rem}.xl\:gap-y-1{row-gap:.5rem}.xl\:gap-2{gap:.75rem}.xl\:gap-x-2{column-gap:.75rem}.xl\:gap-y-2{row-gap:.75rem}.xl\:gap-3{gap:1rem}.xl\:gap-x-3{column-gap:1rem}.xl\:gap-y-3{row-gap:1rem}.xl\:gap-4{gap:1.5rem}.xl\:gap-x-4{column-gap:1.5rem}.xl\:gap-y-4{row-gap:1.5rem}.xl\:gap-5{gap:2rem}.xl\:gap-x-5{column-gap:2rem}.xl\:gap-y-5{row-gap:2rem}.xl\:gap-6{gap:3rem}.xl\:gap-x-6{column-gap:3rem}.xl\:gap-y-6{row-gap:3rem}.xl\:gap-7{gap:5rem}.xl\:gap-x-7{column-gap:5rem}.xl\:gap-y-7{row-gap:5rem}.xl\:gap-auto{gap:auto}.xl\:gap-x-auto{column-gap:auto}.xl\:gap-y-auto{row-gap:auto}.xl\:col-start-1{grid-column-start:1}.xl\:col-end-1{grid-column-end:1}.xl\:col-span-1{grid-column:span 1/span 1}.xl\:row-start-1{grid-row-start:1}.xl\:row-end-1{grid-row-end:1}.xl\:row-span-1{grid-row:span 1/span 1}.xl\:col-start-2{grid-column-start:2}.xl\:col-end-2{grid-column-end:2}.xl\:col-span-2{grid-column:span 2/span 2}.xl\:row-start-2{grid-row-start:2}.xl\:row-end-2{grid-row-end:2}.xl\:row-span-2{grid-row:span 2/span 2}.xl\:col-start-3{grid-column-start:3}.xl\:col-end-3{grid-column-end:3}.xl\:col-span-3{grid-column:span 3/span 3}.xl\:row-start-3{grid-row-start:3}.xl\:row-end-3{grid-row-end:3}.xl\:row-span-3{grid-row:span 3/span 3}.xl\:col-start-4{grid-column-start:4}.xl\:col-end-4{grid-column-end:4}.xl\:col-span-4{grid-column:span 4/span 4}.xl\:row-start-4{grid-row-start:4}.xl\:row-end-4{grid-row-end:4}.xl\:row-span-4{grid-row:span 4/span 4}.xl\:col-start-5{grid-column-start:5}.xl\:col-end-5{grid-column-end:5}.xl\:col-span-5{grid-column:span 5/span 5}.xl\:row-start-5{grid-row-start:5}.xl\:row-end-5{grid-row-end:5}.xl\:row-span-5{grid-row:span 5/span 5}.xl\:col-start-6{grid-column-start:6}.xl\:col-end-6{grid-column-end:6}.xl\:col-span-6{grid-column:span 6/span 6}.xl\:col-span-full{grid-column:1/-1}.xl\:row-start-6{grid-row-start:6}.xl\:row-end-6{grid-row-end:6}.xl\:row-span-6{grid-row:span 6/span 6}} \ No newline at end of file diff --git a/css/knacss-full/knacss.css b/css/knacss-full/knacss.css index be9f52d..7e9ae9b 100644 --- a/css/knacss-full/knacss.css +++ b/css/knacss-full/knacss.css @@ -1,8 +1,7 @@ -@charset "UTF-8"; /*! * KNACSS Reborn: Just keep it simple! * @author: Alsacreations -* v8.2 2022/01 +* v1.0.0 2020/11 * Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ @@ -10,7 +9,7 @@ /* ----------------------------- */ /* * 1. Switch to border-box model for all elements - * 2. Avoid min-width: auto on flex and grid items + * 2. Avoid min-width: auto and min-height: auto on flex and grid children */ *, *::before, @@ -19,6 +18,8 @@ /* 1 */ min-width: 0; /* 2 */ + min-height: 0; + /* 2 */ } /* @@ -27,7 +28,7 @@ * 3. Breaks words to prevent overflow in all browsers */ html { - font-size: 100%; + font-size: 62.5%; -webkit-tap-highlight-color: transparent; /* 1 */ -webkit-text-size-adjust: 100%; @@ -38,10 +39,10 @@ html { body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 1.6rem; line-height: 1.5; - background-color: #FFFFFF; + background-color: #ffffff; color: #212529; } @@ -67,7 +68,7 @@ h6, * Links */ a { - color: #6c757d; + color: #454d5d; text-decoration: underline; } @@ -100,7 +101,7 @@ h1, h2, .h2-like { margin-top: 0; - margin-bottom: 1rem; + margin-bottom: 2rem; } p, @@ -121,7 +122,7 @@ h6, dt, dd { margin-top: 0; - margin-bottom: 0.75rem; + margin-bottom: 1rem; } /* @@ -146,7 +147,7 @@ li .p-like { */ ul, ol { - padding-left: 1rem; + padding-left: 2rem; } nav ul, @@ -231,7 +232,7 @@ hr { overflow: visible; border: 0; border-top: 1px solid; - margin: 1rem 0; + margin: 2rem 0; clear: both; color: inherit; } @@ -245,14 +246,13 @@ table { table-layout: fixed; border-collapse: collapse; vertical-align: top; - margin-bottom: 1rem; + margin-bottom: 2rem; } /* * Hidden but not for an assistive technology like a screen reader, Yahoo! method */ -.visually-hidden, -.sr-only { +.visually-hidden { position: absolute !important; border: 0 !important; height: 1px !important; @@ -416,13 +416,13 @@ fieldset { fieldset { margin: 0; - padding: 1rem; + padding: 2rem; } legend { display: table; max-width: 100%; - padding: 0 0.25rem; + padding: 0 0.5rem; border: 0; color: inherit; white-space: normal; @@ -623,19 +623,25 @@ template { @media (min-width: 576px) { .layout-maxed { - grid-template-columns: minmax(0.75rem, 1fr) minmax(auto, 576px) minmax(0.75rem, 1fr); + grid-template-columns: minmax(1rem, 1fr) minmax(auto, 576px) minmax(1rem, 1fr); } } -@media (min-width: 992px) { +@media (min-width: 768px) { .layout-maxed { - grid-template-columns: minmax(0.75rem, 1fr) minmax(auto, 992px) minmax(0.75rem, 1fr); + grid-template-columns: minmax(1rem, 1fr) minmax(auto, 768px) minmax(1rem, 1fr); } } -@media (min-width: 1400px) { +@media (min-width: 1024px) { .layout-maxed { - grid-template-columns: minmax(0.75rem, 1fr) minmax(auto, 1400px) minmax(0.75rem, 1fr); + grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1024px) minmax(1rem, 1fr); + } +} + +@media (min-width: 1330px) { + .layout-maxed { + grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1330px) minmax(1rem, 1fr); } } @@ -661,4903 +667,3 @@ template { justify-self: center; max-width: 100%; } - -/* - * Global utility classes - */ -.hidden { - display: none; -} - -.block { - display: block; -} - -.inline { - display: inline; -} - -.inline-block { - display: inline-block; -} - -.flex { - display: flex; -} - -.flex-row { - flex-direction: row; -} - -.flex-col { - flex-direction: column; -} - -.flex-wrap { - flex-wrap: wrap; -} - -.flex-no-wrap { - flex-wrap: nowrap; -} - -.flex-shrink { - flex-shrink: 1; -} - -.flex-no-shrink { - flex-shrink: 0; -} - -.flex-grow { - flex-grow: 1; -} - -.flex-no-grow { - flex-grow: 0; -} - -.float-left { - float: left; -} - -.float-right { - float: right; -} - -.float-none { - float: none; -} - -.text-bold { - font-weight: bold; -} - -.text-italic { - font-style: italic; -} - -.text-uppercase { - text-transform: uppercase; -} - -.text-lowercase { - text-transform: lowercase; -} - -.text-smaller { - font-size: smaller; -} - -.text-larger { - font-size: larger; -} - -.text-left { - text-align: left; -} - -.text-center { - text-align: center; -} - -.text-right { - text-align: right; -} - -.text-justify { - text-align: justify; -} - -.text-wrap { - overflow-wrap: break-word; -} - -.justify-start { - justify-content: flex-start; -} - -.justify-end { - justify-content: flex-end; -} - -.justify-center { - justify-content: center; -} - -.justify-between { - justify-content: space-between; -} - -.justify-around { - justify-content: space-around; -} - -.justify-evenly { - justify-content: space-evenly; -} - -.justify-items-start { - justify-items: start; -} - -.justify-items-end { - justify-items: end; -} - -.justify-items-center { - justify-items: center; -} - -.align-start { - align-content: start; -} - -.align-end { - align-content: end; -} - -.align-center { - align-content: center; -} - -.align-between { - align-content: space-between; -} - -.align-around { - align-content: space-around; -} - -.align-evenly { - align-content: space-evenly; -} - -.align-items-start { - align-items: flex-start; -} - -.align-items-end { - align-items: flex-end; -} - -.align-items-center { - align-items: center; -} - -.place-center { - place-content: center; -} - -.justify-self-auto { - justify-self: auto; -} - -.justify-self-start { - justify-self: start; -} - -.justify-self-end { - justify-self: end; -} - -.justify-self-center { - justify-self: center; -} - -.justify-self-stretch { - justify-self: stretch; -} - -.align-self-auto { - align-self: auto; -} - -.align-self-start { - align-self: flex-start; -} - -.align-self-end { - align-self: flex-end; -} - -.align-self-center { - align-self: center; -} - -.align-self-stretch { - align-self: stretch; -} - -.align-top { - vertical-align: top; -} - -.align-bottom { - vertical-align: bottom; -} - -.align-middle { - vertical-align: middle; -} - -.item-first { - order: -100; -} - -.item-last { - order: 100; -} - -@media (min-width: 576px) { - .sm\:hidden { - display: none; - } -} - -@media (min-width: 992px) { - .md\:hidden { - display: none; - } -} - -@media (min-width: 1400px) { - .lg\:hidden { - display: none; - } -} - -@media (min-width: 576px) { - .sm\:block { - display: block; - } -} - -@media (min-width: 992px) { - .md\:block { - display: block; - } -} - -@media (min-width: 1400px) { - .lg\:block { - display: block; - } -} - -@media (min-width: 576px) { - .sm\:inline { - display: inline; - } -} - -@media (min-width: 992px) { - .md\:inline { - display: inline; - } -} - -@media (min-width: 1400px) { - .lg\:inline { - display: inline; - } -} - -@media (min-width: 576px) { - .sm\:inline-block { - display: inline-block; - } -} - -@media (min-width: 992px) { - .md\:inline-block { - display: inline-block; - } -} - -@media (min-width: 1400px) { - .lg\:inline-block { - display: inline-block; - } -} - -@media (min-width: 576px) { - .sm\:flex { - display: flex; - } -} - -@media (min-width: 992px) { - .md\:flex { - display: flex; - } -} - -@media (min-width: 1400px) { - .lg\:flex { - display: flex; - } -} - -@media (min-width: 576px) { - .sm\:flex-row { - flex-direction: row; - } -} - -@media (min-width: 992px) { - .md\:flex-row { - flex-direction: row; - } -} - -@media (min-width: 1400px) { - .lg\:flex-row { - flex-direction: row; - } -} - -@media (min-width: 576px) { - .sm\:flex-col { - flex-direction: column; - } -} - -@media (min-width: 992px) { - .md\:flex-col { - flex-direction: column; - } -} - -@media (min-width: 1400px) { - .lg\:flex-col { - flex-direction: column; - } -} - -@media (min-width: 576px) { - .sm\:flex-wrap { - flex-wrap: wrap; - } -} - -@media (min-width: 992px) { - .md\:flex-wrap { - flex-wrap: wrap; - } -} - -@media (min-width: 1400px) { - .lg\:flex-wrap { - flex-wrap: wrap; - } -} - -@media (min-width: 576px) { - .sm\:flex-no-wrap { - flex-wrap: nowrap; - } -} - -@media (min-width: 992px) { - .md\:flex-no-wrap { - flex-wrap: nowrap; - } -} - -@media (min-width: 1400px) { - .lg\:flex-no-wrap { - flex-wrap: nowrap; - } -} - -@media (min-width: 576px) { - .sm\:flex-shrink { - flex-shrink: 1; - } -} - -@media (min-width: 992px) { - .md\:flex-shrink { - flex-shrink: 1; - } -} - -@media (min-width: 1400px) { - .lg\:flex-shrink { - flex-shrink: 1; - } -} - -@media (min-width: 576px) { - .sm\:flex-no-shrink { - flex-shrink: 0; - } -} - -@media (min-width: 992px) { - .md\:flex-no-shrink { - flex-shrink: 0; - } -} - -@media (min-width: 1400px) { - .lg\:flex-no-shrink { - flex-shrink: 0; - } -} - -@media (min-width: 576px) { - .sm\:flex-grow { - flex-grow: 1; - } -} - -@media (min-width: 992px) { - .md\:flex-grow { - flex-grow: 1; - } -} - -@media (min-width: 1400px) { - .lg\:flex-grow { - flex-grow: 1; - } -} - -@media (min-width: 576px) { - .sm\:flex-no-grow { - flex-grow: 0; - } -} - -@media (min-width: 992px) { - .md\:flex-no-grow { - flex-grow: 0; - } -} - -@media (min-width: 1400px) { - .lg\:flex-no-grow { - flex-grow: 0; - } -} - -@media (min-width: 576px) { - .sm\:float-left { - float: left; - } -} - -@media (min-width: 992px) { - .md\:float-left { - float: left; - } -} - -@media (min-width: 1400px) { - .lg\:float-left { - float: left; - } -} - -@media (min-width: 576px) { - .sm\:float-right { - float: right; - } -} - -@media (min-width: 992px) { - .md\:float-right { - float: right; - } -} - -@media (min-width: 1400px) { - .lg\:float-right { - float: right; - } -} - -@media (min-width: 576px) { - .sm\:float-none { - float: none; - } -} - -@media (min-width: 992px) { - .md\:float-none { - float: none; - } -} - -@media (min-width: 1400px) { - .lg\:float-none { - float: none; - } -} - -@media (min-width: 576px) { - .sm\:text-bold { - font-weight: bold; - } -} - -@media (min-width: 992px) { - .md\:text-bold { - font-weight: bold; - } -} - -@media (min-width: 1400px) { - .lg\:text-bold { - font-weight: bold; - } -} - -@media (min-width: 576px) { - .sm\:text-italic { - font-style: italic; - } -} - -@media (min-width: 992px) { - .md\:text-italic { - font-style: italic; - } -} - -@media (min-width: 1400px) { - .lg\:text-italic { - font-style: italic; - } -} - -@media (min-width: 576px) { - .sm\:text-uppercase { - text-transform: uppercase; - } -} - -@media (min-width: 992px) { - .md\:text-uppercase { - text-transform: uppercase; - } -} - -@media (min-width: 1400px) { - .lg\:text-uppercase { - text-transform: uppercase; - } -} - -@media (min-width: 576px) { - .sm\:text-lowercase { - text-transform: lowercase; - } -} - -@media (min-width: 992px) { - .md\:text-lowercase { - text-transform: lowercase; - } -} - -@media (min-width: 1400px) { - .lg\:text-lowercase { - text-transform: lowercase; - } -} - -@media (min-width: 576px) { - .sm\:text-smaller { - font-size: smaller; - } -} - -@media (min-width: 992px) { - .md\:text-smaller { - font-size: smaller; - } -} - -@media (min-width: 1400px) { - .lg\:text-smaller { - font-size: smaller; - } -} - -@media (min-width: 576px) { - .sm\:text-larger { - font-size: larger; - } -} - -@media (min-width: 992px) { - .md\:text-larger { - font-size: larger; - } -} - -@media (min-width: 1400px) { - .lg\:text-larger { - font-size: larger; - } -} - -@media (min-width: 576px) { - .sm\:text-left { - text-align: left; - } -} - -@media (min-width: 992px) { - .md\:text-left { - text-align: left; - } -} - -@media (min-width: 1400px) { - .lg\:text-left { - text-align: left; - } -} - -@media (min-width: 576px) { - .sm\:text-center { - text-align: center; - } -} - -@media (min-width: 992px) { - .md\:text-center { - text-align: center; - } -} - -@media (min-width: 1400px) { - .lg\:text-center { - text-align: center; - } -} - -@media (min-width: 576px) { - .sm\:text-right { - text-align: right; - } -} - -@media (min-width: 992px) { - .md\:text-right { - text-align: right; - } -} - -@media (min-width: 1400px) { - .lg\:text-right { - text-align: right; - } -} - -@media (min-width: 576px) { - .sm\:text-justify { - text-align: justify; - } -} - -@media (min-width: 992px) { - .md\:text-justify { - text-align: justify; - } -} - -@media (min-width: 1400px) { - .lg\:text-justify { - text-align: justify; - } -} - -@media (min-width: 576px) { - .sm\:text-wrap { - overflow-wrap: break-word; - } -} - -@media (min-width: 992px) { - .md\:text-wrap { - overflow-wrap: break-word; - } -} - -@media (min-width: 1400px) { - .lg\:text-wrap { - overflow-wrap: break-word; - } -} - -@media (min-width: 576px) { - .sm\:justify-start { - justify-content: flex-start; - } -} - -@media (min-width: 992px) { - .md\:justify-start { - justify-content: flex-start; - } -} - -@media (min-width: 1400px) { - .lg\:justify-start { - justify-content: flex-start; - } -} - -@media (min-width: 576px) { - .sm\:justify-end { - justify-content: flex-end; - } -} - -@media (min-width: 992px) { - .md\:justify-end { - justify-content: flex-end; - } -} - -@media (min-width: 1400px) { - .lg\:justify-end { - justify-content: flex-end; - } -} - -@media (min-width: 576px) { - .sm\:justify-center { - justify-content: center; - } -} - -@media (min-width: 992px) { - .md\:justify-center { - justify-content: center; - } -} - -@media (min-width: 1400px) { - .lg\:justify-center { - justify-content: center; - } -} - -@media (min-width: 576px) { - .sm\:justify-between { - justify-content: space-between; - } -} - -@media (min-width: 992px) { - .md\:justify-between { - justify-content: space-between; - } -} - -@media (min-width: 1400px) { - .lg\:justify-between { - justify-content: space-between; - } -} - -@media (min-width: 576px) { - .sm\:justify-around { - justify-content: space-around; - } -} - -@media (min-width: 992px) { - .md\:justify-around { - justify-content: space-around; - } -} - -@media (min-width: 1400px) { - .lg\:justify-around { - justify-content: space-around; - } -} - -@media (min-width: 576px) { - .sm\:justify-evenly { - justify-content: space-evenly; - } -} - -@media (min-width: 992px) { - .md\:justify-evenly { - justify-content: space-evenly; - } -} - -@media (min-width: 1400px) { - .lg\:justify-evenly { - justify-content: space-evenly; - } -} - -@media (min-width: 576px) { - .sm\:justify-items-start { - justify-items: start; - } -} - -@media (min-width: 992px) { - .md\:justify-items-start { - justify-items: start; - } -} - -@media (min-width: 1400px) { - .lg\:justify-items-start { - justify-items: start; - } -} - -@media (min-width: 576px) { - .sm\:justify-items-end { - justify-items: end; - } -} - -@media (min-width: 992px) { - .md\:justify-items-end { - justify-items: end; - } -} - -@media (min-width: 1400px) { - .lg\:justify-items-end { - justify-items: end; - } -} - -@media (min-width: 576px) { - .sm\:justify-items-center { - justify-items: center; - } -} - -@media (min-width: 992px) { - .md\:justify-items-center { - justify-items: center; - } -} - -@media (min-width: 1400px) { - .lg\:justify-items-center { - justify-items: center; - } -} - -@media (min-width: 576px) { - .sm\:align-start { - align-content: start; - } -} - -@media (min-width: 992px) { - .md\:align-start { - align-content: start; - } -} - -@media (min-width: 1400px) { - .lg\:align-start { - align-content: start; - } -} - -@media (min-width: 576px) { - .sm\:align-end { - align-content: end; - } -} - -@media (min-width: 992px) { - .md\:align-end { - align-content: end; - } -} - -@media (min-width: 1400px) { - .lg\:align-end { - align-content: end; - } -} - -@media (min-width: 576px) { - .sm\:align-center { - align-content: center; - } -} - -@media (min-width: 992px) { - .md\:align-center { - align-content: center; - } -} - -@media (min-width: 1400px) { - .lg\:align-center { - align-content: center; - } -} - -@media (min-width: 576px) { - .sm\:align-between { - align-content: space-between; - } -} - -@media (min-width: 992px) { - .md\:align-between { - align-content: space-between; - } -} - -@media (min-width: 1400px) { - .lg\:align-between { - align-content: space-between; - } -} - -@media (min-width: 576px) { - .sm\:align-around { - align-content: space-around; - } -} - -@media (min-width: 992px) { - .md\:align-around { - align-content: space-around; - } -} - -@media (min-width: 1400px) { - .lg\:align-around { - align-content: space-around; - } -} - -@media (min-width: 576px) { - .sm\:align-evenly { - align-content: space-evenly; - } -} - -@media (min-width: 992px) { - .md\:align-evenly { - align-content: space-evenly; - } -} - -@media (min-width: 1400px) { - .lg\:align-evenly { - align-content: space-evenly; - } -} - -@media (min-width: 576px) { - .sm\:align-items-start { - align-items: flex-start; - } -} - -@media (min-width: 992px) { - .md\:align-items-start { - align-items: flex-start; - } -} - -@media (min-width: 1400px) { - .lg\:align-items-start { - align-items: flex-start; - } -} - -@media (min-width: 576px) { - .sm\:align-items-end { - align-items: flex-end; - } -} - -@media (min-width: 992px) { - .md\:align-items-end { - align-items: flex-end; - } -} - -@media (min-width: 1400px) { - .lg\:align-items-end { - align-items: flex-end; - } -} - -@media (min-width: 576px) { - .sm\:align-items-center { - align-items: center; - } -} - -@media (min-width: 992px) { - .md\:align-items-center { - align-items: center; - } -} - -@media (min-width: 1400px) { - .lg\:align-items-center { - align-items: center; - } -} - -@media (min-width: 576px) { - .sm\:place-center { - place-content: center; - } -} - -@media (min-width: 992px) { - .md\:place-center { - place-content: center; - } -} - -@media (min-width: 1400px) { - .lg\:place-center { - place-content: center; - } -} - -@media (min-width: 576px) { - .sm\:justify-self-auto { - justify-self: auto; - } -} - -@media (min-width: 992px) { - .md\:justify-self-auto { - justify-self: auto; - } -} - -@media (min-width: 1400px) { - .lg\:justify-self-auto { - justify-self: auto; - } -} - -@media (min-width: 576px) { - .sm\:justify-self-start { - justify-self: start; - } -} - -@media (min-width: 992px) { - .md\:justify-self-start { - justify-self: start; - } -} - -@media (min-width: 1400px) { - .lg\:justify-self-start { - justify-self: start; - } -} - -@media (min-width: 576px) { - .sm\:justify-self-end { - justify-self: end; - } -} - -@media (min-width: 992px) { - .md\:justify-self-end { - justify-self: end; - } -} - -@media (min-width: 1400px) { - .lg\:justify-self-end { - justify-self: end; - } -} - -@media (min-width: 576px) { - .sm\:justify-self-center { - justify-self: center; - } -} - -@media (min-width: 992px) { - .md\:justify-self-center { - justify-self: center; - } -} - -@media (min-width: 1400px) { - .lg\:justify-self-center { - justify-self: center; - } -} - -@media (min-width: 576px) { - .sm\:justify-self-stretch { - justify-self: stretch; - } -} - -@media (min-width: 992px) { - .md\:justify-self-stretch { - justify-self: stretch; - } -} - -@media (min-width: 1400px) { - .lg\:justify-self-stretch { - justify-self: stretch; - } -} - -@media (min-width: 576px) { - .sm\:align-self-auto { - align-self: auto; - } -} - -@media (min-width: 992px) { - .md\:align-self-auto { - align-self: auto; - } -} - -@media (min-width: 1400px) { - .lg\:align-self-auto { - align-self: auto; - } -} - -@media (min-width: 576px) { - .sm\:align-self-start { - align-self: flex-start; - } -} - -@media (min-width: 992px) { - .md\:align-self-start { - align-self: flex-start; - } -} - -@media (min-width: 1400px) { - .lg\:align-self-start { - align-self: flex-start; - } -} - -@media (min-width: 576px) { - .sm\:align-self-end { - align-self: flex-end; - } -} - -@media (min-width: 992px) { - .md\:align-self-end { - align-self: flex-end; - } -} - -@media (min-width: 1400px) { - .lg\:align-self-end { - align-self: flex-end; - } -} - -@media (min-width: 576px) { - .sm\:align-self-center { - align-self: center; - } -} - -@media (min-width: 992px) { - .md\:align-self-center { - align-self: center; - } -} - -@media (min-width: 1400px) { - .lg\:align-self-center { - align-self: center; - } -} - -@media (min-width: 576px) { - .sm\:align-self-stretch { - align-self: stretch; - } -} - -@media (min-width: 992px) { - .md\:align-self-stretch { - align-self: stretch; - } -} - -@media (min-width: 1400px) { - .lg\:align-self-stretch { - align-self: stretch; - } -} - -@media (min-width: 576px) { - .sm\:align-top { - vertical-align: top; - } -} - -@media (min-width: 992px) { - .md\:align-top { - vertical-align: top; - } -} - -@media (min-width: 1400px) { - .lg\:align-top { - vertical-align: top; - } -} - -@media (min-width: 576px) { - .sm\:align-bottom { - vertical-align: bottom; - } -} - -@media (min-width: 992px) { - .md\:align-bottom { - vertical-align: bottom; - } -} - -@media (min-width: 1400px) { - .lg\:align-bottom { - vertical-align: bottom; - } -} - -@media (min-width: 576px) { - .sm\:align-middle { - vertical-align: middle; - } -} - -@media (min-width: 992px) { - .md\:align-middle { - vertical-align: middle; - } -} - -@media (min-width: 1400px) { - .lg\:align-middle { - vertical-align: middle; - } -} - -@media (min-width: 576px) { - .sm\:item-first { - order: -100; - } -} - -@media (min-width: 992px) { - .md\:item-first { - order: -100; - } -} - -@media (min-width: 1400px) { - .lg\:item-first { - order: -100; - } -} - -@media (min-width: 576px) { - .sm\:item-last { - order: 100; - } -} - -@media (min-width: 992px) { - .md\:item-last { - order: 100; - } -} - -@media (min-width: 1400px) { - .lg\:item-last { - order: 100; - } -} - -.is-unstyled { - list-style: none; - padding-left: 0; -} - -.is-disabled, -[disabled] { - opacity: 0.6; - cursor: not-allowed !important; - filter: grayscale(1); -} - -.text-normal { - font-weight: normal; - font-style: normal; - text-transform: none; -} - -@media (min-width: 576px) { - .sm\:visually-hidden { - position: absolute !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - padding: 0 !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - } - .sm\:is-unstyled { - list-style: none; - padding-left: 0; - } - .sm\:is-disabled { - opacity: 0.6; - cursor: not-allowed !important; - filter: grayscale(1); - } - .sm\:text-normal { - font-weight: normal; - font-style: normal; - text-transform: none; - } -} - -@media (min-width: 992px) { - .md\:visually-hidden { - position: absolute !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - padding: 0 !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - } - .md\:is-unstyled { - list-style: none; - padding-left: 0; - } - .md\:is-disabled { - opacity: 0.6; - cursor: not-allowed !important; - filter: grayscale(1); - } - .md\:text-normal { - font-weight: normal; - font-style: normal; - text-transform: none; - } -} - -@media (min-width: 1400px) { - .lg\:visually-hidden { - position: absolute !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - padding: 0 !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - } - .lg\:is-unstyled { - list-style: none; - padding-left: 0; - } - .lg\:is-disabled { - opacity: 0.6; - cursor: not-allowed !important; - filter: grayscale(1); - } - .lg\:text-normal { - font-weight: normal; - font-style: normal; - text-transform: none; - } -} - -/* Font sizes utility classes */ -.text-10 { - font-size: 0.625rem; -} - -.text-11 { - font-size: 0.6875rem; -} - -.text-12 { - font-size: 0.75rem; -} - -.text-14 { - font-size: 0.875rem; -} - -.text-16 { - font-size: 1rem; -} - -.text-18 { - font-size: 1.125rem; -} - -.text-20 { - font-size: 1.25rem; -} - -.text-24 { - font-size: 1.5rem; -} - -.text-30 { - font-size: 1.875rem; -} - -.text-36 { - font-size: 2.25rem; -} - -.text-base { - font-size: 1rem; -} - -.text-inherit { - font-size: inherit; -} - -@media (min-width: 576px) { - .sm\:text-10 { - font-size: 0.625rem; - } -} - -@media (min-width: 992px) { - .md\:text-10 { - font-size: 0.625rem; - } -} - -@media (min-width: 1400px) { - .lg\:text-10 { - font-size: 0.625rem; - } -} - -@media (min-width: 576px) { - .sm\:text-11 { - font-size: 0.6875rem; - } -} - -@media (min-width: 992px) { - .md\:text-11 { - font-size: 0.6875rem; - } -} - -@media (min-width: 1400px) { - .lg\:text-11 { - font-size: 0.6875rem; - } -} - -@media (min-width: 576px) { - .sm\:text-12 { - font-size: 0.75rem; - } -} - -@media (min-width: 992px) { - .md\:text-12 { - font-size: 0.75rem; - } -} - -@media (min-width: 1400px) { - .lg\:text-12 { - font-size: 0.75rem; - } -} - -@media (min-width: 576px) { - .sm\:text-14 { - font-size: 0.875rem; - } -} - -@media (min-width: 992px) { - .md\:text-14 { - font-size: 0.875rem; - } -} - -@media (min-width: 1400px) { - .lg\:text-14 { - font-size: 0.875rem; - } -} - -@media (min-width: 576px) { - .sm\:text-16 { - font-size: 1rem; - } -} - -@media (min-width: 992px) { - .md\:text-16 { - font-size: 1rem; - } -} - -@media (min-width: 1400px) { - .lg\:text-16 { - font-size: 1rem; - } -} - -@media (min-width: 576px) { - .sm\:text-18 { - font-size: 1.125rem; - } -} - -@media (min-width: 992px) { - .md\:text-18 { - font-size: 1.125rem; - } -} - -@media (min-width: 1400px) { - .lg\:text-18 { - font-size: 1.125rem; - } -} - -@media (min-width: 576px) { - .sm\:text-20 { - font-size: 1.25rem; - } -} - -@media (min-width: 992px) { - .md\:text-20 { - font-size: 1.25rem; - } -} - -@media (min-width: 1400px) { - .lg\:text-20 { - font-size: 1.25rem; - } -} - -@media (min-width: 576px) { - .sm\:text-24 { - font-size: 1.5rem; - } -} - -@media (min-width: 992px) { - .md\:text-24 { - font-size: 1.5rem; - } -} - -@media (min-width: 1400px) { - .lg\:text-24 { - font-size: 1.5rem; - } -} - -@media (min-width: 576px) { - .sm\:text-30 { - font-size: 1.875rem; - } -} - -@media (min-width: 992px) { - .md\:text-30 { - font-size: 1.875rem; - } -} - -@media (min-width: 1400px) { - .lg\:text-30 { - font-size: 1.875rem; - } -} - -@media (min-width: 576px) { - .sm\:text-36 { - font-size: 2.25rem; - } -} - -@media (min-width: 992px) { - .md\:text-36 { - font-size: 2.25rem; - } -} - -@media (min-width: 1400px) { - .lg\:text-36 { - font-size: 2.25rem; - } -} - -@media (min-width: 576px) { - .sm\:text-base { - font-size: 1rem; - } -} - -@media (min-width: 992px) { - .md\:text-base { - font-size: 1rem; - } -} - -@media (min-width: 1400px) { - .lg\:text-base { - font-size: 1rem; - } -} - -@media (min-width: 576px) { - .sm\:text-inherit { - font-size: inherit; - } -} - -@media (min-width: 992px) { - .md\:text-inherit { - font-size: inherit; - } -} - -@media (min-width: 1400px) { - .lg\:text-inherit { - font-size: inherit; - } -} - -/* Spacers utility classes */ -.p-0 { - padding: 0; -} - -.pt-0 { - padding-top: 0; -} - -.pr-0 { - padding-right: 0; -} - -.pb-0 { - padding-bottom: 0; -} - -.pl-0 { - padding-left: 0; -} - -.px-0 { - padding-left: 0; - padding-right: 0; -} - -.py-0 { - padding-top: 0; - padding-bottom: 0; -} - -.m-0 { - margin: 0; -} - -.mt-0 { - margin-top: 0; -} - -.mr-0 { - margin-right: 0; -} - -.mb-0 { - margin-bottom: 0; -} - -.ml-0 { - margin-left: 0; -} - -.mx-0 { - margin-left: 0; - margin-right: 0; -} - -.my-0 { - margin-top: 0; - margin-bottom: 0; -} - -@media (min-width: 576px) { - .sm\:p-0 { - padding: 0; - } - .sm\:pt-0 { - padding-top: 0; - } - .sm\:pr-0 { - padding-right: 0; - } - .sm\:pb-0 { - padding-bottom: 0; - } - .sm\:pl-0 { - padding-left: 0; - } - .sm\:px-0 { - padding-left: 0; - padding-right: 0; - } - .sm\:py-0 { - padding-top: 0; - padding-bottom: 0; - } - .sm\:m-0 { - margin: 0; - } - .sm\:mt-0 { - margin-top: 0; - } - .sm\:mr-0 { - margin-right: 0; - } - .sm\:mb-0 { - margin-bottom: 0; - } - .sm\:ml-0 { - margin-left: 0; - } - .sm\:mx-0 { - margin-left: 0; - margin-right: 0; - } - .sm\:my-0 { - margin-top: 0; - margin-bottom: 0; - } -} - -@media (min-width: 992px) { - .md\:p-0 { - padding: 0; - } - .md\:pt-0 { - padding-top: 0; - } - .md\:pr-0 { - padding-right: 0; - } - .md\:pb-0 { - padding-bottom: 0; - } - .md\:pl-0 { - padding-left: 0; - } - .md\:px-0 { - padding-left: 0; - padding-right: 0; - } - .md\:py-0 { - padding-top: 0; - padding-bottom: 0; - } - .md\:m-0 { - margin: 0; - } - .md\:mt-0 { - margin-top: 0; - } - .md\:mr-0 { - margin-right: 0; - } - .md\:mb-0 { - margin-bottom: 0; - } - .md\:ml-0 { - margin-left: 0; - } - .md\:mx-0 { - margin-left: 0; - margin-right: 0; - } - .md\:my-0 { - margin-top: 0; - margin-bottom: 0; - } -} - -@media (min-width: 1400px) { - .lg\:p-0 { - padding: 0; - } - .lg\:pt-0 { - padding-top: 0; - } - .lg\:pr-0 { - padding-right: 0; - } - .lg\:pb-0 { - padding-bottom: 0; - } - .lg\:pl-0 { - padding-left: 0; - } - .lg\:px-0 { - padding-left: 0; - padding-right: 0; - } - .lg\:py-0 { - padding-top: 0; - padding-bottom: 0; - } - .lg\:m-0 { - margin: 0; - } - .lg\:mt-0 { - margin-top: 0; - } - .lg\:mr-0 { - margin-right: 0; - } - .lg\:mb-0 { - margin-bottom: 0; - } - .lg\:ml-0 { - margin-left: 0; - } - .lg\:mx-0 { - margin-left: 0; - margin-right: 0; - } - .lg\:my-0 { - margin-top: 0; - margin-bottom: 0; - } -} - -.p-1 { - padding: 1px; -} - -.pt-1 { - padding-top: 1px; -} - -.pr-1 { - padding-right: 1px; -} - -.pb-1 { - padding-bottom: 1px; -} - -.pl-1 { - padding-left: 1px; -} - -.px-1 { - padding-left: 1px; - padding-right: 1px; -} - -.py-1 { - padding-top: 1px; - padding-bottom: 1px; -} - -.m-1 { - margin: 1px; -} - -.mt-1 { - margin-top: 1px; -} - -.mr-1 { - margin-right: 1px; -} - -.mb-1 { - margin-bottom: 1px; -} - -.ml-1 { - margin-left: 1px; -} - -.mx-1 { - margin-left: 1px; - margin-right: 1px; -} - -.my-1 { - margin-top: 1px; - margin-bottom: 1px; -} - -@media (min-width: 576px) { - .sm\:p-1 { - padding: 1px; - } - .sm\:pt-1 { - padding-top: 1px; - } - .sm\:pr-1 { - padding-right: 1px; - } - .sm\:pb-1 { - padding-bottom: 1px; - } - .sm\:pl-1 { - padding-left: 1px; - } - .sm\:px-1 { - padding-left: 1px; - padding-right: 1px; - } - .sm\:py-1 { - padding-top: 1px; - padding-bottom: 1px; - } - .sm\:m-1 { - margin: 1px; - } - .sm\:mt-1 { - margin-top: 1px; - } - .sm\:mr-1 { - margin-right: 1px; - } - .sm\:mb-1 { - margin-bottom: 1px; - } - .sm\:ml-1 { - margin-left: 1px; - } - .sm\:mx-1 { - margin-left: 1px; - margin-right: 1px; - } - .sm\:my-1 { - margin-top: 1px; - margin-bottom: 1px; - } -} - -@media (min-width: 992px) { - .md\:p-1 { - padding: 1px; - } - .md\:pt-1 { - padding-top: 1px; - } - .md\:pr-1 { - padding-right: 1px; - } - .md\:pb-1 { - padding-bottom: 1px; - } - .md\:pl-1 { - padding-left: 1px; - } - .md\:px-1 { - padding-left: 1px; - padding-right: 1px; - } - .md\:py-1 { - padding-top: 1px; - padding-bottom: 1px; - } - .md\:m-1 { - margin: 1px; - } - .md\:mt-1 { - margin-top: 1px; - } - .md\:mr-1 { - margin-right: 1px; - } - .md\:mb-1 { - margin-bottom: 1px; - } - .md\:ml-1 { - margin-left: 1px; - } - .md\:mx-1 { - margin-left: 1px; - margin-right: 1px; - } - .md\:my-1 { - margin-top: 1px; - margin-bottom: 1px; - } -} - -@media (min-width: 1400px) { - .lg\:p-1 { - padding: 1px; - } - .lg\:pt-1 { - padding-top: 1px; - } - .lg\:pr-1 { - padding-right: 1px; - } - .lg\:pb-1 { - padding-bottom: 1px; - } - .lg\:pl-1 { - padding-left: 1px; - } - .lg\:px-1 { - padding-left: 1px; - padding-right: 1px; - } - .lg\:py-1 { - padding-top: 1px; - padding-bottom: 1px; - } - .lg\:m-1 { - margin: 1px; - } - .lg\:mt-1 { - margin-top: 1px; - } - .lg\:mr-1 { - margin-right: 1px; - } - .lg\:mb-1 { - margin-bottom: 1px; - } - .lg\:ml-1 { - margin-left: 1px; - } - .lg\:mx-1 { - margin-left: 1px; - margin-right: 1px; - } - .lg\:my-1 { - margin-top: 1px; - margin-bottom: 1px; - } -} - -.p-2 { - padding: 0.125rem; -} - -.pt-2 { - padding-top: 0.125rem; -} - -.pr-2 { - padding-right: 0.125rem; -} - -.pb-2 { - padding-bottom: 0.125rem; -} - -.pl-2 { - padding-left: 0.125rem; -} - -.px-2 { - padding-left: 0.125rem; - padding-right: 0.125rem; -} - -.py-2 { - padding-top: 0.125rem; - padding-bottom: 0.125rem; -} - -.m-2 { - margin: 0.125rem; -} - -.mt-2 { - margin-top: 0.125rem; -} - -.mr-2 { - margin-right: 0.125rem; -} - -.mb-2 { - margin-bottom: 0.125rem; -} - -.ml-2 { - margin-left: 0.125rem; -} - -.mx-2 { - margin-left: 0.125rem; - margin-right: 0.125rem; -} - -.my-2 { - margin-top: 0.125rem; - margin-bottom: 0.125rem; -} - -@media (min-width: 576px) { - .sm\:p-2 { - padding: 0.125rem; - } - .sm\:pt-2 { - padding-top: 0.125rem; - } - .sm\:pr-2 { - padding-right: 0.125rem; - } - .sm\:pb-2 { - padding-bottom: 0.125rem; - } - .sm\:pl-2 { - padding-left: 0.125rem; - } - .sm\:px-2 { - padding-left: 0.125rem; - padding-right: 0.125rem; - } - .sm\:py-2 { - padding-top: 0.125rem; - padding-bottom: 0.125rem; - } - .sm\:m-2 { - margin: 0.125rem; - } - .sm\:mt-2 { - margin-top: 0.125rem; - } - .sm\:mr-2 { - margin-right: 0.125rem; - } - .sm\:mb-2 { - margin-bottom: 0.125rem; - } - .sm\:ml-2 { - margin-left: 0.125rem; - } - .sm\:mx-2 { - margin-left: 0.125rem; - margin-right: 0.125rem; - } - .sm\:my-2 { - margin-top: 0.125rem; - margin-bottom: 0.125rem; - } -} - -@media (min-width: 992px) { - .md\:p-2 { - padding: 0.125rem; - } - .md\:pt-2 { - padding-top: 0.125rem; - } - .md\:pr-2 { - padding-right: 0.125rem; - } - .md\:pb-2 { - padding-bottom: 0.125rem; - } - .md\:pl-2 { - padding-left: 0.125rem; - } - .md\:px-2 { - padding-left: 0.125rem; - padding-right: 0.125rem; - } - .md\:py-2 { - padding-top: 0.125rem; - padding-bottom: 0.125rem; - } - .md\:m-2 { - margin: 0.125rem; - } - .md\:mt-2 { - margin-top: 0.125rem; - } - .md\:mr-2 { - margin-right: 0.125rem; - } - .md\:mb-2 { - margin-bottom: 0.125rem; - } - .md\:ml-2 { - margin-left: 0.125rem; - } - .md\:mx-2 { - margin-left: 0.125rem; - margin-right: 0.125rem; - } - .md\:my-2 { - margin-top: 0.125rem; - margin-bottom: 0.125rem; - } -} - -@media (min-width: 1400px) { - .lg\:p-2 { - padding: 0.125rem; - } - .lg\:pt-2 { - padding-top: 0.125rem; - } - .lg\:pr-2 { - padding-right: 0.125rem; - } - .lg\:pb-2 { - padding-bottom: 0.125rem; - } - .lg\:pl-2 { - padding-left: 0.125rem; - } - .lg\:px-2 { - padding-left: 0.125rem; - padding-right: 0.125rem; - } - .lg\:py-2 { - padding-top: 0.125rem; - padding-bottom: 0.125rem; - } - .lg\:m-2 { - margin: 0.125rem; - } - .lg\:mt-2 { - margin-top: 0.125rem; - } - .lg\:mr-2 { - margin-right: 0.125rem; - } - .lg\:mb-2 { - margin-bottom: 0.125rem; - } - .lg\:ml-2 { - margin-left: 0.125rem; - } - .lg\:mx-2 { - margin-left: 0.125rem; - margin-right: 0.125rem; - } - .lg\:my-2 { - margin-top: 0.125rem; - margin-bottom: 0.125rem; - } -} - -.p-4 { - padding: 0.25rem; -} - -.pt-4 { - padding-top: 0.25rem; -} - -.pr-4 { - padding-right: 0.25rem; -} - -.pb-4 { - padding-bottom: 0.25rem; -} - -.pl-4 { - padding-left: 0.25rem; -} - -.px-4 { - padding-left: 0.25rem; - padding-right: 0.25rem; -} - -.py-4 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -.m-4 { - margin: 0.25rem; -} - -.mt-4 { - margin-top: 0.25rem; -} - -.mr-4 { - margin-right: 0.25rem; -} - -.mb-4 { - margin-bottom: 0.25rem; -} - -.ml-4 { - margin-left: 0.25rem; -} - -.mx-4 { - margin-left: 0.25rem; - margin-right: 0.25rem; -} - -.my-4 { - margin-top: 0.25rem; - margin-bottom: 0.25rem; -} - -@media (min-width: 576px) { - .sm\:p-4 { - padding: 0.25rem; - } - .sm\:pt-4 { - padding-top: 0.25rem; - } - .sm\:pr-4 { - padding-right: 0.25rem; - } - .sm\:pb-4 { - padding-bottom: 0.25rem; - } - .sm\:pl-4 { - padding-left: 0.25rem; - } - .sm\:px-4 { - padding-left: 0.25rem; - padding-right: 0.25rem; - } - .sm\:py-4 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; - } - .sm\:m-4 { - margin: 0.25rem; - } - .sm\:mt-4 { - margin-top: 0.25rem; - } - .sm\:mr-4 { - margin-right: 0.25rem; - } - .sm\:mb-4 { - margin-bottom: 0.25rem; - } - .sm\:ml-4 { - margin-left: 0.25rem; - } - .sm\:mx-4 { - margin-left: 0.25rem; - margin-right: 0.25rem; - } - .sm\:my-4 { - margin-top: 0.25rem; - margin-bottom: 0.25rem; - } -} - -@media (min-width: 992px) { - .md\:p-4 { - padding: 0.25rem; - } - .md\:pt-4 { - padding-top: 0.25rem; - } - .md\:pr-4 { - padding-right: 0.25rem; - } - .md\:pb-4 { - padding-bottom: 0.25rem; - } - .md\:pl-4 { - padding-left: 0.25rem; - } - .md\:px-4 { - padding-left: 0.25rem; - padding-right: 0.25rem; - } - .md\:py-4 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; - } - .md\:m-4 { - margin: 0.25rem; - } - .md\:mt-4 { - margin-top: 0.25rem; - } - .md\:mr-4 { - margin-right: 0.25rem; - } - .md\:mb-4 { - margin-bottom: 0.25rem; - } - .md\:ml-4 { - margin-left: 0.25rem; - } - .md\:mx-4 { - margin-left: 0.25rem; - margin-right: 0.25rem; - } - .md\:my-4 { - margin-top: 0.25rem; - margin-bottom: 0.25rem; - } -} - -@media (min-width: 1400px) { - .lg\:p-4 { - padding: 0.25rem; - } - .lg\:pt-4 { - padding-top: 0.25rem; - } - .lg\:pr-4 { - padding-right: 0.25rem; - } - .lg\:pb-4 { - padding-bottom: 0.25rem; - } - .lg\:pl-4 { - padding-left: 0.25rem; - } - .lg\:px-4 { - padding-left: 0.25rem; - padding-right: 0.25rem; - } - .lg\:py-4 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; - } - .lg\:m-4 { - margin: 0.25rem; - } - .lg\:mt-4 { - margin-top: 0.25rem; - } - .lg\:mr-4 { - margin-right: 0.25rem; - } - .lg\:mb-4 { - margin-bottom: 0.25rem; - } - .lg\:ml-4 { - margin-left: 0.25rem; - } - .lg\:mx-4 { - margin-left: 0.25rem; - margin-right: 0.25rem; - } - .lg\:my-4 { - margin-top: 0.25rem; - margin-bottom: 0.25rem; - } -} - -.p-8 { - padding: 0.5rem; -} - -.pt-8 { - padding-top: 0.5rem; -} - -.pr-8 { - padding-right: 0.5rem; -} - -.pb-8 { - padding-bottom: 0.5rem; -} - -.pl-8 { - padding-left: 0.5rem; -} - -.px-8 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.py-8 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.m-8 { - margin: 0.5rem; -} - -.mt-8 { - margin-top: 0.5rem; -} - -.mr-8 { - margin-right: 0.5rem; -} - -.mb-8 { - margin-bottom: 0.5rem; -} - -.ml-8 { - margin-left: 0.5rem; -} - -.mx-8 { - margin-left: 0.5rem; - margin-right: 0.5rem; -} - -.my-8 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - -@media (min-width: 576px) { - .sm\:p-8 { - padding: 0.5rem; - } - .sm\:pt-8 { - padding-top: 0.5rem; - } - .sm\:pr-8 { - padding-right: 0.5rem; - } - .sm\:pb-8 { - padding-bottom: 0.5rem; - } - .sm\:pl-8 { - padding-left: 0.5rem; - } - .sm\:px-8 { - padding-left: 0.5rem; - padding-right: 0.5rem; - } - .sm\:py-8 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - } - .sm\:m-8 { - margin: 0.5rem; - } - .sm\:mt-8 { - margin-top: 0.5rem; - } - .sm\:mr-8 { - margin-right: 0.5rem; - } - .sm\:mb-8 { - margin-bottom: 0.5rem; - } - .sm\:ml-8 { - margin-left: 0.5rem; - } - .sm\:mx-8 { - margin-left: 0.5rem; - margin-right: 0.5rem; - } - .sm\:my-8 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; - } -} - -@media (min-width: 992px) { - .md\:p-8 { - padding: 0.5rem; - } - .md\:pt-8 { - padding-top: 0.5rem; - } - .md\:pr-8 { - padding-right: 0.5rem; - } - .md\:pb-8 { - padding-bottom: 0.5rem; - } - .md\:pl-8 { - padding-left: 0.5rem; - } - .md\:px-8 { - padding-left: 0.5rem; - padding-right: 0.5rem; - } - .md\:py-8 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - } - .md\:m-8 { - margin: 0.5rem; - } - .md\:mt-8 { - margin-top: 0.5rem; - } - .md\:mr-8 { - margin-right: 0.5rem; - } - .md\:mb-8 { - margin-bottom: 0.5rem; - } - .md\:ml-8 { - margin-left: 0.5rem; - } - .md\:mx-8 { - margin-left: 0.5rem; - margin-right: 0.5rem; - } - .md\:my-8 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; - } -} - -@media (min-width: 1400px) { - .lg\:p-8 { - padding: 0.5rem; - } - .lg\:pt-8 { - padding-top: 0.5rem; - } - .lg\:pr-8 { - padding-right: 0.5rem; - } - .lg\:pb-8 { - padding-bottom: 0.5rem; - } - .lg\:pl-8 { - padding-left: 0.5rem; - } - .lg\:px-8 { - padding-left: 0.5rem; - padding-right: 0.5rem; - } - .lg\:py-8 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - } - .lg\:m-8 { - margin: 0.5rem; - } - .lg\:mt-8 { - margin-top: 0.5rem; - } - .lg\:mr-8 { - margin-right: 0.5rem; - } - .lg\:mb-8 { - margin-bottom: 0.5rem; - } - .lg\:ml-8 { - margin-left: 0.5rem; - } - .lg\:mx-8 { - margin-left: 0.5rem; - margin-right: 0.5rem; - } - .lg\:my-8 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; - } -} - -.p-12 { - padding: 0.75rem; -} - -.pt-12 { - padding-top: 0.75rem; -} - -.pr-12 { - padding-right: 0.75rem; -} - -.pb-12 { - padding-bottom: 0.75rem; -} - -.pl-12 { - padding-left: 0.75rem; -} - -.px-12 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.py-12 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} - -.m-12 { - margin: 0.75rem; -} - -.mt-12 { - margin-top: 0.75rem; -} - -.mr-12 { - margin-right: 0.75rem; -} - -.mb-12 { - margin-bottom: 0.75rem; -} - -.ml-12 { - margin-left: 0.75rem; -} - -.mx-12 { - margin-left: 0.75rem; - margin-right: 0.75rem; -} - -.my-12 { - margin-top: 0.75rem; - margin-bottom: 0.75rem; -} - -@media (min-width: 576px) { - .sm\:p-12 { - padding: 0.75rem; - } - .sm\:pt-12 { - padding-top: 0.75rem; - } - .sm\:pr-12 { - padding-right: 0.75rem; - } - .sm\:pb-12 { - padding-bottom: 0.75rem; - } - .sm\:pl-12 { - padding-left: 0.75rem; - } - .sm\:px-12 { - padding-left: 0.75rem; - padding-right: 0.75rem; - } - .sm\:py-12 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - } - .sm\:m-12 { - margin: 0.75rem; - } - .sm\:mt-12 { - margin-top: 0.75rem; - } - .sm\:mr-12 { - margin-right: 0.75rem; - } - .sm\:mb-12 { - margin-bottom: 0.75rem; - } - .sm\:ml-12 { - margin-left: 0.75rem; - } - .sm\:mx-12 { - margin-left: 0.75rem; - margin-right: 0.75rem; - } - .sm\:my-12 { - margin-top: 0.75rem; - margin-bottom: 0.75rem; - } -} - -@media (min-width: 992px) { - .md\:p-12 { - padding: 0.75rem; - } - .md\:pt-12 { - padding-top: 0.75rem; - } - .md\:pr-12 { - padding-right: 0.75rem; - } - .md\:pb-12 { - padding-bottom: 0.75rem; - } - .md\:pl-12 { - padding-left: 0.75rem; - } - .md\:px-12 { - padding-left: 0.75rem; - padding-right: 0.75rem; - } - .md\:py-12 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - } - .md\:m-12 { - margin: 0.75rem; - } - .md\:mt-12 { - margin-top: 0.75rem; - } - .md\:mr-12 { - margin-right: 0.75rem; - } - .md\:mb-12 { - margin-bottom: 0.75rem; - } - .md\:ml-12 { - margin-left: 0.75rem; - } - .md\:mx-12 { - margin-left: 0.75rem; - margin-right: 0.75rem; - } - .md\:my-12 { - margin-top: 0.75rem; - margin-bottom: 0.75rem; - } -} - -@media (min-width: 1400px) { - .lg\:p-12 { - padding: 0.75rem; - } - .lg\:pt-12 { - padding-top: 0.75rem; - } - .lg\:pr-12 { - padding-right: 0.75rem; - } - .lg\:pb-12 { - padding-bottom: 0.75rem; - } - .lg\:pl-12 { - padding-left: 0.75rem; - } - .lg\:px-12 { - padding-left: 0.75rem; - padding-right: 0.75rem; - } - .lg\:py-12 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - } - .lg\:m-12 { - margin: 0.75rem; - } - .lg\:mt-12 { - margin-top: 0.75rem; - } - .lg\:mr-12 { - margin-right: 0.75rem; - } - .lg\:mb-12 { - margin-bottom: 0.75rem; - } - .lg\:ml-12 { - margin-left: 0.75rem; - } - .lg\:mx-12 { - margin-left: 0.75rem; - margin-right: 0.75rem; - } - .lg\:my-12 { - margin-top: 0.75rem; - margin-bottom: 0.75rem; - } -} - -.p-16 { - padding: 1rem; -} - -.pt-16 { - padding-top: 1rem; -} - -.pr-16 { - padding-right: 1rem; -} - -.pb-16 { - padding-bottom: 1rem; -} - -.pl-16 { - padding-left: 1rem; -} - -.px-16 { - padding-left: 1rem; - padding-right: 1rem; -} - -.py-16 { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.m-16 { - margin: 1rem; -} - -.mt-16 { - margin-top: 1rem; -} - -.mr-16 { - margin-right: 1rem; -} - -.mb-16 { - margin-bottom: 1rem; -} - -.ml-16 { - margin-left: 1rem; -} - -.mx-16 { - margin-left: 1rem; - margin-right: 1rem; -} - -.my-16 { - margin-top: 1rem; - margin-bottom: 1rem; -} - -@media (min-width: 576px) { - .sm\:p-16 { - padding: 1rem; - } - .sm\:pt-16 { - padding-top: 1rem; - } - .sm\:pr-16 { - padding-right: 1rem; - } - .sm\:pb-16 { - padding-bottom: 1rem; - } - .sm\:pl-16 { - padding-left: 1rem; - } - .sm\:px-16 { - padding-left: 1rem; - padding-right: 1rem; - } - .sm\:py-16 { - padding-top: 1rem; - padding-bottom: 1rem; - } - .sm\:m-16 { - margin: 1rem; - } - .sm\:mt-16 { - margin-top: 1rem; - } - .sm\:mr-16 { - margin-right: 1rem; - } - .sm\:mb-16 { - margin-bottom: 1rem; - } - .sm\:ml-16 { - margin-left: 1rem; - } - .sm\:mx-16 { - margin-left: 1rem; - margin-right: 1rem; - } - .sm\:my-16 { - margin-top: 1rem; - margin-bottom: 1rem; - } -} - -@media (min-width: 992px) { - .md\:p-16 { - padding: 1rem; - } - .md\:pt-16 { - padding-top: 1rem; - } - .md\:pr-16 { - padding-right: 1rem; - } - .md\:pb-16 { - padding-bottom: 1rem; - } - .md\:pl-16 { - padding-left: 1rem; - } - .md\:px-16 { - padding-left: 1rem; - padding-right: 1rem; - } - .md\:py-16 { - padding-top: 1rem; - padding-bottom: 1rem; - } - .md\:m-16 { - margin: 1rem; - } - .md\:mt-16 { - margin-top: 1rem; - } - .md\:mr-16 { - margin-right: 1rem; - } - .md\:mb-16 { - margin-bottom: 1rem; - } - .md\:ml-16 { - margin-left: 1rem; - } - .md\:mx-16 { - margin-left: 1rem; - margin-right: 1rem; - } - .md\:my-16 { - margin-top: 1rem; - margin-bottom: 1rem; - } -} - -@media (min-width: 1400px) { - .lg\:p-16 { - padding: 1rem; - } - .lg\:pt-16 { - padding-top: 1rem; - } - .lg\:pr-16 { - padding-right: 1rem; - } - .lg\:pb-16 { - padding-bottom: 1rem; - } - .lg\:pl-16 { - padding-left: 1rem; - } - .lg\:px-16 { - padding-left: 1rem; - padding-right: 1rem; - } - .lg\:py-16 { - padding-top: 1rem; - padding-bottom: 1rem; - } - .lg\:m-16 { - margin: 1rem; - } - .lg\:mt-16 { - margin-top: 1rem; - } - .lg\:mr-16 { - margin-right: 1rem; - } - .lg\:mb-16 { - margin-bottom: 1rem; - } - .lg\:ml-16 { - margin-left: 1rem; - } - .lg\:mx-16 { - margin-left: 1rem; - margin-right: 1rem; - } - .lg\:my-16 { - margin-top: 1rem; - margin-bottom: 1rem; - } -} - -.p-20 { - padding: 1.25rem; -} - -.pt-20 { - padding-top: 1.25rem; -} - -.pr-20 { - padding-right: 1.25rem; -} - -.pb-20 { - padding-bottom: 1.25rem; -} - -.pl-20 { - padding-left: 1.25rem; -} - -.px-20 { - padding-left: 1.25rem; - padding-right: 1.25rem; -} - -.py-20 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; -} - -.m-20 { - margin: 1.25rem; -} - -.mt-20 { - margin-top: 1.25rem; -} - -.mr-20 { - margin-right: 1.25rem; -} - -.mb-20 { - margin-bottom: 1.25rem; -} - -.ml-20 { - margin-left: 1.25rem; -} - -.mx-20 { - margin-left: 1.25rem; - margin-right: 1.25rem; -} - -.my-20 { - margin-top: 1.25rem; - margin-bottom: 1.25rem; -} - -@media (min-width: 576px) { - .sm\:p-20 { - padding: 1.25rem; - } - .sm\:pt-20 { - padding-top: 1.25rem; - } - .sm\:pr-20 { - padding-right: 1.25rem; - } - .sm\:pb-20 { - padding-bottom: 1.25rem; - } - .sm\:pl-20 { - padding-left: 1.25rem; - } - .sm\:px-20 { - padding-left: 1.25rem; - padding-right: 1.25rem; - } - .sm\:py-20 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; - } - .sm\:m-20 { - margin: 1.25rem; - } - .sm\:mt-20 { - margin-top: 1.25rem; - } - .sm\:mr-20 { - margin-right: 1.25rem; - } - .sm\:mb-20 { - margin-bottom: 1.25rem; - } - .sm\:ml-20 { - margin-left: 1.25rem; - } - .sm\:mx-20 { - margin-left: 1.25rem; - margin-right: 1.25rem; - } - .sm\:my-20 { - margin-top: 1.25rem; - margin-bottom: 1.25rem; - } -} - -@media (min-width: 992px) { - .md\:p-20 { - padding: 1.25rem; - } - .md\:pt-20 { - padding-top: 1.25rem; - } - .md\:pr-20 { - padding-right: 1.25rem; - } - .md\:pb-20 { - padding-bottom: 1.25rem; - } - .md\:pl-20 { - padding-left: 1.25rem; - } - .md\:px-20 { - padding-left: 1.25rem; - padding-right: 1.25rem; - } - .md\:py-20 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; - } - .md\:m-20 { - margin: 1.25rem; - } - .md\:mt-20 { - margin-top: 1.25rem; - } - .md\:mr-20 { - margin-right: 1.25rem; - } - .md\:mb-20 { - margin-bottom: 1.25rem; - } - .md\:ml-20 { - margin-left: 1.25rem; - } - .md\:mx-20 { - margin-left: 1.25rem; - margin-right: 1.25rem; - } - .md\:my-20 { - margin-top: 1.25rem; - margin-bottom: 1.25rem; - } -} - -@media (min-width: 1400px) { - .lg\:p-20 { - padding: 1.25rem; - } - .lg\:pt-20 { - padding-top: 1.25rem; - } - .lg\:pr-20 { - padding-right: 1.25rem; - } - .lg\:pb-20 { - padding-bottom: 1.25rem; - } - .lg\:pl-20 { - padding-left: 1.25rem; - } - .lg\:px-20 { - padding-left: 1.25rem; - padding-right: 1.25rem; - } - .lg\:py-20 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; - } - .lg\:m-20 { - margin: 1.25rem; - } - .lg\:mt-20 { - margin-top: 1.25rem; - } - .lg\:mr-20 { - margin-right: 1.25rem; - } - .lg\:mb-20 { - margin-bottom: 1.25rem; - } - .lg\:ml-20 { - margin-left: 1.25rem; - } - .lg\:mx-20 { - margin-left: 1.25rem; - margin-right: 1.25rem; - } - .lg\:my-20 { - margin-top: 1.25rem; - margin-bottom: 1.25rem; - } -} - -.p-24 { - padding: 1.5rem; -} - -.pt-24 { - padding-top: 1.5rem; -} - -.pr-24 { - padding-right: 1.5rem; -} - -.pb-24 { - padding-bottom: 1.5rem; -} - -.pl-24 { - padding-left: 1.5rem; -} - -.px-24 { - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -.py-24 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} - -.m-24 { - margin: 1.5rem; -} - -.mt-24 { - margin-top: 1.5rem; -} - -.mr-24 { - margin-right: 1.5rem; -} - -.mb-24 { - margin-bottom: 1.5rem; -} - -.ml-24 { - margin-left: 1.5rem; -} - -.mx-24 { - margin-left: 1.5rem; - margin-right: 1.5rem; -} - -.my-24 { - margin-top: 1.5rem; - margin-bottom: 1.5rem; -} - -@media (min-width: 576px) { - .sm\:p-24 { - padding: 1.5rem; - } - .sm\:pt-24 { - padding-top: 1.5rem; - } - .sm\:pr-24 { - padding-right: 1.5rem; - } - .sm\:pb-24 { - padding-bottom: 1.5rem; - } - .sm\:pl-24 { - padding-left: 1.5rem; - } - .sm\:px-24 { - padding-left: 1.5rem; - padding-right: 1.5rem; - } - .sm\:py-24 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; - } - .sm\:m-24 { - margin: 1.5rem; - } - .sm\:mt-24 { - margin-top: 1.5rem; - } - .sm\:mr-24 { - margin-right: 1.5rem; - } - .sm\:mb-24 { - margin-bottom: 1.5rem; - } - .sm\:ml-24 { - margin-left: 1.5rem; - } - .sm\:mx-24 { - margin-left: 1.5rem; - margin-right: 1.5rem; - } - .sm\:my-24 { - margin-top: 1.5rem; - margin-bottom: 1.5rem; - } -} - -@media (min-width: 992px) { - .md\:p-24 { - padding: 1.5rem; - } - .md\:pt-24 { - padding-top: 1.5rem; - } - .md\:pr-24 { - padding-right: 1.5rem; - } - .md\:pb-24 { - padding-bottom: 1.5rem; - } - .md\:pl-24 { - padding-left: 1.5rem; - } - .md\:px-24 { - padding-left: 1.5rem; - padding-right: 1.5rem; - } - .md\:py-24 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; - } - .md\:m-24 { - margin: 1.5rem; - } - .md\:mt-24 { - margin-top: 1.5rem; - } - .md\:mr-24 { - margin-right: 1.5rem; - } - .md\:mb-24 { - margin-bottom: 1.5rem; - } - .md\:ml-24 { - margin-left: 1.5rem; - } - .md\:mx-24 { - margin-left: 1.5rem; - margin-right: 1.5rem; - } - .md\:my-24 { - margin-top: 1.5rem; - margin-bottom: 1.5rem; - } -} - -@media (min-width: 1400px) { - .lg\:p-24 { - padding: 1.5rem; - } - .lg\:pt-24 { - padding-top: 1.5rem; - } - .lg\:pr-24 { - padding-right: 1.5rem; - } - .lg\:pb-24 { - padding-bottom: 1.5rem; - } - .lg\:pl-24 { - padding-left: 1.5rem; - } - .lg\:px-24 { - padding-left: 1.5rem; - padding-right: 1.5rem; - } - .lg\:py-24 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; - } - .lg\:m-24 { - margin: 1.5rem; - } - .lg\:mt-24 { - margin-top: 1.5rem; - } - .lg\:mr-24 { - margin-right: 1.5rem; - } - .lg\:mb-24 { - margin-bottom: 1.5rem; - } - .lg\:ml-24 { - margin-left: 1.5rem; - } - .lg\:mx-24 { - margin-left: 1.5rem; - margin-right: 1.5rem; - } - .lg\:my-24 { - margin-top: 1.5rem; - margin-bottom: 1.5rem; - } -} - -.p-36 { - padding: 2.25rem; -} - -.pt-36 { - padding-top: 2.25rem; -} - -.pr-36 { - padding-right: 2.25rem; -} - -.pb-36 { - padding-bottom: 2.25rem; -} - -.pl-36 { - padding-left: 2.25rem; -} - -.px-36 { - padding-left: 2.25rem; - padding-right: 2.25rem; -} - -.py-36 { - padding-top: 2.25rem; - padding-bottom: 2.25rem; -} - -.m-36 { - margin: 2.25rem; -} - -.mt-36 { - margin-top: 2.25rem; -} - -.mr-36 { - margin-right: 2.25rem; -} - -.mb-36 { - margin-bottom: 2.25rem; -} - -.ml-36 { - margin-left: 2.25rem; -} - -.mx-36 { - margin-left: 2.25rem; - margin-right: 2.25rem; -} - -.my-36 { - margin-top: 2.25rem; - margin-bottom: 2.25rem; -} - -@media (min-width: 576px) { - .sm\:p-36 { - padding: 2.25rem; - } - .sm\:pt-36 { - padding-top: 2.25rem; - } - .sm\:pr-36 { - padding-right: 2.25rem; - } - .sm\:pb-36 { - padding-bottom: 2.25rem; - } - .sm\:pl-36 { - padding-left: 2.25rem; - } - .sm\:px-36 { - padding-left: 2.25rem; - padding-right: 2.25rem; - } - .sm\:py-36 { - padding-top: 2.25rem; - padding-bottom: 2.25rem; - } - .sm\:m-36 { - margin: 2.25rem; - } - .sm\:mt-36 { - margin-top: 2.25rem; - } - .sm\:mr-36 { - margin-right: 2.25rem; - } - .sm\:mb-36 { - margin-bottom: 2.25rem; - } - .sm\:ml-36 { - margin-left: 2.25rem; - } - .sm\:mx-36 { - margin-left: 2.25rem; - margin-right: 2.25rem; - } - .sm\:my-36 { - margin-top: 2.25rem; - margin-bottom: 2.25rem; - } -} - -@media (min-width: 992px) { - .md\:p-36 { - padding: 2.25rem; - } - .md\:pt-36 { - padding-top: 2.25rem; - } - .md\:pr-36 { - padding-right: 2.25rem; - } - .md\:pb-36 { - padding-bottom: 2.25rem; - } - .md\:pl-36 { - padding-left: 2.25rem; - } - .md\:px-36 { - padding-left: 2.25rem; - padding-right: 2.25rem; - } - .md\:py-36 { - padding-top: 2.25rem; - padding-bottom: 2.25rem; - } - .md\:m-36 { - margin: 2.25rem; - } - .md\:mt-36 { - margin-top: 2.25rem; - } - .md\:mr-36 { - margin-right: 2.25rem; - } - .md\:mb-36 { - margin-bottom: 2.25rem; - } - .md\:ml-36 { - margin-left: 2.25rem; - } - .md\:mx-36 { - margin-left: 2.25rem; - margin-right: 2.25rem; - } - .md\:my-36 { - margin-top: 2.25rem; - margin-bottom: 2.25rem; - } -} - -@media (min-width: 1400px) { - .lg\:p-36 { - padding: 2.25rem; - } - .lg\:pt-36 { - padding-top: 2.25rem; - } - .lg\:pr-36 { - padding-right: 2.25rem; - } - .lg\:pb-36 { - padding-bottom: 2.25rem; - } - .lg\:pl-36 { - padding-left: 2.25rem; - } - .lg\:px-36 { - padding-left: 2.25rem; - padding-right: 2.25rem; - } - .lg\:py-36 { - padding-top: 2.25rem; - padding-bottom: 2.25rem; - } - .lg\:m-36 { - margin: 2.25rem; - } - .lg\:mt-36 { - margin-top: 2.25rem; - } - .lg\:mr-36 { - margin-right: 2.25rem; - } - .lg\:mb-36 { - margin-bottom: 2.25rem; - } - .lg\:ml-36 { - margin-left: 2.25rem; - } - .lg\:mx-36 { - margin-left: 2.25rem; - margin-right: 2.25rem; - } - .lg\:my-36 { - margin-top: 2.25rem; - margin-bottom: 2.25rem; - } -} - -.p-auto { - padding: auto; -} - -.pt-auto { - padding-top: auto; -} - -.pr-auto { - padding-right: auto; -} - -.pb-auto { - padding-bottom: auto; -} - -.pl-auto { - padding-left: auto; -} - -.px-auto { - padding-left: auto; - padding-right: auto; -} - -.py-auto { - padding-top: auto; - padding-bottom: auto; -} - -.m-auto { - margin: auto; -} - -.mt-auto { - margin-top: auto; -} - -.mr-auto { - margin-right: auto; -} - -.mb-auto { - margin-bottom: auto; -} - -.ml-auto { - margin-left: auto; -} - -.mx-auto { - margin-left: auto; - margin-right: auto; -} - -.my-auto { - margin-top: auto; - margin-bottom: auto; -} - -@media (min-width: 576px) { - .sm\:p-auto { - padding: auto; - } - .sm\:pt-auto { - padding-top: auto; - } - .sm\:pr-auto { - padding-right: auto; - } - .sm\:pb-auto { - padding-bottom: auto; - } - .sm\:pl-auto { - padding-left: auto; - } - .sm\:px-auto { - padding-left: auto; - padding-right: auto; - } - .sm\:py-auto { - padding-top: auto; - padding-bottom: auto; - } - .sm\:m-auto { - margin: auto; - } - .sm\:mt-auto { - margin-top: auto; - } - .sm\:mr-auto { - margin-right: auto; - } - .sm\:mb-auto { - margin-bottom: auto; - } - .sm\:ml-auto { - margin-left: auto; - } - .sm\:mx-auto { - margin-left: auto; - margin-right: auto; - } - .sm\:my-auto { - margin-top: auto; - margin-bottom: auto; - } -} - -@media (min-width: 992px) { - .md\:p-auto { - padding: auto; - } - .md\:pt-auto { - padding-top: auto; - } - .md\:pr-auto { - padding-right: auto; - } - .md\:pb-auto { - padding-bottom: auto; - } - .md\:pl-auto { - padding-left: auto; - } - .md\:px-auto { - padding-left: auto; - padding-right: auto; - } - .md\:py-auto { - padding-top: auto; - padding-bottom: auto; - } - .md\:m-auto { - margin: auto; - } - .md\:mt-auto { - margin-top: auto; - } - .md\:mr-auto { - margin-right: auto; - } - .md\:mb-auto { - margin-bottom: auto; - } - .md\:ml-auto { - margin-left: auto; - } - .md\:mx-auto { - margin-left: auto; - margin-right: auto; - } - .md\:my-auto { - margin-top: auto; - margin-bottom: auto; - } -} - -@media (min-width: 1400px) { - .lg\:p-auto { - padding: auto; - } - .lg\:pt-auto { - padding-top: auto; - } - .lg\:pr-auto { - padding-right: auto; - } - .lg\:pb-auto { - padding-bottom: auto; - } - .lg\:pl-auto { - padding-left: auto; - } - .lg\:px-auto { - padding-left: auto; - padding-right: auto; - } - .lg\:py-auto { - padding-top: auto; - padding-bottom: auto; - } - .lg\:m-auto { - margin: auto; - } - .lg\:mt-auto { - margin-top: auto; - } - .lg\:mr-auto { - margin-right: auto; - } - .lg\:mb-auto { - margin-bottom: auto; - } - .lg\:ml-auto { - margin-left: auto; - } - .lg\:mx-auto { - margin-left: auto; - margin-right: auto; - } - .lg\:my-auto { - margin-top: auto; - margin-bottom: auto; - } -} - -/* -------------------------------------------------- */ -/* ==Grillade : système de micro-grille de KNACSS */ -/* ------------------------------------------------ */ -.grid { - display: grid; -} - -@media (min-width: 576px) { - .sm\:grid { - display: grid; - } -} - -@media (min-width: 992px) { - .md\:grid { - display: grid; - } -} - -@media (min-width: 1400px) { - .lg\:grid { - display: grid; - } -} - -/* grid-template-columns initialisation */ -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} - -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); -} - -.grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); -} - -.grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); -} - -/* grid-template-columns au sein des breakpoints */ -@media (min-width: 576px) { - .sm\:grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .sm\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - .sm\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - .sm\:grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - .sm\:grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } -} - -@media (min-width: 992px) { - .md\:grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - .md\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - .md\:grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - .md\:grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } -} - -@media (min-width: 1400px) { - .lg\:grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - .lg\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .lg\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - .lg\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - .lg\:grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - .lg\:grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } -} - -/* gap initialisation */ -.gap-0 { - gap: 0; -} - -.gap-x-0 { - column-gap: 0; -} - -.gap-y-0 { - row-gap: 0; -} - -.gap-5 { - gap: 0.313rem; -} - -.gap-x-5 { - column-gap: 0.313rem; -} - -.gap-y-5 { - row-gap: 0.313rem; -} - -.gap-10 { - gap: 0.625rem; -} - -.gap-x-10 { - column-gap: 0.625rem; -} - -.gap-y-10 { - row-gap: 0.625rem; -} - -.gap-16 { - gap: 1rem; -} - -.gap-x-16 { - column-gap: 1rem; -} - -.gap-y-16 { - row-gap: 1rem; -} - -.gap-20 { - gap: 1.25rem; -} - -.gap-x-20 { - column-gap: 1.25rem; -} - -.gap-y-20 { - row-gap: 1.25rem; -} - -.gap-36 { - gap: 2.25rem; -} - -.gap-x-36 { - column-gap: 2.25rem; -} - -.gap-y-36 { - row-gap: 2.25rem; -} - -/* gap au sein des breakpoints */ -@media (min-width: 576px) { - .sm\:gap-0 { - gap: 0; - } - .sm\:gap-x-0 { - column-gap: 0; - } - .sm\:gap-y-0 { - row-gap: 0; - } - .sm\:gap-5 { - gap: 0.313rem; - } - .sm\:gap-x-5 { - column-gap: 0.313rem; - } - .sm\:gap-y-5 { - row-gap: 0.313rem; - } - .sm\:gap-10 { - gap: 0.625rem; - } - .sm\:gap-x-10 { - column-gap: 0.625rem; - } - .sm\:gap-y-10 { - row-gap: 0.625rem; - } - .sm\:gap-16 { - gap: 1rem; - } - .sm\:gap-x-16 { - column-gap: 1rem; - } - .sm\:gap-y-16 { - row-gap: 1rem; - } - .sm\:gap-20 { - gap: 1.25rem; - } - .sm\:gap-x-20 { - column-gap: 1.25rem; - } - .sm\:gap-y-20 { - row-gap: 1.25rem; - } - .sm\:gap-36 { - gap: 2.25rem; - } - .sm\:gap-x-36 { - column-gap: 2.25rem; - } - .sm\:gap-y-36 { - row-gap: 2.25rem; - } -} - -@media (min-width: 992px) { - .md\:gap-0 { - gap: 0; - } - .md\:gap-x-0 { - column-gap: 0; - } - .md\:gap-y-0 { - row-gap: 0; - } - .md\:gap-5 { - gap: 0.313rem; - } - .md\:gap-x-5 { - column-gap: 0.313rem; - } - .md\:gap-y-5 { - row-gap: 0.313rem; - } - .md\:gap-10 { - gap: 0.625rem; - } - .md\:gap-x-10 { - column-gap: 0.625rem; - } - .md\:gap-y-10 { - row-gap: 0.625rem; - } - .md\:gap-16 { - gap: 1rem; - } - .md\:gap-x-16 { - column-gap: 1rem; - } - .md\:gap-y-16 { - row-gap: 1rem; - } - .md\:gap-20 { - gap: 1.25rem; - } - .md\:gap-x-20 { - column-gap: 1.25rem; - } - .md\:gap-y-20 { - row-gap: 1.25rem; - } - .md\:gap-36 { - gap: 2.25rem; - } - .md\:gap-x-36 { - column-gap: 2.25rem; - } - .md\:gap-y-36 { - row-gap: 2.25rem; - } -} - -@media (min-width: 1400px) { - .lg\:gap-0 { - gap: 0; - } - .lg\:gap-x-0 { - column-gap: 0; - } - .lg\:gap-y-0 { - row-gap: 0; - } - .lg\:gap-5 { - gap: 0.313rem; - } - .lg\:gap-x-5 { - column-gap: 0.313rem; - } - .lg\:gap-y-5 { - row-gap: 0.313rem; - } - .lg\:gap-10 { - gap: 0.625rem; - } - .lg\:gap-x-10 { - column-gap: 0.625rem; - } - .lg\:gap-y-10 { - row-gap: 0.625rem; - } - .lg\:gap-16 { - gap: 1rem; - } - .lg\:gap-x-16 { - column-gap: 1rem; - } - .lg\:gap-y-16 { - row-gap: 1rem; - } - .lg\:gap-20 { - gap: 1.25rem; - } - .lg\:gap-x-20 { - column-gap: 1.25rem; - } - .lg\:gap-y-20 { - row-gap: 1.25rem; - } - .lg\:gap-36 { - gap: 2.25rem; - } - .lg\:gap-x-36 { - column-gap: 2.25rem; - } - .lg\:gap-y-36 { - row-gap: 2.25rem; - } -} - -/* grid-items initialisation */ -.col-start-1 { - grid-column-start: 1; -} - -.col-end-1 { - grid-column-end: 1; -} - -.col-span-1 { - grid-column: span 1 / span 1; -} - -.col-span-full { - grid-column: 1 / -1; -} - -.row-start-1 { - grid-row-start: 1; -} - -.row-end-1 { - grid-row-end: 1; -} - -.row-span-1 { - grid-row: span 1 / span 1; -} - -.col-start-2 { - grid-column-start: 2; -} - -.col-end-2 { - grid-column-end: 2; -} - -.col-span-2 { - grid-column: span 2 / span 2; -} - -.col-span-full { - grid-column: 1 / -1; -} - -.row-start-2 { - grid-row-start: 2; -} - -.row-end-2 { - grid-row-end: 2; -} - -.row-span-2 { - grid-row: span 2 / span 2; -} - -.col-start-3 { - grid-column-start: 3; -} - -.col-end-3 { - grid-column-end: 3; -} - -.col-span-3 { - grid-column: span 3 / span 3; -} - -.col-span-full { - grid-column: 1 / -1; -} - -.row-start-3 { - grid-row-start: 3; -} - -.row-end-3 { - grid-row-end: 3; -} - -.row-span-3 { - grid-row: span 3 / span 3; -} - -.col-start-4 { - grid-column-start: 4; -} - -.col-end-4 { - grid-column-end: 4; -} - -.col-span-4 { - grid-column: span 4 / span 4; -} - -.col-span-full { - grid-column: 1 / -1; -} - -.row-start-4 { - grid-row-start: 4; -} - -.row-end-4 { - grid-row-end: 4; -} - -.row-span-4 { - grid-row: span 4 / span 4; -} - -.col-start-5 { - grid-column-start: 5; -} - -.col-end-5 { - grid-column-end: 5; -} - -.col-span-5 { - grid-column: span 5 / span 5; -} - -.col-span-full { - grid-column: 1 / -1; -} - -.row-start-5 { - grid-row-start: 5; -} - -.row-end-5 { - grid-row-end: 5; -} - -.row-span-5 { - grid-row: span 5 / span 5; -} - -.col-start-6 { - grid-column-start: 6; -} - -.col-end-6 { - grid-column-end: 6; -} - -.col-span-6 { - grid-column: span 6 / span 6; -} - -.col-span-full { - grid-column: 1 / -1; -} - -.row-start-6 { - grid-row-start: 6; -} - -.row-end-6 { - grid-row-end: 6; -} - -.row-span-6 { - grid-row: span 6 / span 6; -} - -/* grid-items au sein des breakpoints */ -@media (min-width: 576px) { - .sm\:col-start-1 { - grid-column-start: 1; - } - .sm\:col-end-1 { - grid-column-end: 1; - } - .sm\:col-span-1 { - grid-column: span 1 / span 1; - } - .sm\:col-span-full { - grid-column: 1 / -1; - } - .sm\:row-start-1 { - grid-row-start: 1; - } - .sm\:row-end-1 { - grid-row-end: 1; - } - .sm\:row-span-1 { - grid-row: span 1 / span 1; - } - .sm\:col-start-2 { - grid-column-start: 2; - } - .sm\:col-end-2 { - grid-column-end: 2; - } - .sm\:col-span-2 { - grid-column: span 2 / span 2; - } - .sm\:col-span-full { - grid-column: 1 / -1; - } - .sm\:row-start-2 { - grid-row-start: 2; - } - .sm\:row-end-2 { - grid-row-end: 2; - } - .sm\:row-span-2 { - grid-row: span 2 / span 2; - } - .sm\:col-start-3 { - grid-column-start: 3; - } - .sm\:col-end-3 { - grid-column-end: 3; - } - .sm\:col-span-3 { - grid-column: span 3 / span 3; - } - .sm\:col-span-full { - grid-column: 1 / -1; - } - .sm\:row-start-3 { - grid-row-start: 3; - } - .sm\:row-end-3 { - grid-row-end: 3; - } - .sm\:row-span-3 { - grid-row: span 3 / span 3; - } - .sm\:col-start-4 { - grid-column-start: 4; - } - .sm\:col-end-4 { - grid-column-end: 4; - } - .sm\:col-span-4 { - grid-column: span 4 / span 4; - } - .sm\:col-span-full { - grid-column: 1 / -1; - } - .sm\:row-start-4 { - grid-row-start: 4; - } - .sm\:row-end-4 { - grid-row-end: 4; - } - .sm\:row-span-4 { - grid-row: span 4 / span 4; - } - .sm\:col-start-5 { - grid-column-start: 5; - } - .sm\:col-end-5 { - grid-column-end: 5; - } - .sm\:col-span-5 { - grid-column: span 5 / span 5; - } - .sm\:col-span-full { - grid-column: 1 / -1; - } - .sm\:row-start-5 { - grid-row-start: 5; - } - .sm\:row-end-5 { - grid-row-end: 5; - } - .sm\:row-span-5 { - grid-row: span 5 / span 5; - } - .sm\:col-start-6 { - grid-column-start: 6; - } - .sm\:col-end-6 { - grid-column-end: 6; - } - .sm\:col-span-6 { - grid-column: span 6 / span 6; - } - .sm\:col-span-full { - grid-column: 1 / -1; - } - .sm\:row-start-6 { - grid-row-start: 6; - } - .sm\:row-end-6 { - grid-row-end: 6; - } - .sm\:row-span-6 { - grid-row: span 6 / span 6; - } -} - -@media (min-width: 992px) { - .md\:col-start-1 { - grid-column-start: 1; - } - .md\:col-end-1 { - grid-column-end: 1; - } - .md\:col-span-1 { - grid-column: span 1 / span 1; - } - .md\:col-span-full { - grid-column: 1 / -1; - } - .md\:row-start-1 { - grid-row-start: 1; - } - .md\:row-end-1 { - grid-row-end: 1; - } - .md\:row-span-1 { - grid-row: span 1 / span 1; - } - .md\:col-start-2 { - grid-column-start: 2; - } - .md\:col-end-2 { - grid-column-end: 2; - } - .md\:col-span-2 { - grid-column: span 2 / span 2; - } - .md\:col-span-full { - grid-column: 1 / -1; - } - .md\:row-start-2 { - grid-row-start: 2; - } - .md\:row-end-2 { - grid-row-end: 2; - } - .md\:row-span-2 { - grid-row: span 2 / span 2; - } - .md\:col-start-3 { - grid-column-start: 3; - } - .md\:col-end-3 { - grid-column-end: 3; - } - .md\:col-span-3 { - grid-column: span 3 / span 3; - } - .md\:col-span-full { - grid-column: 1 / -1; - } - .md\:row-start-3 { - grid-row-start: 3; - } - .md\:row-end-3 { - grid-row-end: 3; - } - .md\:row-span-3 { - grid-row: span 3 / span 3; - } - .md\:col-start-4 { - grid-column-start: 4; - } - .md\:col-end-4 { - grid-column-end: 4; - } - .md\:col-span-4 { - grid-column: span 4 / span 4; - } - .md\:col-span-full { - grid-column: 1 / -1; - } - .md\:row-start-4 { - grid-row-start: 4; - } - .md\:row-end-4 { - grid-row-end: 4; - } - .md\:row-span-4 { - grid-row: span 4 / span 4; - } - .md\:col-start-5 { - grid-column-start: 5; - } - .md\:col-end-5 { - grid-column-end: 5; - } - .md\:col-span-5 { - grid-column: span 5 / span 5; - } - .md\:col-span-full { - grid-column: 1 / -1; - } - .md\:row-start-5 { - grid-row-start: 5; - } - .md\:row-end-5 { - grid-row-end: 5; - } - .md\:row-span-5 { - grid-row: span 5 / span 5; - } - .md\:col-start-6 { - grid-column-start: 6; - } - .md\:col-end-6 { - grid-column-end: 6; - } - .md\:col-span-6 { - grid-column: span 6 / span 6; - } - .md\:col-span-full { - grid-column: 1 / -1; - } - .md\:row-start-6 { - grid-row-start: 6; - } - .md\:row-end-6 { - grid-row-end: 6; - } - .md\:row-span-6 { - grid-row: span 6 / span 6; - } -} - -@media (min-width: 1400px) { - .lg\:col-start-1 { - grid-column-start: 1; - } - .lg\:col-end-1 { - grid-column-end: 1; - } - .lg\:col-span-1 { - grid-column: span 1 / span 1; - } - .lg\:col-span-full { - grid-column: 1 / -1; - } - .lg\:row-start-1 { - grid-row-start: 1; - } - .lg\:row-end-1 { - grid-row-end: 1; - } - .lg\:row-span-1 { - grid-row: span 1 / span 1; - } - .lg\:col-start-2 { - grid-column-start: 2; - } - .lg\:col-end-2 { - grid-column-end: 2; - } - .lg\:col-span-2 { - grid-column: span 2 / span 2; - } - .lg\:col-span-full { - grid-column: 1 / -1; - } - .lg\:row-start-2 { - grid-row-start: 2; - } - .lg\:row-end-2 { - grid-row-end: 2; - } - .lg\:row-span-2 { - grid-row: span 2 / span 2; - } - .lg\:col-start-3 { - grid-column-start: 3; - } - .lg\:col-end-3 { - grid-column-end: 3; - } - .lg\:col-span-3 { - grid-column: span 3 / span 3; - } - .lg\:col-span-full { - grid-column: 1 / -1; - } - .lg\:row-start-3 { - grid-row-start: 3; - } - .lg\:row-end-3 { - grid-row-end: 3; - } - .lg\:row-span-3 { - grid-row: span 3 / span 3; - } - .lg\:col-start-4 { - grid-column-start: 4; - } - .lg\:col-end-4 { - grid-column-end: 4; - } - .lg\:col-span-4 { - grid-column: span 4 / span 4; - } - .lg\:col-span-full { - grid-column: 1 / -1; - } - .lg\:row-start-4 { - grid-row-start: 4; - } - .lg\:row-end-4 { - grid-row-end: 4; - } - .lg\:row-span-4 { - grid-row: span 4 / span 4; - } - .lg\:col-start-5 { - grid-column-start: 5; - } - .lg\:col-end-5 { - grid-column-end: 5; - } - .lg\:col-span-5 { - grid-column: span 5 / span 5; - } - .lg\:col-span-full { - grid-column: 1 / -1; - } - .lg\:row-start-5 { - grid-row-start: 5; - } - .lg\:row-end-5 { - grid-row-end: 5; - } - .lg\:row-span-5 { - grid-row: span 5 / span 5; - } - .lg\:col-start-6 { - grid-column-start: 6; - } - .lg\:col-end-6 { - grid-column-end: 6; - } - .lg\:col-span-6 { - grid-column: span 6 / span 6; - } - .lg\:col-span-full { - grid-column: 1 / -1; - } - .lg\:row-start-6 { - grid-row-start: 6; - } - .lg\:row-end-6 { - grid-row-end: 6; - } - .lg\:row-span-6 { - grid-row: span 6 / span 6; - } -} diff --git a/css/knacss-mini/knacss.css b/css/knacss-mini/knacss.css index 9fa288c..8cb765a 100644 --- a/css/knacss-mini/knacss.css +++ b/css/knacss-mini/knacss.css @@ -1 +1 @@ -/*! KNACSS Reborn: Just keep it simple! @author: Alsacreations v8.2 2022/01 Licence WTFPL http://www.wtfpl.net/ */*,:after,:before{box-sizing:border-box;min-width:0}html{font-size:100%;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overflow-wrap:break-word}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;line-height:1.5;background-color:#fff}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,body,h1,h2,h3,h4,h5,h6{color:#212529}a{color:#6c757d;text-decoration:underline}a:active,a:focus,a:hover{color:#212529;text-decoration:underline}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.h1-like,.h2-like,h1,h2{margin-top:0;margin-bottom:1rem}.h3-like,.h4-like,.h5-like,.h6-like,address,blockquote,dd,dl,dt,h3,h4,h5,h6,ol,p,pre,ul{margin-top:0;margin-bottom:.75rem}li .p-like,li ol,li p,li ul,nav ol,nav ul,ol ol,ol ul,ul ol,ul ul{margin-top:0;margin-bottom:0}ol,ul{padding-left:1rem}nav ol,nav ul{list-style:none;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}blockquote,code,iframe,img,input,pre,select,svg,table,td,textarea,video{max-width:100%}iframe,img,input,select,textarea{height:auto}iframe,img{border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}hr{box-sizing:initial;height:0;overflow:visible;border:0;border-top:1px solid;margin:1rem 0;clear:both;color:inherit}table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;vertical-align:top;margin-bottom:1rem}.sr-only,.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{margin:0;background-color:initial;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;vertical-align:middle}button,input:not([type=radio]):not([type=checkbox]),select,textarea{border:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{-moz-tab-size:2;tab-size:2;white-space:pre-wrap;line-height:normal;overflow:auto;-ms-overflow-style:scrollbar}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}fieldset,form{border:none}fieldset{margin:0;padding:1rem}legend{display:table;max-width:100%;padding:0 .25rem;border:0;color:inherit;white-space:normal}label{display:inline-block;cursor:pointer}textarea{overflow:auto;vertical-align:top;resize:vertical;white-space:pre-wrap}progress{width:100%;vertical-align:initial}output,progress{display:inline-block}summary{display:list-item}template{display:none}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}.layout-maxed{display:grid}.layout-maxed>*{grid-column:2}.layout-hero{grid-column:1/-1;display:grid;grid-template-columns:inherit}.layout-hero>*{grid-column:2}.layout-hero-img{grid-column:1/-1;justify-self:center;max-width:100%}.hidden{display:none}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-no-wrap{flex-wrap:nowrap}.flex-shrink{flex-shrink:1}.flex-no-shrink{flex-shrink:0}.flex-grow{flex-grow:1}.flex-no-grow{flex-grow:0}.float-left{float:left}.float-right{float:right}.float-none{float:none}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-smaller{font-size:smaller}.text-larger{font-size:larger}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-wrap{overflow-wrap:break-word}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.align-start{align-content:start}.align-end{align-content:end}.align-center{align-content:center}.align-between{align-content:space-between}.align-around{align-content:space-around}.align-evenly{align-content:space-evenly}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.place-center{place-content:center}.justify-self-auto{justify-self:auto}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.justify-self-stretch{justify-self:stretch}.align-self-auto{align-self:auto}.align-self-start{align-self:flex-start}.align-self-end{align-self:flex-end}.align-self-center{align-self:center}.align-self-stretch{align-self:stretch}.align-top{vertical-align:top}.align-bottom{vertical-align:bottom}.align-middle{vertical-align:middle}.item-first{order:-100}.item-last{order:100}.is-unstyled{list-style:none;padding-left:0}.is-disabled,[disabled]{opacity:.6;cursor:not-allowed!important;filter:grayscale(1)}.text-normal{font-weight:400;font-style:normal;text-transform:none}.text-10{font-size:.625rem}.text-11{font-size:.6875rem}.text-12{font-size:.75rem}.text-14{font-size:.875rem}.text-16{font-size:1rem}.text-18{font-size:1.125rem}.text-20{font-size:1.25rem}.text-24{font-size:1.5rem}.text-30{font-size:1.875rem}.text-36{font-size:2.25rem}.text-base{font-size:1rem}.text-inherit{font-size:inherit}.p-0{padding:0}.pt-0{padding-top:0}.pr-0{padding-right:0}.pb-0{padding-bottom:0}.pl-0,.px-0{padding-left:0}.px-0{padding-right:0}.py-0{padding-top:0;padding-bottom:0}.m-0{margin:0}.mt-0{margin-top:0}.mr-0{margin-right:0}.mb-0{margin-bottom:0}.ml-0,.mx-0{margin-left:0}.mx-0{margin-right:0}.my-0{margin-top:0;margin-bottom:0}.p-1{padding:1px}.pt-1{padding-top:1px}.pr-1{padding-right:1px}.pb-1{padding-bottom:1px}.pl-1,.px-1{padding-left:1px}.px-1{padding-right:1px}.py-1{padding-top:1px;padding-bottom:1px}.m-1{margin:1px}.mt-1{margin-top:1px}.mr-1{margin-right:1px}.mb-1{margin-bottom:1px}.ml-1,.mx-1{margin-left:1px}.mx-1{margin-right:1px}.my-1{margin-top:1px;margin-bottom:1px}.p-2{padding:.125rem}.pt-2{padding-top:.125rem}.pr-2{padding-right:.125rem}.pb-2{padding-bottom:.125rem}.pl-2,.px-2{padding-left:.125rem}.px-2{padding-right:.125rem}.py-2{padding-top:.125rem;padding-bottom:.125rem}.m-2{margin:.125rem}.mt-2{margin-top:.125rem}.mr-2{margin-right:.125rem}.mb-2{margin-bottom:.125rem}.ml-2,.mx-2{margin-left:.125rem}.mx-2{margin-right:.125rem}.my-2{margin-top:.125rem;margin-bottom:.125rem}.p-4{padding:.25rem}.pt-4{padding-top:.25rem}.pr-4{padding-right:.25rem}.pb-4{padding-bottom:.25rem}.pl-4,.px-4{padding-left:.25rem}.px-4{padding-right:.25rem}.py-4{padding-top:.25rem;padding-bottom:.25rem}.m-4{margin:.25rem}.mt-4{margin-top:.25rem}.mr-4{margin-right:.25rem}.mb-4{margin-bottom:.25rem}.ml-4,.mx-4{margin-left:.25rem}.mx-4{margin-right:.25rem}.my-4{margin-top:.25rem;margin-bottom:.25rem}.p-8{padding:.5rem}.pt-8{padding-top:.5rem}.pr-8{padding-right:.5rem}.pb-8{padding-bottom:.5rem}.pl-8,.px-8{padding-left:.5rem}.px-8{padding-right:.5rem}.py-8{padding-top:.5rem;padding-bottom:.5rem}.m-8{margin:.5rem}.mt-8{margin-top:.5rem}.mr-8{margin-right:.5rem}.mb-8{margin-bottom:.5rem}.ml-8,.mx-8{margin-left:.5rem}.mx-8{margin-right:.5rem}.my-8{margin-top:.5rem;margin-bottom:.5rem}.p-12{padding:.75rem}.pt-12{padding-top:.75rem}.pr-12{padding-right:.75rem}.pb-12{padding-bottom:.75rem}.pl-12,.px-12{padding-left:.75rem}.px-12{padding-right:.75rem}.py-12{padding-top:.75rem;padding-bottom:.75rem}.m-12{margin:.75rem}.mt-12{margin-top:.75rem}.mr-12{margin-right:.75rem}.mb-12{margin-bottom:.75rem}.ml-12,.mx-12{margin-left:.75rem}.mx-12{margin-right:.75rem}.my-12{margin-top:.75rem;margin-bottom:.75rem}.p-16{padding:1rem}.pt-16{padding-top:1rem}.pr-16{padding-right:1rem}.pb-16{padding-bottom:1rem}.pl-16,.px-16{padding-left:1rem}.px-16{padding-right:1rem}.py-16{padding-top:1rem;padding-bottom:1rem}.m-16{margin:1rem}.mt-16{margin-top:1rem}.mr-16{margin-right:1rem}.mb-16{margin-bottom:1rem}.ml-16,.mx-16{margin-left:1rem}.mx-16{margin-right:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.p-20{padding:1.25rem}.pt-20{padding-top:1.25rem}.pr-20{padding-right:1.25rem}.pb-20{padding-bottom:1.25rem}.pl-20,.px-20{padding-left:1.25rem}.px-20{padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.m-20{margin:1.25rem}.mt-20{margin-top:1.25rem}.mr-20{margin-right:1.25rem}.mb-20{margin-bottom:1.25rem}.ml-20,.mx-20{margin-left:1.25rem}.mx-20{margin-right:1.25rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.p-24{padding:1.5rem}.pt-24{padding-top:1.5rem}.pr-24{padding-right:1.5rem}.pb-24{padding-bottom:1.5rem}.pl-24,.px-24{padding-left:1.5rem}.px-24{padding-right:1.5rem}.py-24{padding-top:1.5rem;padding-bottom:1.5rem}.m-24{margin:1.5rem}.mt-24{margin-top:1.5rem}.mr-24{margin-right:1.5rem}.mb-24{margin-bottom:1.5rem}.ml-24,.mx-24{margin-left:1.5rem}.mx-24{margin-right:1.5rem}.my-24{margin-top:1.5rem;margin-bottom:1.5rem}.p-36{padding:2.25rem}.pt-36{padding-top:2.25rem}.pr-36{padding-right:2.25rem}.pb-36{padding-bottom:2.25rem}.pl-36,.px-36{padding-left:2.25rem}.px-36{padding-right:2.25rem}.py-36{padding-top:2.25rem;padding-bottom:2.25rem}.m-36{margin:2.25rem}.mt-36{margin-top:2.25rem}.mr-36{margin-right:2.25rem}.mb-36{margin-bottom:2.25rem}.ml-36,.mx-36{margin-left:2.25rem}.mx-36{margin-right:2.25rem}.my-36{margin-top:2.25rem;margin-bottom:2.25rem}.p-auto{padding:auto}.pt-auto{padding-top:auto}.pr-auto{padding-right:auto}.pb-auto{padding-bottom:auto}.pl-auto,.px-auto{padding-left:auto}.px-auto{padding-right:auto}.py-auto{padding-top:auto;padding-bottom:auto}.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto,.mx-auto{margin-left:auto}.mx-auto{margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.gap-0{gap:0}.gap-x-0{column-gap:0}.gap-y-0{row-gap:0}.gap-5{gap:.313rem}.gap-x-5{column-gap:.313rem}.gap-y-5{row-gap:.313rem}.gap-10{gap:.625rem}.gap-x-10{column-gap:.625rem}.gap-y-10{row-gap:.625rem}.gap-16{gap:1rem}.gap-x-16{column-gap:1rem}.gap-y-16{row-gap:1rem}.gap-20{gap:1.25rem}.gap-x-20{column-gap:1.25rem}.gap-y-20{row-gap:1.25rem}.gap-36{gap:2.25rem}.gap-x-36{column-gap:2.25rem}.gap-y-36{row-gap:2.25rem}.col-start-1{grid-column-start:1}.col-end-1{grid-column-end:1}.col-span-1{grid-column:span 1/span 1}.row-start-1{grid-row-start:1}.row-end-1{grid-row-end:1}.row-span-1{grid-row:span 1/span 1}.col-start-2{grid-column-start:2}.col-end-2{grid-column-end:2}.col-span-2{grid-column:span 2/span 2}.row-start-2{grid-row-start:2}.row-end-2{grid-row-end:2}.row-span-2{grid-row:span 2/span 2}.col-start-3{grid-column-start:3}.col-end-3{grid-column-end:3}.col-span-3{grid-column:span 3/span 3}.row-start-3{grid-row-start:3}.row-end-3{grid-row-end:3}.row-span-3{grid-row:span 3/span 3}.col-start-4{grid-column-start:4}.col-end-4{grid-column-end:4}.col-span-4{grid-column:span 4/span 4}.row-start-4{grid-row-start:4}.row-end-4{grid-row-end:4}.row-span-4{grid-row:span 4/span 4}.col-start-5{grid-column-start:5}.col-end-5{grid-column-end:5}.col-span-5{grid-column:span 5/span 5}.row-start-5{grid-row-start:5}.row-end-5{grid-row-end:5}.row-span-5{grid-row:span 5/span 5}.col-start-6{grid-column-start:6}.col-end-6{grid-column-end:6}.col-span-6{grid-column:span 6/span 6}.col-span-full{grid-column:1/-1}.row-start-6{grid-row-start:6}.row-end-6{grid-row-end:6}.row-span-6{grid-row:span 6/span 6}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media print{*{background:transparent!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,label,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}}@media (min-width:576px){.layout-maxed{grid-template-columns:minmax(.75rem,1fr) minmax(auto,576px) minmax(.75rem,1fr)}.sm\:hidden{display:none}.sm\:block{display:block}.sm\:inline{display:inline}.sm\:inline-block{display:inline-block}.sm\:flex{display:flex}.sm\:flex-row{flex-direction:row}.sm\:flex-col{flex-direction:column}.sm\:flex-wrap{flex-wrap:wrap}.sm\:flex-no-wrap{flex-wrap:nowrap}.sm\:flex-shrink{flex-shrink:1}.sm\:flex-no-shrink{flex-shrink:0}.sm\:flex-grow{flex-grow:1}.sm\:flex-no-grow{flex-grow:0}.sm\:float-left{float:left}.sm\:float-right{float:right}.sm\:float-none{float:none}.sm\:text-bold{font-weight:700}.sm\:text-italic{font-style:italic}.sm\:text-uppercase{text-transform:uppercase}.sm\:text-lowercase{text-transform:lowercase}.sm\:text-smaller{font-size:smaller}.sm\:text-larger{font-size:larger}.sm\:text-left{text-align:left}.sm\:text-center{text-align:center}.sm\:text-right{text-align:right}.sm\:text-justify{text-align:justify}.sm\:text-wrap{overflow-wrap:break-word}.sm\:justify-start{justify-content:flex-start}.sm\:justify-end{justify-content:flex-end}.sm\:justify-center{justify-content:center}.sm\:justify-between{justify-content:space-between}.sm\:justify-around{justify-content:space-around}.sm\:justify-evenly{justify-content:space-evenly}.sm\:justify-items-start{justify-items:start}.sm\:justify-items-end{justify-items:end}.sm\:justify-items-center{justify-items:center}.sm\:align-start{align-content:start}.sm\:align-end{align-content:end}.sm\:align-center{align-content:center}.sm\:align-between{align-content:space-between}.sm\:align-around{align-content:space-around}.sm\:align-evenly{align-content:space-evenly}.sm\:align-items-start{align-items:flex-start}.sm\:align-items-end{align-items:flex-end}.sm\:align-items-center{align-items:center}.sm\:place-center{place-content:center}.sm\:justify-self-auto{justify-self:auto}.sm\:justify-self-start{justify-self:start}.sm\:justify-self-end{justify-self:end}.sm\:justify-self-center{justify-self:center}.sm\:justify-self-stretch{justify-self:stretch}.sm\:align-self-auto{align-self:auto}.sm\:align-self-start{align-self:flex-start}.sm\:align-self-end{align-self:flex-end}.sm\:align-self-center{align-self:center}.sm\:align-self-stretch{align-self:stretch}.sm\:align-top{vertical-align:top}.sm\:align-bottom{vertical-align:bottom}.sm\:align-middle{vertical-align:middle}.sm\:item-first{order:-100}.sm\:item-last{order:100}.sm\:visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.sm\:is-unstyled{list-style:none;padding-left:0}.sm\:is-disabled{opacity:.6;cursor:not-allowed!important;filter:grayscale(1)}.sm\:text-normal{font-weight:400;font-style:normal;text-transform:none}.sm\:text-10{font-size:.625rem}.sm\:text-11{font-size:.6875rem}.sm\:text-12{font-size:.75rem}.sm\:text-14{font-size:.875rem}.sm\:text-16{font-size:1rem}.sm\:text-18{font-size:1.125rem}.sm\:text-20{font-size:1.25rem}.sm\:text-24{font-size:1.5rem}.sm\:text-30{font-size:1.875rem}.sm\:text-36{font-size:2.25rem}.sm\:text-base{font-size:1rem}.sm\:text-inherit{font-size:inherit}.sm\:p-0{padding:0}.sm\:pt-0{padding-top:0}.sm\:pr-0{padding-right:0}.sm\:pb-0{padding-bottom:0}.sm\:pl-0,.sm\:px-0{padding-left:0}.sm\:px-0{padding-right:0}.sm\:py-0{padding-top:0;padding-bottom:0}.sm\:m-0{margin:0}.sm\:mt-0{margin-top:0}.sm\:mr-0{margin-right:0}.sm\:mb-0{margin-bottom:0}.sm\:ml-0,.sm\:mx-0{margin-left:0}.sm\:mx-0{margin-right:0}.sm\:my-0{margin-top:0;margin-bottom:0}.sm\:p-1{padding:1px}.sm\:pt-1{padding-top:1px}.sm\:pr-1{padding-right:1px}.sm\:pb-1{padding-bottom:1px}.sm\:pl-1,.sm\:px-1{padding-left:1px}.sm\:px-1{padding-right:1px}.sm\:py-1{padding-top:1px;padding-bottom:1px}.sm\:m-1{margin:1px}.sm\:mt-1{margin-top:1px}.sm\:mr-1{margin-right:1px}.sm\:mb-1{margin-bottom:1px}.sm\:ml-1,.sm\:mx-1{margin-left:1px}.sm\:mx-1{margin-right:1px}.sm\:my-1{margin-top:1px;margin-bottom:1px}.sm\:p-2{padding:.125rem}.sm\:pt-2{padding-top:.125rem}.sm\:pr-2{padding-right:.125rem}.sm\:pb-2{padding-bottom:.125rem}.sm\:pl-2,.sm\:px-2{padding-left:.125rem}.sm\:px-2{padding-right:.125rem}.sm\:py-2{padding-top:.125rem;padding-bottom:.125rem}.sm\:m-2{margin:.125rem}.sm\:mt-2{margin-top:.125rem}.sm\:mr-2{margin-right:.125rem}.sm\:mb-2{margin-bottom:.125rem}.sm\:ml-2,.sm\:mx-2{margin-left:.125rem}.sm\:mx-2{margin-right:.125rem}.sm\:my-2{margin-top:.125rem;margin-bottom:.125rem}.sm\:p-4{padding:.25rem}.sm\:pt-4{padding-top:.25rem}.sm\:pr-4{padding-right:.25rem}.sm\:pb-4{padding-bottom:.25rem}.sm\:pl-4,.sm\:px-4{padding-left:.25rem}.sm\:px-4{padding-right:.25rem}.sm\:py-4{padding-top:.25rem;padding-bottom:.25rem}.sm\:m-4{margin:.25rem}.sm\:mt-4{margin-top:.25rem}.sm\:mr-4{margin-right:.25rem}.sm\:mb-4{margin-bottom:.25rem}.sm\:ml-4,.sm\:mx-4{margin-left:.25rem}.sm\:mx-4{margin-right:.25rem}.sm\:my-4{margin-top:.25rem;margin-bottom:.25rem}.sm\:p-8{padding:.5rem}.sm\:pt-8{padding-top:.5rem}.sm\:pr-8{padding-right:.5rem}.sm\:pb-8{padding-bottom:.5rem}.sm\:pl-8,.sm\:px-8{padding-left:.5rem}.sm\:px-8{padding-right:.5rem}.sm\:py-8{padding-top:.5rem;padding-bottom:.5rem}.sm\:m-8{margin:.5rem}.sm\:mt-8{margin-top:.5rem}.sm\:mr-8{margin-right:.5rem}.sm\:mb-8{margin-bottom:.5rem}.sm\:ml-8,.sm\:mx-8{margin-left:.5rem}.sm\:mx-8{margin-right:.5rem}.sm\:my-8{margin-top:.5rem;margin-bottom:.5rem}.sm\:p-12{padding:.75rem}.sm\:pt-12{padding-top:.75rem}.sm\:pr-12{padding-right:.75rem}.sm\:pb-12{padding-bottom:.75rem}.sm\:pl-12,.sm\:px-12{padding-left:.75rem}.sm\:px-12{padding-right:.75rem}.sm\:py-12{padding-top:.75rem;padding-bottom:.75rem}.sm\:m-12{margin:.75rem}.sm\:mt-12{margin-top:.75rem}.sm\:mr-12{margin-right:.75rem}.sm\:mb-12{margin-bottom:.75rem}.sm\:ml-12,.sm\:mx-12{margin-left:.75rem}.sm\:mx-12{margin-right:.75rem}.sm\:my-12{margin-top:.75rem;margin-bottom:.75rem}.sm\:p-16{padding:1rem}.sm\:pt-16{padding-top:1rem}.sm\:pr-16{padding-right:1rem}.sm\:pb-16{padding-bottom:1rem}.sm\:pl-16,.sm\:px-16{padding-left:1rem}.sm\:px-16{padding-right:1rem}.sm\:py-16{padding-top:1rem;padding-bottom:1rem}.sm\:m-16{margin:1rem}.sm\:mt-16{margin-top:1rem}.sm\:mr-16{margin-right:1rem}.sm\:mb-16{margin-bottom:1rem}.sm\:ml-16,.sm\:mx-16{margin-left:1rem}.sm\:mx-16{margin-right:1rem}.sm\:my-16{margin-top:1rem;margin-bottom:1rem}.sm\:p-20{padding:1.25rem}.sm\:pt-20{padding-top:1.25rem}.sm\:pr-20{padding-right:1.25rem}.sm\:pb-20{padding-bottom:1.25rem}.sm\:pl-20,.sm\:px-20{padding-left:1.25rem}.sm\:px-20{padding-right:1.25rem}.sm\:py-20{padding-top:1.25rem;padding-bottom:1.25rem}.sm\:m-20{margin:1.25rem}.sm\:mt-20{margin-top:1.25rem}.sm\:mr-20{margin-right:1.25rem}.sm\:mb-20{margin-bottom:1.25rem}.sm\:ml-20,.sm\:mx-20{margin-left:1.25rem}.sm\:mx-20{margin-right:1.25rem}.sm\:my-20{margin-top:1.25rem;margin-bottom:1.25rem}.sm\:p-24{padding:1.5rem}.sm\:pt-24{padding-top:1.5rem}.sm\:pr-24{padding-right:1.5rem}.sm\:pb-24{padding-bottom:1.5rem}.sm\:pl-24,.sm\:px-24{padding-left:1.5rem}.sm\:px-24{padding-right:1.5rem}.sm\:py-24{padding-top:1.5rem;padding-bottom:1.5rem}.sm\:m-24{margin:1.5rem}.sm\:mt-24{margin-top:1.5rem}.sm\:mr-24{margin-right:1.5rem}.sm\:mb-24{margin-bottom:1.5rem}.sm\:ml-24,.sm\:mx-24{margin-left:1.5rem}.sm\:mx-24{margin-right:1.5rem}.sm\:my-24{margin-top:1.5rem;margin-bottom:1.5rem}.sm\:p-36{padding:2.25rem}.sm\:pt-36{padding-top:2.25rem}.sm\:pr-36{padding-right:2.25rem}.sm\:pb-36{padding-bottom:2.25rem}.sm\:pl-36,.sm\:px-36{padding-left:2.25rem}.sm\:px-36{padding-right:2.25rem}.sm\:py-36{padding-top:2.25rem;padding-bottom:2.25rem}.sm\:m-36{margin:2.25rem}.sm\:mt-36{margin-top:2.25rem}.sm\:mr-36{margin-right:2.25rem}.sm\:mb-36{margin-bottom:2.25rem}.sm\:ml-36,.sm\:mx-36{margin-left:2.25rem}.sm\:mx-36{margin-right:2.25rem}.sm\:my-36{margin-top:2.25rem;margin-bottom:2.25rem}.sm\:p-auto{padding:auto}.sm\:pt-auto{padding-top:auto}.sm\:pr-auto{padding-right:auto}.sm\:pb-auto{padding-bottom:auto}.sm\:pl-auto,.sm\:px-auto{padding-left:auto}.sm\:px-auto{padding-right:auto}.sm\:py-auto{padding-top:auto;padding-bottom:auto}.sm\:m-auto{margin:auto}.sm\:mt-auto{margin-top:auto}.sm\:mr-auto{margin-right:auto}.sm\:mb-auto{margin-bottom:auto}.sm\:ml-auto,.sm\:mx-auto{margin-left:auto}.sm\:mx-auto{margin-right:auto}.sm\:my-auto{margin-top:auto;margin-bottom:auto}.sm\:grid{display:grid}.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:gap-0{gap:0}.sm\:gap-x-0{column-gap:0}.sm\:gap-y-0{row-gap:0}.sm\:gap-5{gap:.313rem}.sm\:gap-x-5{column-gap:.313rem}.sm\:gap-y-5{row-gap:.313rem}.sm\:gap-10{gap:.625rem}.sm\:gap-x-10{column-gap:.625rem}.sm\:gap-y-10{row-gap:.625rem}.sm\:gap-16{gap:1rem}.sm\:gap-x-16{column-gap:1rem}.sm\:gap-y-16{row-gap:1rem}.sm\:gap-20{gap:1.25rem}.sm\:gap-x-20{column-gap:1.25rem}.sm\:gap-y-20{row-gap:1.25rem}.sm\:gap-36{gap:2.25rem}.sm\:gap-x-36{column-gap:2.25rem}.sm\:gap-y-36{row-gap:2.25rem}.sm\:col-start-1{grid-column-start:1}.sm\:col-end-1{grid-column-end:1}.sm\:col-span-1{grid-column:span 1/span 1}.sm\:row-start-1{grid-row-start:1}.sm\:row-end-1{grid-row-end:1}.sm\:row-span-1{grid-row:span 1/span 1}.sm\:col-start-2{grid-column-start:2}.sm\:col-end-2{grid-column-end:2}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:row-start-2{grid-row-start:2}.sm\:row-end-2{grid-row-end:2}.sm\:row-span-2{grid-row:span 2/span 2}.sm\:col-start-3{grid-column-start:3}.sm\:col-end-3{grid-column-end:3}.sm\:col-span-3{grid-column:span 3/span 3}.sm\:row-start-3{grid-row-start:3}.sm\:row-end-3{grid-row-end:3}.sm\:row-span-3{grid-row:span 3/span 3}.sm\:col-start-4{grid-column-start:4}.sm\:col-end-4{grid-column-end:4}.sm\:col-span-4{grid-column:span 4/span 4}.sm\:row-start-4{grid-row-start:4}.sm\:row-end-4{grid-row-end:4}.sm\:row-span-4{grid-row:span 4/span 4}.sm\:col-start-5{grid-column-start:5}.sm\:col-end-5{grid-column-end:5}.sm\:col-span-5{grid-column:span 5/span 5}.sm\:row-start-5{grid-row-start:5}.sm\:row-end-5{grid-row-end:5}.sm\:row-span-5{grid-row:span 5/span 5}.sm\:col-start-6{grid-column-start:6}.sm\:col-end-6{grid-column-end:6}.sm\:col-span-6{grid-column:span 6/span 6}.sm\:col-span-full{grid-column:1/-1}.sm\:row-start-6{grid-row-start:6}.sm\:row-end-6{grid-row-end:6}.sm\:row-span-6{grid-row:span 6/span 6}}@media (min-width:992px){.layout-maxed{grid-template-columns:minmax(.75rem,1fr) minmax(auto,992px) minmax(.75rem,1fr)}.md\:hidden{display:none}.md\:block{display:block}.md\:inline{display:inline}.md\:inline-block{display:inline-block}.md\:flex{display:flex}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:flex-wrap{flex-wrap:wrap}.md\:flex-no-wrap{flex-wrap:nowrap}.md\:flex-shrink{flex-shrink:1}.md\:flex-no-shrink{flex-shrink:0}.md\:flex-grow{flex-grow:1}.md\:flex-no-grow{flex-grow:0}.md\:float-left{float:left}.md\:float-right{float:right}.md\:float-none{float:none}.md\:text-bold{font-weight:700}.md\:text-italic{font-style:italic}.md\:text-uppercase{text-transform:uppercase}.md\:text-lowercase{text-transform:lowercase}.md\:text-smaller{font-size:smaller}.md\:text-larger{font-size:larger}.md\:text-left{text-align:left}.md\:text-center{text-align:center}.md\:text-right{text-align:right}.md\:text-justify{text-align:justify}.md\:text-wrap{overflow-wrap:break-word}.md\:justify-start{justify-content:flex-start}.md\:justify-end{justify-content:flex-end}.md\:justify-center{justify-content:center}.md\:justify-between{justify-content:space-between}.md\:justify-around{justify-content:space-around}.md\:justify-evenly{justify-content:space-evenly}.md\:justify-items-start{justify-items:start}.md\:justify-items-end{justify-items:end}.md\:justify-items-center{justify-items:center}.md\:align-start{align-content:start}.md\:align-end{align-content:end}.md\:align-center{align-content:center}.md\:align-between{align-content:space-between}.md\:align-around{align-content:space-around}.md\:align-evenly{align-content:space-evenly}.md\:align-items-start{align-items:flex-start}.md\:align-items-end{align-items:flex-end}.md\:align-items-center{align-items:center}.md\:place-center{place-content:center}.md\:justify-self-auto{justify-self:auto}.md\:justify-self-start{justify-self:start}.md\:justify-self-end{justify-self:end}.md\:justify-self-center{justify-self:center}.md\:justify-self-stretch{justify-self:stretch}.md\:align-self-auto{align-self:auto}.md\:align-self-start{align-self:flex-start}.md\:align-self-end{align-self:flex-end}.md\:align-self-center{align-self:center}.md\:align-self-stretch{align-self:stretch}.md\:align-top{vertical-align:top}.md\:align-bottom{vertical-align:bottom}.md\:align-middle{vertical-align:middle}.md\:item-first{order:-100}.md\:item-last{order:100}.md\:visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.md\:is-unstyled{list-style:none;padding-left:0}.md\:is-disabled{opacity:.6;cursor:not-allowed!important;filter:grayscale(1)}.md\:text-normal{font-weight:400;font-style:normal;text-transform:none}.md\:text-10{font-size:.625rem}.md\:text-11{font-size:.6875rem}.md\:text-12{font-size:.75rem}.md\:text-14{font-size:.875rem}.md\:text-16{font-size:1rem}.md\:text-18{font-size:1.125rem}.md\:text-20{font-size:1.25rem}.md\:text-24{font-size:1.5rem}.md\:text-30{font-size:1.875rem}.md\:text-36{font-size:2.25rem}.md\:text-base{font-size:1rem}.md\:text-inherit{font-size:inherit}.md\:p-0{padding:0}.md\:pt-0{padding-top:0}.md\:pr-0{padding-right:0}.md\:pb-0{padding-bottom:0}.md\:pl-0,.md\:px-0{padding-left:0}.md\:px-0{padding-right:0}.md\:py-0{padding-top:0;padding-bottom:0}.md\:m-0{margin:0}.md\:mt-0{margin-top:0}.md\:mr-0{margin-right:0}.md\:mb-0{margin-bottom:0}.md\:ml-0,.md\:mx-0{margin-left:0}.md\:mx-0{margin-right:0}.md\:my-0{margin-top:0;margin-bottom:0}.md\:p-1{padding:1px}.md\:pt-1{padding-top:1px}.md\:pr-1{padding-right:1px}.md\:pb-1{padding-bottom:1px}.md\:pl-1,.md\:px-1{padding-left:1px}.md\:px-1{padding-right:1px}.md\:py-1{padding-top:1px;padding-bottom:1px}.md\:m-1{margin:1px}.md\:mt-1{margin-top:1px}.md\:mr-1{margin-right:1px}.md\:mb-1{margin-bottom:1px}.md\:ml-1,.md\:mx-1{margin-left:1px}.md\:mx-1{margin-right:1px}.md\:my-1{margin-top:1px;margin-bottom:1px}.md\:p-2{padding:.125rem}.md\:pt-2{padding-top:.125rem}.md\:pr-2{padding-right:.125rem}.md\:pb-2{padding-bottom:.125rem}.md\:pl-2,.md\:px-2{padding-left:.125rem}.md\:px-2{padding-right:.125rem}.md\:py-2{padding-top:.125rem;padding-bottom:.125rem}.md\:m-2{margin:.125rem}.md\:mt-2{margin-top:.125rem}.md\:mr-2{margin-right:.125rem}.md\:mb-2{margin-bottom:.125rem}.md\:ml-2,.md\:mx-2{margin-left:.125rem}.md\:mx-2{margin-right:.125rem}.md\:my-2{margin-top:.125rem;margin-bottom:.125rem}.md\:p-4{padding:.25rem}.md\:pt-4{padding-top:.25rem}.md\:pr-4{padding-right:.25rem}.md\:pb-4{padding-bottom:.25rem}.md\:pl-4,.md\:px-4{padding-left:.25rem}.md\:px-4{padding-right:.25rem}.md\:py-4{padding-top:.25rem;padding-bottom:.25rem}.md\:m-4{margin:.25rem}.md\:mt-4{margin-top:.25rem}.md\:mr-4{margin-right:.25rem}.md\:mb-4{margin-bottom:.25rem}.md\:ml-4,.md\:mx-4{margin-left:.25rem}.md\:mx-4{margin-right:.25rem}.md\:my-4{margin-top:.25rem;margin-bottom:.25rem}.md\:p-8{padding:.5rem}.md\:pt-8{padding-top:.5rem}.md\:pr-8{padding-right:.5rem}.md\:pb-8{padding-bottom:.5rem}.md\:pl-8,.md\:px-8{padding-left:.5rem}.md\:px-8{padding-right:.5rem}.md\:py-8{padding-top:.5rem;padding-bottom:.5rem}.md\:m-8{margin:.5rem}.md\:mt-8{margin-top:.5rem}.md\:mr-8{margin-right:.5rem}.md\:mb-8{margin-bottom:.5rem}.md\:ml-8,.md\:mx-8{margin-left:.5rem}.md\:mx-8{margin-right:.5rem}.md\:my-8{margin-top:.5rem;margin-bottom:.5rem}.md\:p-12{padding:.75rem}.md\:pt-12{padding-top:.75rem}.md\:pr-12{padding-right:.75rem}.md\:pb-12{padding-bottom:.75rem}.md\:pl-12,.md\:px-12{padding-left:.75rem}.md\:px-12{padding-right:.75rem}.md\:py-12{padding-top:.75rem;padding-bottom:.75rem}.md\:m-12{margin:.75rem}.md\:mt-12{margin-top:.75rem}.md\:mr-12{margin-right:.75rem}.md\:mb-12{margin-bottom:.75rem}.md\:ml-12,.md\:mx-12{margin-left:.75rem}.md\:mx-12{margin-right:.75rem}.md\:my-12{margin-top:.75rem;margin-bottom:.75rem}.md\:p-16{padding:1rem}.md\:pt-16{padding-top:1rem}.md\:pr-16{padding-right:1rem}.md\:pb-16{padding-bottom:1rem}.md\:pl-16,.md\:px-16{padding-left:1rem}.md\:px-16{padding-right:1rem}.md\:py-16{padding-top:1rem;padding-bottom:1rem}.md\:m-16{margin:1rem}.md\:mt-16{margin-top:1rem}.md\:mr-16{margin-right:1rem}.md\:mb-16{margin-bottom:1rem}.md\:ml-16,.md\:mx-16{margin-left:1rem}.md\:mx-16{margin-right:1rem}.md\:my-16{margin-top:1rem;margin-bottom:1rem}.md\:p-20{padding:1.25rem}.md\:pt-20{padding-top:1.25rem}.md\:pr-20{padding-right:1.25rem}.md\:pb-20{padding-bottom:1.25rem}.md\:pl-20,.md\:px-20{padding-left:1.25rem}.md\:px-20{padding-right:1.25rem}.md\:py-20{padding-top:1.25rem;padding-bottom:1.25rem}.md\:m-20{margin:1.25rem}.md\:mt-20{margin-top:1.25rem}.md\:mr-20{margin-right:1.25rem}.md\:mb-20{margin-bottom:1.25rem}.md\:ml-20,.md\:mx-20{margin-left:1.25rem}.md\:mx-20{margin-right:1.25rem}.md\:my-20{margin-top:1.25rem;margin-bottom:1.25rem}.md\:p-24{padding:1.5rem}.md\:pt-24{padding-top:1.5rem}.md\:pr-24{padding-right:1.5rem}.md\:pb-24{padding-bottom:1.5rem}.md\:pl-24,.md\:px-24{padding-left:1.5rem}.md\:px-24{padding-right:1.5rem}.md\:py-24{padding-top:1.5rem;padding-bottom:1.5rem}.md\:m-24{margin:1.5rem}.md\:mt-24{margin-top:1.5rem}.md\:mr-24{margin-right:1.5rem}.md\:mb-24{margin-bottom:1.5rem}.md\:ml-24,.md\:mx-24{margin-left:1.5rem}.md\:mx-24{margin-right:1.5rem}.md\:my-24{margin-top:1.5rem;margin-bottom:1.5rem}.md\:p-36{padding:2.25rem}.md\:pt-36{padding-top:2.25rem}.md\:pr-36{padding-right:2.25rem}.md\:pb-36{padding-bottom:2.25rem}.md\:pl-36,.md\:px-36{padding-left:2.25rem}.md\:px-36{padding-right:2.25rem}.md\:py-36{padding-top:2.25rem;padding-bottom:2.25rem}.md\:m-36{margin:2.25rem}.md\:mt-36{margin-top:2.25rem}.md\:mr-36{margin-right:2.25rem}.md\:mb-36{margin-bottom:2.25rem}.md\:ml-36,.md\:mx-36{margin-left:2.25rem}.md\:mx-36{margin-right:2.25rem}.md\:my-36{margin-top:2.25rem;margin-bottom:2.25rem}.md\:p-auto{padding:auto}.md\:pt-auto{padding-top:auto}.md\:pr-auto{padding-right:auto}.md\:pb-auto{padding-bottom:auto}.md\:pl-auto,.md\:px-auto{padding-left:auto}.md\:px-auto{padding-right:auto}.md\:py-auto{padding-top:auto;padding-bottom:auto}.md\:m-auto{margin:auto}.md\:mt-auto{margin-top:auto}.md\:mr-auto{margin-right:auto}.md\:mb-auto{margin-bottom:auto}.md\:ml-auto,.md\:mx-auto{margin-left:auto}.md\:mx-auto{margin-right:auto}.md\:my-auto{margin-top:auto;margin-bottom:auto}.md\:grid{display:grid}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:gap-0{gap:0}.md\:gap-x-0{column-gap:0}.md\:gap-y-0{row-gap:0}.md\:gap-5{gap:.313rem}.md\:gap-x-5{column-gap:.313rem}.md\:gap-y-5{row-gap:.313rem}.md\:gap-10{gap:.625rem}.md\:gap-x-10{column-gap:.625rem}.md\:gap-y-10{row-gap:.625rem}.md\:gap-16{gap:1rem}.md\:gap-x-16{column-gap:1rem}.md\:gap-y-16{row-gap:1rem}.md\:gap-20{gap:1.25rem}.md\:gap-x-20{column-gap:1.25rem}.md\:gap-y-20{row-gap:1.25rem}.md\:gap-36{gap:2.25rem}.md\:gap-x-36{column-gap:2.25rem}.md\:gap-y-36{row-gap:2.25rem}.md\:col-start-1{grid-column-start:1}.md\:col-end-1{grid-column-end:1}.md\:col-span-1{grid-column:span 1/span 1}.md\:row-start-1{grid-row-start:1}.md\:row-end-1{grid-row-end:1}.md\:row-span-1{grid-row:span 1/span 1}.md\:col-start-2{grid-column-start:2}.md\:col-end-2{grid-column-end:2}.md\:col-span-2{grid-column:span 2/span 2}.md\:row-start-2{grid-row-start:2}.md\:row-end-2{grid-row-end:2}.md\:row-span-2{grid-row:span 2/span 2}.md\:col-start-3{grid-column-start:3}.md\:col-end-3{grid-column-end:3}.md\:col-span-3{grid-column:span 3/span 3}.md\:row-start-3{grid-row-start:3}.md\:row-end-3{grid-row-end:3}.md\:row-span-3{grid-row:span 3/span 3}.md\:col-start-4{grid-column-start:4}.md\:col-end-4{grid-column-end:4}.md\:col-span-4{grid-column:span 4/span 4}.md\:row-start-4{grid-row-start:4}.md\:row-end-4{grid-row-end:4}.md\:row-span-4{grid-row:span 4/span 4}.md\:col-start-5{grid-column-start:5}.md\:col-end-5{grid-column-end:5}.md\:col-span-5{grid-column:span 5/span 5}.md\:row-start-5{grid-row-start:5}.md\:row-end-5{grid-row-end:5}.md\:row-span-5{grid-row:span 5/span 5}.md\:col-start-6{grid-column-start:6}.md\:col-end-6{grid-column-end:6}.md\:col-span-6{grid-column:span 6/span 6}.md\:col-span-full{grid-column:1/-1}.md\:row-start-6{grid-row-start:6}.md\:row-end-6{grid-row-end:6}.md\:row-span-6{grid-row:span 6/span 6}}@media (min-width:1400px){.layout-maxed{grid-template-columns:minmax(.75rem,1fr) minmax(auto,1400px) minmax(.75rem,1fr)}.lg\:hidden{display:none}.lg\:block{display:block}.lg\:inline{display:inline}.lg\:inline-block{display:inline-block}.lg\:flex{display:flex}.lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}.lg\:flex-wrap{flex-wrap:wrap}.lg\:flex-no-wrap{flex-wrap:nowrap}.lg\:flex-shrink{flex-shrink:1}.lg\:flex-no-shrink{flex-shrink:0}.lg\:flex-grow{flex-grow:1}.lg\:flex-no-grow{flex-grow:0}.lg\:float-left{float:left}.lg\:float-right{float:right}.lg\:float-none{float:none}.lg\:text-bold{font-weight:700}.lg\:text-italic{font-style:italic}.lg\:text-uppercase{text-transform:uppercase}.lg\:text-lowercase{text-transform:lowercase}.lg\:text-smaller{font-size:smaller}.lg\:text-larger{font-size:larger}.lg\:text-left{text-align:left}.lg\:text-center{text-align:center}.lg\:text-right{text-align:right}.lg\:text-justify{text-align:justify}.lg\:text-wrap{overflow-wrap:break-word}.lg\:justify-start{justify-content:flex-start}.lg\:justify-end{justify-content:flex-end}.lg\:justify-center{justify-content:center}.lg\:justify-between{justify-content:space-between}.lg\:justify-around{justify-content:space-around}.lg\:justify-evenly{justify-content:space-evenly}.lg\:justify-items-start{justify-items:start}.lg\:justify-items-end{justify-items:end}.lg\:justify-items-center{justify-items:center}.lg\:align-start{align-content:start}.lg\:align-end{align-content:end}.lg\:align-center{align-content:center}.lg\:align-between{align-content:space-between}.lg\:align-around{align-content:space-around}.lg\:align-evenly{align-content:space-evenly}.lg\:align-items-start{align-items:flex-start}.lg\:align-items-end{align-items:flex-end}.lg\:align-items-center{align-items:center}.lg\:place-center{place-content:center}.lg\:justify-self-auto{justify-self:auto}.lg\:justify-self-start{justify-self:start}.lg\:justify-self-end{justify-self:end}.lg\:justify-self-center{justify-self:center}.lg\:justify-self-stretch{justify-self:stretch}.lg\:align-self-auto{align-self:auto}.lg\:align-self-start{align-self:flex-start}.lg\:align-self-end{align-self:flex-end}.lg\:align-self-center{align-self:center}.lg\:align-self-stretch{align-self:stretch}.lg\:align-top{vertical-align:top}.lg\:align-bottom{vertical-align:bottom}.lg\:align-middle{vertical-align:middle}.lg\:item-first{order:-100}.lg\:item-last{order:100}.lg\:visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.lg\:is-unstyled{list-style:none;padding-left:0}.lg\:is-disabled{opacity:.6;cursor:not-allowed!important;filter:grayscale(1)}.lg\:text-normal{font-weight:400;font-style:normal;text-transform:none}.lg\:text-10{font-size:.625rem}.lg\:text-11{font-size:.6875rem}.lg\:text-12{font-size:.75rem}.lg\:text-14{font-size:.875rem}.lg\:text-16{font-size:1rem}.lg\:text-18{font-size:1.125rem}.lg\:text-20{font-size:1.25rem}.lg\:text-24{font-size:1.5rem}.lg\:text-30{font-size:1.875rem}.lg\:text-36{font-size:2.25rem}.lg\:text-base{font-size:1rem}.lg\:text-inherit{font-size:inherit}.lg\:p-0{padding:0}.lg\:pt-0{padding-top:0}.lg\:pr-0{padding-right:0}.lg\:pb-0{padding-bottom:0}.lg\:pl-0,.lg\:px-0{padding-left:0}.lg\:px-0{padding-right:0}.lg\:py-0{padding-top:0;padding-bottom:0}.lg\:m-0{margin:0}.lg\:mt-0{margin-top:0}.lg\:mr-0{margin-right:0}.lg\:mb-0{margin-bottom:0}.lg\:ml-0,.lg\:mx-0{margin-left:0}.lg\:mx-0{margin-right:0}.lg\:my-0{margin-top:0;margin-bottom:0}.lg\:p-1{padding:1px}.lg\:pt-1{padding-top:1px}.lg\:pr-1{padding-right:1px}.lg\:pb-1{padding-bottom:1px}.lg\:pl-1,.lg\:px-1{padding-left:1px}.lg\:px-1{padding-right:1px}.lg\:py-1{padding-top:1px;padding-bottom:1px}.lg\:m-1{margin:1px}.lg\:mt-1{margin-top:1px}.lg\:mr-1{margin-right:1px}.lg\:mb-1{margin-bottom:1px}.lg\:ml-1,.lg\:mx-1{margin-left:1px}.lg\:mx-1{margin-right:1px}.lg\:my-1{margin-top:1px;margin-bottom:1px}.lg\:p-2{padding:.125rem}.lg\:pt-2{padding-top:.125rem}.lg\:pr-2{padding-right:.125rem}.lg\:pb-2{padding-bottom:.125rem}.lg\:pl-2,.lg\:px-2{padding-left:.125rem}.lg\:px-2{padding-right:.125rem}.lg\:py-2{padding-top:.125rem;padding-bottom:.125rem}.lg\:m-2{margin:.125rem}.lg\:mt-2{margin-top:.125rem}.lg\:mr-2{margin-right:.125rem}.lg\:mb-2{margin-bottom:.125rem}.lg\:ml-2,.lg\:mx-2{margin-left:.125rem}.lg\:mx-2{margin-right:.125rem}.lg\:my-2{margin-top:.125rem;margin-bottom:.125rem}.lg\:p-4{padding:.25rem}.lg\:pt-4{padding-top:.25rem}.lg\:pr-4{padding-right:.25rem}.lg\:pb-4{padding-bottom:.25rem}.lg\:pl-4,.lg\:px-4{padding-left:.25rem}.lg\:px-4{padding-right:.25rem}.lg\:py-4{padding-top:.25rem;padding-bottom:.25rem}.lg\:m-4{margin:.25rem}.lg\:mt-4{margin-top:.25rem}.lg\:mr-4{margin-right:.25rem}.lg\:mb-4{margin-bottom:.25rem}.lg\:ml-4,.lg\:mx-4{margin-left:.25rem}.lg\:mx-4{margin-right:.25rem}.lg\:my-4{margin-top:.25rem;margin-bottom:.25rem}.lg\:p-8{padding:.5rem}.lg\:pt-8{padding-top:.5rem}.lg\:pr-8{padding-right:.5rem}.lg\:pb-8{padding-bottom:.5rem}.lg\:pl-8,.lg\:px-8{padding-left:.5rem}.lg\:px-8{padding-right:.5rem}.lg\:py-8{padding-top:.5rem;padding-bottom:.5rem}.lg\:m-8{margin:.5rem}.lg\:mt-8{margin-top:.5rem}.lg\:mr-8{margin-right:.5rem}.lg\:mb-8{margin-bottom:.5rem}.lg\:ml-8,.lg\:mx-8{margin-left:.5rem}.lg\:mx-8{margin-right:.5rem}.lg\:my-8{margin-top:.5rem;margin-bottom:.5rem}.lg\:p-12{padding:.75rem}.lg\:pt-12{padding-top:.75rem}.lg\:pr-12{padding-right:.75rem}.lg\:pb-12{padding-bottom:.75rem}.lg\:pl-12,.lg\:px-12{padding-left:.75rem}.lg\:px-12{padding-right:.75rem}.lg\:py-12{padding-top:.75rem;padding-bottom:.75rem}.lg\:m-12{margin:.75rem}.lg\:mt-12{margin-top:.75rem}.lg\:mr-12{margin-right:.75rem}.lg\:mb-12{margin-bottom:.75rem}.lg\:ml-12,.lg\:mx-12{margin-left:.75rem}.lg\:mx-12{margin-right:.75rem}.lg\:my-12{margin-top:.75rem;margin-bottom:.75rem}.lg\:p-16{padding:1rem}.lg\:pt-16{padding-top:1rem}.lg\:pr-16{padding-right:1rem}.lg\:pb-16{padding-bottom:1rem}.lg\:pl-16,.lg\:px-16{padding-left:1rem}.lg\:px-16{padding-right:1rem}.lg\:py-16{padding-top:1rem;padding-bottom:1rem}.lg\:m-16{margin:1rem}.lg\:mt-16{margin-top:1rem}.lg\:mr-16{margin-right:1rem}.lg\:mb-16{margin-bottom:1rem}.lg\:ml-16,.lg\:mx-16{margin-left:1rem}.lg\:mx-16{margin-right:1rem}.lg\:my-16{margin-top:1rem;margin-bottom:1rem}.lg\:p-20{padding:1.25rem}.lg\:pt-20{padding-top:1.25rem}.lg\:pr-20{padding-right:1.25rem}.lg\:pb-20{padding-bottom:1.25rem}.lg\:pl-20,.lg\:px-20{padding-left:1.25rem}.lg\:px-20{padding-right:1.25rem}.lg\:py-20{padding-top:1.25rem;padding-bottom:1.25rem}.lg\:m-20{margin:1.25rem}.lg\:mt-20{margin-top:1.25rem}.lg\:mr-20{margin-right:1.25rem}.lg\:mb-20{margin-bottom:1.25rem}.lg\:ml-20,.lg\:mx-20{margin-left:1.25rem}.lg\:mx-20{margin-right:1.25rem}.lg\:my-20{margin-top:1.25rem;margin-bottom:1.25rem}.lg\:p-24{padding:1.5rem}.lg\:pt-24{padding-top:1.5rem}.lg\:pr-24{padding-right:1.5rem}.lg\:pb-24{padding-bottom:1.5rem}.lg\:pl-24,.lg\:px-24{padding-left:1.5rem}.lg\:px-24{padding-right:1.5rem}.lg\:py-24{padding-top:1.5rem;padding-bottom:1.5rem}.lg\:m-24{margin:1.5rem}.lg\:mt-24{margin-top:1.5rem}.lg\:mr-24{margin-right:1.5rem}.lg\:mb-24{margin-bottom:1.5rem}.lg\:ml-24,.lg\:mx-24{margin-left:1.5rem}.lg\:mx-24{margin-right:1.5rem}.lg\:my-24{margin-top:1.5rem;margin-bottom:1.5rem}.lg\:p-36{padding:2.25rem}.lg\:pt-36{padding-top:2.25rem}.lg\:pr-36{padding-right:2.25rem}.lg\:pb-36{padding-bottom:2.25rem}.lg\:pl-36,.lg\:px-36{padding-left:2.25rem}.lg\:px-36{padding-right:2.25rem}.lg\:py-36{padding-top:2.25rem;padding-bottom:2.25rem}.lg\:m-36{margin:2.25rem}.lg\:mt-36{margin-top:2.25rem}.lg\:mr-36{margin-right:2.25rem}.lg\:mb-36{margin-bottom:2.25rem}.lg\:ml-36,.lg\:mx-36{margin-left:2.25rem}.lg\:mx-36{margin-right:2.25rem}.lg\:my-36{margin-top:2.25rem;margin-bottom:2.25rem}.lg\:p-auto{padding:auto}.lg\:pt-auto{padding-top:auto}.lg\:pr-auto{padding-right:auto}.lg\:pb-auto{padding-bottom:auto}.lg\:pl-auto,.lg\:px-auto{padding-left:auto}.lg\:px-auto{padding-right:auto}.lg\:py-auto{padding-top:auto;padding-bottom:auto}.lg\:m-auto{margin:auto}.lg\:mt-auto{margin-top:auto}.lg\:mr-auto{margin-right:auto}.lg\:mb-auto{margin-bottom:auto}.lg\:ml-auto,.lg\:mx-auto{margin-left:auto}.lg\:mx-auto{margin-right:auto}.lg\:my-auto{margin-top:auto;margin-bottom:auto}.lg\:grid{display:grid}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:gap-0{gap:0}.lg\:gap-x-0{column-gap:0}.lg\:gap-y-0{row-gap:0}.lg\:gap-5{gap:.313rem}.lg\:gap-x-5{column-gap:.313rem}.lg\:gap-y-5{row-gap:.313rem}.lg\:gap-10{gap:.625rem}.lg\:gap-x-10{column-gap:.625rem}.lg\:gap-y-10{row-gap:.625rem}.lg\:gap-16{gap:1rem}.lg\:gap-x-16{column-gap:1rem}.lg\:gap-y-16{row-gap:1rem}.lg\:gap-20{gap:1.25rem}.lg\:gap-x-20{column-gap:1.25rem}.lg\:gap-y-20{row-gap:1.25rem}.lg\:gap-36{gap:2.25rem}.lg\:gap-x-36{column-gap:2.25rem}.lg\:gap-y-36{row-gap:2.25rem}.lg\:col-start-1{grid-column-start:1}.lg\:col-end-1{grid-column-end:1}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:row-start-1{grid-row-start:1}.lg\:row-end-1{grid-row-end:1}.lg\:row-span-1{grid-row:span 1/span 1}.lg\:col-start-2{grid-column-start:2}.lg\:col-end-2{grid-column-end:2}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:row-start-2{grid-row-start:2}.lg\:row-end-2{grid-row-end:2}.lg\:row-span-2{grid-row:span 2/span 2}.lg\:col-start-3{grid-column-start:3}.lg\:col-end-3{grid-column-end:3}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:row-start-3{grid-row-start:3}.lg\:row-end-3{grid-row-end:3}.lg\:row-span-3{grid-row:span 3/span 3}.lg\:col-start-4{grid-column-start:4}.lg\:col-end-4{grid-column-end:4}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:row-start-4{grid-row-start:4}.lg\:row-end-4{grid-row-end:4}.lg\:row-span-4{grid-row:span 4/span 4}.lg\:col-start-5{grid-column-start:5}.lg\:col-end-5{grid-column-end:5}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:row-start-5{grid-row-start:5}.lg\:row-end-5{grid-row-end:5}.lg\:row-span-5{grid-row:span 5/span 5}.lg\:col-start-6{grid-column-start:6}.lg\:col-end-6{grid-column-end:6}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-full{grid-column:1/-1}.lg\:row-start-6{grid-row-start:6}.lg\:row-end-6{grid-row-end:6}.lg\:row-span-6{grid-row:span 6/span 6}} \ No newline at end of file +/*! KNACSS Reborn: Just keep it simple! @author: Alsacreations v1.0.0 2020/11 Licence WTFPL http://www.wtfpl.net/ */*,:after,:before{box-sizing:border-box;min-width:0;min-height:0}html{font-size:62.5%;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overflow-wrap:break-word}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.5;background-color:#fff}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,body,h1,h2,h3,h4,h5,h6{color:#212529}a{color:#454d5d;text-decoration:underline}a:active,a:focus,a:hover{color:#212529;text-decoration:underline}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.h1-like,.h2-like,h1,h2{margin-top:0;margin-bottom:2rem}.h3-like,.h4-like,.h5-like,.h6-like,address,blockquote,dd,dl,dt,h3,h4,h5,h6,ol,p,pre,ul{margin-top:0;margin-bottom:1rem}li .p-like,li ol,li p,li ul,nav ol,nav ul,ol ol,ol ul,ul ol,ul ul{margin-top:0;margin-bottom:0}ol,ul{padding-left:2rem}nav ol,nav ul{list-style:none;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}blockquote,code,iframe,img,input,pre,select,svg,table,td,textarea,video{max-width:100%}iframe,img,input,select,textarea{height:auto}iframe,img{border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}hr{box-sizing:initial;height:0;overflow:visible;border:0;border-top:1px solid;margin:2rem 0;clear:both;color:inherit}table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;vertical-align:top;margin-bottom:2rem}.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{margin:0;background-color:initial;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;vertical-align:middle}button,input:not([type=radio]):not([type=checkbox]),select,textarea{border:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{-moz-tab-size:2;tab-size:2;white-space:pre-wrap;line-height:normal;overflow:auto;-ms-overflow-style:scrollbar}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}fieldset,form{border:none}fieldset{margin:0;padding:2rem}legend{display:table;max-width:100%;padding:0 .5rem;border:0;color:inherit;white-space:normal}label{display:inline-block;cursor:pointer}textarea{overflow:auto;vertical-align:top;resize:vertical;white-space:pre-wrap}progress{width:100%;vertical-align:initial}output,progress{display:inline-block}summary{display:list-item}template{display:none}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}.layout-maxed{display:grid}.layout-maxed>*{grid-column:2}.layout-hero{grid-column:1/-1;display:grid;grid-template-columns:inherit}.layout-hero>*{grid-column:2}.layout-hero-img{grid-column:1/-1;justify-self:center;max-width:100%}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media print{*{background:transparent!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,label,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}}@media (min-width:576px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,576px) minmax(1rem,1fr)}}@media (min-width:768px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,768px) minmax(1rem,1fr)}}@media (min-width:1024px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,1024px) minmax(1rem,1fr)}}@media (min-width:1330px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,1330px) minmax(1rem,1fr)}} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 715e658..49606a6 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,6 +4,7 @@ var postcss = require('gulp-postcss'); var CombineMQ = require('postcss-combine-media-query'); var autoprefixer = require('autoprefixer'); var CSSnano = require('cssnano'); +var rename = require('gulp-rename'); gulp.task('css:full', () => { return gulp.src('sass/knacss.scss') diff --git a/package.json b/package.json index 8836c8b..6a3ed11 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "knacss", - "version": "8.2.1", + "version": "v8.0.1", "homepage": "http://www.knacss.com/", "bugs": "https://github.com/alsacreations/KNACSS/issues", "author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)", @@ -32,6 +32,7 @@ "dependencies": { "autoprefixer": "^9.7.1", "postcss-combine-media-query": "^1.0.1", - "cssnano": "^4.1.10" + "cssnano": "^4.1.10", + "gulp-rename": "^2.0.0" } } diff --git a/sass/abstracts/_mixins-sass.scss b/sass/abstracts/_mixins-sass.scss index 9bc515d..0b119f2 100644 --- a/sass/abstracts/_mixins-sass.scss +++ b/sass/abstracts/_mixins-sass.scss @@ -2,30 +2,22 @@ // ex. @include respond-to("medium-up") {...} $bp-aliases: ( - "small": ( - max-width: #{$small - 1}, - ), - "medium": ( - max-width: #{$medium - 1}, - ), - "large": ( - max-width: #{$large - 1}, - ), - "small-up": ( - min-width: #{$small}, - ), - "medium-up": ( - min-width: #{$medium}, - ), - "large-up": ( - min-width: #{$large}, - ), -); + 'small' : (max-width: #{$small - 1}), + 'medium' : (max-width: #{$medium - 1}), + 'large' : (max-width: #{$large - 1}), + 'extra-large' : (max-width: #{$extra-large - 1}), + 'small-up' : (min-width: #{$small}), + 'medium-up' : (min-width: #{$medium}), + 'large-up' : (min-width: #{$large}), + 'extra-large-up' : (min-width: #{$extra-large}) + ); // Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/ @mixin respond-to($name) { + // If the key exists in the map @if map-has-key($bp-aliases, $name) { + // Prints a media query based on the value @media #{inspect(map-get($bp-aliases, $name))} { @content; @@ -37,4 +29,4 @@ $bp-aliases: ( @warn "Unfortunately, no value could be retrieved from `#{$name}`. " +"Please make sure it is defined in `$bp-aliases` map."; } -} +} \ No newline at end of file diff --git a/sass/abstracts/_variables-sass.scss b/sass/abstracts/_variables-sass.scss index d734fd4..da1545a 100644 --- a/sass/abstracts/_variables-sass.scss +++ b/sass/abstracts/_variables-sass.scss @@ -1,97 +1,76 @@ // ---------------- -// Config Sass et variables +// Sass Config and variables // ---------------- // ---------------- -// Valeurs de Breakpoints +// Breakpoints values // ---------------- - -// Hypothèse : smartphone portrait/paysage < 576px < gros smartphone paysage + tablette portrait < 992px < tablette paysage < 1330px < laptop et plus $breakpoints: ( sm: 576px, - md: 992px, - lg: 1400px, + md: 768px, + lg: 1024px, + xl: 1330px, ) !default; $small: map-get($breakpoints, sm) !default; $medium: map-get($breakpoints, md) !default; $large: map-get($breakpoints, lg) !default; +$extra-large: map-get($breakpoints, xl) !default; // ---------------- -// Spacers +// Spacers values // ---------------- -$spacer: 1rem; $spacers: ( - "0": 0, // none - "1": 1px, // mono - "2": 0.125rem, // nano - "4": 0.25rem, // micro - "8": 0.5rem, // mini - "12": 0.75rem, // small - "16": 1rem, // medium - "20": 1.25rem, // large - "24": 1.5rem, // wide - "36": 2.25rem, // ultra + "0": 0, + "1": 0.5rem, + // tiny + "2": 0.75rem, + // tiny-plus + "3": 1rem, + // small + "4": 1.5rem, + // small-plus + "5": 2rem, + // medium + "6": 3rem, + // medium-plus + "7": 5rem, + // large "auto": auto, -); +) !default; -$spacer-none: map-get($spacers, "0"); -$spacer-mono: map-get($spacers, "1"); -$spacer-nano: map-get($spacers, "2"); -$spacer-micro: map-get($spacers, "4"); -$spacer-mini: map-get($spacers, "8"); -$spacer-small: map-get($spacers, "12"); -$spacer-medium: map-get($spacers, "16"); -$spacer-large: map-get($spacers, "20"); -$spacer-wide: map-get($spacers, "24"); -$spacer-ultra: map-get($spacers, "36"); +$spacer-none: map-get($spacers, "0") !default; +$spacer-tiny: map-get($spacers, "1") !default; +$spacer-tiny-plus: map-get($spacers, "2") !default; +$spacer-small: map-get($spacers, "3") !default; +$spacer-small-plus: map-get($spacers, "4") !default; +$spacer-medium: map-get($spacers, "5") !default; +$spacer-medium-plus: map-get($spacers, "6") !default; +$spacer-large: map-get($spacers, "7") !default; // ---------------- -// Grid layout +// Grid layout values // ---------------- $grid-columns: 6 !default; -$gaps: ( - "0": 0, - "5": 0.313rem, - "10": 0.625rem, - "16": 1rem, - "20": 1.25rem, - "36": 2.25rem, -) !default; - // ---------------- -// Fonts +// Fonts values // ---------------- -// Familles de fonts -$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -$font-family-headings: $font-family-base; -$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace; +// Font families +$font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +$font-family-headings: sans-serif; +$font-family-monospace: consolas, courier, monospace; $line-height-base: 1.5; // Font sizes -$font-size: ( - "10": 0.625rem, - "11": 0.6875rem, - "12": 0.75rem, - "14": 0.875rem, - "16": 1rem, - "18": 1.125rem, - "20": 1.25rem, - "24": 1.5rem, - "30": 1.875rem, - "36": 2.25rem, - "base": 1rem, - "inherit": inherit, -); +$font-size-html: 62.5%; +$font-size-base: 1.6rem; -$font-size-html: 100%; -$font-size-base: 1rem; - -// Graisses des Fonts +// Font weights $weight-light: 200; $weight-book: 300; $weight-regular: 400; @@ -99,59 +78,45 @@ $weight-medium: 500; $weight-bold: 700; // ---------------- -// Couleurs +// Color values // ---------------- -// Variables niveaux de gris +// Color palette (don't use as variables except $white and $black) +$white: #ffffff; +$black: #000000; -$gray-100: #f8f9fa; -$gray-200: #e9ecef; -$gray-300: #dee2e6; -$gray-400: #ced4da; -$gray-500: #adb5bd; -$gray-600: #6c757d; -$gray-700: #495057; -$gray-800: #343a40; -$gray-900: #212529; -$white: #FFFFFF; -$black: #0F0F0F; +$color-gray-1: #f7fafc; +$color-gray-2: #abc3c2; +$color-gray-3: #454d5d; +$color-gray-4: #212529; +$color-blue-1: #0275d8; +$color-blue-2: #04527b; +$color-blue-3: #033651; -// Variables couleurs globales +// Non agnostic colors (should be used as variables) -$body-color: $gray-900; -$body-bg: $white; +$color-alpha: $color-gray-1; // most used colors +$color-beta: $color-gray-3; +$color-gamma: $color-gray-4; -$primary: #6fa939; // Couleur dominante. Elle peut s'appliquer à la fois à des surfaces ou à des contenus. -$primary-accent: #4e920f; // Modifieur de couleur dominante (survol, bordure) -$on-primary: $white; // Contenus (texte, lien, icône) affichés par-dessus une couche $primary +$color-delta: $color-blue-1; +$color-epsilon: $color-blue-2; -$secondary: #008cba; // Couleur d'accentuation. Elle s'applique généralement aux liens, mais peut s'appliquer à la fois à des surfaces ou à des contenus. -$secondary-accent: #027da7; // Modifieur de couleur d'accentuation (survol, bordure) -$on-secondary: $white; // Contenus affichés par-dessus une couche $secondary - -// Variables couleurs statuts - -$success-bg: #dff0d9; -$success-border: #d6e9c6; -$success: #3c763d; -$success-hover: #275c28; - -$info-bg: #d9edf7; -$info-border: #bce8f1; -$info: #0d7192; -$info-hover: #005e7d; - -$warning-bg: #fcf8e3; -$warning-border: #faebcc; -$warning: #8a6d3b; -$warning-hover: #654f29; - -$error-bg: #fff2f2; -$error-border: #ebccd1; -$error: #e3224a; -$error-hover: #a00d10; +$color-gradient-alpha: linear-gradient( + to left bottom, + $color-alpha, + $color-beta +); +$color-alternate-1: #5cb85c; // less used colors +$color-alternate-1b: #4d9c4d; +$color-alternate-2: #5bc0de; +$color-alternate-2b: #4fa8c4; +$color-alternate-3: #f0ad4e; +$color-alternate-3b: #d19644; +$color-alternate-4: #d9534f; +$color-alternate-4b: #be4945; // Links $link-decoration: underline; @@ -161,13 +126,14 @@ $link-decoration-hover: underline; $radius-none: 0; $radius-small: 0.5rem; $radius-medium: 1rem; -$radius-large: 20rem; +$radius-large: 2rem; $radius-circle: 50%; // ---------------- -// Liste des propriétés utilitaires (note display: grid se trouve dans Grillade) +// Utils properties list (note that display: grid is in Grillade) // ---------------- -$utils: ((hidden, display, none), +$utils: ( + (hidden, display, none), (block, display, block), (inline, display, inline), (inline-block, display, inline-block), @@ -188,7 +154,7 @@ $utils: ((hidden, display, none), (text-uppercase, text-transform, uppercase), (text-lowercase, text-transform, lowercase), (text-smaller, font-size, smaller), - (text-larger, font-size, larger), + (text-bigger, font-size, bigger), (text-left, text-align, left), (text-center, text-align, center), (text-right, text-align, right), @@ -227,4 +193,5 @@ $utils: ((hidden, display, none), (align-bottom, vertical-align, bottom), (align-middle, vertical-align, middle), (item-first, order, -100), - (item-last, order, 100)) !default; \ No newline at end of file + (item-last, order, 100) +) !default; diff --git a/sass/base/_reset-base.scss b/sass/base/_reset-base.scss index 94c861e..1c6317e 100644 --- a/sass/base/_reset-base.scss +++ b/sass/base/_reset-base.scss @@ -4,16 +4,15 @@ /* * 1. Switch to border-box model for all elements - * 2. Avoid min-width: auto on flex and grid items + * 2. Avoid min-width: auto and min-height: auto on flex and grid children */ *, *::before, *::after { - box-sizing: border-box; - /* 1 */ - min-width: 0; - /* 2 */ + box-sizing: border-box; /* 1 */ + min-width: 0; /* 2 */ + min-height: 0; /* 2 */ } /* @@ -24,12 +23,9 @@ html { font-size: $font-size-html; - -webkit-tap-highlight-color: transparent; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - overflow-wrap: break-word; - /* 3 */ + -webkit-tap-highlight-color: transparent; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + overflow-wrap: break-word; /* 3 */ } body { @@ -37,8 +33,8 @@ body { font-family: $font-family-base; font-size: $font-size-base; line-height: $line-height-base; - background-color: $body-bg; - color: $body-color; + background-color: $white; + color: $color-gamma; } /* @@ -57,7 +53,7 @@ h5, .h5-like, h6, .h6-like { - color: $gray-900; + color: $color-gamma; } /* @@ -65,14 +61,14 @@ h6, */ a { - color: $gray-600; + color: $color-beta; text-decoration: $link-decoration; } a:focus, a:hover, a:active { - color: $gray-900; + color: $color-gamma; text-decoration: $link-decoration-hover; } @@ -82,12 +78,9 @@ a:active { */ abbr[title] { - border-bottom: none; - /* 1 */ - text-decoration: underline; - /* 2 */ - text-decoration: underline dotted; - /* 2 */ + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ } /* @@ -254,4 +247,4 @@ table { border-collapse: collapse; vertical-align: top; margin-bottom: $spacer-medium; -} \ No newline at end of file +} diff --git a/sass/base/_reset-forms.scss b/sass/base/_reset-forms.scss index e670bd1..62837ad 100644 --- a/sass/base/_reset-forms.scss +++ b/sass/base/_reset-forms.scss @@ -112,7 +112,7 @@ fieldset { legend { display: table; max-width: 100%; - padding: 0 $spacer-micro; + padding: 0 $spacer-tiny; border: 0; color: inherit; white-space: normal; diff --git a/sass/components/_button.scss b/sass/components/_button.scss index fa1154f..4dea95e 100755 --- a/sass/components/_button.scss +++ b/sass/components/_button.scss @@ -15,7 +15,7 @@ display: inline-flex; justify-content: center; align-items: center; - padding: $spacer-small $spacer-medium; + padding: $spacer-small $spacer-small-plus; cursor: pointer; user-select: none; transition: 0.25s; @@ -38,12 +38,12 @@ .btn, .button { &--small { - padding: $spacer-micro-plus $spacer-small; + padding: $spacer-tiny-plus $spacer-small; font-size: .8em; } &--big { - padding: $spacer-medium $spacer-medium; + padding: $spacer-small-plus $spacer-medium; font-size: 1.4em; } diff --git a/sass/components/_checkbox.scss b/sass/components/_checkbox.scss index 8741bb9..0f52fec 100755 --- a/sass/components/_checkbox.scss +++ b/sass/components/_checkbox.scss @@ -12,7 +12,7 @@ */ $checkbox-color: $white; -$checkbox-background: $primary; +$checkbox-background: $color-alpha; $checkbox-size: 2rem; $checkbox-border-radius: 4px; @@ -30,7 +30,8 @@ $checkbox-border-radius: 4px; width: $checkbox-size; height: $checkbox-size; vertical-align: text-bottom; - box-shadow: inset 0 0 0 1px $primary; + outline: 0; + box-shadow: inset 0 0 0 1px $color-alpha; background-color: $checkbox-color; transition: background-color 0.15s; cursor: pointer; diff --git a/sass/components/_radio.scss b/sass/components/_radio.scss index 2bf505d..dba7aa9 100755 --- a/sass/components/_radio.scss +++ b/sass/components/_radio.scss @@ -11,7 +11,7 @@ * radio variables (you can change them) */ -$radio-color: $primary; +$radio-color: $color-alpha; $radio-background: $white; $radio-size: 2rem; $radio-border-radius: 50%; @@ -30,7 +30,8 @@ $radio-border-radius: 50%; width: $radio-size; height: $radio-size; vertical-align: text-bottom; - box-shadow: inset 0 0 0 1px $primary; + outline: 0; + box-shadow: inset 0 0 0 1px $color-alpha; background-color: $radio-background; transition: background-size 0.15s; cursor: pointer; @@ -54,5 +55,5 @@ $radio-border-radius: 50%; background-size: 70% 70%; background-position: center; background-repeat: no-repeat; - background-color: $primary; + background-color: $color-alpha; } diff --git a/sass/knacss.scss b/sass/knacss.scss index 698565a..7405c1c 100644 --- a/sass/knacss.scss +++ b/sass/knacss.scss @@ -1,13 +1,13 @@ /*! * KNACSS Reborn: Just keep it simple! * @author: Alsacreations -* v8.2 2022/01 +* v1.0.0 2020/11 * Licence WTFPL http://www.wtfpl.net/ */ -// IMPORTANT : Seuls les fichiers "Noyau" et "Utilitaires" sont importés par défaut. Ajoutez les fichiers de composants si nécessaires dans votre projet. +// WARNING : Only Core and Utilities are imported by default. Just add other files if you need them. -// NOYAU +// CORE @import "abstracts/variables-sass"; @import "abstracts/mixins-sass"; @@ -17,16 +17,15 @@ @import "base/reset-print"; @import "base/layout"; -// UTILITAIRES -@import "utils/utils-global"; -@import "utils/utils-font-sizes"; -@import "utils/utils-spacers"; -@import "utils/grillade"; +// UTILITY CLASSES +// @import "utils/utils-global"; +// @import "utils/utils-spacers"; +// @import "utils/grillade"; -// COMPOSANTS (à ajouter au besoin) +// COMPONENTS (add them only if you need) // @import "components/button"; // @import "components/burger"; // @import "components/checkbox"; // @import "components/radio"; // @import "components/select"; -// @import "components/quote"; \ No newline at end of file +// @import "components/quote"; diff --git a/sass/utils/_utils-font-sizes.scss b/sass/utils/_utils-font-sizes.scss deleted file mode 100644 index 728cbc0..0000000 --- a/sass/utils/_utils-font-sizes.scss +++ /dev/null @@ -1,19 +0,0 @@ -/* Font sizes utility classes */ - -// loop for each font-size -@each $key, $value in $font-size { - .text-#{$key} { - font-size: $value; - } -} - -// loop for each breakpoint -@each $key, $value in $font-size { - @each $bp, $bpv in $breakpoints { - @media (min-width: #{$bpv}) { - .#{$bp}\:text-#{$key} { - font-size: $value; - } - } - } -} diff --git a/sass/utils/_utils-global.scss b/sass/utils/_utils-global.scss index ff0ac7a..53a72dd 100644 --- a/sass/utils/_utils-global.scss +++ b/sass/utils/_utils-global.scss @@ -6,17 +6,16 @@ .#{$class} { #{$prop}: #{$value}; } -} - -// loop for each breakpoint -@each $class, $prop, $value in $utils { + + // loop for each breakpoint @each $bp, $bpv in $breakpoints { - @media (min-width: #{$bpv}) { + @media (min-width: #{$bpv}) { .#{$bp}\:#{$class} { #{$prop}: #{$value}; } } } + } // multi-properties utils @@ -38,7 +37,7 @@ // loop for each breakpoint @each $bp, $bpv in $breakpoints { - @media (min-width: #{$bpv}) { + @media (min-width: #{$bpv}) { .#{$bp}\:visually-hidden { position: absolute !important; border: 0 !important; diff --git a/sass/utils/grillade.scss b/sass/utils/grillade.scss index e84fa9b..5a7b2f5 100644 --- a/sass/utils/grillade.scss +++ b/sass/utils/grillade.scss @@ -1,37 +1,39 @@ -/* -------------------------------------------------- */ -/* ==Grillade : système de micro-grille de KNACSS */ -/* ------------------------------------------------ */ -// Grillade est directement inspiré tailwindcss.com et de ses classes utilitaires +/* --------------------------------------- */ +/* ==Grillade : ultra light Grid Layout */ +/* --------------------------------------- */ +// Grillade is heavily inspired by tailwindcss.com Grid utility classes -// Les variables ci-dessous ne sont appliquées que si elles n'ont pas été renseignées -// dans le fichiers de variables de KNACSS. -@if variable_exists(grid-columns) { - $grid-columns: $grid-columns !global; -} @else { - $grid-columns: 6 !global; +// use these variables only for a standalone Grillade +// in KNACSS, you shall modify variables file instead +$grid-columns: 6 !default; + +@if variable_exists(spacers) { + $spacers: $spacers !global; } - -@if variable_exists(gaps) { - $gaps: $gaps !global; -} @else { - $gaps: ( - "0": 0, - "5": 0.313rem, - "10": 0.625rem, - "16": 1rem, - "20": 1.25rem, - "36": 2.25rem, +@else { + $spacers : ( + '0' : 0, + '1' : .5rem, + '2' : .75rem, + '3' : 1rem, + '4' : 1.5rem, + '5' : 2rem, + '6' : 3rem, + '7' : 5rem, + 'auto' : auto ) !global; } @if variable_exists(breakpoints) { $breakpoints: $breakpoints !global; -} @else { - $breakpoints: ( - sm: 576px, - md: 992px, - lg: 1330px, +} +@else { + $breakpoints : ( + sm: 576px, + md: 768px, + lg: 1024px, + xl: 1330px ) !global; } @@ -40,33 +42,33 @@ } // grid class for each breakpoint @each $bp, $bpv in $breakpoints { - @media (min-width: #{$bpv}) { + @media (min-width: #{$bpv}) { .#{$bp}\:grid { display: grid; } } } -/* grid-template-columns initialisation */ +/* grid-template-columns classes */ @for $i from 1 through $grid-columns { + .grid-cols-#{$i} { grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); } -} - -/* grid-template-columns au sein des breakpoints */ -@each $bp, $bpv in $breakpoints { - @media (min-width: #{$bpv}) { - @for $i from 1 through $grid-columns { + @each $bp, $bpv in $breakpoints { + + @media (min-width: #{$bpv}) { .#{$bp}\:grid-cols-#{$i} { grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); } } } + } -/* gap initialisation */ -@each $key, $value in $gaps { +/* gap classes */ +@each $key, $value in $spacers { + .gap-#{$key} { gap: $value; } @@ -76,12 +78,10 @@ .gap-y-#{$key} { row-gap: $value; } -} -/* gap au sein des breakpoints */ -@each $bp, $bpv in $breakpoints { - @media (min-width: #{$bpv}) { - @each $key, $value in $gaps { + @each $bp, $bpv in $breakpoints { + + @media (min-width: #{$bpv}) { .#{$bp}\:gap-#{$key} { gap: $value; } @@ -93,10 +93,12 @@ } } } + } -/* grid-items initialisation */ +/* grid-items classes */ @for $i from 1 through $grid-columns { + .col-start-#{$i} { grid-column-start: #{$i}; } @@ -118,14 +120,11 @@ .row-span-#{$i} { grid-row: span #{$i} / span #{$i}; } -} - -/* grid-items au sein des breakpoints */ -@each $bp, $bpv in $breakpoints { - @media (min-width: #{$bpv}) { - @for $i from 1 through $grid-columns { - // loop for each breakpoint - + + // loop for each breakpoint + @each $bp, $bpv in $breakpoints { + + @media (min-width: #{$bpv}) { .#{$bp}\:col-start-#{$i} { grid-column-start: #{$i}; } @@ -149,4 +148,5 @@ } } } -} + +} \ No newline at end of file