(Better styling) |
(Collapseable infobox thanks to https://radcare.ca/index.php?title=User:TheEvilSkeleton) Tag: Reverted |
||
Line 2: | Line 2: | ||
border-radius:var(--border-radius--medium); | border-radius:var(--border-radius--medium); | ||
background-color:var(--color-surface-2); | background-color:var(--color-surface-2); | ||
padding: 20px | |||
padding: | |||
} | } | ||
.infobox-title { | .infobox-title { | ||
Line 11: | Line 8: | ||
font-weight:var(--font-weight-semibold); | font-weight:var(--font-weight-semibold); | ||
font-size:calc(var(--font-size-h3)*1.5); | font-size:calc(var(--font-size-h3)*1.5); | ||
text-align:center | text-align:center | ||
} | } | ||
.infobox-image { | .infobox-image { | ||
max-width:100%; | max-width:100%; | ||
height:auto | height:auto | ||
} | } | ||
.infobox-table td { | |||
padding-block:3px; | |||
.infobox-table | |||
padding: 3px; | |||
} | } | ||
.infobox-table th { | .infobox-table th { | ||
color:var(--color-base--subtle); | |||
font-weight:var(--font-weight-semibold); | font-weight:var(--font-weight-semibold); | ||
text-align: left; | text-align:left; | ||
padding-right: 15px | |||
} | |||
.citizen-section-collapsible { | |||
margin-top: 1em; | |||
display: grid; | |||
gap: 0 1em; | |||
} | } | ||
. | |||
@media screen and (min-width:720px) { | |||
.citizen-section-collapsible { | |||
grid-auto-flow: column; | |||
} | |||
.citizen-section-collapsible > :last-child { | |||
order: -1; | |||
} | |||
} | } |
Revision as of 04:48, 20 January 2024
.infobox { border-radius:var(--border-radius--medium); background-color:var(--color-surface-2); padding: 20px } .infobox-title { color:var(--color-base--emphasized); font-weight:var(--font-weight-semibold); font-size:calc(var(--font-size-h3)*1.5); text-align:center } .infobox-image { max-width:100%; height:auto } .infobox-table td { padding-block:3px; } .infobox-table th { color:var(--color-base--subtle); font-weight:var(--font-weight-semibold); text-align:left; padding-right: 15px } .citizen-section-collapsible { margin-top: 1em; display: grid; gap: 0 1em; } @media screen and (min-width:720px) { .citizen-section-collapsible { grid-auto-flow: column; } .citizen-section-collapsible > :last-child { order: -1; } }