mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 09:06:14 -04:00
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
This commit is contained in:
Yohn
parent
84ed38efc9
commit
fe78285302
249 changed files with 59188 additions and 594 deletions
|
|
@ -628,9 +628,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -717,6 +717,496 @@ section {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.amber.min.css
vendored
2
css/pico.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -628,9 +628,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -717,6 +717,496 @@ section {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.blue.min.css
vendored
2
css/pico.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.amber.min.css
vendored
2
css/pico.classless.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.blue.min.css
vendored
2
css/pico.classless.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.conditional.amber.min.css
vendored
2
css/pico.classless.conditional.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.conditional.blue.min.css
vendored
2
css/pico.classless.conditional.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.conditional.cyan.min.css
vendored
2
css/pico.classless.conditional.cyan.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.conditional.green.min.css
vendored
2
css/pico.classless.conditional.green.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.conditional.grey.min.css
vendored
2
css/pico.classless.conditional.grey.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.conditional.jade.min.css
vendored
2
css/pico.classless.conditional.jade.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.conditional.lime.min.css
vendored
2
css/pico.classless.conditional.lime.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.conditional.pink.min.css
vendored
2
css/pico.classless.conditional.pink.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.conditional.red.min.css
vendored
2
css/pico.classless.conditional.red.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.conditional.sand.min.css
vendored
2
css/pico.classless.conditional.sand.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.conditional.slate.min.css
vendored
2
css/pico.classless.conditional.slate.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.conditional.zinc.min.css
vendored
2
css/pico.classless.conditional.zinc.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -184,7 +184,7 @@ details summary[role=button]::after {
|
|||
}
|
||||
|
||||
[aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button])::before {
|
||||
filter: brightness(0) invert(1);
|
||||
filter: brightness(0) invert(0);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -195,19 +195,19 @@ details summary[role=button]::after {
|
|||
color-scheme: light;
|
||||
--pico-background-color: #fff;
|
||||
--pico-color: #373c44;
|
||||
--pico-text-selection-color: rgba(2, 154, 232, 0.25);
|
||||
--pico-text-selection-color: rgba(119, 156, 0, 0.25);
|
||||
--pico-muted-color: #646b79;
|
||||
--pico-muted-border-color: rgb(231, 234, 239.5);
|
||||
--pico-primary: #0172ad;
|
||||
--pico-primary-background: #0172ad;
|
||||
--pico-primary: #577400;
|
||||
--pico-primary-background: #a5d601;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(1, 114, 173, 0.5);
|
||||
--pico-primary-hover: #015887;
|
||||
--pico-primary-hover-background: #02659a;
|
||||
--pico-primary-underline: rgba(87, 116, 0, 0.5);
|
||||
--pico-primary-hover: #435a00;
|
||||
--pico-primary-hover-background: #99c801;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(2, 154, 232, 0.5);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-primary-focus: rgba(119, 156, 0, 0.5);
|
||||
--pico-primary-inverse: #000;
|
||||
--pico-secondary: #5d6b89;
|
||||
--pico-secondary-background: #525f7a;
|
||||
--pico-secondary-border: var(--pico-secondary-background);
|
||||
|
|
@ -267,7 +267,7 @@ details summary[role=button]::after {
|
|||
--pico-switch-background-color: #bfc7d9;
|
||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||
--pico-switch-color: #fff;
|
||||
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
||||
--pico-range-border-color: #dfe3eb;
|
||||
--pico-range-active-border-color: #bfc7d9;
|
||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||
|
|
@ -310,19 +310,19 @@ details summary[role=button]::after {
|
|||
color-scheme: dark;
|
||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||
--pico-color: #c2c7d0;
|
||||
--pico-text-selection-color: rgba(1, 170, 255, 0.1875);
|
||||
--pico-text-selection-color: rgba(130, 171, 0, 0.1875);
|
||||
--pico-muted-color: #7b8495;
|
||||
--pico-muted-border-color: #202632;
|
||||
--pico-primary: #01aaff;
|
||||
--pico-primary-background: #0172ad;
|
||||
--pico-primary: #82ab00;
|
||||
--pico-primary-background: #a5d601;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(1, 170, 255, 0.5);
|
||||
--pico-primary-hover: #79c0ff;
|
||||
--pico-primary-hover-background: #017fc0;
|
||||
--pico-primary-underline: rgba(130, 171, 0, 0.5);
|
||||
--pico-primary-hover: #99c801;
|
||||
--pico-primary-hover-background: #b2e51a;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(1, 170, 255, 0.375);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-primary-focus: rgba(130, 171, 0, 0.375);
|
||||
--pico-primary-inverse: #000;
|
||||
--pico-secondary: #969eaf;
|
||||
--pico-secondary-background: #525f7a;
|
||||
--pico-secondary-border: var(--pico-secondary-background);
|
||||
|
|
@ -382,7 +382,7 @@ details summary[role=button]::after {
|
|||
--pico-switch-background-color: #333c4e;
|
||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||
--pico-switch-color: #fff;
|
||||
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
||||
--pico-range-border-color: #202632;
|
||||
--pico-range-active-border-color: #2a3140;
|
||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||
|
|
@ -418,19 +418,19 @@ details summary[role=button]::after {
|
|||
color-scheme: dark;
|
||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||
--pico-color: #c2c7d0;
|
||||
--pico-text-selection-color: rgba(1, 170, 255, 0.1875);
|
||||
--pico-text-selection-color: rgba(130, 171, 0, 0.1875);
|
||||
--pico-muted-color: #7b8495;
|
||||
--pico-muted-border-color: #202632;
|
||||
--pico-primary: #01aaff;
|
||||
--pico-primary-background: #0172ad;
|
||||
--pico-primary: #82ab00;
|
||||
--pico-primary-background: #a5d601;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(1, 170, 255, 0.5);
|
||||
--pico-primary-hover: #79c0ff;
|
||||
--pico-primary-hover-background: #017fc0;
|
||||
--pico-primary-underline: rgba(130, 171, 0, 0.5);
|
||||
--pico-primary-hover: #99c801;
|
||||
--pico-primary-hover-background: #b2e51a;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(1, 170, 255, 0.375);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-primary-focus: rgba(130, 171, 0, 0.375);
|
||||
--pico-primary-inverse: #000;
|
||||
--pico-secondary: #969eaf;
|
||||
--pico-secondary-background: #525f7a;
|
||||
--pico-secondary-border: var(--pico-secondary-background);
|
||||
|
|
@ -490,7 +490,7 @@ details summary[role=button]::after {
|
|||
--pico-switch-background-color: #333c4e;
|
||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||
--pico-switch-color: #fff;
|
||||
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
||||
--pico-range-border-color: #202632;
|
||||
--pico-range-active-border-color: #2a3140;
|
||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.cyan.min.css
vendored
2
css/pico.classless.cyan.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.fuchsia.min.css
vendored
2
css/pico.classless.fuchsia.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.green.min.css
vendored
2
css/pico.classless.green.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.grey.min.css
vendored
2
css/pico.classless.grey.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.indigo.min.css
vendored
2
css/pico.classless.indigo.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.jade.min.css
vendored
2
css/pico.classless.jade.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.lime.min.css
vendored
2
css/pico.classless.lime.min.css
vendored
File diff suppressed because one or more lines are too long
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.orange.min.css
vendored
2
css/pico.classless.orange.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.pink.min.css
vendored
2
css/pico.classless.pink.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.pumpkin.min.css
vendored
2
css/pico.classless.pumpkin.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.purple.min.css
vendored
2
css/pico.classless.purple.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.red.min.css
vendored
2
css/pico.classless.red.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.sand.min.css
vendored
2
css/pico.classless.sand.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.slate.min.css
vendored
2
css/pico.classless.slate.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.violet.min.css
vendored
2
css/pico.classless.violet.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.yellow.min.css
vendored
2
css/pico.classless.yellow.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -560,9 +560,9 @@ progress,
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -630,6 +630,496 @@ section {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.classless.zinc.min.css
vendored
2
css/pico.classless.zinc.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -628,9 +628,9 @@ nav details.dropdown summary:focus-visible {
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -717,6 +717,496 @@ main {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.conditional.amber.min.css
vendored
2
css/pico.conditional.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -628,9 +628,9 @@ nav details.dropdown summary:focus-visible {
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -717,6 +717,496 @@ main {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.conditional.blue.min.css
vendored
2
css/pico.conditional.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -217,7 +217,7 @@ nav details.dropdown summary:focus-visible {
|
|||
}
|
||||
|
||||
.pico [aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
|
||||
filter: brightness(0) invert(1);
|
||||
filter: brightness(0) invert(0);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -228,19 +228,19 @@ nav details.dropdown summary:focus-visible {
|
|||
color-scheme: light;
|
||||
--pico-background-color: #fff;
|
||||
--pico-color: #373c44;
|
||||
--pico-text-selection-color: rgba(2, 154, 232, 0.25);
|
||||
--pico-text-selection-color: rgba(119, 156, 0, 0.25);
|
||||
--pico-muted-color: #646b79;
|
||||
--pico-muted-border-color: rgb(231, 234, 239.5);
|
||||
--pico-primary: #0172ad;
|
||||
--pico-primary-background: #0172ad;
|
||||
--pico-primary: #577400;
|
||||
--pico-primary-background: #a5d601;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(1, 114, 173, 0.5);
|
||||
--pico-primary-hover: #015887;
|
||||
--pico-primary-hover-background: #02659a;
|
||||
--pico-primary-underline: rgba(87, 116, 0, 0.5);
|
||||
--pico-primary-hover: #435a00;
|
||||
--pico-primary-hover-background: #99c801;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(2, 154, 232, 0.5);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-primary-focus: rgba(119, 156, 0, 0.5);
|
||||
--pico-primary-inverse: #000;
|
||||
--pico-secondary: #5d6b89;
|
||||
--pico-secondary-background: #525f7a;
|
||||
--pico-secondary-border: var(--pico-secondary-background);
|
||||
|
|
@ -300,7 +300,7 @@ nav details.dropdown summary:focus-visible {
|
|||
--pico-switch-background-color: #bfc7d9;
|
||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||
--pico-switch-color: #fff;
|
||||
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
||||
--pico-range-border-color: #dfe3eb;
|
||||
--pico-range-active-border-color: #bfc7d9;
|
||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||
|
|
@ -348,19 +348,19 @@ nav details.dropdown summary:focus-visible {
|
|||
color-scheme: dark;
|
||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||
--pico-color: #c2c7d0;
|
||||
--pico-text-selection-color: rgba(1, 170, 255, 0.1875);
|
||||
--pico-text-selection-color: rgba(130, 171, 0, 0.1875);
|
||||
--pico-muted-color: #7b8495;
|
||||
--pico-muted-border-color: #202632;
|
||||
--pico-primary: #01aaff;
|
||||
--pico-primary-background: #0172ad;
|
||||
--pico-primary: #82ab00;
|
||||
--pico-primary-background: #a5d601;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(1, 170, 255, 0.5);
|
||||
--pico-primary-hover: #79c0ff;
|
||||
--pico-primary-hover-background: #017fc0;
|
||||
--pico-primary-underline: rgba(130, 171, 0, 0.5);
|
||||
--pico-primary-hover: #99c801;
|
||||
--pico-primary-hover-background: #b2e51a;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(1, 170, 255, 0.375);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-primary-focus: rgba(130, 171, 0, 0.375);
|
||||
--pico-primary-inverse: #000;
|
||||
--pico-secondary: #969eaf;
|
||||
--pico-secondary-background: #525f7a;
|
||||
--pico-secondary-border: var(--pico-secondary-background);
|
||||
|
|
@ -420,7 +420,7 @@ nav details.dropdown summary:focus-visible {
|
|||
--pico-switch-background-color: #333c4e;
|
||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||
--pico-switch-color: #fff;
|
||||
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
||||
--pico-range-border-color: #202632;
|
||||
--pico-range-active-border-color: #2a3140;
|
||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||
|
|
@ -471,19 +471,19 @@ nav details.dropdown summary:focus-visible {
|
|||
color-scheme: dark;
|
||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||
--pico-color: #c2c7d0;
|
||||
--pico-text-selection-color: rgba(1, 170, 255, 0.1875);
|
||||
--pico-text-selection-color: rgba(130, 171, 0, 0.1875);
|
||||
--pico-muted-color: #7b8495;
|
||||
--pico-muted-border-color: #202632;
|
||||
--pico-primary: #01aaff;
|
||||
--pico-primary-background: #0172ad;
|
||||
--pico-primary: #82ab00;
|
||||
--pico-primary-background: #a5d601;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(1, 170, 255, 0.5);
|
||||
--pico-primary-hover: #79c0ff;
|
||||
--pico-primary-hover-background: #017fc0;
|
||||
--pico-primary-underline: rgba(130, 171, 0, 0.5);
|
||||
--pico-primary-hover: #99c801;
|
||||
--pico-primary-hover-background: #b2e51a;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(1, 170, 255, 0.375);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-primary-focus: rgba(130, 171, 0, 0.375);
|
||||
--pico-primary-inverse: #000;
|
||||
--pico-secondary: #969eaf;
|
||||
--pico-secondary-background: #525f7a;
|
||||
--pico-secondary-border: var(--pico-secondary-background);
|
||||
|
|
@ -543,7 +543,7 @@ nav details.dropdown summary:focus-visible {
|
|||
--pico-switch-background-color: #333c4e;
|
||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||
--pico-switch-color: #fff;
|
||||
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
||||
--pico-range-border-color: #202632;
|
||||
--pico-range-active-border-color: #2a3140;
|
||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||
|
|
@ -628,9 +628,9 @@ nav details.dropdown summary:focus-visible {
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -717,6 +717,496 @@ main {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -628,9 +628,9 @@ nav details.dropdown summary:focus-visible {
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -717,6 +717,496 @@ main {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.conditional.cyan.min.css
vendored
2
css/pico.conditional.cyan.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -628,9 +628,9 @@ nav details.dropdown summary:focus-visible {
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -717,6 +717,496 @@ main {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.conditional.fuchsia.min.css
vendored
2
css/pico.conditional.fuchsia.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -628,9 +628,9 @@ nav details.dropdown summary:focus-visible {
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -717,6 +717,496 @@ main {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.conditional.green.min.css
vendored
2
css/pico.conditional.green.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -628,9 +628,9 @@ nav details.dropdown summary:focus-visible {
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -717,6 +717,496 @@ main {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.conditional.grey.min.css
vendored
2
css/pico.conditional.grey.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -628,9 +628,9 @@ nav details.dropdown summary:focus-visible {
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -717,6 +717,496 @@ main {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.conditional.indigo.min.css
vendored
2
css/pico.conditional.indigo.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -628,9 +628,9 @@ nav details.dropdown summary:focus-visible {
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -717,6 +717,496 @@ main {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.conditional.jade.min.css
vendored
2
css/pico.conditional.jade.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -628,9 +628,9 @@ nav details.dropdown summary:focus-visible {
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -717,6 +717,496 @@ main {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue