Template:Mdn.css: Difference between revisions
No edit summary |
No edit summary |
||
| (40 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
:root { | :root { | ||
color-scheme: light dark; | color-scheme: light dark; | ||
font | --font: Inter, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; | ||
--font-code: Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace; | |||
font-family: var(--font) !important; | |||
--inner-width: 1440px; | |||
} | } | ||
max-width: | .wrapper { | ||
max-width: var(--inner-width); | |||
margin: auto; | |||
display: grid; | display: grid; | ||
| Line 11: | Line 16: | ||
grid-template-areas: "sidebar main toc"; | grid-template-areas: "sidebar main toc"; | ||
grid-template-columns: minmax(0,1fr) minmax(0,2.5fr) minmax(0,15rem); | grid-template-columns: minmax(0,1fr) minmax(0,2.5fr) minmax(0,15rem); | ||
font-family: var(--font) !important; | |||
color: light-dark(rgb(27, 27, 27), #fff); | |||
line-height: 1.75; | |||
font-size: 1rem; | |||
} | |||
*, *::before, *::after { | |||
box-sizing: border-box; | |||
} | |||
.main-bit { | |||
grid-area: main; | |||
} | |||
#firstHeading { | |||
display: none; | |||
} | } | ||
| Line 16: | Line 38: | ||
border: none; | border: none; | ||
background: transparent; | background: transparent; | ||
padding: 0; | |||
} | |||
#contentSub, #contentSub2 { | |||
display: none; | |||
} | } | ||
body { | body { | ||
background-color: light-dark(#fff, rgb(27, 27, 27)); | background-color: light-dark(#fff, rgb(27, 27, 27)); | ||
} | |||
.baseline p { | |||
background-color: rgb(230, 244, 234); | |||
display: flex; | |||
gap: .5rem; | |||
align-items: center; | |||
padding: 1rem; | |||
margin: 1rem 0; | |||
.text { | |||
font-size: 1rem; | |||
letter-spacing: 0; | |||
line-height: 1.5; | |||
margin: 0; | |||
padding: .375rem 0; | |||
display: block; | |||
b { font-weight: 600; } | |||
} | |||
} | |||
.baseline-img img { | |||
height: 2.25rem; | |||
width: 2.3125rem; | |||
} | |||
.nav { | |||
position: relative; | |||
z-index: 20; | |||
padding: 2rem calc((100% - var(--inner-width)) / 2); | |||
display: flex; | |||
height: 4rem; | |||
align-items: center; | |||
gap: 1rem; | |||
line-height: 1.75; | |||
font-size: 1rem; | |||
font-family: var(--font) !important; | |||
border-bottom: 1px solid #cdcdcd; | |||
p { | |||
display: contents; | |||
} | |||
a { | |||
display: block; | |||
color: rgb(78, 78, 78); | |||
padding: .5rem; | |||
border-radius: .25rem; | |||
} | |||
.selected a { | |||
color: rgb(133, 133, 133); | |||
} | |||
} | |||
.logo img { | |||
height: 1.5rem; | |||
aspect-ratio: 512 / 77; | |||
width: auto; | |||
} | |||
.mw-body-content h1 { | |||
border: none; | |||
font: 600 2.5rem / 1.2 var(--font); | |||
display: flex; | |||
align-items: start; | |||
margin-bottom: 2rem; | |||
.awesome, a { | |||
display: contents; | |||
} | |||
.mw-headline { display: contents } | |||
img { | |||
width: 32px; | |||
height: auto; | |||
aspect-ratio: 1 / 1; | |||
} | |||
} | |||
.mw-body-content h2 { | |||
font: 500 2rem / 1.2 var(--font); | |||
border: none; | |||
} | |||
code { | |||
background: rgb(242, 241, 241); | |||
padding: .125rem .25rem; | |||
width: -webkit-fit-content; | |||
width: fit-content; | |||
border: none; | |||
font-size: .85rem; | |||
font-family: var(--font-code); | |||
} | |||
#mw-panel { | |||
display: none; | |||
} | |||
.toc { | |||
grid-area: toc; | |||
} | } | ||