From AnOtherWiki, the free encyclopedia written by, for, and about the Otherkin community.
/* Responsive Main Page: a main column (Welcome box + Random articles + Did you
know + Most popular, stacked) with the News/Events box as a right-hand sidebar
beside all of it. Wraps to one column on narrow screens / the limited-width view. */
.mp-wrap { max-width: 78em; margin: 0 auto; }
/* two columns: main content (grows) | news sidebar */
.mp-row { display: flex; flex-wrap: wrap; gap: 1.25em; align-items: flex-start; }
.mp-main { flex: 3 1 30em; min-width: 0; }
.mp-news { flex: 1 1 19em; min-width: 0; box-sizing: border-box;
background: #eef; border: 1px solid #b3b3d9; }
/* Welcome box (full width of the main column) with inner two columns: text | community */
.mp-welcome { box-sizing: border-box; background: #ccf; border: 1px solid #b3b3d9; padding: 0.7em 0.9em; }
.mp-welcome-inner { display: flex; flex-wrap: wrap; gap: 1em; }
.mp-welcome-text { flex: 2 1 19em; min-width: 0; }
.mp-welcome-text .mp-lead { font-size: 162%; line-height: 1.15; }
.mp-welcome-text .mp-nav { margin-top: 0.5em; font-size: 0.95em; }
/* "Anyone can edit" invitation, under the welcome nav links */
.mp-welcome-text .mp-invite { margin-top: 0.6em; padding: 0.4em 0.6em; background: #fff;
border: 1px solid #b3b3d9; font-size: 0.95em; line-height: 1.45; }
.mp-community { flex: 1 1 10em; min-width: 0; line-height: 1.6; }
/* section headers (reused for the discovery sections and the news box) */
.mp-head { background: #ccf; padding: 0.2em 0.6em; font-weight: bold; margin: 0.9em 0 0.35em; }
.mp-news .mp-head { margin: 0; }
.mp-news-body { padding: 0.35em 0.7em 0.6em; }
.mp-popular { column-count: 2; }
@media ( max-width: 40em ) {
.mp-welcome-inner { gap: 0.4em; }
}
