Template:Support Page: Difference between revisions

From Donate
Content deleted Content added
make links more like new site
rotate expand arrow other direction
(46 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{DISPLAYTITLE:{{{title}}}}}
{{DISPLAYTITLE:{{{title|Example title}}}}}
{{Support Page/js}}<!-- This is just the critical javascript to add the viewport tag. Everything else is in MediaWiki:SupportPage.js -->
<html><style>
<html><style>
*, *:before, *:after {
*, *:before, *:after {
Line 34: Line 35:
font-size: inherit;
font-size: inherit;
line-height: inherit;
line-height: inherit;
}

/* Right to left */
.sp-dir-rtl {
direction: rtl;
}
}


Line 39: Line 45:
.sp-page li {
.sp-page li {
margin-bottom: 0;
margin-bottom: 0;
}

.sp-page a {
color: #36c;
}
}


/* OOUI focus styles are applied to buttons */
/* OOUI focus styles are applied to buttons */
.sp-page .sp-donate-btn:focus,
.sp-page .sp-btn:focus {
.sp-page .wtg-bitcoin-btn:focus {
outline: 0;
outline: 0;
}
}
Line 57: Line 58:


.toc li,
.toc li,
.sp-footer-text {
.toc .toctitle,
font-size: 16px;
.sp-footer-text,
line-height: 1.5; /*24px @16px*/
.wtg-muted p {
font-size: 14px;
line-height: 1.7142857143; /*24px @14px*/
}
}
@media all and (min-width: 1280px) {
@media all and (min-width: 1280px) {
.toc li,
.toc li,
.sp-footer-text {
.toc .toctitle,
font-size: 18px;
.sp-footer-text,
line-height: 1.5; /*27px @18px*/
.wtg-muted p {
font-size: 16px;
line-height: 1.5; /*24px @16px*/
}
}
}
}
Line 100: Line 97:


.sp-page h1 {
.sp-page h1 {
margin-bottom: 2rem;
font-size: 2rem; /*32px*/
text-transform: uppercase;
font-size: 28px;
line-height: 1.4285714286; /*40px @28px*/
letter-spacing: 0.03125rem; /*0.5px*/
letter-spacing: 0.03125rem; /*0.5px*/
}
}
@media all and (min-width: 768px) {
@media all and (min-width: 768px) {
.sp-page h1 {
.sp-page h1 {
margin-bottom: 3rem;
font-size: 3rem; /*48px*/
font-size: 32px;
line-height: 1.375; /*44px @32px*/
}
}
}

.sp-header h1 {
margin-bottom: 0;
}
}


Line 197: Line 185:
.sp-page li {
.sp-page li {
margin-bottom: 0.5rem; /*8px*/
margin-bottom: 0.5rem; /*8px*/
}

/* Second level navigation */
.sp-page .sp-toc li ul {
margin: 0.5rem 0 0 0.5rem; /*8px 0 0 8px*/
}
}


Line 208: Line 191:
.sp-languages {
.sp-languages {
background: #eaecf0;
background: #eaecf0;
height: 56px;
overflow: hidden;
}
.sp-languages.-expanded {
height: auto;
}
}


.sp-languages-icon {
.sp-languages-icon {
position: absolute;
position: absolute;
top: 7px;
top: 16px;
left: 20px
left: 16px
}
.sp-languages-expand {
position: absolute;
top: 16px;
right: 16px;
cursor: pointer;
transition: all 100ms;
}
.sp-languages-expand:hover g {
fill: #222;
}
.sp-languages.-expanded .sp-languages-expand {
transform: rotate(90deg);
}
}


.sp-languages ul {
.sp-languages ul {
overflow-x: hidden;
margin: 0 56px 0 56px;
margin: 0 0 0 52px;
padding: 5px 0 6px;
white-space: nowrap;
list-style: none;
list-style: none;
}

.sp-languages ul {
overflow-x: scroll;
}

.sp-languages .flickity-enabled {
overflow-x: hidden;
}
}


Line 238: Line 228:
.sp-languages ul li {
.sp-languages ul li {
display: inline-block;
display: inline-block;
padding: 0 6px;
padding: 12px 0;
margin-bottom: 0;
margin-bottom: 0;
white-space: nowrap;
white-space: nowrap;
}
}


.sp-languages ul li:hover a,
.sp-languages ul li:after {
content: "·";
.sp-languages ul li:focus a,
padding: 0 .2em 0 .4em;
.sp-languages ul li a:hover,
.sp-languages ul li a:focus {
text-decoration: none;
border-bottom: 4px solid #000;
}
}
.sp-languages ul li:last-of-type:after {

display: none;
.sp-languages ul li a {
padding-bottom: 6px;
}

.is-selected span,
.selflink {
border-bottom: 4px solid #000;
}
}


