Template:Centered headers/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
Tesinormed (talk | contribs) No edit summary |
Tesinormed (talk | contribs) No edit summary |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* hide the edit section button */ |
/* hide the edit section button */ |
||
.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) { |
|||
position: absolute; |
|||
| ⚫ | |||
/* 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 */ |
||
.mw-heading2::before, |
|||
.mw-heading2::after { |
|||
content: ''; |
content: ''; |
||
border-top: 1px solid var(--color |
border-top: 1px solid var(--color-emphasized); |
||
} |
} |
||
/* dashed line around h3 */ |
/* dashed line around h3 */ |
||
.mw-heading3::before, |
|||
.mw-heading3::after { |
|||
content: ''; |
content: ''; |
||
border-top: 1px dashed var(--color |
border-top: 1px dashed var(--color-emphasized); |
||
} |
} |
||
.mw-heading h2 { |
|||
font-size: var(--font-size-xxx-large); |
font-size: var(--font-size-xxx-large); |
||
} |
} |
||
.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 */ |
||
.mw-heading2::before, |
|||
.mw-heading2::after, |
|||
.mw-heading3::before, |
|||
.mw-heading3::after { |
|||
/* only grow, minimum 2rem */ |
/* only grow, minimum 2rem */ |
||
flex: 1 0 2rem; |
flex: 1 0 2rem; |
||
} |
} |
||
.mw-heading2::before, |
|||
.mw-heading3::before { |
|||
margin-right: auto; |
margin-right: auto; |
||
} |
} |
||
.mw-heading2::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;
}