Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
You must create an account or log in to edit.

Template:VelaCenteredHeaders/styles.css

Template page
Revision as of 19:52, May 12, 2025 by TheStellarExplorer (talk | contribs) (Created page with "hide the edit section button: .mw-heading .mw-editsection { display: none; } .mw-heading { make this a flexbox: display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--space-md); typography for header: text-align: center; font-weight: bold; only shrink: flex: 0 1 auto; } .mw-heading h2, .mw-heading h3 { flex-grow: 0; } solid line around h2: .mw-heading2::before, .mw-heading2::after { content: ''...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
/* hide the edit section button */
.mw-heading .mw-editsection {
	display: none;
}

.mw-heading {
	/* make this a flexbox */
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	/* typography for header */
	text-align: center;
	font-weight: bold;
	/* only shrink */
	flex: 0 1 auto;
}

.mw-heading h2,
.mw-heading h3 {
	flex-grow: 0;
}

/* solid line around h2 */
.mw-heading2::before,
.mw-heading2::after {
	content: '';
	border-top: 1px solid var(--color-emphasized);
}

/* dashed line around h3 */
.mw-heading3::before,
.mw-heading3::after {
	content: '';
	border-top: 1px dashed var(--color-emphasized);
}

.mw-heading h2 {
	font-size: var(--font-size-xxx-large);
}

.mw-heading h3 {
	font-size: var(--font-size-x-large);
}

/* lines around h2, h3 */
.mw-heading2::before,
.mw-heading2::after,
.mw-heading3::before,
.mw-heading3::after {
	/* only grow, minimum 2rem */
	flex: 1 0 2rem;
}

.mw-heading2::before,
.mw-heading3::before {
	margin-right: auto;
}

.mw-heading2::after,
.mw-heading3::after {
	margin-left: auto;
}