Line 263: Line 244:
.sp-languages a:visited {
.sp-languages a:visited {
color: #000;
color: #000;
border-bottom: 4px solid transparent;
-webkit-transition: all 300ms;
transition: all 300ms;
padding: 12px 0;
}

.sp-languages ul li:hover a,
.sp-languages ul li:focus a,
.sp-languages ul li a:hover,
.sp-languages ul li a:focus,
.sp-languages a.selflink {
text-decoration: none;
border-color: #000;
}
}


Line 293: Line 287:
display: block;
display: block;
text-align: center;
text-align: center;
padding-top: 2rem;
padding-top: 1.5rem;
padding-bottom: 3rem;
padding-bottom: 3rem;
}
}
Line 308: Line 302:
align-items: center;
align-items: center;
text-align: left;
text-align: left;
padding-top: 3rem;
padding-bottom: 4rem;
}
}

@media all and (min-width: 768px) {
.sp-logo-container {
width: 50%;
}
}
}
}
Line 354: Line 340:
}
}


/* A standard blue button (used e.g. for bitcoin on Ways to Give) */
.sp-page .sp-donate-btn,
.sp-page .wtg-bitcoin-btn {
.sp-page .sp-btn {
font-size: 16px;
font-size: 1rem;
padding: 13px 18px 11px !important;
padding: 13px 18px 11px !important;
color: #fff !important;
color: #fff !important;
border-style: solid;
border: 0;
border-width: 1px;
border-radius: 2px;
border-radius: 2px;
transition: all 300ms ease;
transition: all 300ms ease;
font-weight: bold;
font-weight: bold;
line-height: 1.25; /*20px @16px*/
line-height: 1.25; /*20px @16px*/
background: #36c;
}
.sp-page .sp-btn:hover {
text-decoration: none;
background: #447ff5;
}
.sp-page .sp-btn:active {
box-shadow: none;
background: #2a4b8d;
}
.sp-page .sp-btn:focus {
border-color: #36c;
box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
}
}


/* Donate Now button */
.sp-page .sp-donate-btn {
.sp-page .sp-donate-now-btn {
background-color: #f51a71;
background-color: #f51a71;
text-transform: uppercase;
text-transform: uppercase;
letter-spacing: 0.03125rem; /*0.5px*/
letter-spacing: 0.03125rem; /*0.5px*/
}
}
.sp-page .sp-donate-now-btn:hover,

.sp-page .wtg-bitcoin-btn {
.sp-page .sp-donate-now-btn:active {
background-color: #36c;
}

.sp-page .sp-donate-btn:hover,
.sp-page .sp-donate-btn:focus,
.sp-page .wtg-bitcoin-btn:hover,
.sp-page .wtg-bitcoin-btn:focus {
text-decoration: none;
}

.sp-page .sp-donate-btn:hover,
.sp-page .sp-donate-btn:focus {
background-color: #b71da0;
background-color: #b71da0;
}

.sp-page .sp-donate-btn:focus {
border-color: #f51a71;
box-shadow: inset 0 0 0 1px #f51a71, inset 0 0 0 2px #fff;
}

.sp-page .wtg-bitcoin-btn:hover
.sp-page .wtg-bitcoin-btn:focus {
background-color: #447ff5;
}

.sp-page .wtg-bitcoin-btn:focus {
border-color: #36c;
box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
}
}


Line 411: Line 383:
margin-bottom: 2rem;
margin-bottom: 2rem;
}
}

@media (min-width: 1024px) {
@media (min-width: 1024px) {
.sp-toc {
.sp-toc {
Line 419: Line 390:
overflow-y: scroll;
overflow-y: scroll;
width: 33.333333%;
width: 33.333333%;
height: 100vh;
margin-bottom: 0;
margin-bottom: 0;
padding-top: 0.75rem; /*12px*/
padding-top: 0.75rem; /*12px*/
padding-left: 3rem; /*48px*/
padding-left: 2rem; /*32px*/
padding-right: 2rem; /*32px*/ /* Prevent being covered by scrollbar */
padding-bottom: 2rem; /*32px*/
}
.sp-dir-rtl .sp-toc {
float: left;
}
.sp-toc::-webkit-scrollbar {
background: transparent; /* Hide scrollbar in Chrome */
}
.sp-toc a {
padding-left: 1rem; /*16px*/
border-left: 4px solid transparent;
}
.sp-toc a.-active {
color: #000;
border-left: 4px solid #36c;
}
}
}
}
Line 430: Line 416:
border: none;
border: none;
padding: 0;
padding: 0;
font-weight: bold;
}
.toc .toctogglecheckbox,
.toc .toctitle {
display: none;
}
}

