User:Izno/Sandbox/Infobox/template/styles.css

/* * An investigation of a div-based infobox, with support for low resolution */ .infobox-div { color: black; font-size: 88%; line-height: 1.5em; }

div:not(.infobox-div-subbox) > .infobox-div-inner { border: 1px solid #a2a9b1; background-color: #f8f9fa; padding: 0.4em; } .infobox-div-subbox { display: contents; }

@media (min-width: 300px) { .infobox-div-inner { display: grid; }	.infobox-div-inner > div { grid-column: 1 / 3; }	div.infobox-div-label { grid-column: 1 / 2; }	div.infobox-div-data { grid-column: 2 / 3; }	/* subgrid doesn't validate RIP * can't do this yet .infobox-div-subbox > .infobox-div-inner { grid-template-columns: subgrid; }	*/ }

@media (min-width: 720px) { .infobox-div { /* @noflip */ margin: 0.5em 0 0.5em 1em; /* @noflip */ float: right; /* @noflip */ clear: right; width: 22em; } }

/* * not strictly certain .infobox-div-subbox styles are necessary since the modules * now exclusively output infobox-div-subbox or infobox, not both * just replicating the module faithfully */ /* .infobox-div-subbox { margin: -3px; }

.infobox-div-above, .infobox-div-title { font-size: 125%; font-weight: bold; text-align: center; }

.infobox-div-title { padding: 0.2em; }

.infobox-div-header, .infobox-div-subheader, .infobox-div-image, .infobox-div-full-data, .infobox-div-below { text-align: center; }

/* must be declared after .infobox-full-data */ .infobox-div-label, .infobox-div-data { /* @noflip */ text-align: left; }

.infobox-div-label { font-weight: bold; }

.infobox-div-navbar { /* @noflip */ text-align: right; }

.infobox-div .navbar { font-size: 100%; }

.infobox-div-3cols-child { margin: auto; }