Template:Support Page: Difference between revisions

From Donate
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>{{Support Page/js}}<html><style>
<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: 16px 40px;
padding: 14px 40px;
background: #eaecf0;
background: #eaecf0;
white-space: nowrap;
overflow: hidden;
overflow: hidden;
}
}
.sp-languages-icon {
.sp-languages-icon {
float: left;
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;
}
}


.sp-header,
.mw-1360 {
max-width: 90rem;
.sp-content {
padding: 20px;
padding: 0 1.25rem;
margin: 0 auto;
}
}

@media (min-width: 768px) {
@media (min-width: 768px) {
.sp-header,
.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.50);
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-horizontal {
.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: 135px;
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-content {
.sp-header h1 {
max-width: 800px;
margin-top: 0;
}
}


@media (min-width: 768px) and (max-width: 1280px) {
@media (min-width: 1100px) {
.sp-content {
.sp-toc {
font-size: 1.125rem;
float: right;
padding-left: 1rem;
width: calc(100% - 50rem);
}
.toc {
margin-left: auto;
}
}
}
}
@media (min-width: 1280px) {
@media (min-width: 1280px) {
.sp-content {
.sp-toc {
font-size: 1.25rem;
padding-left: 2rem;
}
}
}
}


.toc {
.toc {
padding: 16px;
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;
}
}
.sp-content .toc li {
.toc li {
margin-bottom: 0.1em;
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-logo-nav-container">
<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">
<a class="sp-donate-btn" href="https://donate.wikimedia.org/">Donate now</a>
<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
</nav>
</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>
<div class="sp-content">
<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>

Revision as of 20:26, 12 July 2018