Template:Mdn.css: Difference between revisions
No edit summary |
No edit summary |
||
| (30 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
color-scheme: light dark; | color-scheme: light dark; | ||
--font: Inter, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; | --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; | |||
} | } | ||
.wrapper { | .wrapper { | ||
max-width: | max-width: var(--inner-width); | ||
margin: auto; | margin: auto; | ||
| Line 15: | Line 18: | ||
font-family: var(--font) !important; | font-family: var(--font) !important; | ||
color: light-dark(rgb(27, 27, 27), #fff); | color: light-dark(rgb(27, 27, 27), #fff); | ||
line-height: 1.75; | |||
font-size: 1rem; | |||
} | |||
*, *::before, *::after { | |||
box-sizing: border-box; | |||
} | } | ||
| Line 29: | Line 39: | ||
background: transparent; | background: transparent; | ||
padding: 0; | padding: 0; | ||
} | |||
#contentSub, #contentSub2 { | |||
display: none; | |||
} | } | ||
| Line 41: | Line 55: | ||
align-items: center; | align-items: center; | ||
padding: 1rem; | padding: 1rem; | ||
margin: 1rem 0; | |||
.text { | .text { | ||
| Line 56: | Line 71: | ||
height: 2.25rem; | height: 2.25rem; | ||
width: 2.3125rem; | 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; | |||
} | } | ||