Template:Mdn.css: Difference between revisions
No edit summary |
No edit summary |
||
| (23 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; | --inner-width: 1440px; | ||
} | } | ||
| Line 37: | Line 39: | ||
background: transparent; | background: transparent; | ||
padding: 0; | padding: 0; | ||
} | |||
#contentSub, #contentSub2 { | |||
display: none; | |||
} | } | ||
| Line 49: | Line 55: | ||
align-items: center; | align-items: center; | ||
padding: 1rem; | padding: 1rem; | ||
margin: 1rem 0; | |||
.text { | .text { | ||
| Line 67: | Line 74: | ||
.nav { | .nav { | ||
position: relative; | |||
z-index: 20; | |||
padding: 2rem calc((100% - var(--inner-width)) / 2); | padding: 2rem calc((100% - var(--inner-width)) / 2); | ||
display: flex; | display: flex; | ||
| Line 75: | Line 85: | ||
line-height: 1.75; | line-height: 1.75; | ||
font-size: 1rem; | font-size: 1rem; | ||
font-family: var(--font) !important; | |||
border-bottom: 1px solid #cdcdcd; | |||
p { | p { | ||
| Line 82: | Line 95: | ||
a { | a { | ||
display: block; | display: block; | ||
color: rgb(78 78 78); | color: rgb(78, 78, 78); | ||
padding .5rem; | padding: .5rem; | ||
border-radius: .25rem; | border-radius: .25rem; | ||
} | } | ||
| Line 95: | Line 108: | ||
aspect-ratio: 512 / 77; | aspect-ratio: 512 / 77; | ||
width: auto; | 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; | |||
} | } | ||