imported>Izno: add later edit summary

2022-05-21T01:14:34Z

add later edit summary

New page

/* edit summary for the main module: invert media queries, remove float fallback as flex is well-supported by all MediaWiki-supported browsers, add gap using @supports fallback to padding and large note to go with it, remove unnecessary box-sizing */

/* I wonder why this clears, also seems suspect for a general flex-columns
* module, see below >div selector rules
*/
.flex-columns-container {
clear: both;
}

.flex-columns-container > .flex-columns-column {
display: flex;
flex-direction: column;
}

/* TODO: these two rules seem suspect for a general flex-columns module and
* should be moved to some portal-specific variant probably
* also would need to remove the rule declaring the columns to be display: flex
* and their associated flex-direction
*/
.flex-columns-container > .flex-columns-column > div {
flex: 1 0 auto;
}

.flex-columns-container > .flex-columns-column > div.flex-columns-noflex {
flex: 0;
}

/* the padding in the @supports not case really should just categorically be
* `gap` rules because having more than two columns flexing isn't pretty
* with the padding version. however, flex `gap` was released in 2018 for
* Firefox and 2020 for everyone else, so it's fairly new. honestly kind of
* surprised that css-sanitizer doesn't yell about it. some percent of browsers
* (~1.5% pageviews total) right now for the targeted environment (desktop) of
* these rules will interpret this as `gap` for grid, so they will have no
* padding and no flex `gap`. seems like a reasonable tradeoff
* TODO: remove @supports at-rule sometime in 2023 or 2024 when a more
* significant ratio of viewing browsers support `gap` in flex
*/
@supports (gap: 1em) {
@media screen and (min-width: 720px) {
.flex-columns-container {
gap: 1em;
}
}
}

@supports not (gap: 1em) {
@media screen and (min-width: 720px) {
.flex-columns-container > .flex-columns-column {
padding: 0 0.5em;
}

.flex-columns-container > .flex-columns-column:first-child {
padding-left: 0;
}

.flex-columns-container > .flex-columns-column:last-child {
padding-right: 0;
}
}
}

@media screen and (min-width: 720px) {
.flex-columns-container {
display: flex;
flex-wrap: wrap;
}

.flex-columns-container > .flex-columns-column {
flex: 1;
min-width: 360px;
}
}

Module:Flex columns/sandbox/styles.css - Revision history

imported>Izno: add later edit summary