Template:VelaCenteredHeaders/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
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: ''..." |
No edit summary |
||
| Line 18: | Line 18: | ||
} |
} |
||
.mw-heading h1, |
|||
.mw-heading h2, |
.mw-heading h2, |
||
.mw-heading h3 { |
.mw-heading h3 { |
||
flex-grow: 0; |
flex-grow: 0; |
||
} |
|||
.mw-heading h1 { |
|||
border-bottom: none !important |
|||
} |
|||
/* solid line around h1 */ |
|||
.mw-heading1::before, |
|||
.mw-heading1::after { |
|||
content: ''; |
|||
border-top: 1px solid var(--color-emphasized); |
|||
} |
} |
||
Revision as of 19:54, May 12, 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 h1,
.mw-heading h2,
.mw-heading h3 {
flex-grow: 0;
}
.mw-heading h1 {
border-bottom: none !important
}
/* solid line around h1 */
.mw-heading1::before,
.mw-heading1::after {
content: '';
border-top: 1px solid var(--color-emphasized);
}
/* 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;
}