Template:Main page/navigation/styles.css
Template page
More actions
/* Main Page polish: full-width navigation and balanced supporting content.
Keep the existing Citizen width, hero, search and colour palette. */
#home-content.home-content-polished { display: block; margin-top: 1.75rem; }
.home-section-title { margin: 0 0 1rem; font-size: 1.4rem; color: var(--color-emphasized); }
#home-content .home-navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.home-navigation > p, .home-reading-grid > p { display: contents; }
.home-nav-card { min-width: 0; padding: 1.15rem; display: flex; flex-direction: column; }
.home-nav-card .home-card__label { display: none; }
.home-nav-card .home-card__header { margin: 0 0 .55rem; font-size: 1.15rem; }
.home-nav-card .home-card__header a, .home-feature .home-card__header a { color: var(--color-emphasized); }
.home-nav-card .home-card__header a:after, .home-feature .home-card__header a:after { display: none; }
.home-nav-card p { margin: 0 0 1rem; line-height: 1.6; }
.home-nav-card__links { margin-top: auto; font-size: .875rem; line-height: 1.7; }
.home-shortcuts { margin: 1rem 0 1.75rem; line-height: 1.9; font-size: .875rem; }
.home-reading-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; align-items: stretch; }
.home-reading-grid .home-card { min-width: 0; padding: 1.25rem; }
.home-reading-grid .home-card__header { font-size: 1.15rem; margin-top: .4rem; }
.home-reading-grid p { line-height: 1.6; }
.home-activity-links { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--border-color-base); font-size: .875rem; }
.home-activity-links .mw-heading { margin: 0; }
.home-activity-links h4 { margin: 0 0 .4rem; font-size: .95rem; }
#home-discordwidget.home-community-card { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 1.2rem 1.25rem; margin-top: .85rem; }
.home-community-heading { flex: 1 1 20rem; }
.home-community-heading .home-card__header { margin: 0 0 .35rem; font-size: 1.1rem; }
.home-community-heading p { margin: 0; }
#home-discordwidget.home-community-card .home-link__button-discord { width: auto; margin: 0; }
#home-discordwidget.home-community-card .home-link__button-discord a { padding: .65rem 1.2rem; }
.home-community-members { flex-basis: 100%; font-size: .875rem; }
.home-community-members > summary { cursor: pointer; color: var(--color-progressive); }
.home-community-members > summary .mw-collapsible-toggle { float: none; margin-right: .5rem; }
.home-community-members .discord-widget-wrap { max-width: 400px; margin-top: 1rem; }
.home-meta.home-meta--compact { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--border-color-base); }
.home-meta.home-meta--compact .home-meta__item { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.home-meta--compact .home-meta__text, .home-meta--compact .home-meta__actions { font-size: .75rem; }
.home-meta--compact .home-meta__actions a { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
@media (max-width: 1000px) { #home-content .home-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #home-content .home-navigation, .home-reading-grid { grid-template-columns: minmax(0, 1fr); } .home-shortcuts { margin-bottom: 1.25rem; } #home-discordwidget.home-community-card { gap: .85rem; } .home-community-heading { flex-basis: 100%; } }