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 37: | Line 37: | ||
} |
} |
||
| ⚫ | |||
/* phones */ |
|||
font-size: var(--font-size-xxx-large); |
|||
@media (min-width: 320px) { |
|||
| ⚫ | |||
font-size: 4vh; |
|||
} |
|||
| ⚫ | |||
font-size: 2.5vh; |
|||
} |
|||
/* lines around h2, h3 */ |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
} |
|||
} |
} |
||
| ⚫ | |||
/* tablets */ |
|||
font-size: var(--font-size-x-large); |
|||
@media (min-width: 640px) { |
|||
h2 .mw-headline { |
|||
font-size: 3.5vh; |
|||
} |
|||
h3 .mw-headline { |
|||
font-size: 2.25vh; |
|||
} |
|||
/* lines around h2, h3 */ |
|||
h2::before, |
|||
h2::after, |
|||
h3::before, |
|||
h3::after { |
|||
/* only grow, minimum 5vw */ |
|||
flex: 1 0 5vw; |
|||
} |
|||
} |
} |
||
/* |
/* lines around h2, h3 */ |
||
| ⚫ | |||
@media (min-width: 1120px) { |
|||
| ⚫ | |||
h2 .mw-headline { |
|||
| ⚫ | |||
font-size: 4.5vh; |
|||
| ⚫ | |||
} |
|||
| ⚫ | |||
| ⚫ | |||
h3 .mw-headline { |
|||
font-size: 3vh; |
|||
} |
|||
/* lines around h2, h3 */ |
|||
h2::before, |
|||
h2::after, |
|||
h3::before, |
|||
h3::after { |
|||
/* only grow, minimum 2.5vw */ |
|||
flex: 1 0 2.5vw; |
|||
} |
|||
} |
} |
||
Revision as of 18:30, December 3, 2024
/* hide the edit section button */
h2 .mw-editsection,
h3 .mw-editsection {
display: none;
}
/* flex container to allow for the lines on each side */
h2, h3 {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--space-md);
}
h2 .mw-headline,
h3 .mw-headline {
/* typography for header */
text-align: center;
font-weight: bold;
/* only shrink */
flex: 0 1 auto;
}
/* solid line around h2 */
h2::before,
h2::after {
content: '';
border-top: 1px solid var(--color-base--emphasized);
}
/* dashed line around h3 */
h3::before,
h3::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::before,
h2::after,
h3::before,
h3::after {
/* only grow, minimum 2.5rem */
flex: 1 0 2.5rem;
}