Template:Support Page: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
No edit summary |
No edit summary |
||
Line 71: | Line 71: | ||
line-height: 1.5; /*24px @16px*/ |
line-height: 1.5; /*24px @16px*/ |
||
} |
} |
||
} |
|||
.sp-page h1, |
|||
.sp-page h2, |
|||
.sp-page h3, |
|||
.sp-page h4, |
|||
.sp-page h5, |
|||
.sp-page h6, |
|||
.sp-page ol, |
|||
.sp-page ul |
|||
.sp-page p { |
|||
margin: 0; |
|||
padding: 0; |
|||
border: none; |
|||
} |
} |
||
.sp-page h1 { |
.sp-page h1 { |
||
margin-bottom: 2rem; |
|||
font-size: 32px; |
|||
line-height: 1.375; /*44px @32px*/ |
|||
} |
|||
@media all and (min-width: 768px) { |
|||
.sp-page h1 { |
|||
margin-bottom: 3rem; |
|||
font-size: 40px; |
|||
line-height: 1.3; /*52px @40px*/ |
|||
} |
|||
} |
} |
||
.sp-page h2 { |
.sp-page h2 { |
||
margin-bottom: 1rem; |
|||
font-size: 24px; |
|||
line-height: 1.2857142857; /*36px @28px*/ |
|||
line-height: 1.3333333333; /*32px @24px*/ |
|||
} |
|||
@media all and (min-width: 768px) { |
|||
.sp-page h2 { |
|||
margin-bottom: 2rem; |
|||
font-size: 28px; |
|||
line-height: 1.2857142857; /*36px @28px*/ |
|||
} |
|||
} |
} |
||
.sp-page h3, |
.sp-page h3, |
||
.sp-page p, |
.sp-page p, |
||
.sp-page ul |
.sp-page ul, |
||
.sp-page ol { |
|||
font-size: 20px; |
|||
margin-bottom: 1rem; |
|||
font-size: 18px; |
|||
line-height: 1.5555555556; /*28px @18px*/ |
|||
} |
|||
@media all and (min-width: 768px) { |
|||
.sp-page h3, |
|||
.sp-page p, |
|||
.sp-page ul, |
|||
.sp-page ol { |
|||
margin-bottom: 1rem; |
|||
font-size: 20px; |
|||
line-height: 1.5; /*30px @20px*/ |
|||
} |
|||
} |
} |
||
.sp-page |
.sp-page ul { |
||
list-style: none; |
|||
} |
|||
@media all and (min-width: 768px) { |
|||
.sp-page li { |
|||
margin-bottom: 0.5rem; |
|||
} |
|||
} |
} |
||
Line 98: | Line 145: | ||
background: #eaecf0; |
background: #eaecf0; |
||
} |
} |
||
.sp-languages-icon { |
.sp-languages-icon { |
||
position: absolute; |
position: absolute; |
||
Line 103: | Line 151: | ||
left: 20px |
left: 20px |
||
} |
} |
||
.sp-languages ul { |
.sp-languages ul { |
||
overflow-x: hidden; |
overflow-x: hidden; |
||
Line 110: | Line 159: | ||
list-style: none; |
list-style: none; |
||
} |
} |
||
.sp-languages ul { |
.sp-languages ul { |
||
overflow-x: scroll; |
overflow-x: scroll; |
||
} |
} |
||
.sp-languages .flickity-enabled { |
.sp-languages .flickity-enabled { |
||
overflow-x: hidden; |
overflow-x: hidden; |
||
} |
} |
||
.sp-languages ul:focus { |
.sp-languages ul:focus { |
||
outline: none; |
outline: none; |
||
} |
} |
||
.sp-languages ul .sp-language-divider:last-of-type { |
.sp-languages ul .sp-language-divider:last-of-type { |
||
display: none; |
display: none; |
||
} |
} |
||
.sp-languages ul li { |
.sp-languages ul li { |
||
display: inline-block; |
display: inline-block; |
||
Line 127: | Line 181: | ||
white-space: nowrap; |
white-space: nowrap; |
||
} |
} |
||
.sp-languages ul li:hover a, |
.sp-languages ul li:hover a, |
||
.sp-languages ul li:focus a, |
.sp-languages ul li:focus a, |
||
Line 134: | Line 189: | ||
border-bottom: 4px solid #000; |
border-bottom: 4px solid #000; |
||
} |
} |
||
.sp-languages ul li a { |
.sp-languages ul li a { |
||
padding-bottom: 6px; |
padding-bottom: 6px; |
||
} |
} |
||
.is-selected span, |
.is-selected span, |
||
.selflink { |
.selflink { |
||
border-bottom: 4px solid #000; |
border-bottom: 4px solid #000; |
||
} |
} |
||
.sp-languages a, |
.sp-languages a, |
||
.sp-languages a:visited { |
.sp-languages a:visited { |
||
Line 151: | Line 209: | ||
margin: 0 auto; |
margin: 0 auto; |
||
} |
} |
||
@media (min-width: 768px) { |
@media (min-width: 768px) { |
||
.mw-1360 { |
.mw-1360 { |
||
Line 165: | Line 222: | ||
margin-bottom: 1.5rem; /*24px @16px*/ |
margin-bottom: 1.5rem; /*24px @16px*/ |
||
} |
} |
||
@media (min-width: 768px) { |
@media (min-width: 768px) { |
||
.sp-header { |
.sp-header { |
||
Line 178: | Line 234: | ||
padding-bottom: 1.5rem; |
padding-bottom: 1.5rem; |
||
} |
} |
||
@media all and (min-width: 768px) { |
@media all and (min-width: 768px) { |
||
.sp-logo-nav-container { |
.sp-logo-nav-container { |
||
Line 206: | Line 261: | ||
height: 60px; |
height: 60px; |
||
} |
} |
||
/* Switch logo in low resolutions to save space */ |
/* Switch logo in low resolutions to save space */ |
||
@media all and (min-width: 768px) { |
@media all and (min-width: 768px) { |
||
Line 221: | Line 275: | ||
text-align: inherit; |
text-align: inherit; |
||
} |
} |
||
@media all and (min-width: 768px) { |
@media all and (min-width: 768px) { |
||
.sp-nav-container { |
.sp-nav-container { |
||
Line 273: | Line 326: | ||
padding: 0; |
padding: 0; |
||
} |
} |
||
.toc .: { |
.toc .: { |
||
display: none; |
display: none; |
||
} |
} |
||
.toc .tocnumber { |
.toc .tocnumber { |
||
display: none; |
display: none; |
||
} |
} |
||
.toc li, |
.toc li, |
||
.toc .toctitle { |
.toc .toctitle { |
||
Line 289: | Line 345: | ||
} |
} |
||
} |
} |
||
.toc .toctitle { |
.toc .toctitle { |
||
text-align: left; |
text-align: left; |
||
} |
} |
||
.toc .toctitle h2:after { |
.toc .toctitle h2:after { |
||
content: ":"; |
content: ":"; |
||
} |
} |
||
.toc .toctogglespan { |
.toc .toctogglespan { |
||
display: none; |
display: none; |
||
} |
} |
||
.sp-content { |
.sp-content { |
||
margin-bottom: 2.5rem; |
margin-bottom: 2.5rem; |
||
Line 311: | Line 371: | ||
margin-bottom: 2.5rem; |
margin-bottom: 2.5rem; |
||
} |
} |
||
} |
|||
h1, h2 { |
|||
border: 0; |
|||
font-family: sans-serif; |
|||
font-weight: bold; |
|||
} |
|||
.sp-content p { |
|||
margin: 0 0 2rem 0; |
|||
} |
|||
.sp-content h2 { |
|||
margin-top: 2rem; |
|||
margin-bottom: 1rem; |
|||
} |
|||
.sp-content ul { |
|||
list-style-image: none; |
|||
} |
|||
.sp-content ol { |
|||
margin-left: 1em; |
|||
} |
|||
.sp-content li { |
|||
margin-bottom: 1rem; |
|||
} |
} |
||
Line 356: | Line 394: | ||
flex-wrap: nowrap; |
flex-wrap: nowrap; |
||
flex-direction: column; |
flex-direction: column; |
||
} |
|||
.sp-footer-logo-container { |
|||
flex-basis: 32%; |
|||
margin-bottom: 24px; |
|||
margin-right: 24px; |
|||
} |
} |
||
@media (min-width: 768px) { |
@media (min-width: 768px) { |
||
Line 369: | Line 402: | ||
width: 57%; |
width: 57%; |
||
} |
} |
||
} |
|||
.sp-footer-logo-container { |
|||
flex-basis: 32%; |
|||
margin-bottom: 24px; |
|||
margin-right: 24px; |
|||
} |
} |
||
</style> |
</style> |