Template:GuidePage/Stylez.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
(46 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
*, *::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 { | .guide-header { | ||
min-height: 8rem; | |||
display: grid; | display: grid; | ||
align-items: end; | 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; | |||
background-color: | color: var(--colour-theme-600); | ||
color: | } | ||
.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- | .guide-main { | ||
font-family: 'Nunito', sans-serif; | font-family: 'Nunito', sans-serif; | ||
font- | 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; | |||
} | } |
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;
}