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 |
||
| Line 5: | Line 5: | ||
} |
} |
||
h2 |
h2 .mw-headline, |
||
h3 |
h3 .mw-headline { |
||
/* make this a flexbox */ |
|||
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 30: | Line 21: | ||
/* solid line around h2 */ |
/* solid line around h2 */ |
||
h2::before, |
h2 .mw-headline::before, |
||
h2::after { |
h2 .mw-headline::after { |
||
content: ''; |
content: ''; |
||
border-top: 1px solid var(--color-base--emphasized); |
border-top: 1px solid var(--color-base--emphasized); |
||
| Line 37: | Line 28: | ||
/* dashed line around h3 */ |
/* dashed line around h3 */ |
||
h3::before, |
h3 .mw-headline::before, |
||
h3::after { |
h3 .mw-headline::after { |
||
content: ''; |
content: ''; |
||
border-top: 1px dashed var(--color-base--emphasized); |
border-top: 1px dashed var(--color-base--emphasized); |
||
| Line 52: | Line 43: | ||
/* lines around h2, h3 */ |
/* lines around h2, h3 */ |
||
h2::before, |
h2 .mw-headline::before, |
||
h2::after, |
h2 .mw-headline::after, |
||
h3::before, |
h3 .mw-headline::before, |
||
h3::after { |
h3 .mw-headline::after { |
||
/* only grow, minimum 2rem */ |
/* only grow, minimum 2rem */ |
||
flex: 1 0 2rem; |
flex: 1 0 2rem; |
||
} |
} |
||
h2::before, |
h2 .mw-headline::before, |
||
h3::before { |
h3 .mw-headline::before { |
||
margin-right: auto; |
margin-right: auto; |
||
} |
} |
||
h2::after, |
h2 .mw-headline::after, |
||
h3::after { |
h3 .mw-headline::after { |
||
margin-left: auto; |
margin-left: auto; |
||
} |
} |
||
Revision as of 00:33, December 10, 2024
/* hide the edit section button */
h2 .mw-editsection,
h3 .mw-editsection {
display: none;
}
h2 .mw-headline,
h3 .mw-headline {
/* 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;
}
/* solid line around h2 */
h2 .mw-headline::before,
h2 .mw-headline::after {
content: '';
border-top: 1px solid var(--color-base--emphasized);
}
/* dashed line around h3 */
h3 .mw-headline::before,
h3 .mw-headline::after {
content: '';
border-top: 1px dashed var(--color-base--emphasized);
}
h2 .mw-headline {
font-size: var(--font-size-xxx-large);
}
h3 .mw-headline {
font-size: var(--font-size-x-large);
}
/* lines around h2, h3 */
h2 .mw-headline::before,
h2 .mw-headline::after,
h3 .mw-headline::before,
h3 .mw-headline::after {
/* only grow, minimum 2rem */
flex: 1 0 2rem;
}
h2 .mw-headline::before,
h3 .mw-headline::before {
margin-right: auto;
}
h2 .mw-headline::after,
h3 .mw-headline::after {
margin-left: auto;
}