this repo has no description
808.foxx.ink
1.column {
2 /* auto column count */
3 --col: 16rem;
4 display: block;
5 -webkit-column-gap: 1.618rem;
6 -moz-column-gap: 1.618rem;
7 column-gap: 1.618rem;
8 column-fill: balance;
9 -webkit-column-width: var(--col);
10 -moz-column-width: var(--col);
11 column-width: var(--col);
12}
13
14.column--multicols {
15 /* modify column count on element inline:
16 <e class='column column--multicols' style='--multicols:2'></e> */
17 --col: unset;
18 --multicols: 3;
19 -webkit-column-count: var(--multicols);
20 -moz-column-count: var(--multicols);
21 column-count: var(--multicols);
22}
23
24.column__span {
25 column-span: all;
26}
27
28.column > * {
29 break-after: auto;
30 break-before: auto;
31 break-inside: avoid;
32 margin-bottom: 1.618rem;
33}
34
35/* .column.pin {
36 --col: 13rem;
37} */
38
39.column.pin > * {
40 margin-bottom: 1em;
41 font-size: var(--small);
42}
43
44.column.pin a::after {
45 content: '' !important;
46}
47
48/* .has-quote {
49 display: flex;
50 flex-direction: column-reverse;
51 color: var(--fg);
52}
53
54.has-quote::after {
55 margin: unset;
56}
57
58.has-quote > div {
59 margin-left: auto;
60}
61 */
62@media screen and (min-width: 2560px) {
63
64 .column {
65 --col: 20rem;
66 }
67
68}
69
70@media screen and (min-width: 1920px) {
71
72 .column.pin {
73 --col: 16rem;
74 }
75
76}
77
78@media screen and (max-width: 640px) {
79
80 .column.pin {
81 --col: 10rem;
82 }
83
84}