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
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* hide the edit section button */
/* hide the edit section button */
h2 .mw-editsection,
.mw-heading .mw-editsection {
h3 .mw-editsection {
display: none;
display: none;
}
}


.mw-heading {
h2 > span:not(.mw-editsection):not(.mw-headline),
/* make this a flexbox */
h3 > span:not(.mw-editsection):not(.mw-headline) {
display: contents;
}

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

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

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


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


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


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


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


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


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


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

Latest revision as of 07:00, May 7, 2025

/* 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;
}