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

Template:Centered headers/styles.css: Difference between revisions

Template page
Content deleted Content added
No edit summary
No edit summary
Line 15: Line 15:
}
}


/* flex container to allow for the lines on each side */
h2, h3 {
h2, h3 {
display: flex;
display: flex;
Line 23: Line 24:
}
}


/* typography for header */
h2 .mw-headline,
h2 .mw-headline,
h3 .mw-headline {
h3 .mw-headline {
/* typography for header */
text-align: center;
text-align: center;
font-weight: bold;
font-weight: bold;
/* only shrink */
flex: 0 2 auto;
flex: 0 1 auto;
}
}


/* solid line for h2 */
h2::before,
h2::before,
h2::after {
h2::after {
content: '';
content: '';
border-top: 1px solid var(--color-base--emphasized);
border-top: 1px solid var(--color-base--emphasized);
/* only grow, minimum 75px */
flex: 1 1 100px;
flex: 1 0 75px;
}
}


/* dashed line for h3 */
h3::before,
h3::before,
h3::after {
h3::after {
content: '';
content: '';
border-top: 1px dashed var(--color-base--emphasized);
border-top: 1px dashed var(--color-base--emphasized);
/* only grow, minimum 75px */
flex: 1 1 100px;
flex: 1 0 75px;
}
}

Revision as of 16:17, December 3, 2024

/* hide the edit section button */
h2 .mw-editsection,
h3 .mw-editsection {
	display: none;
}

/* increase the font size to xxx-large */
h2 .mw-headline {
	font-size: var(--font-size-xxx-large);
}

/* increase the font size to x-large */
h3 .mw-headline {
	font-size: var(--font-size-x-large);
}

/* flex container to allow for the lines on each side */
h2, h3 {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: var(--space-md);
}

h2 .mw-headline,
h3 .mw-headline {
	/* typography for header */
	text-align: center;
	font-weight: bold;
	/* only shrink */
	flex: 0 1 auto;
}

/* solid line for h2 */
h2::before,
h2::after {
	content: '';
	border-top: 1px solid var(--color-base--emphasized);
	/* only grow, minimum 75px */
	flex: 1 0 75px;
}

/* dashed line for h3 */
h3::before,
h3::after {
	content: '';
	border-top: 1px dashed var(--color-base--emphasized);
	/* only grow, minimum 75px */
	flex: 1 0 75px;
}