Spaces:
Sleeping
Sleeping
File size: 1,205 Bytes
64aaca8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.column {
/* auto column count */
--col: 16rem;
display: block;
-webkit-column-gap: 1.618rem;
-moz-column-gap: 1.618rem;
column-gap: 1.618rem;
column-fill: balance;
-webkit-column-width: var(--col);
-moz-column-width: var(--col);
column-width: var(--col);
}
.column--multicols {
/* modify column count on element inline:
<e class='column column--multicols' style='--multicols:2'></e> */
--col: unset;
--multicols: 3;
-webkit-column-count: var(--multicols);
-moz-column-count: var(--multicols);
column-count: var(--multicols);
}
.column__span {
column-span: all;
}
.column > *,
.column__item {
margin-bottom: 1.618rem;
break-after: auto;
break-before: auto;
break-inside: avoid;
}
.column img {
width: 100%;
height: auto;
}
.column.pin {
--col: 12rem;
}
.has-quote {
display: flex;
flex-direction: column-reverse;
color: var(--fg);
}
.has-quote::after {
margin: unset;
}
.has-quote > div {
margin-left: auto;
}
.has-quote > img {
margin: 1ex 0;
}
@media screen and (max-width: 640px) {
.column.pin {
--col: 10rem;
}
} |