.sp-toc ul {
.sp-toc ul {
margin-left: 0;
margin-left: 0;
margin-bottom: 0;
margin-bottom: 0;
}
}
.toc li {

.toc .: {
display: none;
}

.toc .tocnumber {
display: none;
}

.toc li,
.toc .toctitle {
margin-bottom: 12px;
margin-bottom: 12px;
}
}
Line 455: Line 435:
}
}
}
}
.toc .tocnumber {

display: none;
.toc .toctitle {
text-align: left;
}
}


/* Override needed for right to left */
.toc .toctitle h2:after {
.sp-dir-rtl .toc ul {
content: ":";
text-align: right;
}
}


/* Second level navigation */
.toc .toctogglespan {
.toc li ul {
display: none;
margin: 0.5rem 0 0 0.5rem; /*8px 0 0 8px*/
}
.toc a {
display: block;
color: #6c8699;
-webkit-transition: all 300ms;
transition: all 300ms;
}
.toc a:hover {
color: #000;
text-decoration: none;
}
}


Line 484: Line 475:


/* Links */
/* Links */

.sp-content a,
.sp-content a,
.sp-content a:visited,
.sp-content a:visited,
.sp-content a.external,
.sp-content a.external,
.sp-content a.external:visited {
.sp-content a.external:visited,
.sp-content a.extiw,
.sp-content a.extiw:visited {
color: inherit;
color: inherit;
/* No external link arrows */
/* No external link arrows */
padding: 0;
padding: 0;
background-image: -webkit-gradient(linear,left bottom,left top,from(#36c),to(#36c));
background-image: -webkit-gradient(linear, left bottom, left top, from(#36c), to(#36c));
background-image: linear-gradient(to top,#36c,#36c);
background-image: linear-gradient(to top, #36c, #36c);
background-size: 100% .25rem;
background-size: 100% .2rem;
background-position: bottom;
background-position: bottom;
background-repeat: no-repeat;
background-repeat: no-repeat;
-webkit-transition: 300ms all;
-webkit-transition: all 300ms;
transition: 300ms all;
transition: all 300ms;
}
}
.sp-content a:hover,
.sp-content a:hover,
.sp-content a.external:hover {
.sp-content a.external:hover,
.sp-content a.extiw:hover {
background-size: 100% 1.5rem;
background-size: 100% 1.5rem;
color: #fff;
color: #fff;
Line 510: Line 503:
background: #000;
background: #000;
color: #fff;
color: #fff;
font-weight: bold;
margin-top: 4rem;
margin-top: 4rem;
padding-top: 4rem;
padding-top: 4rem;
padding-bottom: 4rem;
padding-bottom: 8rem;
}
}


Line 559: Line 553:
}
}


/* Muted/smallprint */
.sp-page #currency-list a {
.sp-muted,
font-weight: normal;
.sp-muted p {
padding: 0 0 0.75rem 0; /*0 0 12px 0*/
font-size: 1rem;
color: #54595d;
}
}


/* Footnotes */
.sp-page .references {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #a2a9b1;
font-size: 1rem;
}
</style>
</style>
<div class="sp-page">
<div class="sp-page sp-dir-</html>{{dir|{{pagelang}}}}<html>">
<header class="sp-header">
<header class="sp-header">
<div class="translation-bar sp-languages">
<div class="translation-bar sp-languages">
<svg class="sp-languages-icon" role="img" aria-labelledby="sp-languages-icon-title" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20"><g fill="#000"><title id="sp-languages-icon-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>
<svg class="sp-languages-icon" role="img" aria-labelledby="sp-languages-icon-title" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20"><g fill="#000"><title id="sp-languages-icon-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>
</html>{{Languages2}}<html>
<svg class="sp-languages-expand" role="img" aria-labelledby="sp-languages-icon-title" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20" onclick="$('.sp-languages').toggleClass('-expanded');"><g fill="#6c8699"><title>more languages</title><path d="M6.2 1L4.8 2.5l7.4 7.5-7.4 7.5L6.2 19l9-9z"/></g></svg>
</div>
</div>
<div class="sp-header-inner mw-1360">
<div class="sp-header-inner mw-1360">
Line 578: Line 582:
</div>
</div>
<div class="sp-nav-container">
<div class="sp-nav-container">
<a class="sp-donate-btn" href="https://donate.wikimedia.org/"></html>{{MediaWiki:donate_interface-donate-now/{{Pagelang}}}}<html></a>
<a class="sp-btn sp-donate-now-btn" href="https://donate.wikimedia.org/</html>?uselang={{pagelang}}&utm_medium=donatewiki_page&utm_campaign=donate_now_btn&utm_source={{urlencode:{{#titleparts:{{PAGENAME}}|1}}|WIKI}}<html>"></html>{{MediaWiki:donate_interface-donate-now/{{Pagelang}}}}<html></a>
<!--
<!--
<nav class="sp-main-nav">
<nav class="sp-main-nav">
Line 586: Line 590:
</div>
</div>
</div>
</div>
<h1></html>{{{title}}}<html></h1>
<h1></html>{{{title|Example title}}}<html></h1>
</div>
</div>
</header>
</header>
Line 594: Line 598:
</div>
</div>
<div class="sp-content">
<div class="sp-content">
</html>
</html><noinclude>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu gravida augue, id blandit tellus. [[Ways to Give|Internal link]], ultricies lectus eu, facilisis libero. '''In in blandit purus, eget fermentum lectus.''' Nunc risus orci, porta nec tristique vitae, ornare et ipsum. Proin rhoncus vestibulum elementum. Maecenas leo sem, fermentum et odio ac, efficitur ullamcorper ipsum. [https://www.wikipedia.org External link]. [[wmf:FAQ|External interwiki link]].

==Heading==

Nulla est risus, vehicula sit amet lectus convallis, tristique lobortis nisl.<ref>Example footnote</ref> Nulla vel hendrerit orci, ''in vehicula justo''. Integer condimentum elit bibendum, ultricies metus ut, sagittis odio. Nunc sagittis lacus in tellus placerat, nec viverra erat aliquet. Proin vitae ipsum vestibulum augue pulvinar commodo et nec eros.<ref>Another example footnote</ref>

* Lorem ipsum
* Dolor sit amet
* [[Ways to Give|Coffee]]

Sed nisi risus, ultrices ac nisl vel, elementum viverra quam. In hac habitasse platea dictumst. Praesent eu porttitor massa [mailto:donate@wikimedia.org donate@wikimedia.org].

==Another heading==

In blandit quis ipsum id euismod. Curabitur ut nisi sit amet orci hendrerit finibus ac nec purus. Etiam dignissim felis vel diam elementum vulputate. Pellentesque varius odio ut neque vulputate, id laoreet eros feugiat. Integer commodo interdum tortor eu varius. Nam felis odio, rutrum in neque eu, faucibus vehicula odio. Vivamus non tortor fringilla, congue urna et, fermentum nulla. Suspendisse potenti. Praesent quis nulla libero. In condimentum nulla varius pellentesque consequat. Aenean fringilla facilisis ligula, nec malesuada lacus euismod in.

<div class="sp-muted">
This is some smallprint. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu gravida augue, id blandit tellus. [[Ways to Give|Internal link]].
</div>

==Yet another heading==
Quisque mattis luctus pulvinar. Quisque vel felis sed leo finibus convallis. Nam non felis venenatis, faucibus quam id, ultrices dolor. Etiam posuere tortor ac euismod faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. In vitae dignissim nulla, at porttitor nibh. Ut quis molestie arcu.

<references/>
{{Support Page end}}
</noinclude>

Revision as of 15:07, 18 September 2018

Language more languages
Wikimedia Foundation

Example title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu gravida augue, id blandit tellus. Internal link, ultricies lectus eu, facilisis libero. In in blandit purus, eget fermentum lectus. Nunc risus orci, porta nec tristique vitae, ornare et ipsum. Proin rhoncus vestibulum elementum. Maecenas leo sem, fermentum et odio ac, efficitur ullamcorper ipsum. External link. External interwiki link.

Heading

Nulla est risus, vehicula sit amet lectus convallis, tristique lobortis nisl.[1] Nulla vel hendrerit orci, in vehicula justo. Integer condimentum elit bibendum, ultricies metus ut, sagittis odio. Nunc sagittis lacus in tellus placerat, nec viverra erat aliquet. Proin vitae ipsum vestibulum augue pulvinar commodo et nec eros.[2]

  • Lorem ipsum
  • Dolor sit amet
  • Coffee

Sed nisi risus, ultrices ac nisl vel, elementum viverra quam. In hac habitasse platea dictumst. Praesent eu porttitor massa donate@wikimedia.org.

Another heading

In blandit quis ipsum id euismod. Curabitur ut nisi sit amet orci hendrerit finibus ac nec purus. Etiam dignissim felis vel diam elementum vulputate. Pellentesque varius odio ut neque vulputate, id laoreet eros feugiat. Integer commodo interdum tortor eu varius. Nam felis odio, rutrum in neque eu, faucibus vehicula odio. Vivamus non tortor fringilla, congue urna et, fermentum nulla. Suspendisse potenti. Praesent quis nulla libero. In condimentum nulla varius pellentesque consequat. Aenean fringilla facilisis ligula, nec malesuada lacus euismod in.

This is some smallprint. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu gravida augue, id blandit tellus. Internal link.

Yet another heading

Quisque mattis luctus pulvinar. Quisque vel felis sed leo finibus convallis. Nam non felis venenatis, faucibus quam id, ultrices dolor. Etiam posuere tortor ac euismod faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. In vitae dignissim nulla, at porttitor nibh. Ut quis molestie arcu.

  1. Example footnote
  2. Another example footnote