Template:GuidePage/Stylez.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
(12 intermediate revisions by the same user not shown) | |||
Line 7: | Line 7: | ||
} | } | ||
:root { | :root { | ||
--content-border: color-mix(in srgb, var(--colour-theme-800), white | --content-border: color-mix(in srgb, var(--colour-theme-800), white 80%); | ||
--font-text: 'Nunito', sans-serif; | |||
} | } | ||
#content { | #content { | ||
Line 15: | Line 16: | ||
.vector-menu-tabs-legacy .selected { | .vector-menu-tabs-legacy .selected { | ||
background- | background: linear-gradient(to top, var(--colour-theme-50) 0, #fff 100%); | ||
} | } | ||
.vector-menu-tabs-legacy li { | .vector-menu-tabs-legacy li { | ||
Line 23: | Line 25: | ||
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { | .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { | ||
background-image: linear-gradient(to bottom, transparent 0, var(--content-border) 100%); | background-image: linear-gradient(to bottom, transparent 0, var(--content-border) 100%); | ||
} | |||
.vector-menu-tabs-legacy li a { | |||
color: var(--colour-theme-600); | |||
} | } | ||
Line 32: | Line 38: | ||
max-width: 48rem; | max-width: 48rem; | ||
border: 1px solid color-mix(in srgb, var(--colour-theme-900), transparent 90%); | border: 1px solid color-mix(in srgb, var(--colour-theme-900), transparent 90%); | ||
font-family: var(--font-text); | |||
} | } | ||
.guide-header { | .guide-header { | ||
height: 8rem; | min-height: 8rem; | ||
display: grid; | display: grid; | ||
align-items: end; | align-items: end; | ||
color: var(--colour-grey-900); | color: var(--colour-grey-900); | ||
font-family: | font-family: var(--font-text); | ||
} | } | ||
Line 51: | Line 57: | ||
font-weight: 1000; | font-weight: 1000; | ||
font-size: 3.5rem; | font-size: clamp(2rem, 6vw, 3.5rem); | ||
line-height: 1.25; | |||
margin-top: .5rem; | |||
margin-bottom: 1rem; | |||
color: var(--colour-theme-600); | color: var(--colour-theme-600); | ||
Line 76: | Line 85: | ||
font-family: 'Nunito', sans-serif; | font-family: 'Nunito', sans-serif; | ||
color: var(--colour-grey-900); | color: var(--colour-grey-900); | ||
} | |||
.guide-main h2 { | |||
font-family: inherit; | |||
border: none; | |||
} | |||
.guide-main h2 .mw-headline { | |||
font-weight: 800; | |||
} | } | ||
Latest revision as of 00:20, 5 December 2024
*, *::before, *::after {
box-sizing: border-box;
}
#firstHeading {
display: none;
}
:root {
--content-border: color-mix(in srgb, var(--colour-theme-800), white 80%);
--font-text: 'Nunito', sans-serif;
}
#content {
background-color: var(--colour-theme-50) !important;
border-color: var(--content-border);
}
.vector-menu-tabs-legacy .selected {
background: linear-gradient(to top, var(--colour-theme-50) 0, #fff 100%);
}
.vector-menu-tabs-legacy li {
background-image: linear-gradient(to top, var(--content-border) 0, var(--colour-theme-100) 1px, #fff 100%);
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
background-image: linear-gradient(to bottom, transparent 0, var(--content-border) 100%);
}
.vector-menu-tabs-legacy li a {
color: var(--colour-theme-600);
}
.guide {
background-color: white;
padding: 1rem;
border-radius: 8px;
margin: auto;
max-width: 48rem;
border: 1px solid color-mix(in srgb, var(--colour-theme-900), transparent 90%);
font-family: var(--font-text);
}
.guide-header {
min-height: 8rem;
display: grid;
align-items: end;
color: var(--colour-grey-900);
font-family: var(--font-text);
}
.guide-header h1 {
all: unset;
display: block;
font-weight: 1000;
font-size: clamp(2rem, 6vw, 3.5rem);
line-height: 1.25;
margin-top: .5rem;
margin-bottom: 1rem;
color: var(--colour-theme-600);
}
.guide-header p {
grid-column: 1 / -1;
background-color: var(--colour-theme-600);
color: white;
text-transform: uppercase;
padding: .25rem .5rem;
font-size: .75rem;
font-weight: 500;
letter-spacing: 5%;
margin: 0;
}
.guide-header p a {
color: inherit;
font-weight: inherit;
}
.guide-main {
font-family: 'Nunito', sans-serif;
color: var(--colour-grey-900);
}
.guide-main h2 {
font-family: inherit;
border: none;
}
.guide-main h2 .mw-headline {
font-weight: 800;
}
p.lede {
font-size: 1.15rem;
font-weight: 450;
color: var(--colour-grey-800);
text-wrap: balance;
}