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 |
||
| (23 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 { |
|||
/* flex container to allow for the lines on each side */ |
|||
/* make this a flexbox */ |
|||
h2, h3 { |
|||
display: flex; |
display: flex; |
||
flex-wrap: nowrap; |
flex-wrap: nowrap; |
||
| ⚫ | |||
align-items: center; |
align-items: 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 23: | Line 18: | ||
} |
} |
||
.mw-heading h2, |
|||
| ⚫ | |||
.mw-heading h3 { |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
content: ''; |
content: ''; |
||
border-top: 1px solid var(--color |
border-top: 1px solid var(--color-emphasized); |
||
| ⚫ | |||
| ⚫ | |||
} |
} |
||
/* dashed line |
/* 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); |
||
| ⚫ | |||
/* only grow, minimum 3vw */ |
|||
| ⚫ | |||
.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 { |
|||
| ⚫ | |||
| ⚫ | |||
} |
} |
||
.mw-heading2::before, |
|||
@media (min-width: 640px) { |
|||
.mw-heading3::before { |
|||
margin-right: auto; |
|||
font-size: 8vh; |
|||
| ⚫ | |||
h3 .mw-headline { |
|||
font-size: 5vh; |
|||
| ⚫ | |||
} |
} |
||
.mw-heading2::after, |
|||
@media (min-width: 1120px) { |
|||
.mw-heading3::after { |
|||
margin-left: auto; |
|||
| ⚫ | |||
h3 .mw-headline { |
|||
font-size: 3.5vh; |
|||
} |
|||
} |
} |
||
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;
}