Awards grid table styles
CategoryTree 3-column layout like category pages
Line 197: Line 197:
.soldier-awards-list {
.soldier-awards-list {
margin: 0.75em 0 0.25em 0;
margin: 0.75em 0 0.25em 0;
max-width: 42em;
max-width: none;
}
}


Line 203: Line 203:
.soldier-awards-section ul {
.soldier-awards-section ul {
margin: 0.4em 0 0.4em 1.6em;
margin: 0.4em 0 0.4em 1.6em;
}
/* Keep extra award notes on one line (e.g. Chafee statue sentence) */
.soldier-awards-list li {
white-space: nowrap;
}
}


.soldier-awards-section .soldier-ribbon-rack,
.soldier-awards-section .soldier-ribbon-rack,
table.soldier-ribbon-rack {
table.soldier-ribbon-rack {
margin: 0.5em auto;
margin: 0.15em auto;
border-collapse: collapse;
border-collapse: collapse;
background: transparent;
background: transparent;
border: none;
border: none;
width: max-content;
max-width: 100%;
}
}


Line 229: Line 236:
}
}


/* Match ribbon-rack width; multi-line labels via <br /> keep cells compact */
table.soldier-awards-grid {
table.soldier-awards-grid {
margin: 0.75em auto 0.5em auto;
margin: 0.35em auto 0.5em auto;
border-collapse: collapse;
border-collapse: collapse;
max-width: 100%;
table-layout: fixed;
font-size: 92%;
width: max-content;
line-height: 1.35;
max-width: min(100%, 22.5em);
font-size: 85%;
line-height: 1.25;
}
}


Line 240: Line 250:
table.soldier-awards-grid td {
table.soldier-awards-grid td {
border: 1px solid #a2a9b1;
border: 1px solid #a2a9b1;
padding: 0.45em 0.65em;
padding: 0.35em 0.4em;
text-align: center;
text-align: center;
vertical-align: top;
vertical-align: middle;
background: #f8f9fa;
background: #f8f9fa;
overflow-wrap: anywhere;
hyphens: auto;
}
}


Line 316: Line 328:
font-size: 95%;
font-size: 95%;
color: #54595d;
color: #54595d;
}
/*
* Directory lists from {{#categorytree:}} (Contents, and any future page that
* embeds a category tree): match MediaWiki category pages (.mw-category-columns)
* with a compact 3-column layout so long indexes are not a single tall stack.
*/
.CategoryTreeTag {
column-count: 3;
column-gap: 1.25em;
margin: 0.4em 0 1em 0;
}
.CategoryTreeTag > .CategoryTreeSection {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin: 0.12em 0;
}
@media (max-width: 800px) {
.CategoryTreeTag {
column-count: 2;
}
}
@media (max-width: 480px) {
.CategoryTreeTag {
column-count: 1;
}
}
}