mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-24 13:24:05 -06:00
Alternative uses of r-c css
This commit is contained in:
DhammaCharts
parent
a2b41f82f1
commit
e350f08176
File diff suppressed because one or more lines are too long
518
assets/styles/r-c.scss
Normal file
518
assets/styles/r-c.scss
Normal file
@ -0,0 +1,518 @@
|
||||
/*
|
||||
r-c = Responsive Columns
|
||||
|
||||
Full details here:
|
||||
https://matthewjamestaylor.com/responsive-columns
|
||||
*/
|
||||
|
||||
/* Responsive Columns Container */
|
||||
r-c, [r-c], [data-r-c] {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
/* containers are always auto-width (except for columns that are also containers) */
|
||||
r-c, [data-r-c] {width:auto !important}
|
||||
|
||||
/* Prevent borders and padding from changing the column widths */
|
||||
r-c, [r-c], [data-r-c], r-c > *, [r-c] > *, [data-r-c] > * {box-sizing:border-box}
|
||||
|
||||
/* Gutter Mode (Default) */
|
||||
r-c, [r-c], [data-r-c] {
|
||||
margin:calc(5.455px + 1.42041vw);
|
||||
gap:calc(5.455px + 1.42041vw);
|
||||
}
|
||||
|
||||
/* Join Mode (Container) */
|
||||
[join], [data-join] {
|
||||
margin:0;
|
||||
gap:0;
|
||||
}
|
||||
|
||||
/* Join Mode (Column) */
|
||||
[join] > *, [data-join] > * {padding:calc(5.455px + 1.42041vw)}
|
||||
|
||||
/* No margin for columns that are also a container */
|
||||
[r-c] {margin:0}
|
||||
|
||||
/* No padding for columns that are also a container */
|
||||
[r-c][join] {padding:0}
|
||||
|
||||
/* Horizontal Column Alignment (Default: left aligned) */
|
||||
r-c[center], [r-c][center], [data-center] {justify-content:center} /* centered columns */
|
||||
r-c[right], [r-c][right], [data-right] {justify-content:flex-end} /* right-aligned columns */
|
||||
r-c[space-between], [r-c][space-between], [data-space-between] {justify-content:space-between} /* space between columns */
|
||||
r-c[space-evenly], [r-c][space-evenly], [data-space-evenly] {justify-content:space-evenly} /* even space between and either side of columns */
|
||||
|
||||
/* Vertical Column Alignment (Default: stretch to equal-heights per row) */
|
||||
r-c[top], [r-c][top], [data-top] {align-items:flex-start} /* top-aligned columns */
|
||||
r-c[middle], [r-c][middle], [data-middle] {align-items:center} /* vertically centered columns */
|
||||
r-c[bottom], [r-c][bottom], [data-bottom] {align-items:flex-end} /* bottom-aligned columns */
|
||||
|
||||
/* Extra-Small Breakpoint: */
|
||||
|
||||
/*
|
||||
Specificity on column width selectors (with gutters & column tag version)
|
||||
Priority order from lowest to highest (higher priority must have higher specificity)
|
||||
|
||||
#3: Default column:
|
||||
(specificity: 0,0,1) r-c > *,
|
||||
(specificity: 0,1,0) [r-c] > *,
|
||||
(specificity: 0,1,0) [data-r-c] > * {}
|
||||
|
||||
#2: Column tag:
|
||||
(specificity: 0,1,1) c1-2:not([x]),
|
||||
(specificity: 0,1,1) [c1-2]:not(x),
|
||||
(specificity: 0,1,1) [data-c1-2]:not(x) {}
|
||||
|
||||
#1: Column width specified on parent tag:
|
||||
(specificity: 0,1,2) r-c[c1-2]:not(x) > *,
|
||||
(specificity: 0,2,0) [data-r-c][data-c1-2] > * {}
|
||||
|
||||
Put it all together and we have:
|
||||
r-c > *, [r-c] > *, [data-r-c] > *,
|
||||
c1-2:not([x]), [c1-2]:not(x), [data-c1-2]:not(x), r-c[c1-2]:not(x) > *, [data-r-c][c1-2] > * {}
|
||||
*/
|
||||
|
||||
/* Column Widths */
|
||||
r-c > *, [r-c] > *, [data-r-c] > *,
|
||||
c1-1:not([x]), [c1-1]:not(x), [data-c1-2]:not(x), r-c[c1-1]:not(x) > *, [data-r-c][data-c1-1] > * {width:100%}
|
||||
c1-2:not([x]), [c1-2]:not(x), [data-c1-2]:not(x), r-c[c1-2]:not(x) > *, [data-r-c][data-c1-2] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
c1-3:not([x]), [c1-3]:not(x), [data-c1-3]:not(x), r-c[c1-3]:not(x) > *, [data-r-c][data-c1-3] > * {width:calc(100%/3 - (5.455px + 1.42041vw)/3*2)}
|
||||
c2-3:not([x]), [c2-3]:not(x), [data-c2-3]:not(x), r-c[c2-3]:not(x) > *, [data-r-c][data-c2-3] > * {width:calc(100%/3*2 - (5.455px + 1.42041vw)/3)}
|
||||
c1-4:not([x]), [c1-4]:not(x), [data-c1-4]:not(x), r-c[c1-4]:not(x) > *, [data-r-c][data-c1-4] > * {width:calc(25% - (5.455px + 1.42041vw)/4*3)}
|
||||
c2-4:not([x]), [c2-4]:not(x), [data-c2-4]:not(x), r-c[c2-4]:not(x) > *, [data-r-c][data-c2-4] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
c3-4:not([x]), [c3-4]:not(x), [data-c3-4]:not(x), r-c[c3-4]:not(x) > *, [data-r-c][data-c3-4] > * {width:calc(25% - (5.455px + 1.42041vw)/4)}
|
||||
c1-5:not([x]), [c1-5]:not(x), [data-c1-5]:not(x), r-c[c1-5]:not(x) > *, [data-r-c][data-c1-5] > * {width:calc(100%/5 - (5.455px + 1.42041vw)/5*4)}
|
||||
c2-5:not([x]), [c2-5]:not(x), [data-c2-5]:not(x), r-c[c2-5]:not(x) > *, [data-r-c][data-c2-5] > * {width:calc(100%/5*2 - (5.455px + 1.42041vw)/5*3)}
|
||||
c3-5:not([x]), [c3-5]:not(x), [data-c3-5]:not(x), r-c[c3-5]:not(x) > *, [data-r-c][data-c3-5] > * {width:calc(100%/5*3 - (5.455px + 1.42041vw)/5*2)}
|
||||
c4-5:not([x]), [c4-5]:not(x), [data-c4-5]:not(x), r-c[c4-5]:not(x) > *, [data-r-c][data-c4-5] > * {width:calc(100%/5*4 - (5.455px + 1.42041vw)/5)}
|
||||
c1-6:not([x]), [c1-6]:not(x), [data-c1-6]:not(x), r-c[c1-6]:not(x) > *, [data-r-c][data-c1-6] > * {width:calc(100%/6 - (5.455px + 1.42041vw)/6*5)}
|
||||
c2-6:not([x]), [c2-6]:not(x), [data-c2-6]:not(x), r-c[c2-6]:not(x) > *, [data-r-c][data-c2-6] > * {width:calc(100%/6*2 - (5.455px + 1.42041vw)/6*4)}
|
||||
c3-6:not([x]), [c3-6]:not(x), [data-c3-6]:not(x), r-c[c3-6]:not(x) > *, [data-r-c][data-c3-6] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
c4-6:not([x]), [c4-6]:not(x), [data-c4-6]:not(x), r-c[c4-6]:not(x) > *, [data-r-c][data-c4-6] > * {width:calc(100%/6*4 - (5.455px + 1.42041vw)/6*2)}
|
||||
c5-6:not([x]), [c5-6]:not(x), [data-c5-6]:not(x), r-c[c5-6]:not(x) > *, [data-r-c][data-c5-6] > * {width:calc(100%/6*5 - (5.455px + 1.42041vw)/6)}
|
||||
c1-7:not([x]), [c1-7]:not(x), [data-c1-7]:not(x), r-c[c1-7]:not(x) > *, [data-r-c][data-c1-7] > * {width:calc(100%/7 - (5.455px + 1.42041vw)/7*6)}
|
||||
c2-7:not([x]), [c2-7]:not(x), [data-c2-7]:not(x), r-c[c2-7]:not(x) > *, [data-r-c][data-c2-7] > * {width:calc(100%/7*2 - (5.455px + 1.42041vw)/7*5)}
|
||||
c3-7:not([x]), [c3-7]:not(x), [data-c3-7]:not(x), r-c[c3-7]:not(x) > *, [data-r-c][data-c3-7] > * {width:calc(100%/7*3 - (5.455px + 1.42041vw)/7*4)}
|
||||
c4-7:not([x]), [c4-7]:not(x), [data-c4-7]:not(x), r-c[c4-7]:not(x) > *, [data-r-c][data-c4-7] > * {width:calc(100%/7*4 - (5.455px + 1.42041vw)/7*3)}
|
||||
c5-7:not([x]), [c5-7]:not(x), [data-c5-7]:not(x), r-c[c5-7]:not(x) > *, [data-r-c][data-c5-7] > * {width:calc(100%/7*5 - (5.455px + 1.42041vw)/7*2)}
|
||||
c6-7:not([x]), [c6-7]:not(x), [data-c6-7]:not(x), r-c[c6-7]:not(x) > *, [data-r-c][data-c6-7] > * {width:calc(100%/7*6 - (5.455px + 1.42041vw)/7)}
|
||||
c1-8:not([x]), [c1-8]:not(x), [data-c1-8]:not(x), r-c[c1-8]:not(x) > *, [data-r-c][data-c1-8] > * {width:calc(100%/8 - (5.455px + 1.42041vw)/8*7)}
|
||||
c2-8:not([x]), [c2-8]:not(x), [data-c2-8]:not(x), r-c[c2-8]:not(x) > *, [data-r-c][data-c2-8] > * {width:calc(100%/8*2 - (5.455px + 1.42041vw)/8*6)}
|
||||
c3-8:not([x]), [c3-8]:not(x), [data-c3-8]:not(x), r-c[c3-8]:not(x) > *, [data-r-c][data-c3-8] > * {width:calc(100%/8*3 - (5.455px + 1.42041vw)/8*5)}
|
||||
c4-8:not([x]), [c4-8]:not(x), [data-c4-8]:not(x), r-c[c4-8]:not(x) > *, [data-r-c][data-c4-8] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
c5-8:not([x]), [c5-8]:not(x), [data-c5-8]:not(x), r-c[c5-8]:not(x) > *, [data-r-c][data-c5-8] > * {width:calc(100%/8*5 - (5.455px + 1.42041vw)/8*3)}
|
||||
c6-8:not([x]), [c6-8]:not(x), [data-c6-8]:not(x), r-c[c6-8]:not(x) > *, [data-r-c][data-c6-8] > * {width:calc(100%/8*6 - (5.455px + 1.42041vw)/8*2)}
|
||||
c7-8:not([x]), [c7-8]:not(x), [data-c7-8]:not(x), r-c[c7-8]:not(x) > *, [data-r-c][data-c7-8] > * {width:calc(100%/8*7 - (5.455px + 1.42041vw)/8)}
|
||||
|
||||
/*
|
||||
Specificity on column width selectors (joined & column tag version)
|
||||
Priority order from lowest to highest (higher priority must have higher specificity)
|
||||
|
||||
#3: Default column eg:
|
||||
(specificity: 0,0,1) r-c > *,
|
||||
(specificity: 0,1,0) [r-c] > *,
|
||||
(specificity: 0,1,0) [data-r-c] > * {}
|
||||
|
||||
#2: Column tag eg:
|
||||
(specificity: 0,1,1) [join] > c1-2,
|
||||
(specificity: 0,2,0) [join] > [data-c1-2],
|
||||
(specificity: 0,1,1) [data-join] > c1-2,
|
||||
(specificity: 0,2,0) [data-join] > [data-c1-2] {}
|
||||
|
||||
#1: Column width specified on parent tag:
|
||||
(specificity: 0,2,1) [join][c1-2]:not(x) > *,
|
||||
(specificity: 0,2,1) [data-join][data-c1-2]:not(x) > * {}
|
||||
|
||||
Put it all together and we have:
|
||||
[join] > c1-2, [join] > [data-c1-2], [data-join] > c1-2, [data-join] > [data-c1-2], [join][c1-2]:not(x) > *, [data-join][data-c1-2]:not(x) > * {}
|
||||
*/
|
||||
|
||||
/* Column Widths (Joined) */
|
||||
[join] > c1-1, [join] > [data-c1-1], [data-join] > c1-1, [data-join] > [data-c1-1], [join][c1-1]:not(x) > *, [data-join][data-c1-1]:not(x) > * {width:100%}
|
||||
[join] > c1-2, [join] > [data-c1-2], [data-join] > c1-2, [data-join] > [data-c1-2], [join][c1-2]:not(x) > *, [data-join][data-c1-2]:not(x) > *,
|
||||
[join] > c2-4, [join] > [data-c2-4], [data-join] > c2-4, [data-join] > [data-c2-4], [join][c2-4]:not(x) > *, [data-join][data-c2-4]:not(x) > *,
|
||||
[join] > c3-6, [join] > [data-c3-6], [data-join] > c3-6, [data-join] > [data-c3-6], [join][c3-6]:not(x) > *, [data-join][data-c3-6]:not(x) > *,
|
||||
[join] > c4-8, [join] > [data-c4-8], [data-join] > c4-8, [data-join] > [data-c4-8], [join][c4-8]:not(x) > *, [data-join][data-c4-8]:not(x) > * {width:50%}
|
||||
[join] > c1-3, [join] > [data-c1-3], [data-join] > c1-3, [data-join] > [data-c1-3], [join][c1-3]:not(x) > *, [data-join][data-c1-3]:not(x) > *,
|
||||
[join] > c2-6, [join] > [data-c2-6], [data-join] > c2-6, [data-join] > [data-c2-6], [join][c2-6]:not(x) > *, [data-join][data-c2-6]:not(x) > * {width:calc(100%/3)}
|
||||
[join] > c2-3, [join] > [data-c2-3], [data-join] > c2-3, [data-join] > [data-c2-3], [join][c2-3]:not(x) > *, [data-join][data-c2-3]:not(x) > *,
|
||||
[join] > c4-6, [join] > [data-c4-6], [data-join] > c4-6, [data-join] > [data-c4-6], [join][c4-6]:not(x) > *, [data-join][data-c4-6]:not(x) > * {width:calc(100%/3*2)}
|
||||
[join] > c1-4, [join] > [data-c1-4], [data-join] > c1-4, [data-join] > [data-c1-4], [join][c1-4]:not(x) > *, [data-join][data-c1-4]:not(x) > *,
|
||||
[join] > c2-8, [join] > [data-c2-8], [data-join] > c2-8, [data-join] > [data-c2-8], [join][c2-8]:not(x) > *, [data-join][data-c2-8]:not(x) > * {width:25%}
|
||||
[join] > c3-4, [join] > [data-c3-4], [data-join] > c3-4, [data-join] > [data-c3-4], [join][c3-4]:not(x) > *, [data-join][data-c3-4]:not(x) > *,
|
||||
[join] > c6-8, [join] > [data-c6-8], [data-join] > c6-8, [data-join] > [data-c6-8], [join][c6-8]:not(x) > *, [data-join][data-c6-8]:not(x) > * {width:75%}
|
||||
[join] > c1-5, [join] > [data-c1-5], [data-join] > c1-5, [data-join] > [data-c1-5], [join][c1-5]:not(x) > *, [data-join][data-c1-5]:not(x) > * {width:20%}
|
||||
[join] > c2-5, [join] > [data-c2-5], [data-join] > c2-5, [data-join] > [data-c2-5], [join][c2-5]:not(x) > *, [data-join][data-c2-5]:not(x) > * {width:40%}
|
||||
[join] > c3-5, [join] > [data-c3-5], [data-join] > c3-5, [data-join] > [data-c3-5], [join][c3-5]:not(x) > *, [data-join][data-c3-5]:not(x) > * {width:60%}
|
||||
[join] > c4-5, [join] > [data-c4-5], [data-join] > c4-5, [data-join] > [data-c4-5], [join][c4-5]:not(x) > *, [data-join][data-c4-5]:not(x) > * {width:80%}
|
||||
[join] > c1-6, [join] > [data-c1-6], [data-join] > c1-6, [data-join] > [data-c1-6], [join][c1-6]:not(x) > *, [data-join][data-c1-6]:not(x) > * {width:calc(100%/6)}
|
||||
[join] > c5-6, [join] > [data-c5-6], [data-join] > c5-6, [data-join] > [data-c5-6], [join][c5-6]:not(x) > *, [data-join][data-c5-6]:not(x) > * {width:calc(100%/6*5)}
|
||||
[join] > c1-7, [join] > [data-c1-7], [data-join] > c1-7, [data-join] > [data-c1-7], [join][c1-7]:not(x) > *, [data-join][data-c1-7]:not(x) > * {width:calc(100%/7)}
|
||||
[join] > c2-7, [join] > [data-c2-7], [data-join] > c2-7, [data-join] > [data-c2-7], [join][c2-7]:not(x) > *, [data-join][data-c2-7]:not(x) > * {width:calc(100%/7*2)}
|
||||
[join] > c3-7, [join] > [data-c3-7], [data-join] > c3-7, [data-join] > [data-c3-7], [join][c3-7]:not(x) > *, [data-join][data-c3-7]:not(x) > * {width:calc(100%/7*3)}
|
||||
[join] > c4-7, [join] > [data-c4-7], [data-join] > c4-7, [data-join] > [data-c4-7], [join][c4-7]:not(x) > *, [data-join][data-c4-7]:not(x) > * {width:calc(100%/7*4)}
|
||||
[join] > c5-7, [join] > [data-c5-7], [data-join] > c5-7, [data-join] > [data-c5-7], [join][c5-7]:not(x) > *, [data-join][data-c5-7]:not(x) > * {width:calc(100%/7*5)}
|
||||
[join] > c6-7, [join] > [data-c6-7], [data-join] > c6-7, [data-join] > [data-c6-7], [join][c6-7]:not(x) > *, [data-join][data-c6-7]:not(x) > * {width:calc(100%/7*6)}
|
||||
[join] > c1-8, [join] > [data-c1-8], [data-join] > c1-8, [data-join] > [data-c1-8], [join][c1-8]:not(x) > *, [data-join][data-c1-8]:not(x) > * {width:calc(100%/8)}
|
||||
[join] > c3-8, [join] > [data-c3-8], [data-join] > c3-8, [data-join] > [data-c3-8], [join][c3-8]:not(x) > *, [data-join][data-c3-8]:not(x) > * {width:calc(100%/8*3)}
|
||||
[join] > c5-8, [join] > [data-c5-8], [data-join] > c5-8, [data-join] > [data-c5-8], [join][c5-8]:not(x) > *, [data-join][data-c5-8]:not(x) > * {width:calc(100%/8*5)}
|
||||
[join] > c7-8, [join] > [data-c7-8], [data-join] > c7-8, [data-join] > [data-c7-8], [join][c7-8]:not(x) > *, [data-join][data-c7-8]:not(x) > * {width:calc(100%/8*7)}
|
||||
|
||||
/* Column Ordering */
|
||||
[xs1], [data-xs1] {order:-8}
|
||||
[xs2], [data-xs2] {order:-7}
|
||||
[xs3], [data-xs3] {order:-6}
|
||||
[xs4], [data-xs4] {order:-5}
|
||||
[xs5], [data-xs5] {order:-4}
|
||||
[xs6], [data-xs6] {order:-3}
|
||||
[xs7], [data-xs7] {order:-2}
|
||||
[xs8], [data-xs8] {order:-1}
|
||||
|
||||
/* Small Breakpoint: (sm) */
|
||||
@media (min-width:600px) {
|
||||
/*
|
||||
Specificity on column width selectors (Gutters)
|
||||
Priority order from lowest to highest (higher priority must have higher specificity)
|
||||
|
||||
#3: Default column eg:
|
||||
(specificity: 0,0,1) r-c > *,
|
||||
(specificity: 0,1,0) [r-c] > *,
|
||||
(specificity: 0,1,0) [data-r-c] > * {}
|
||||
|
||||
#2: Column tag eg:
|
||||
(specificity: 0,1,1) [sm1-2]:not(x),
|
||||
(specificity: 0,1,1) [data-sm1-2]:not(x) {}
|
||||
|
||||
#1: Column width specified on parent tag:
|
||||
(specificity: 0,1,2) r-c[sm1-2]:not(x) > *,
|
||||
(specificity: 0,2,0) [data-r-c][sm1-2] > * {}
|
||||
|
||||
Put it all together and we have:
|
||||
[sm1-2]:not(x), [data-sm1-2]:not(x), r-c[sm1-2]:not(x) > *, [data-r-c][data-sm1-2] > * {}
|
||||
*/
|
||||
|
||||
/* Column Widths */
|
||||
[sm1-1]:not(x), [data-sm1-1]:not(x), r-c[sm1-1]:not(x) > *, [data-r-c][data-sm1-1] > * {width:100%}
|
||||
[sm1-2]:not(x), [data-sm1-2]:not(x), r-c[sm1-2]:not(x) > *, [data-r-c][data-sm1-2] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[sm1-3]:not(x), [data-sm1-3]:not(x), r-c[sm1-3]:not(x) > *, [data-r-c][data-sm1-3] > * {width:calc(100%/3 - (5.455px + 1.42041vw)/3*2)}
|
||||
[sm2-3]:not(x), [data-sm2-3]:not(x), r-c[sm2-3]:not(x) > *, [data-r-c][data-sm2-3] > * {width:calc(100%/3*2 - (5.455px + 1.42041vw)/3)}
|
||||
[sm1-4]:not(x), [data-sm1-4]:not(x), r-c[sm1-4]:not(x) > *, [data-r-c][data-sm1-4] > * {width:calc(25% - (5.455px + 1.42041vw)/4*3)}
|
||||
[sm2-4]:not(x), [data-sm2-4]:not(x), r-c[sm2-4]:not(x) > *, [data-r-c][data-sm2-4] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[sm3-4]:not(x), [data-sm3-4]:not(x), r-c[sm3-4]:not(x) > *, [data-r-c][data-sm3-4] > * {width:calc(25% - (5.455px + 1.42041vw)/4)}
|
||||
[sm1-5]:not(x), [data-sm1-5]:not(x), r-c[sm1-5]:not(x) > *, [data-r-c][data-sm1-5] > * {width:calc(100%/5 - (5.455px + 1.42041vw)/5*4)}
|
||||
[sm2-5]:not(x), [data-sm2-5]:not(x), r-c[sm2-5]:not(x) > *, [data-r-c][data-sm2-5] > * {width:calc(100%/5*2 - (5.455px + 1.42041vw)/5*3)}
|
||||
[sm3-5]:not(x), [data-sm3-5]:not(x), r-c[sm3-5]:not(x) > *, [data-r-c][data-sm3-5] > * {width:calc(100%/5*3 - (5.455px + 1.42041vw)/5*2)}
|
||||
[sm4-5]:not(x), [data-sm4-5]:not(x), r-c[sm4-5]:not(x) > *, [data-r-c][data-sm4-5] > * {width:calc(100%/5*4 - (5.455px + 1.42041vw)/5)}
|
||||
[sm1-6]:not(x), [data-sm1-6]:not(x), r-c[sm1-6]:not(x) > *, [data-r-c][data-sm1-6] > * {width:calc(100%/6 - (5.455px + 1.42041vw)/6*5)}
|
||||
[sm2-6]:not(x), [data-sm2-6]:not(x), r-c[sm2-6]:not(x) > *, [data-r-c][data-sm2-6] > * {width:calc(100%/6*2 - (5.455px + 1.42041vw)/6*4)}
|
||||
[sm3-6]:not(x), [data-sm3-6]:not(x), r-c[sm3-6]:not(x) > *, [data-r-c][data-sm3-6] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[sm4-6]:not(x), [data-sm4-6]:not(x), r-c[sm4-6]:not(x) > *, [data-r-c][data-sm4-6] > * {width:calc(100%/6*4 - (5.455px + 1.42041vw)/6*2)}
|
||||
[sm5-6]:not(x), [data-sm5-6]:not(x), r-c[sm5-6]:not(x) > *, [data-r-c][data-sm5-6] > * {width:calc(100%/6*5 - (5.455px + 1.42041vw)/6)}
|
||||
[sm1-7]:not(x), [data-sm1-7]:not(x), r-c[sm1-7]:not(x) > *, [data-r-c][data-sm1-7] > * {width:calc(100%/7 - (5.455px + 1.42041vw)/7*6)}
|
||||
[sm2-7]:not(x), [data-sm2-7]:not(x), r-c[sm2-7]:not(x) > *, [data-r-c][data-sm2-7] > * {width:calc(100%/7*2 - (5.455px + 1.42041vw)/7*5)}
|
||||
[sm3-7]:not(x), [data-sm3-7]:not(x), r-c[sm3-7]:not(x) > *, [data-r-c][data-sm3-7] > * {width:calc(100%/7*3 - (5.455px + 1.42041vw)/7*4)}
|
||||
[sm4-7]:not(x), [data-sm4-7]:not(x), r-c[sm4-7]:not(x) > *, [data-r-c][data-sm4-7] > * {width:calc(100%/7*4 - (5.455px + 1.42041vw)/7*3)}
|
||||
[sm5-7]:not(x), [data-sm5-7]:not(x), r-c[sm5-7]:not(x) > *, [data-r-c][data-sm5-7] > * {width:calc(100%/7*5 - (5.455px + 1.42041vw)/7*2)}
|
||||
[sm6-7]:not(x), [data-sm6-7]:not(x), r-c[sm6-7]:not(x) > *, [data-r-c][data-sm6-7] > * {width:calc(100%/7*6 - (5.455px + 1.42041vw)/7)}
|
||||
[sm1-8]:not(x), [data-sm1-8]:not(x), r-c[sm1-8]:not(x) > *, [data-r-c][data-sm1-8] > * {width:calc(100%/8 - (5.455px + 1.42041vw)/8*7)}
|
||||
[sm2-8]:not(x), [data-sm2-8]:not(x), r-c[sm2-8]:not(x) > *, [data-r-c][data-sm2-8] > * {width:calc(100%/8*2 - (5.455px + 1.42041vw)/8*6)}
|
||||
[sm3-8]:not(x), [data-sm3-8]:not(x), r-c[sm3-8]:not(x) > *, [data-r-c][data-sm3-8] > * {width:calc(100%/8*3 - (5.455px + 1.42041vw)/8*5)}
|
||||
[sm4-8]:not(x), [data-sm4-8]:not(x), r-c[sm4-8]:not(x) > *, [data-r-c][data-sm4-8] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[sm5-8]:not(x), [data-sm5-8]:not(x), r-c[sm5-8]:not(x) > *, [data-r-c][data-sm5-8] > * {width:calc(100%/8*5 - (5.455px + 1.42041vw)/8*3)}
|
||||
[sm6-8]:not(x), [data-sm6-8]:not(x), r-c[sm6-8]:not(x) > *, [data-r-c][data-sm6-8] > * {width:calc(100%/8*6 - (5.455px + 1.42041vw)/8*2)}
|
||||
[sm7-8]:not(x), [data-sm7-8]:not(x), r-c[sm7-8]:not(x) > *, [data-r-c][data-sm7-8] > * {width:calc(100%/8*7 - (5.455px + 1.42041vw)/8)}
|
||||
|
||||
/*
|
||||
Specificity on column width selectors (Joined)
|
||||
Priority order from lowest to highest (higher priority must have higher specificity)
|
||||
|
||||
#3: Default column eg:
|
||||
(specificity: 0,0,1) r-c > *,
|
||||
(specificity: 0,1,0) [r-c] > *,
|
||||
(specificity: 0,1,0) [data-r-c] > * {}
|
||||
|
||||
#2: Column tag eg:
|
||||
(specificity: 0,2,0) [join] > [sm1-2],
|
||||
(specificity: 0,2,0) [join] > [data-sm1-2],
|
||||
(specificity: 0,2,0) [data-join] > [sm1-2],
|
||||
(specificity: 0,2,0) [data-join] > [data-sm1-2] {}
|
||||
|
||||
#1: Column width specified on parent tag:
|
||||
(specificity: 0,2,1) [join][sm1-2]:not(x) > *,
|
||||
(specificity: 0,2,1) [data-join][data-sm1-2]:not(x) > * {}
|
||||
|
||||
Put it all together and we have:
|
||||
[join] > [sm1-2], [join] > [data-sm1-2], [data-join] > [sm1-2], [data-join] > [data-sm1-2], [join][sm1-2]:not(x) > *, [data-join][data-sm1-2]:not(x) > * {}
|
||||
*/
|
||||
|
||||
/* Column Widths (Joined) */
|
||||
[join] > [sm1-1], [join] > [data-sm1-1], [data-join] > [sm1-1], [data-join] > [data-sm1-1], [join][sm1-1]:not([r-c]) > *, [data-join][data-sm1-1]:not([x]) > * {width:100%}
|
||||
[join] > [sm1-2], [join] > [data-sm1-2], [data-join] > [sm1-2], [data-join] > [data-sm1-2], [join][sm1-2]:not([r-c]) > *, [data-join][data-sm1-2]:not([x]) > *,
|
||||
[join] > [sm2-4], [join] > [data-sm2-4], [data-join] > [sm2-4], [data-join] > [data-sm2-4], [join][sm2-4]:not([r-c]) > *, [data-join][data-sm2-4]:not([x]) > *,
|
||||
[join] > [sm3-6], [join] > [data-sm3-6], [data-join] > [sm3-6], [data-join] > [data-sm3-6], [join][sm3-6]:not([r-c]) > *, [data-join][data-sm3-6]:not([x]) > *,
|
||||
[join] > [sm4-8], [join] > [data-sm4-8], [data-join] > [sm4-8], [data-join] > [data-sm4-8], [join][sm4-8]:not([r-c]) > *, [data-join][data-sm4-8]:not([x]) > * {width:50%}
|
||||
[join] > [sm1-3], [join] > [data-sm1-3], [data-join] > [sm1-3], [data-join] > [data-sm1-3], [join][sm1-3]:not([r-c]) > *, [data-join][data-sm1-3]:not([x]) > *,
|
||||
[join] > [sm2-6], [join] > [data-sm2-6], [data-join] > [sm2-6], [data-join] > [data-sm2-6], [join][sm2-6]:not([r-c]) > *, [data-join][data-sm2-6]:not([x]) > * {width:calc(100%/3)}
|
||||
[join] > [sm2-3], [join] > [data-sm2-3], [data-join] > [sm2-3], [data-join] > [data-sm2-3], [join][sm2-3]:not([r-c]) > *, [data-join][data-sm2-3]:not([x]) > *,
|
||||
[join] > [sm4-6], [join] > [data-sm4-6], [data-join] > [sm4-6], [data-join] > [data-sm4-6], [join][sm4-6]:not([r-c]) > *, [data-join][data-sm4-6]:not([x]) > * {width:calc(100%/3*2)}
|
||||
[join] > [sm1-4], [join] > [data-sm1-4], [data-join] > [sm1-4], [data-join] > [data-sm1-4], [join][sm1-4]:not([r-c]) > *, [data-join][data-sm1-4]:not([x]) > *,
|
||||
[join] > [sm2-8], [join] > [data-sm2-8], [data-join] > [sm2-8], [data-join] > [data-sm2-8], [join][sm2-8]:not([r-c]) > *, [data-join][data-sm2-8]:not([x]) > * {width:25%}
|
||||
[join] > [sm3-4], [join] > [data-sm3-4], [data-join] > [sm3-4], [data-join] > [data-sm3-4], [join][sm3-4]:not([r-c]) > *, [data-join][data-sm3-4]:not([x]) > *,
|
||||
[join] > [sm6-8], [join] > [data-sm6-8], [data-join] > [sm6-8], [data-join] > [data-sm6-8], [join][sm6-8]:not([r-c]) > *, [data-join][data-sm6-8]:not([x]) > * {width:75%}
|
||||
[join] > [sm1-5], [join] > [data-sm1-5], [data-join] > [sm1-5], [data-join] > [data-sm1-5], [join][sm1-5]:not([r-c]) > *, [data-join][data-sm1-5]:not([x]) > * {width:20%}
|
||||
[join] > [sm2-5], [join] > [data-sm2-5], [data-join] > [sm2-5], [data-join] > [data-sm2-5], [join][sm2-5]:not([r-c]) > *, [data-join][data-sm2-5]:not([x]) > * {width:40%}
|
||||
[join] > [sm3-5], [join] > [data-sm3-5], [data-join] > [sm3-5], [data-join] > [data-sm3-5], [join][sm3-5]:not([r-c]) > *, [data-join][data-sm3-5]:not([x]) > * {width:60%}
|
||||
[join] > [sm4-5], [join] > [data-sm4-5], [data-join] > [sm4-5], [data-join] > [data-sm4-5], [join][sm4-5]:not([r-c]) > *, [data-join][data-sm4-5]:not([x]) > * {width:80%}
|
||||
[join] > [sm1-6], [join] > [data-sm1-6], [data-join] > [sm1-6], [data-join] > [data-sm1-6], [join][sm1-6]:not([r-c]) > *, [data-join][data-sm1-6]:not([x]) > * {width:calc(100%/6)}
|
||||
[join] > [sm5-6], [join] > [data-sm5-6], [data-join] > [sm5-6], [data-join] > [data-sm5-6], [join][sm5-6]:not([r-c]) > *, [data-join][data-sm5-6]:not([x]) > * {width:calc(100%/6*5)}
|
||||
[join] > [sm1-7], [join] > [data-sm1-7], [data-join] > [sm1-7], [data-join] > [data-sm1-7], [join][sm1-7]:not([r-c]) > *, [data-join][data-sm1-7]:not([x]) > * {width:calc(100%/7)}
|
||||
[join] > [sm2-7], [join] > [data-sm2-7], [data-join] > [sm2-7], [data-join] > [data-sm2-7], [join][sm2-7]:not([r-c]) > *, [data-join][data-sm2-7]:not([x]) > * {width:calc(100%/7*2)}
|
||||
[join] > [sm3-7], [join] > [data-sm3-7], [data-join] > [sm3-7], [data-join] > [data-sm3-7], [join][sm3-7]:not([r-c]) > *, [data-join][data-sm3-7]:not([x]) > * {width:calc(100%/7*3)}
|
||||
[join] > [sm4-7], [join] > [data-sm4-7], [data-join] > [sm4-7], [data-join] > [data-sm4-7], [join][sm4-7]:not([r-c]) > *, [data-join][data-sm4-7]:not([x]) > * {width:calc(100%/7*4)}
|
||||
[join] > [sm5-7], [join] > [data-sm5-7], [data-join] > [sm5-7], [data-join] > [data-sm5-7], [join][sm5-7]:not([r-c]) > *, [data-join][data-sm5-7]:not([x]) > * {width:calc(100%/7*5)}
|
||||
[join] > [sm6-7], [join] > [data-sm6-7], [data-join] > [sm6-7], [data-join] > [data-sm6-7], [join][sm6-7]:not([r-c]) > *, [data-join][data-sm6-7]:not([x]) > * {width:calc(100%/7*6)}
|
||||
[join] > [sm1-8], [join] > [data-sm1-8], [data-join] > [sm1-8], [data-join] > [data-sm1-8], [join][sm1-8]:not([r-c]) > *, [data-join][data-sm1-8]:not([x]) > * {width:calc(100%/8)}
|
||||
[join] > [sm3-8], [join] > [data-sm3-8], [data-join] > [sm3-8], [data-join] > [data-sm3-8], [join][sm3-8]:not([r-c]) > *, [data-join][data-sm3-8]:not([x]) > * {width:calc(100%/8*3)}
|
||||
[join] > [sm5-8], [join] > [data-sm5-8], [data-join] > [sm5-8], [data-join] > [data-sm5-8], [join][sm5-8]:not([r-c]) > *, [data-join][data-sm5-8]:not([x]) > * {width:calc(100%/8*5)}
|
||||
[join] > [sm7-8], [join] > [data-sm7-8], [data-join] > [sm7-8], [data-join] > [data-sm7-8], [join][sm7-8]:not([r-c]) > *, [data-join][data-sm7-8]:not([x]) > * {width:calc(100%/8*7)}
|
||||
|
||||
/* Column Ordering */
|
||||
[sm1], [data-sm1] {order:-8}
|
||||
[sm2], [data-sm2] {order:-7}
|
||||
[sm3], [data-sm3] {order:-6}
|
||||
[sm4], [data-sm4] {order:-5}
|
||||
[sm5], [data-sm5] {order:-4}
|
||||
[sm6], [data-sm6] {order:-3}
|
||||
[sm7], [data-sm7] {order:-2}
|
||||
[sm8], [data-sm8] {order:-1}
|
||||
}
|
||||
|
||||
/* Medium Breakpoint: (md) */
|
||||
@media (min-width:900px) {
|
||||
|
||||
/* Column Widths */
|
||||
[md1-1]:not(x), [data-md1-1]:not(x), r-c[md1-1]:not(x) > *, [data-r-c][data-md1-1] > * {width:100%}
|
||||
[md1-2]:not(x), [data-md1-2]:not(x), r-c[md1-2]:not(x) > *, [data-r-c][data-md1-2] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[md1-3]:not(x), [data-md1-3]:not(x), r-c[md1-3]:not(x) > *, [data-r-c][data-md1-3] > * {width:calc(100%/3 - (5.455px + 1.42041vw)/3*2)}
|
||||
[md2-3]:not(x), [data-md2-3]:not(x), r-c[md2-3]:not(x) > *, [data-r-c][data-md2-3] > * {width:calc(100%/3*2 - (5.455px + 1.42041vw)/3)}
|
||||
[md1-4]:not(x), [data-md1-4]:not(x), r-c[md1-4]:not(x) > *, [data-r-c][data-md1-4] > * {width:calc(25% - (5.455px + 1.42041vw)/4*3)}
|
||||
[md2-4]:not(x), [data-md2-4]:not(x), r-c[md2-4]:not(x) > *, [data-r-c][data-md2-4] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[md3-4]:not(x), [data-md3-4]:not(x), r-c[md3-4]:not(x) > *, [data-r-c][data-md3-4] > * {width:calc(25% - (5.455px + 1.42041vw)/4)}
|
||||
[md1-5]:not(x), [data-md1-5]:not(x), r-c[md1-5]:not(x) > *, [data-r-c][data-md1-5] > * {width:calc(100%/5 - (5.455px + 1.42041vw)/5*4)}
|
||||
[md2-5]:not(x), [data-md2-5]:not(x), r-c[md2-5]:not(x) > *, [data-r-c][data-md2-5] > * {width:calc(100%/5*2 - (5.455px + 1.42041vw)/5*3)}
|
||||
[md3-5]:not(x), [data-md3-5]:not(x), r-c[md3-5]:not(x) > *, [data-r-c][data-md3-5] > * {width:calc(100%/5*3 - (5.455px + 1.42041vw)/5*2)}
|
||||
[md4-5]:not(x), [data-md4-5]:not(x), r-c[md4-5]:not(x) > *, [data-r-c][data-md4-5] > * {width:calc(100%/5*4 - (5.455px + 1.42041vw)/5)}
|
||||
[md1-6]:not(x), [data-md1-6]:not(x), r-c[md1-6]:not(x) > *, [data-r-c][data-md1-6] > * {width:calc(100%/6 - (5.455px + 1.42041vw)/6*5)}
|
||||
[md2-6]:not(x), [data-md2-6]:not(x), r-c[md2-6]:not(x) > *, [data-r-c][data-md2-6] > * {width:calc(100%/6*2 - (5.455px + 1.42041vw)/6*4)}
|
||||
[md3-6]:not(x), [data-md3-6]:not(x), r-c[md3-6]:not(x) > *, [data-r-c][data-md3-6] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[md4-6]:not(x), [data-md4-6]:not(x), r-c[md4-6]:not(x) > *, [data-r-c][data-md4-6] > * {width:calc(100%/6*4 - (5.455px + 1.42041vw)/6*2)}
|
||||
[md5-6]:not(x), [data-md5-6]:not(x), r-c[md5-6]:not(x) > *, [data-r-c][data-md5-6] > * {width:calc(100%/6*5 - (5.455px + 1.42041vw)/6)}
|
||||
[md1-7]:not(x), [data-md1-7]:not(x), r-c[md1-7]:not(x) > *, [data-r-c][data-md1-7] > * {width:calc(100%/7 - (5.455px + 1.42041vw)/7*6)}
|
||||
[md2-7]:not(x), [data-md2-7]:not(x), r-c[md2-7]:not(x) > *, [data-r-c][data-md2-7] > * {width:calc(100%/7*2 - (5.455px + 1.42041vw)/7*5)}
|
||||
[md3-7]:not(x), [data-md3-7]:not(x), r-c[md3-7]:not(x) > *, [data-r-c][data-md3-7] > * {width:calc(100%/7*3 - (5.455px + 1.42041vw)/7*4)}
|
||||
[md4-7]:not(x), [data-md4-7]:not(x), r-c[md4-7]:not(x) > *, [data-r-c][data-md4-7] > * {width:calc(100%/7*4 - (5.455px + 1.42041vw)/7*3)}
|
||||
[md5-7]:not(x), [data-md5-7]:not(x), r-c[md5-7]:not(x) > *, [data-r-c][data-md5-7] > * {width:calc(100%/7*5 - (5.455px + 1.42041vw)/7*2)}
|
||||
[md6-7]:not(x), [data-md6-7]:not(x), r-c[md6-7]:not(x) > *, [data-r-c][data-md6-7] > * {width:calc(100%/7*6 - (5.455px + 1.42041vw)/7)}
|
||||
[md1-8]:not(x), [data-md1-8]:not(x), r-c[md1-8]:not(x) > *, [data-r-c][data-md1-8] > * {width:calc(100%/8 - (5.455px + 1.42041vw)/8*7)}
|
||||
[md2-8]:not(x), [data-md2-8]:not(x), r-c[md2-8]:not(x) > *, [data-r-c][data-md2-8] > * {width:calc(100%/8*2 - (5.455px + 1.42041vw)/8*6)}
|
||||
[md3-8]:not(x), [data-md3-8]:not(x), r-c[md3-8]:not(x) > *, [data-r-c][data-md3-8] > * {width:calc(100%/8*3 - (5.455px + 1.42041vw)/8*5)}
|
||||
[md4-8]:not(x), [data-md4-8]:not(x), r-c[md4-8]:not(x) > *, [data-r-c][data-md4-8] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[md5-8]:not(x), [data-md5-8]:not(x), r-c[md5-8]:not(x) > *, [data-r-c][data-md5-8] > * {width:calc(100%/8*5 - (5.455px + 1.42041vw)/8*3)}
|
||||
[md6-8]:not(x), [data-md6-8]:not(x), r-c[md6-8]:not(x) > *, [data-r-c][data-md6-8] > * {width:calc(100%/8*6 - (5.455px + 1.42041vw)/8*2)}
|
||||
[md7-8]:not(x), [data-md7-8]:not(x), r-c[md7-8]:not(x) > *, [data-r-c][data-md7-8] > * {width:calc(100%/8*7 - (5.455px + 1.42041vw)/8)}
|
||||
|
||||
/* Column Widths (Joined) */
|
||||
[join] > [md1-1], [join] > [data-md1-1], [data-join] > [md1-1], [data-join] > [data-md1-1], [join][md1-1]:not([r-c]) > *, [data-join][data-md1-1]:not([x]) > * {width:100%}
|
||||
[join] > [md1-2], [join] > [data-md1-2], [data-join] > [md1-2], [data-join] > [data-md1-2], [join][md1-2]:not([r-c]) > *, [data-join][data-md1-2]:not([x]) > *,
|
||||
[join] > [md2-4], [join] > [data-md2-4], [data-join] > [md2-4], [data-join] > [data-md2-4], [join][md2-4]:not([r-c]) > *, [data-join][data-md2-4]:not([x]) > *,
|
||||
[join] > [md3-6], [join] > [data-md3-6], [data-join] > [md3-6], [data-join] > [data-md3-6], [join][md3-6]:not([r-c]) > *, [data-join][data-md3-6]:not([x]) > *,
|
||||
[join] > [md4-8], [join] > [data-md4-8], [data-join] > [md4-8], [data-join] > [data-md4-8], [join][md4-8]:not([r-c]) > *, [data-join][data-md4-8]:not([x]) > * {width:50%}
|
||||
[join] > [md1-3], [join] > [data-md1-3], [data-join] > [md1-3], [data-join] > [data-md1-3], [join][md1-3]:not([r-c]) > *, [data-join][data-md1-3]:not([x]) > *,
|
||||
[join] > [md2-6], [join] > [data-md2-6], [data-join] > [md2-6], [data-join] > [data-md2-6], [join][md2-6]:not([r-c]) > *, [data-join][data-md2-6]:not([x]) > * {width:calc(100%/3)}
|
||||
[join] > [md2-3], [join] > [data-md2-3], [data-join] > [md2-3], [data-join] > [data-md2-3], [join][md2-3]:not([r-c]) > *, [data-join][data-md2-3]:not([x]) > *,
|
||||
[join] > [md4-6], [join] > [data-md4-6], [data-join] > [md4-6], [data-join] > [data-md4-6], [join][md4-6]:not([r-c]) > *, [data-join][data-md4-6]:not([x]) > * {width:calc(100%/3*2)}
|
||||
[join] > [md1-4], [join] > [data-md1-4], [data-join] > [md1-4], [data-join] > [data-md1-4], [join][md1-4]:not([r-c]) > *, [data-join][data-md1-4]:not([x]) > *,
|
||||
[join] > [md2-8], [join] > [data-md2-8], [data-join] > [md2-8], [data-join] > [data-md2-8], [join][md2-8]:not([r-c]) > *, [data-join][data-md2-8]:not([x]) > * {width:25%}
|
||||
[join] > [md3-4], [join] > [data-md3-4], [data-join] > [md3-4], [data-join] > [data-md3-4], [join][md3-4]:not([r-c]) > *, [data-join][data-md3-4]:not([x]) > *,
|
||||
[join] > [md6-8], [join] > [data-md6-8], [data-join] > [md6-8], [data-join] > [data-md6-8], [join][md6-8]:not([r-c]) > *, [data-join][data-md6-8]:not([x]) > * {width:75%}
|
||||
[join] > [md1-5], [join] > [data-md1-5], [data-join] > [md1-5], [data-join] > [data-md1-5], [join][md1-5]:not([r-c]) > *, [data-join][data-md1-5]:not([x]) > * {width:20%}
|
||||
[join] > [md2-5], [join] > [data-md2-5], [data-join] > [md2-5], [data-join] > [data-md2-5], [join][md2-5]:not([r-c]) > *, [data-join][data-md2-5]:not([x]) > * {width:40%}
|
||||
[join] > [md3-5], [join] > [data-md3-5], [data-join] > [md3-5], [data-join] > [data-md3-5], [join][md3-5]:not([r-c]) > *, [data-join][data-md3-5]:not([x]) > * {width:60%}
|
||||
[join] > [md4-5], [join] > [data-md4-5], [data-join] > [md4-5], [data-join] > [data-md4-5], [join][md4-5]:not([r-c]) > *, [data-join][data-md4-5]:not([x]) > * {width:80%}
|
||||
[join] > [md1-6], [join] > [data-md1-6], [data-join] > [md1-6], [data-join] > [data-md1-6], [join][md1-6]:not([r-c]) > *, [data-join][data-md1-6]:not([x]) > * {width:calc(100%/6)}
|
||||
[join] > [md5-6], [join] > [data-md5-6], [data-join] > [md5-6], [data-join] > [data-md5-6], [join][md5-6]:not([r-c]) > *, [data-join][data-md5-6]:not([x]) > * {width:calc(100%/6*5)}
|
||||
[join] > [md1-7], [join] > [data-md1-7], [data-join] > [md1-7], [data-join] > [data-md1-7], [join][md1-7]:not([r-c]) > *, [data-join][data-md1-7]:not([x]) > * {width:calc(100%/7)}
|
||||
[join] > [md2-7], [join] > [data-md2-7], [data-join] > [md2-7], [data-join] > [data-md2-7], [join][md2-7]:not([r-c]) > *, [data-join][data-md2-7]:not([x]) > * {width:calc(100%/7*2)}
|
||||
[join] > [md3-7], [join] > [data-md3-7], [data-join] > [md3-7], [data-join] > [data-md3-7], [join][md3-7]:not([r-c]) > *, [data-join][data-md3-7]:not([x]) > * {width:calc(100%/7*3)}
|
||||
[join] > [md4-7], [join] > [data-md4-7], [data-join] > [md4-7], [data-join] > [data-md4-7], [join][md4-7]:not([r-c]) > *, [data-join][data-md4-7]:not([x]) > * {width:calc(100%/7*4)}
|
||||
[join] > [md5-7], [join] > [data-md5-7], [data-join] > [md5-7], [data-join] > [data-md5-7], [join][md5-7]:not([r-c]) > *, [data-join][data-md5-7]:not([x]) > * {width:calc(100%/7*5)}
|
||||
[join] > [md6-7], [join] > [data-md6-7], [data-join] > [md6-7], [data-join] > [data-md6-7], [join][md6-7]:not([r-c]) > *, [data-join][data-md6-7]:not([x]) > * {width:calc(100%/7*6)}
|
||||
[join] > [md1-8], [join] > [data-md1-8], [data-join] > [md1-8], [data-join] > [data-md1-8], [join][md1-8]:not([r-c]) > *, [data-join][data-md1-8]:not([x]) > * {width:calc(100%/8)}
|
||||
[join] > [md3-8], [join] > [data-md3-8], [data-join] > [md3-8], [data-join] > [data-md3-8], [join][md3-8]:not([r-c]) > *, [data-join][data-md3-8]:not([x]) > * {width:calc(100%/8*3)}
|
||||
[join] > [md5-8], [join] > [data-md5-8], [data-join] > [md5-8], [data-join] > [data-md5-8], [join][md5-8]:not([r-c]) > *, [data-join][data-md5-8]:not([x]) > * {width:calc(100%/8*5)}
|
||||
[join] > [md7-8], [join] > [data-md7-8], [data-join] > [md7-8], [data-join] > [data-md7-8], [join][md7-8]:not([r-c]) > *, [data-join][data-md7-8]:not([x]) > * {width:calc(100%/8*7)}
|
||||
|
||||
/* Column Ordering */
|
||||
[md1], [data-md1] {order:-8}
|
||||
[md2], [data-md2] {order:-7}
|
||||
[md3], [data-md3] {order:-6}
|
||||
[md4], [data-md4] {order:-5}
|
||||
[md5], [data-md5] {order:-4}
|
||||
[md6], [data-md6] {order:-3}
|
||||
[md7], [data-md7] {order:-2}
|
||||
[md8], [data-md8] {order:-1}
|
||||
}
|
||||
|
||||
/* Large Breakpoint: (lg) */
|
||||
@media (min-width:1200px) {
|
||||
|
||||
/* Column Widths */
|
||||
[lg1-1]:not(x), [data-lg1-1]:not(x), r-c[lg1-1]:not(x) > *, [data-r-c][data-lg1-1] > * {width:100%}
|
||||
[lg1-2]:not(x), [data-lg1-2]:not(x), r-c[lg1-2]:not(x) > *, [data-r-c][data-lg1-2] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[lg1-3]:not(x), [data-lg1-3]:not(x), r-c[lg1-3]:not(x) > *, [data-r-c][data-lg1-3] > * {width:calc(100%/3 - (5.455px + 1.42041vw)/3*2)}
|
||||
[lg2-3]:not(x), [data-lg2-3]:not(x), r-c[lg2-3]:not(x) > *, [data-r-c][data-lg2-3] > * {width:calc(100%/3*2 - (5.455px + 1.42041vw)/3)}
|
||||
[lg1-4]:not(x), [data-lg1-4]:not(x), r-c[lg1-4]:not(x) > *, [data-r-c][data-lg1-4] > * {width:calc(25% - (5.455px + 1.42041vw)/4*3)}
|
||||
[lg2-4]:not(x), [data-lg2-4]:not(x), r-c[lg2-4]:not(x) > *, [data-r-c][data-lg2-4] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[lg3-4]:not(x), [data-lg3-4]:not(x), r-c[lg3-4]:not(x) > *, [data-r-c][data-lg3-4] > * {width:calc(25% - (5.455px + 1.42041vw)/4)}
|
||||
[lg1-5]:not(x), [data-lg1-5]:not(x), r-c[lg1-5]:not(x) > *, [data-r-c][data-lg1-5] > * {width:calc(100%/5 - (5.455px + 1.42041vw)/5*4)}
|
||||
[lg2-5]:not(x), [data-lg2-5]:not(x), r-c[lg2-5]:not(x) > *, [data-r-c][data-lg2-5] > * {width:calc(100%/5*2 - (5.455px + 1.42041vw)/5*3)}
|
||||
[lg3-5]:not(x), [data-lg3-5]:not(x), r-c[lg3-5]:not(x) > *, [data-r-c][data-lg3-5] > * {width:calc(100%/5*3 - (5.455px + 1.42041vw)/5*2)}
|
||||
[lg4-5]:not(x), [data-lg4-5]:not(x), r-c[lg4-5]:not(x) > *, [data-r-c][data-lg4-5] > * {width:calc(100%/5*4 - (5.455px + 1.42041vw)/5)}
|
||||
[lg1-6]:not(x), [data-lg1-6]:not(x), r-c[lg1-6]:not(x) > *, [data-r-c][data-lg1-6] > * {width:calc(100%/6 - (5.455px + 1.42041vw)/6*5)}
|
||||
[lg2-6]:not(x), [data-lg2-6]:not(x), r-c[lg2-6]:not(x) > *, [data-r-c][data-lg2-6] > * {width:calc(100%/6*2 - (5.455px + 1.42041vw)/6*4)}
|
||||
[lg3-6]:not(x), [data-lg3-6]:not(x), r-c[lg3-6]:not(x) > *, [data-r-c][data-lg3-6] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[lg4-6]:not(x), [data-lg4-6]:not(x), r-c[lg4-6]:not(x) > *, [data-r-c][data-lg4-6] > * {width:calc(100%/6*4 - (5.455px + 1.42041vw)/6*2)}
|
||||
[lg5-6]:not(x), [data-lg5-6]:not(x), r-c[lg5-6]:not(x) > *, [data-r-c][data-lg5-6] > * {width:calc(100%/6*5 - (5.455px + 1.42041vw)/6)}
|
||||
[lg1-7]:not(x), [data-lg1-7]:not(x), r-c[lg1-7]:not(x) > *, [data-r-c][data-lg1-7] > * {width:calc(100%/7 - (5.455px + 1.42041vw)/7*6)}
|
||||
[lg2-7]:not(x), [data-lg2-7]:not(x), r-c[lg2-7]:not(x) > *, [data-r-c][data-lg2-7] > * {width:calc(100%/7*2 - (5.455px + 1.42041vw)/7*5)}
|
||||
[lg3-7]:not(x), [data-lg3-7]:not(x), r-c[lg3-7]:not(x) > *, [data-r-c][data-lg3-7] > * {width:calc(100%/7*3 - (5.455px + 1.42041vw)/7*4)}
|
||||
[lg4-7]:not(x), [data-lg4-7]:not(x), r-c[lg4-7]:not(x) > *, [data-r-c][data-lg4-7] > * {width:calc(100%/7*4 - (5.455px + 1.42041vw)/7*3)}
|
||||
[lg5-7]:not(x), [data-lg5-7]:not(x), r-c[lg5-7]:not(x) > *, [data-r-c][data-lg5-7] > * {width:calc(100%/7*5 - (5.455px + 1.42041vw)/7*2)}
|
||||
[lg6-7]:not(x), [data-lg6-7]:not(x), r-c[lg6-7]:not(x) > *, [data-r-c][data-lg6-7] > * {width:calc(100%/7*6 - (5.455px + 1.42041vw)/7)}
|
||||
[lg1-8]:not(x), [data-lg1-8]:not(x), r-c[lg1-8]:not(x) > *, [data-r-c][data-lg1-8] > * {width:calc(100%/8 - (5.455px + 1.42041vw)/8*7)}
|
||||
[lg2-8]:not(x), [data-lg2-8]:not(x), r-c[lg2-8]:not(x) > *, [data-r-c][data-lg2-8] > * {width:calc(100%/8*2 - (5.455px + 1.42041vw)/8*6)}
|
||||
[lg3-8]:not(x), [data-lg3-8]:not(x), r-c[lg3-8]:not(x) > *, [data-r-c][data-lg3-8] > * {width:calc(100%/8*3 - (5.455px + 1.42041vw)/8*5)}
|
||||
[lg4-8]:not(x), [data-lg4-8]:not(x), r-c[lg4-8]:not(x) > *, [data-r-c][data-lg4-8] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[lg5-8]:not(x), [data-lg5-8]:not(x), r-c[lg5-8]:not(x) > *, [data-r-c][data-lg5-8] > * {width:calc(100%/8*5 - (5.455px + 1.42041vw)/8*3)}
|
||||
[lg6-8]:not(x), [data-lg6-8]:not(x), r-c[lg6-8]:not(x) > *, [data-r-c][data-lg6-8] > * {width:calc(100%/8*6 - (5.455px + 1.42041vw)/8*2)}
|
||||
[lg7-8]:not(x), [data-lg7-8]:not(x), r-c[lg7-8]:not(x) > *, [data-r-c][data-lg7-8] > * {width:calc(100%/8*7 - (5.455px + 1.42041vw)/8)}
|
||||
|
||||
/* Column Widths (Joined) */
|
||||
[join] > [lg1-1], [join] > [data-lg1-1], [data-join] > [lg1-1], [data-join] > [data-lg1-1], [join][lg1-1]:not([r-c]) > *, [data-join][data-lg1-1]:not([x]) > * {width:100%}
|
||||
[join] > [lg1-2], [join] > [data-lg1-2], [data-join] > [lg1-2], [data-join] > [data-lg1-2], [join][lg1-2]:not([r-c]) > *, [data-join][data-lg1-2]:not([x]) > *,
|
||||
[join] > [lg2-4], [join] > [data-lg2-4], [data-join] > [lg2-4], [data-join] > [data-lg2-4], [join][lg2-4]:not([r-c]) > *, [data-join][data-lg2-4]:not([x]) > *,
|
||||
[join] > [lg3-6], [join] > [data-lg3-6], [data-join] > [lg3-6], [data-join] > [data-lg3-6], [join][lg3-6]:not([r-c]) > *, [data-join][data-lg3-6]:not([x]) > *,
|
||||
[join] > [lg4-8], [join] > [data-lg4-8], [data-join] > [lg4-8], [data-join] > [data-lg4-8], [join][lg4-8]:not([r-c]) > *, [data-join][data-lg4-8]:not([x]) > * {width:50%}
|
||||
[join] > [lg1-3], [join] > [data-lg1-3], [data-join] > [lg1-3], [data-join] > [data-lg1-3], [join][lg1-3]:not([r-c]) > *, [data-join][data-lg1-3]:not([x]) > *,
|
||||
[join] > [lg2-6], [join] > [data-lg2-6], [data-join] > [lg2-6], [data-join] > [data-lg2-6], [join][lg2-6]:not([r-c]) > *, [data-join][data-lg2-6]:not([x]) > * {width:calc(100%/3)}
|
||||
[join] > [lg2-3], [join] > [data-lg2-3], [data-join] > [lg2-3], [data-join] > [data-lg2-3], [join][lg2-3]:not([r-c]) > *, [data-join][data-lg2-3]:not([x]) > *,
|
||||
[join] > [lg4-6], [join] > [data-lg4-6], [data-join] > [lg4-6], [data-join] > [data-lg4-6], [join][lg4-6]:not([r-c]) > *, [data-join][data-lg4-6]:not([x]) > * {width:calc(100%/3*2)}
|
||||
[join] > [lg1-4], [join] > [data-lg1-4], [data-join] > [lg1-4], [data-join] > [data-lg1-4], [join][lg1-4]:not([r-c]) > *, [data-join][data-lg1-4]:not([x]) > *,
|
||||
[join] > [lg2-8], [join] > [data-lg2-8], [data-join] > [lg2-8], [data-join] > [data-lg2-8], [join][lg2-8]:not([r-c]) > *, [data-join][data-lg2-8]:not([x]) > * {width:25%}
|
||||
[join] > [lg3-4], [join] > [data-lg3-4], [data-join] > [lg3-4], [data-join] > [data-lg3-4], [join][lg3-4]:not([r-c]) > *, [data-join][data-lg3-4]:not([x]) > *,
|
||||
[join] > [lg6-8], [join] > [data-lg6-8], [data-join] > [lg6-8], [data-join] > [data-lg6-8], [join][lg6-8]:not([r-c]) > *, [data-join][data-lg6-8]:not([x]) > * {width:75%}
|
||||
[join] > [lg1-5], [join] > [data-lg1-5], [data-join] > [lg1-5], [data-join] > [data-lg1-5], [join][lg1-5]:not([r-c]) > *, [data-join][data-lg1-5]:not([x]) > * {width:20%}
|
||||
[join] > [lg2-5], [join] > [data-lg2-5], [data-join] > [lg2-5], [data-join] > [data-lg2-5], [join][lg2-5]:not([r-c]) > *, [data-join][data-lg2-5]:not([x]) > * {width:40%}
|
||||
[join] > [lg3-5], [join] > [data-lg3-5], [data-join] > [lg3-5], [data-join] > [data-lg3-5], [join][lg3-5]:not([r-c]) > *, [data-join][data-lg3-5]:not([x]) > * {width:60%}
|
||||
[join] > [lg4-5], [join] > [data-lg4-5], [data-join] > [lg4-5], [data-join] > [data-lg4-5], [join][lg4-5]:not([r-c]) > *, [data-join][data-lg4-5]:not([x]) > * {width:80%}
|
||||
[join] > [lg1-6], [join] > [data-lg1-6], [data-join] > [lg1-6], [data-join] > [data-lg1-6], [join][lg1-6]:not([r-c]) > *, [data-join][data-lg1-6]:not([x]) > * {width:calc(100%/6)}
|
||||
[join] > [lg5-6], [join] > [data-lg5-6], [data-join] > [lg5-6], [data-join] > [data-lg5-6], [join][lg5-6]:not([r-c]) > *, [data-join][data-lg5-6]:not([x]) > * {width:calc(100%/6*5)}
|
||||
[join] > [lg1-7], [join] > [data-lg1-7], [data-join] > [lg1-7], [data-join] > [data-lg1-7], [join][lg1-7]:not([r-c]) > *, [data-join][data-lg1-7]:not([x]) > * {width:calc(100%/7)}
|
||||
[join] > [lg2-7], [join] > [data-lg2-7], [data-join] > [lg2-7], [data-join] > [data-lg2-7], [join][lg2-7]:not([r-c]) > *, [data-join][data-lg2-7]:not([x]) > * {width:calc(100%/7*2)}
|
||||
[join] > [lg3-7], [join] > [data-lg3-7], [data-join] > [lg3-7], [data-join] > [data-lg3-7], [join][lg3-7]:not([r-c]) > *, [data-join][data-lg3-7]:not([x]) > * {width:calc(100%/7*3)}
|
||||
[join] > [lg4-7], [join] > [data-lg4-7], [data-join] > [lg4-7], [data-join] > [data-lg4-7], [join][lg4-7]:not([r-c]) > *, [data-join][data-lg4-7]:not([x]) > * {width:calc(100%/7*4)}
|
||||
[join] > [lg5-7], [join] > [data-lg5-7], [data-join] > [lg5-7], [data-join] > [data-lg5-7], [join][lg5-7]:not([r-c]) > *, [data-join][data-lg5-7]:not([x]) > * {width:calc(100%/7*5)}
|
||||
[join] > [lg6-7], [join] > [data-lg6-7], [data-join] > [lg6-7], [data-join] > [data-lg6-7], [join][lg6-7]:not([r-c]) > *, [data-join][data-lg6-7]:not([x]) > * {width:calc(100%/7*6)}
|
||||
[join] > [lg1-8], [join] > [data-lg1-8], [data-join] > [lg1-8], [data-join] > [data-lg1-8], [join][lg1-8]:not([r-c]) > *, [data-join][data-lg1-8]:not([x]) > * {width:calc(100%/8)}
|
||||
[join] > [lg3-8], [join] > [data-lg3-8], [data-join] > [lg3-8], [data-join] > [data-lg3-8], [join][lg3-8]:not([r-c]) > *, [data-join][data-lg3-8]:not([x]) > * {width:calc(100%/8*3)}
|
||||
[join] > [lg5-8], [join] > [data-lg5-8], [data-join] > [lg5-8], [data-join] > [data-lg5-8], [join][lg5-8]:not([r-c]) > *, [data-join][data-lg5-8]:not([x]) > * {width:calc(100%/8*5)}
|
||||
[join] > [lg7-8], [join] > [data-lg7-8], [data-join] > [lg7-8], [data-join] > [data-lg7-8], [join][lg7-8]:not([r-c]) > *, [data-join][data-lg7-8]:not([x]) > * {width:calc(100%/8*7)}
|
||||
|
||||
/* Column Ordering */
|
||||
[lg1], [data-lg1] {order:-8}
|
||||
[lg2], [data-lg2] {order:-7}
|
||||
[lg3], [data-lg3] {order:-6}
|
||||
[lg4], [data-lg4] {order:-5}
|
||||
[lg5], [data-lg5] {order:-4}
|
||||
[lg6], [data-lg6] {order:-3}
|
||||
[lg7], [data-lg7] {order:-2}
|
||||
[lg8], [data-lg8] {order:-1}
|
||||
}
|
||||
|
||||
/* Extra-Large Breakpoint: (xl) */
|
||||
@media (min-width:1800px) {
|
||||
|
||||
/* Column Widths */
|
||||
[xl1-1]:not(x), [data-xl1-1]:not(x), r-c[xl1-1]:not(x) > *, [data-r-c][data-xl1-1] > * {width:100%}
|
||||
[xl1-2]:not(x), [data-xl1-2]:not(x), r-c[xl1-2]:not(x) > *, [data-r-c][data-xl1-2] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[xl1-3]:not(x), [data-xl1-3]:not(x), r-c[xl1-3]:not(x) > *, [data-r-c][data-xl1-3] > * {width:calc(100%/3 - (5.455px + 1.42041vw)/3*2)}
|
||||
[xl2-3]:not(x), [data-xl2-3]:not(x), r-c[xl2-3]:not(x) > *, [data-r-c][data-xl2-3] > * {width:calc(100%/3*2 - (5.455px + 1.42041vw)/3)}
|
||||
[xl1-4]:not(x), [data-xl1-4]:not(x), r-c[xl1-4]:not(x) > *, [data-r-c][data-xl1-4] > * {width:calc(25% - (5.455px + 1.42041vw)/4*3)}
|
||||
[xl2-4]:not(x), [data-xl2-4]:not(x), r-c[xl2-4]:not(x) > *, [data-r-c][data-xl2-4] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[xl3-4]:not(x), [data-xl3-4]:not(x), r-c[xl3-4]:not(x) > *, [data-r-c][data-xl3-4] > * {width:calc(25% - (5.455px + 1.42041vw)/4)}
|
||||
[xl1-5]:not(x), [data-xl1-5]:not(x), r-c[xl1-5]:not(x) > *, [data-r-c][data-xl1-5] > * {width:calc(100%/5 - (5.455px + 1.42041vw)/5*4)}
|
||||
[xl2-5]:not(x), [data-xl2-5]:not(x), r-c[xl2-5]:not(x) > *, [data-r-c][data-xl2-5] > * {width:calc(100%/5*2 - (5.455px + 1.42041vw)/5*3)}
|
||||
[xl3-5]:not(x), [data-xl3-5]:not(x), r-c[xl3-5]:not(x) > *, [data-r-c][data-xl3-5] > * {width:calc(100%/5*3 - (5.455px + 1.42041vw)/5*2)}
|
||||
[xl4-5]:not(x), [data-xl4-5]:not(x), r-c[xl4-5]:not(x) > *, [data-r-c][data-xl4-5] > * {width:calc(100%/5*4 - (5.455px + 1.42041vw)/5)}
|
||||
[xl1-6]:not(x), [data-xl1-6]:not(x), r-c[xl1-6]:not(x) > *, [data-r-c][data-xl1-6] > * {width:calc(100%/6 - (5.455px + 1.42041vw)/6*5)}
|
||||
[xl2-6]:not(x), [data-xl2-6]:not(x), r-c[xl2-6]:not(x) > *, [data-r-c][data-xl2-6] > * {width:calc(100%/6*2 - (5.455px + 1.42041vw)/6*4)}
|
||||
[xl3-6]:not(x), [data-xl3-6]:not(x), r-c[xl3-6]:not(x) > *, [data-r-c][data-xl3-6] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[xl4-6]:not(x), [data-xl4-6]:not(x), r-c[xl4-6]:not(x) > *, [data-r-c][data-xl4-6] > * {width:calc(100%/6*4 - (5.455px + 1.42041vw)/6*2)}
|
||||
[xl5-6]:not(x), [data-xl5-6]:not(x), r-c[xl5-6]:not(x) > *, [data-r-c][data-xl5-6] > * {width:calc(100%/6*5 - (5.455px + 1.42041vw)/6)}
|
||||
[xl1-7]:not(x), [data-xl1-7]:not(x), r-c[xl1-7]:not(x) > *, [data-r-c][data-xl1-7] > * {width:calc(100%/7 - (5.455px + 1.42041vw)/7*6)}
|
||||
[xl2-7]:not(x), [data-xl2-7]:not(x), r-c[xl2-7]:not(x) > *, [data-r-c][data-xl2-7] > * {width:calc(100%/7*2 - (5.455px + 1.42041vw)/7*5)}
|
||||
[xl3-7]:not(x), [data-xl3-7]:not(x), r-c[xl3-7]:not(x) > *, [data-r-c][data-xl3-7] > * {width:calc(100%/7*3 - (5.455px + 1.42041vw)/7*4)}
|
||||
[xl4-7]:not(x), [data-xl4-7]:not(x), r-c[xl4-7]:not(x) > *, [data-r-c][data-xl4-7] > * {width:calc(100%/7*4 - (5.455px + 1.42041vw)/7*3)}
|
||||
[xl5-7]:not(x), [data-xl5-7]:not(x), r-c[xl5-7]:not(x) > *, [data-r-c][data-xl5-7] > * {width:calc(100%/7*5 - (5.455px + 1.42041vw)/7*2)}
|
||||
[xl6-7]:not(x), [data-xl6-7]:not(x), r-c[xl6-7]:not(x) > *, [data-r-c][data-xl6-7] > * {width:calc(100%/7*6 - (5.455px + 1.42041vw)/7)}
|
||||
[xl1-8]:not(x), [data-xl1-8]:not(x), r-c[xl1-8]:not(x) > *, [data-r-c][data-xl1-8] > * {width:calc(100%/8 - (5.455px + 1.42041vw)/8*7)}
|
||||
[xl2-8]:not(x), [data-xl2-8]:not(x), r-c[xl2-8]:not(x) > *, [data-r-c][data-xl2-8] > * {width:calc(100%/8*2 - (5.455px + 1.42041vw)/8*6)}
|
||||
[xl3-8]:not(x), [data-xl3-8]:not(x), r-c[xl3-8]:not(x) > *, [data-r-c][data-xl3-8] > * {width:calc(100%/8*3 - (5.455px + 1.42041vw)/8*5)}
|
||||
[xl4-8]:not(x), [data-xl4-8]:not(x), r-c[xl4-8]:not(x) > *, [data-r-c][data-xl4-8] > * {width:calc(50% - (5.455px + 1.42041vw)/2)}
|
||||
[xl5-8]:not(x), [data-xl5-8]:not(x), r-c[xl5-8]:not(x) > *, [data-r-c][data-xl5-8] > * {width:calc(100%/8*5 - (5.455px + 1.42041vw)/8*3)}
|
||||
[xl6-8]:not(x), [data-xl6-8]:not(x), r-c[xl6-8]:not(x) > *, [data-r-c][data-xl6-8] > * {width:calc(100%/8*6 - (5.455px + 1.42041vw)/8*2)}
|
||||
[xl7-8]:not(x), [data-xl7-8]:not(x), r-c[xl7-8]:not(x) > *, [data-r-c][data-xl7-8] > * {width:calc(100%/8*7 - (5.455px + 1.42041vw)/8)}
|
||||
|
||||
/* Column Widths (Joined) */
|
||||
[join] > [xl1-1], [join] > [data-xl1-1], [data-join] > [xl1-1], [data-join] > [data-xl1-1], [join][xl1-1]:not([r-c]) > *, [data-join][data-xl1-1]:not([x]) > * {width:100%}
|
||||
[join] > [xl1-2], [join] > [data-xl1-2], [data-join] > [xl1-2], [data-join] > [data-xl1-2], [join][xl1-2]:not([r-c]) > *, [data-join][data-xl1-2]:not([x]) > *,
|
||||
[join] > [xl2-4], [join] > [data-xl2-4], [data-join] > [xl2-4], [data-join] > [data-xl2-4], [join][xl2-4]:not([r-c]) > *, [data-join][data-xl2-4]:not([x]) > *,
|
||||
[join] > [xl3-6], [join] > [data-xl3-6], [data-join] > [xl3-6], [data-join] > [data-xl3-6], [join][xl3-6]:not([r-c]) > *, [data-join][data-xl3-6]:not([x]) > *,
|
||||
[join] > [xl4-8], [join] > [data-xl4-8], [data-join] > [xl4-8], [data-join] > [data-xl4-8], [join][xl4-8]:not([r-c]) > *, [data-join][data-xl4-8]:not([x]) > * {width:50%}
|
||||
[join] > [xl1-3], [join] > [data-xl1-3], [data-join] > [xl1-3], [data-join] > [data-xl1-3], [join][xl1-3]:not([r-c]) > *, [data-join][data-xl1-3]:not([x]) > *,
|
||||
[join] > [xl2-6], [join] > [data-xl2-6], [data-join] > [xl2-6], [data-join] > [data-xl2-6], [join][xl2-6]:not([r-c]) > *, [data-join][data-xl2-6]:not([x]) > * {width:calc(100%/3)}
|
||||
[join] > [xl2-3], [join] > [data-xl2-3], [data-join] > [xl2-3], [data-join] > [data-xl2-3], [join][xl2-3]:not([r-c]) > *, [data-join][data-xl2-3]:not([x]) > *,
|
||||
[join] > [xl4-6], [join] > [data-xl4-6], [data-join] > [xl4-6], [data-join] > [data-xl4-6], [join][xl4-6]:not([r-c]) > *, [data-join][data-xl4-6]:not([x]) > * {width:calc(100%/3*2)}
|
||||
[join] > [xl1-4], [join] > [data-xl1-4], [data-join] > [xl1-4], [data-join] > [data-xl1-4], [join][xl1-4]:not([r-c]) > *, [data-join][data-xl1-4]:not([x]) > *,
|
||||
[join] > [xl2-8], [join] > [data-xl2-8], [data-join] > [xl2-8], [data-join] > [data-xl2-8], [join][xl2-8]:not([r-c]) > *, [data-join][data-xl2-8]:not([x]) > * {width:25%}
|
||||
[join] > [xl3-4], [join] > [data-xl3-4], [data-join] > [xl3-4], [data-join] > [data-xl3-4], [join][xl3-4]:not([r-c]) > *, [data-join][data-xl3-4]:not([x]) > *,
|
||||
[join] > [xl6-8], [join] > [data-xl6-8], [data-join] > [xl6-8], [data-join] > [data-xl6-8], [join][xl6-8]:not([r-c]) > *, [data-join][data-xl6-8]:not([x]) > * {width:75%}
|
||||
[join] > [xl1-5], [join] > [data-xl1-5], [data-join] > [xl1-5], [data-join] > [data-xl1-5], [join][xl1-5]:not([r-c]) > *, [data-join][data-xl1-5]:not([x]) > * {width:20%}
|
||||
[join] > [xl2-5], [join] > [data-xl2-5], [data-join] > [xl2-5], [data-join] > [data-xl2-5], [join][xl2-5]:not([r-c]) > *, [data-join][data-xl2-5]:not([x]) > * {width:40%}
|
||||
[join] > [xl3-5], [join] > [data-xl3-5], [data-join] > [xl3-5], [data-join] > [data-xl3-5], [join][xl3-5]:not([r-c]) > *, [data-join][data-xl3-5]:not([x]) > * {width:60%}
|
||||
[join] > [xl4-5], [join] > [data-xl4-5], [data-join] > [xl4-5], [data-join] > [data-xl4-5], [join][xl4-5]:not([r-c]) > *, [data-join][data-xl4-5]:not([x]) > * {width:80%}
|
||||
[join] > [xl1-6], [join] > [data-xl1-6], [data-join] > [xl1-6], [data-join] > [data-xl1-6], [join][xl1-6]:not([r-c]) > *, [data-join][data-xl1-6]:not([x]) > * {width:calc(100%/6)}
|
||||
[join] > [xl5-6], [join] > [data-xl5-6], [data-join] > [xl5-6], [data-join] > [data-xl5-6], [join][xl5-6]:not([r-c]) > *, [data-join][data-xl5-6]:not([x]) > * {width:calc(100%/6*5)}
|
||||
[join] > [xl1-7], [join] > [data-xl1-7], [data-join] > [xl1-7], [data-join] > [data-xl1-7], [join][xl1-7]:not([r-c]) > *, [data-join][data-xl1-7]:not([x]) > * {width:calc(100%/7)}
|
||||
[join] > [xl2-7], [join] > [data-xl2-7], [data-join] > [xl2-7], [data-join] > [data-xl2-7], [join][xl2-7]:not([r-c]) > *, [data-join][data-xl2-7]:not([x]) > * {width:calc(100%/7*2)}
|
||||
[join] > [xl3-7], [join] > [data-xl3-7], [data-join] > [xl3-7], [data-join] > [data-xl3-7], [join][xl3-7]:not([r-c]) > *, [data-join][data-xl3-7]:not([x]) > * {width:calc(100%/7*3)}
|
||||
[join] > [xl4-7], [join] > [data-xl4-7], [data-join] > [xl4-7], [data-join] > [data-xl4-7], [join][xl4-7]:not([r-c]) > *, [data-join][data-xl4-7]:not([x]) > * {width:calc(100%/7*4)}
|
||||
[join] > [xl5-7], [join] > [data-xl5-7], [data-join] > [xl5-7], [data-join] > [data-xl5-7], [join][xl5-7]:not([r-c]) > *, [data-join][data-xl5-7]:not([x]) > * {width:calc(100%/7*5)}
|
||||
[join] > [xl6-7], [join] > [data-xl6-7], [data-join] > [xl6-7], [data-join] > [data-xl6-7], [join][xl6-7]:not([r-c]) > *, [data-join][data-xl6-7]:not([x]) > * {width:calc(100%/7*6)}
|
||||
[join] > [xl1-8], [join] > [data-xl1-8], [data-join] > [xl1-8], [data-join] > [data-xl1-8], [join][xl1-8]:not([r-c]) > *, [data-join][data-xl1-8]:not([x]) > * {width:calc(100%/8)}
|
||||
[join] > [xl3-8], [join] > [data-xl3-8], [data-join] > [xl3-8], [data-join] > [data-xl3-8], [join][xl3-8]:not([r-c]) > *, [data-join][data-xl3-8]:not([x]) > * {width:calc(100%/8*3)}
|
||||
[join] > [xl5-8], [join] > [data-xl5-8], [data-join] > [xl5-8], [data-join] > [data-xl5-8], [join][xl5-8]:not([r-c]) > *, [data-join][data-xl5-8]:not([x]) > * {width:calc(100%/8*5)}
|
||||
[join] > [xl7-8], [join] > [data-xl7-8], [data-join] > [xl7-8], [data-join] > [data-xl7-8], [join][xl7-8]:not([r-c]) > *, [data-join][data-xl7-8]:not([x]) > * {width:calc(100%/8*7)}
|
||||
|
||||
/* Column Ordering */
|
||||
[xl1], [data-xl1] {order:-8}
|
||||
[xl2], [data-xl2] {order:-7}
|
||||
[xl3], [data-xl3] {order:-6}
|
||||
[xl4], [data-xl4] {order:-5}
|
||||
[xl5], [data-xl5] {order:-4}
|
||||
[xl6], [data-xl6] {order:-3}
|
||||
[xl7], [data-xl7] {order:-2}
|
||||
[xl8], [data-xl8] {order:-1}
|
||||
}
|
||||
@ -6,7 +6,7 @@
|
||||
{{partial "search.html" .}}
|
||||
|
||||
{{if $.Site.Data.config.enableColumnLayout}}
|
||||
<r-c join>
|
||||
<div r-c join> <!-- r-c = Responsive Columns with flexbox -->
|
||||
<main data-lg1-2 data-lg2 data-m2 data-sm1 data-xs1>
|
||||
{{else}}
|
||||
<main class="singlePage-oldLayout">
|
||||
@ -65,11 +65,11 @@
|
||||
{{partial "footer.html" .}}
|
||||
</div>
|
||||
</aside>
|
||||
</r-c>
|
||||
<footer data-r-c data-join>
|
||||
<c1-1>
|
||||
</div>
|
||||
<footer r-c data-join> <!-- r-c = Responsive Columns with flexbox -->
|
||||
<div c1-1> <!-- c1-1 = 1 column of width 1/1 = 100% -->
|
||||
{{partial "contact.html" .}}
|
||||
</c1-1>
|
||||
</div>
|
||||
</footer>
|
||||
{{end}}
|
||||
|
||||
|
||||
78
layouts/index0.html
Normal file
78
layouts/index0.html
Normal file
@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ .Lang }}">
|
||||
{{ partial "head.html" . }}
|
||||
|
||||
<body class="singlePage">
|
||||
{{partial "search.html" .}}
|
||||
|
||||
{{if $.Site.Data.config.enableColumnLayout}}
|
||||
<r-c join>
|
||||
<main data-lg1-2 data-lg2 data-m2 data-sm1 data-xs1>
|
||||
{{else}}
|
||||
<main class="singlePage-oldLayout">
|
||||
{{end}}
|
||||
|
||||
<!-- Begin actual content -->
|
||||
<header>
|
||||
<h1>{{if .Title}}{{ .Title }}
|
||||
{{else}}Untitled{{end}}
|
||||
</h1>
|
||||
<svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
|
||||
<title id="title">Search Icon</title>
|
||||
<desc id="desc">Icon to open search</desc>
|
||||
<g class="search-path" fill="none">
|
||||
<path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4" />
|
||||
<circle cx="8" cy="8" r="7" />
|
||||
</g>
|
||||
</svg>
|
||||
<div class="spacer"></div>
|
||||
{{partial "darkmode.html" .}}
|
||||
</header>
|
||||
<article>
|
||||
{{partial "toc.html" .}}
|
||||
{{partial "textprocessing.html" . }}
|
||||
{{if $.Site.Data.config.enableRecentNotes}}
|
||||
{{partial "recent.html" . }}
|
||||
{{end}}
|
||||
</article>
|
||||
{{if not $.Site.Data.config.enableColumnLayout}}
|
||||
{{partial "footerIndex.html" .}}
|
||||
{{partial "contact.html" .}}
|
||||
{{end}}
|
||||
</main>
|
||||
|
||||
{{if $.Site.Data.config.enableColumnLayout}}
|
||||
<aside data-sm1-2 data-md1-2 data-lg1-4 data-lg1 data-m1 data-sm2 data-xs3>
|
||||
<div class="sticky page-end vertical">
|
||||
<h3> Menu</h3>
|
||||
<div class="menu-toc">
|
||||
<ol class="tree">
|
||||
{{partial "menu-hugo.html" .}}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<aside data-sm1-2 data-md1-2 data-lg1-4 data-lg3 data-m3 data-sm3 data-xs2>
|
||||
<div class="sticky">
|
||||
<div class="page-end vertical">
|
||||
<div id="myModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<div id="graph-container-modal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{partial "footer.html" .}}
|
||||
</div>
|
||||
</aside>
|
||||
</r-c>
|
||||
<footer data-r-c data-join>
|
||||
<c1-1>
|
||||
{{partial "contact.html" .}}
|
||||
</c1-1>
|
||||
</footer>
|
||||
{{end}}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
78
layouts/index1.html
Normal file
78
layouts/index1.html
Normal file
@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ .Lang }}">
|
||||
{{ partial "head.html" . }}
|
||||
|
||||
<body class="singlePage">
|
||||
{{partial "search.html" .}}
|
||||
|
||||
{{if $.Site.Data.config.enableColumnLayout}}
|
||||
<div r-c join>
|
||||
<main data-lg1-2 data-lg2 data-m2 data-sm1 data-xs1>
|
||||
{{else}}
|
||||
<main class="singlePage-oldLayout">
|
||||
{{end}}
|
||||
|
||||
<!-- Begin actual content -->
|
||||
<header>
|
||||
<h1>{{if .Title}}{{ .Title }}
|
||||
{{else}}Untitled{{end}}
|
||||
</h1>
|
||||
<svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
|
||||
<title id="title">Search Icon</title>
|
||||
<desc id="desc">Icon to open search</desc>
|
||||
<g class="search-path" fill="none">
|
||||
<path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4" />
|
||||
<circle cx="8" cy="8" r="7" />
|
||||
</g>
|
||||
</svg>
|
||||
<div class="spacer"></div>
|
||||
{{partial "darkmode.html" .}}
|
||||
</header>
|
||||
<article>
|
||||
{{partial "toc.html" .}}
|
||||
{{partial "textprocessing.html" . }}
|
||||
{{if $.Site.Data.config.enableRecentNotes}}
|
||||
{{partial "recent.html" . }}
|
||||
{{end}}
|
||||
</article>
|
||||
{{if not $.Site.Data.config.enableColumnLayout}}
|
||||
{{partial "footerIndex.html" .}}
|
||||
{{partial "contact.html" .}}
|
||||
{{end}}
|
||||
</main>
|
||||
|
||||
{{if $.Site.Data.config.enableColumnLayout}}
|
||||
<aside data-sm1-2 data-md1-2 data-lg1-4 data-lg1 data-m1 data-sm2 data-xs3>
|
||||
<div class="sticky page-end vertical">
|
||||
<h3> Menu</h3>
|
||||
<div class="menu-toc">
|
||||
<ol class="tree">
|
||||
{{partial "menu-hugo.html" .}}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<aside data-sm1-2 data-md1-2 data-lg1-4 data-lg3 data-m3 data-sm3 data-xs2>
|
||||
<div class="sticky">
|
||||
<div class="page-end vertical">
|
||||
<div id="myModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<div id="graph-container-modal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{partial "footer.html" .}}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
<footer r-c data-join>
|
||||
<div c1-1>
|
||||
{{partial "contact.html" .}}
|
||||
</div>
|
||||
</footer>
|
||||
{{end}}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user