Template:Support Page: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
No edit summary |
No edit summary |
||
(24 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<includeonly>{{ |
<includeonly>{{DISPLAYTITLE:{{{title}}}}} |
||
<html><style> |
|||
*, *:before, *:after { |
*, *:before, *:after { |
||
box-sizing: border-box; |
box-sizing: border-box; |
||
Line 39: | Line 40: | ||
.sp-languages { |
.sp-languages { |
||
font-size: 16px; |
font-size: 16px; |
||
padding: |
padding: 14px 40px; |
||
background: #eaecf0; |
background: #eaecf0; |
||
white-space: nowrap; |
|||
overflow: hidden; |
overflow: hidden; |
||
} |
} |
||
.sp-languages-icon { |
.sp-languages-icon { |
||
position: absolute; |
|||
margin-right: 16px; |
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, |
||
.sp-languages a:visited { |
.sp-languages a:visited { |
||
color: #000; |
color: #000; |
||
padding: 0.5rem; |
|||
} |
} |
||
. |
.mw-1360 { |
||
max-width: 90rem; |
|||
.sp-content { |
|||
padding: |
padding: 0 1.25rem; |
||
margin: 0 auto; |
|||
} |
} |
||
@media (min-width: 768px) { |
@media (min-width: 768px) { |
||
. |
.mw-1360 { |
||
padding: 0 2.5rem; |
|||
.sp-content { |
|||
padding: 40px; |
|||
} |
} |
||
} |
} |
||
.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-header { |
|||
margin-bottom: 5rem; |
|||
} |
|||
} |
} |
||
Line 80: | Line 103: | ||
-ms-flex-align: center; |
-ms-flex-align: center; |
||
align-items: center; |
align-items: center; |
||
padding-top: 1.5rem; |
|||
padding-bottom: 3rem; |
|||
} |
} |
||
.sp-logo- |
.sp-logo-container { |
||
width: 50%; |
width: 50%; |
||
} |
|||
.sp-logo-horizontal { |
|||
max-width: 280px; |
max-width: 280px; |
||
display: block; |
display: block; |
||
} |
} |
||
.sp-logo-vertical { |
.sp-logo-vertical { |
||
width: |
width: 145px; |
||
display: none; |
display: none; |
||
} |
} |
||
Line 95: | Line 123: | ||
.sp-logo-horizontal { display: none; } |
.sp-logo-horizontal { display: none; } |
||
.sp-logo-vertical { display: block; } |
.sp-logo-vertical { display: block; } |
||
} |
|||
.sp-nav-container { |
|||
text-align: right; |
|||
} |
} |
||
.sp-donate-btn { |
.sp-donate-btn { |
||
display: none; |
display: none; |
||
float: right; |
|||
background: #f51a71; |
background: #f51a71; |
||
color: #fff !important; |
color: #fff !important; |
||
Line 106: | Line 137: | ||
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 { |
||
Line 113: | Line 145: | ||
@media (min-width: 768px) { |
@media (min-width: 768px) { |
||
.sp-donate-btn { |
.sp-donate-btn { |
||
display: block; |
display: inline-block; |
||
} |
} |
||
} |
} |
||
Line 121: | Line 153: | ||
} |
} |
||
.sp- |
.sp-header h1 { |
||
margin-top: 0; |
|||
} |
} |
||
@media (min-width: |
@media (min-width: 1100px) { |
||
.sp- |
.sp-toc { |
||
float: right; |
|||
padding-left: 1rem; |
|||
width: calc(100% - 50rem); |
|||
} |
|||
.toc { |
|||
margin-left: auto; |
|||
} |
} |
||
} |
} |
||
@media (min-width: 1280px) { |
@media (min-width: 1280px) { |
||
.sp- |
.sp-toc { |
||
padding-left: 2rem; |
|||
} |
} |
||
} |
} |
||
.toc { |
.toc { |
||
padding: |
padding: 1rem; |
||
background: #f6f6f6; |
background: #f6f6f6; |
||
border-color: #e5e5e5; |
border-color: #e5e5e5; |
||
line-height: 1.6; |
|||
} |
} |
||
.toc .toctitle { |
.toc .toctitle { |
||
text-align: left; |
text-align: left; |
||
} |
|||
.toc .toctoggle { |
|||
display: none; |
|||
} |
} |
||
.toc .tocnumber { |
.toc .tocnumber { |
||
display: none; |
display: none; |
||
} |
} |
||
.toc li { |
|||
margin-bottom: 0. |
margin-bottom: 0.5rem; |
||
} |
} |
||
.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; |
|||
} |
|||
} |
|||
h1, h2 { |
h1, h2 { |
||
Line 174: | Line 231: | ||
} |
} |
||
.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 { |
.sp-footer { |
||
padding: 64px 20px; |
|||
background: #000; |
background: #000; |
||
color: #fff; |
color: #fff; |
||
padding-top: 4rem; |
|||
} |
|||
padding-bottom: 4rem; |
|||
@media (min-width: 768px) { |
|||
.sp-footer { |
|||
padding: 96px 40px; |
|||
} |
|||
} |
} |
||
Line 206: | Line 268: | ||
</style> |
</style> |
||
<div class="sp-page"> |
<div class="sp-page"> |
||
<div class="sp-languages hlist"> |
|||
<svg class="sp-languages-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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> |
|||
</html>{{Languages2}}<html> |
|||
</div> |
|||
<header class="sp-header"> |
<header class="sp-header"> |
||
<div class="sp- |
<div class="translation-bar sp-languages"> |
||
<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> |
|||
<div class="sp-logo-container"> |
|||
</html>{{Languages2}}<html> |
|||
<img class="sp-logo-horizontal" src="//upload.wikimedia.org/wikipedia/donate/6/60/Wmf_logo_horiz_K.svg" alt="Wikimedia Foundation"/> |
|||
</div> |
|||
<img class="sp-logo-vertical" src="/static/images/project-logos/donatewiki-2x.png" alt="Wikimedia Foundation"/> |
|||
<div class="sp-header-inner mw-1360"> |
|||
</div> |
|||
<div class="sp-nav-container"> |
<div class="sp-logo-nav-container"> |
||
< |
<div class="sp-logo-container"> |
||
<img class="sp-logo-horizontal" src="//upload.wikimedia.org/wikipedia/donate/6/60/Wmf_logo_horiz_K.svg" alt="Wikimedia Foundation"/> |
|||
<nav class="sp-main-nav"> |
|||
<img class="sp-logo-vertical" src="/static/images/project-logos/donatewiki-2x.png" alt="Wikimedia Foundation"/> |
|||
Link link link link |
|||
</ |
</div> |
||
<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> |
</div> |
||
<h1></html>{{{title}}}<html></h1> |
|||
</div> |
</div> |
||
<h1></html>{{{title}}}<html></h1> |
|||
</header> |
</header> |
||
< |
<article class="sp-main mw-1360"> |
||
<div class="sp-toc"> |
|||
</html> |
|||
</html>__TOC__<html> |
|||
{{DISPLAYTITLE:{{{title}}}}} |
|||
</div> |
|||
__TOC__ |
|||
<div class="sp-content"> |
|||
</includeonly> |
|||
</html></includeonly> |