Template:Support Page: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
No edit summary |
No edit summary |
||
(42 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<includeonly>{{ |
<includeonly>{{DISPLAYTITLE:{{{title}}}}} |
||
<html> |
<html><style> |
||
*, *:before, *:after { |
|||
<style> |
|||
box-sizing: border-box; |
|||
/* Wiki Resets |
|||
} |
|||
---------------------------------------------- */ |
|||
html, body { |
html, body { |
||
margin: 0; |
margin: 0; |
||
padding: 0; |
padding: 0; |
||
font-size: 16px; |
|||
line-height: 2; |
|||
} |
} |
||
Line 13: | Line 16: | ||
} |
} |
||
#mw-navigation, |
#mw-navigation, #mw-page-base, #mw-head-base, |
||
#firstHeading, #siteSub, #contentSub, #jump-to-nav, |
|||
#mw-page-base, |
|||
#catlinks, #footer, .mw-editsection { |
|||
#mw-head-base, |
|||
#firstHeading, |
|||
#footer, |
|||
#jump-to-nav, |
|||
.mw-editsection { |
|||
display: none; |
display: none; |
||
} |
} |
||
Line 29: | Line 28: | ||
} |
} |
||
/* Hide <p> tag containing styles and scripts */ |
|||
.sp-header, |
|||
.mw-parser-output > p:first-child { |
|||
.sp-content { |
|||
display: none; |
|||
} |
|||
.mw-body-content { |
|||
font-size: inherit; |
|||
line-height: inherit; |
|||
} |
|||
.sp-languages { |
|||
font-size: 16px; |
|||
padding: 14px 40px; |
|||
background: #eaecf0; |
|||
overflow: hidden; |
|||
} |
|||
.sp-languages-icon { |
|||
position: absolute; |
|||
margin-right: 16px; |
|||
} |
|||
.sp-languages ul { |
|||
padding-left: 40px; |
|||
margin: 0; |
|||
list-style: none; |
|||
} |
|||
.sp-languages ul:focus { |
|||
outline: none; |
|||
} |
|||
.sp-languages ul .sp-language-divider:last-of-type { |
|||
display: none; |
|||
} |
|||
.sp-languages ul li { |
|||
display: inline-block; |
|||
} |
|||
.sp-languages a, |
|||
.sp-languages a:visited { |
|||
color: #000; |
|||
padding: 0.5rem; |
|||
} |
|||
.mw-1360 { |
|||
max-width: 90rem; |
|||
padding: 0 1.25rem; |
|||
margin: 0 auto; |
|||
} |
|||
@media (min-width: 768px) { |
|||
.mw-1360 { |
|||
padding: 0 2.5rem; |
|||
} |
|||
} |
} |
||
.sp-header { |
.sp-header { |
||
padding-top: 20px; |
|||
background: #f6f6f6; |
background: #f6f6f6; |
||
box-shadow: 0 1px 0 0 rgba(204,204,204,0. |
box-shadow: 0 1px 0 0 rgba(204, 204, 204, 0.5); |
||
padding-bottom: 2.5rem; |
|||
margin-bottom: 2.5rem; |
|||
} |
} |
||
@media (min-width: 768px) { |
|||
.sp-wmf-logo { |
|||
.sp-header { |
|||
margin-bottom: 5rem; |
|||
} |
|||
} |
} |
||
.sp- |
.sp-logo-nav-container { |
||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: justify; |
|||
-ms-flex-pack: justify; |
|||
justify-content: space-between; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
padding-top: 1.5rem; |
|||
padding-bottom: 3rem; |
|||
} |
|||
.sp-logo-container { |
|||
width: 50%; |
|||
} |
|||
.sp-logo-horizontal { |
|||
max-width: 280px; |
|||
display: block; |
display: block; |
||
} |
|||
float: right; |
|||
.sp-logo-vertical { |
|||
width: 145px; |
|||
display: none; |
|||
} |
|||
@media (min-width: 1050px) { |
|||
.sp-logo-horizontal { display: none; } |
|||
.sp-logo-vertical { display: block; } |
|||
} |
|||
.sp-nav-container { |
|||
text-align: right; |
|||
} |
|||
.sp-donate-btn { |
|||
display: none; |
|||
background: #f51a71; |
background: #f51a71; |
||
color: #fff; |
color: #fff !important; |
||
padding: |
padding: 4px 24px; |
||
text-transform: uppercase; |
text-transform: uppercase; |
||
font-weight: 500; |
font-weight: 500; |
||
transition: all 300ms ease; |
transition: all 300ms ease; |
||
margin-bottom: 1.5rem; |
|||
} |
} |
||
.sp-donate-btn:hover { |
.sp-donate-btn:hover { |
||
text-decoration: none; |
text-decoration: none; |
||
background: #B71DA0; |
background: #B71DA0; |
||
} |
|||
@media (min-width: 768px) { |
|||
.sp-donate-btn { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
.sp-main-nav { |
|||
display: block; |
|||
} |
|||
.sp-header h1 { |
|||
margin-top: 0; |
|||
} |
|||
@media (min-width: 1100px) { |
|||
.sp-toc { |
|||
float: right; |
|||
padding-left: 1rem; |
|||
width: calc(100% - 50rem); |
|||
} |
|||
.toc { |
|||
margin-left: auto; |
|||
} |
|||
} |
|||
@media (min-width: 1280px) { |
|||
.sp-toc { |
|||
padding-left: 2rem; |
|||
} |
|||
} |
|||
.toc { |
|||
padding: 1rem; |
|||
background: #f6f6f6; |
|||
border-color: #e5e5e5; |
|||
line-height: 1.6; |
|||
} |
|||
.toc .toctitle { |
|||
text-align: left; |
|||
} |
|||
.toc .toctoggle { |
|||
display: none; |
|||
} |
|||
.toc .tocnumber { |
|||
display: none; |
|||
} |
|||
.toc li { |
|||
margin-bottom: 0.5rem; |
|||
} |
} |
||
.sp-content { |
.sp-content { |
||
max-width: 50rem; |
|||
margin-bottom: 2.5rem; |
|||
} |
|||
@media (min-width: 768px) { |
|||
.sp-content { |
|||
font-size: 1.125rem; |
|||
margin-bottom: 5rem; |
|||
} |
|||
} |
|||
@media (min-width: 1280px) { |
|||
.sp-content { |
|||
font-size: 1.25rem; |
|||
} |
|||
} |
} |
||
Line 68: | Line 213: | ||
font-family: sans-serif; |
font-family: sans-serif; |
||
font-weight: bold; |
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; |
|||
} |
|||
.sp-content a, |
|||
.sp-content a:visited, |
|||
.sp-content a.external, |
|||
.sp-content a.external:visited { |
|||
color: #36c; |
|||
/* Remove external link arrows */ |
|||
background: none; |
|||
padding: 0; |
|||
} |
|||
.sp-footer { |
|||
background: #000; |
|||
color: #fff; |
|||
padding-top: 4rem; |
|||
padding-bottom: 4rem; |
|||
} |
|||
.sp-footer-row { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
flex-direction: column; |
|||
} |
|||
.sp-footer-logo-container { |
|||
flex-basis: 32%; |
|||
margin-bottom: 24px; |
|||
margin-right: 24px; |
|||
} |
|||
@media (min-width: 768px) { |
|||
.sp-footer-row { |
|||
flex-direction: row; |
|||
} |
|||
.sp-footer-text { |
|||
width: 57%; |
|||
} |
|||
} |
} |
||
</style> |
</style> |
||
<div class="sp-page"> |
<div class="sp-page"> |
||
< |
<header class="sp-header"> |
||
<div class="translation-bar sp-languages"> |
|||
<img class="sp-wmf-logo" src="/static/images/project-logos/donatewiki-2x.png" alt="Wikimedia Foundation"/> |
|||
<svg class="sp-languages-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20"><g fill="#000"><title>language</title><path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"/></g></svg> |
|||
<a class="sp-donate-btn">Donate now</a> |
|||
</html>{{Languages2}}<html> |
|||
</div> |
</div> |
||
<div class="sp- |
<div class="sp-header-inner mw-1360"> |
||
<div class="sp-logo-nav-container"> |
|||
</html> |
|||
<div class="sp-logo-container"> |
|||
{{Languages}} |
|||
<img class="sp-logo-horizontal" src="//upload.wikimedia.org/wikipedia/donate/6/60/Wmf_logo_horiz_K.svg" alt="Wikimedia Foundation"/> |
|||
{{DISPLAYTITLE:{{{title}}}}} |
|||
<img class="sp-logo-vertical" src="/static/images/project-logos/donatewiki-2x.png" alt="Wikimedia Foundation"/> |
|||
__TOC__ |
|||
</div> |
|||
</includeonly> |
|||
<div class="sp-nav-container"> |
|||
<a class="sp-donate-btn" href="https://donate.wikimedia.org/">Donate now</a> |
|||
<nav class="sp-main-nav"> |
|||
Lorem Ipsum Dolor Sit Amet |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
<h1></html>{{{title}}}<html></h1> |
|||
</div> |
|||
</header> |
|||
<article class="sp-main mw-1360"> |
|||
<div class="sp-toc"> |
|||
</html>__TOC__<html> |
|||
</div> |
|||
<div class="sp-content"> |
|||
</html></includeonly> |