Template:DonationBadges: Difference between revisions

From Donate
Jump to navigation Jump to search
Browse history interactively
← Older edit
Content deleted Content added
VisualWikitext
MShaver (WMF) (talk | contribs)
inactive
145 edits
No edit summary
blank page
Tag: Blanking
 
(4 intermediate revisions by one other user not shown)
Line 1: Line 1:
{{DISPLAYTITLE:{{{header|Donation Badges FAQ}}}}}
{{Add viewport tag.js}}<!-- Critical javascript to add the viewport tag. Other js is in MediaWiki:ThankYouPage.js -->
<html><!--html tag needed to render properly-->
<style>
/* Wiki Resets
---------------------------------------------- */
html, body {
margin: 0;
padding: 0;
}

#jump-to-nav {
display: none;
}

#firstHeading, #contentSub, #siteSub {
display: none
}

/* Hiding the Interface on Desktop and Mobile, identical to Template: HideInterface */
/* Desktop */
#mw-navigation,
#mw-page-base,
#mw-head-base,
h1#firstHeading,
div#footer,
div#contentSub,
.patrollink,
#catlinks {
display: none;
}

/* Mobile */
body.mw-mobile-mode .header,
body.mw-mobile-mode #mw-mf-last-modified,
body.mw-mobile-mode .pre-content,
body.mw-mobile-mode #footer {
display: none;
}

body div#content {
height: 100%;
margin: 0;
padding: 0;
border: none;
}

.mw-body-content p {
margin: 0;
}

/* Colors
----------------------------------------------
HEX Color Usage
#54595d black WMF Base20, Main color
#3a25ff blue New foundation site blue: Action buttons and links (previously #36c)
#2516b5 blue dark New foundation site blue hover/focus (previously #447ff5)
#fee7e6 red mellow WMF Red90
#ffdad9 red soft Used in bg gradient
#f51971 pink <hr> separator bg color, .ty-area separator on mobile (* * *)
#fef6e7 yellow soft WMF Yellow90, Gradient Color
*/

/* Base settings
---------------------------------------------- */

body {
background-color: white;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}

img,
svg {
max-width: 100%;
}

ul {
list-style: none;
}

button {
margin: 0;
padding: 0;
background: none;
border: none;
}

.ty-page {
direction: </html>{{dir|{{{language|}}}}}<html>;
}

.ty-page * {
margin: 0;
padding: 0;
line-height: 1;
color: #54595d;
font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
box-sizing: border-box;
}

.ty-page h1,
.ty-page h2,
.ty-page h3,
.ty-page h4,
.ty-page h5,
.ty-page h6 {
margin: 0;
padding: 0;
border-bottom: none;
}

/* Grid
---------------------------------------------- */
.ty-wrapper {
max-width: 848px;
}

.ty-page .ty-description {
margin: 0 auto;
max-width: 498px;
}

.ty-footer {
max-width: 704px;
}

.ty-secondary,
.ty-tertiary {
max-width: 1024px;
}

/* Section Spacing
---------------------------------------------- */
.ty-header {
padding: 20px 16px 30px;
}

@media all and (min-width: 768px) {
.ty-header {
padding: 35px 32px 45px;
}
}

.ty-section {
padding: 20px 16px 25px;
}

@media all and (min-width: 768px) {
.ty-section {
padding: 30px 32px;
}
}

.ty-primary {
padding-top: 20px;
padding-bottom: 0;
}

@media all and (min-width: 768px) {
.ty-primary {
padding-top: 25px;
}
}

.ty-footer {
padding-top: 10px;
padding-bottom: 20px;
}

@media all and (min-width: 768px) {
.ty-footer {
padding-top: 15px;
padding-bottom: 25px;
}
}

/* Typography
---------------------------------------------- */

.ty-action,
.ty-footer {
font-size: 14px;
line-height: 1.4285714286; /*20px @14px*/
}

@media all and (min-width: 768px) {
.ty-action,
.ty-footer {
font-size: 16px;
line-height: 1.25; /*20px @16px*/
}
}

.ty-action {
font-weight: bold;
}

.ty-page .ty-header-description {
font-size: 16px;
line-height: 1.5625; /*25px @16px*/
}

@media all and (min-width: 768px) {
.ty-page .ty-header-description {
font-size: 18px;
line-height: 1.6666666667; /*30px @18px*/
}
}

.ty-page .ty-description,
.ty-page .ty-section-subtitle {
font-size: 18px;
line-height: 1.3888888889; /*25px @18px*/
font-weight: normal;
}

@media all and (min-width: 768px) {
.ty-page .ty-description,
.ty-page .ty-section-subtitle {
font-size: 21px;
line-height: 1.4285714286; /*30px @21px*/
}
}

.ty-primary .ty-description {
font-size: 20px;
line-height: 1.25; /*25px @20px*/
}

@media all and (min-width: 768px) {
.ty-primary .ty-description {
font-size: 26px;
line-height: 1.3461538462; /*35px @26px*/
}
}

.ty-page .ty-section-title {
font-size: 26px;
line-height: 1.3461538462; /*35px @26px*/
font-weight: normal;
}

@media all and (min-width: 768px) {
.ty-page .ty-section-title {
font-size: 30px;
line-height: 1.3333333333; /*40px @30px*/
}
}

.ty-page .ty-header-logo {
font-size: 1em;
}

.ty-page .ty-header-title {
font-size: 30px;
line-height: 1.3333333333; /*40px @30px*/
font-weight: 600;
}

@media all and (min-width: 768px) {
.ty-page .ty-header-title {
font-size: 50px;
line-height: 1.2; /*60px @50px*/
}
}

/* Styling
---------------------------------------------- */

.ty-wrapper {
position: relative;
z-index: 2;
margin: 0 auto;
}

.ty-icon {
position: relative;
height: 120px;
}

@media all and (min-width: 768px) {
.ty-icon {
height: 160px;
}
}

.ty-icon-tick {
margin-bottom: -3px;
width: 18px;
height: 18px;
}

@media all and (min-width: 768px) {
.ty-icon-tick {
width: 20px;
height: 20px;
}
}

.ty-header {
position: relative;
text-align: center;
background-color: #3a25ff;
}

.ty-header:after,
.ty-main:after {
position: absolute;
display: block;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: ' ';
background-image: url(https://upload.wikimedia.org/wikipedia/donate/2/26/Wiki15bknd-white-15.png);
}

.ty-header:after {
opacity: 0.4;
}

.ty-header * {
color: #fff;
}

.ty-main:after {
opacity: 0.2;
filter: invert(100%);
-webkit-filter: invert(100%);
}

.ty-logo-wmf {
width: 88px;
height: 64px;
}

@media all and (min-width: 768px) {
.ty-logo-wmf {
width: 110px;
height: 80px;
}
}

.ty-page .ty-header-title {
margin-top: 5px;
}

@media all and (min-width: 768px) {
.ty-page .ty-header-title {
margin-top: 10px;
}
}

.ty-page .ty-header-description {
margin-top: 10px;
}

.ty-header-description a {
padding-bottom: 2px;
text-decoration: none;
border-bottom: 1px solid #fff;
color: #fff !important;
}

.ty-header-description a:hover,
.ty-header-description a:focus {
border-bottom: 2px solid #fff;
}

.ty-main {
position: relative;
z-index: 2;
background-image: linear-gradient(-180deg, #ffdad9 33%, #fee7e6 66%, #fef6e7 100%);
}

.ty-hr {
height: 2px;
border: 0;
background-color: #f51971;
}

.ty-hr--narrow {
margin: 0 16px;
}

@media all and (min-width: 1040px) {
.ty-hr--narrow {
max-width: 1024px;
margin: 0 auto;
}
}

.ty-section {
position: relative;
z-index: 2;
margin: 0 auto;
text-align: center;
}

.ty-primary {
position: relative;
}

.ty-secondary .ty-action:hover .ty-icon-social path,
.ty-secondary .ty-action:focus .ty-icon-social path,
.ty-secondary .ty-share.highlight .ty-action .ty-icon-social path {
fill: #fff;
}

.ty-primary .ty-action,
.ty-primary .ty-action:visited {
color: #fff;
}

.ty-primary .ty-action {
background-color: #3a25ff;
border: 2px solid #3a25ff;
}

@media all and (min-width: 768px) {
.ty-primary .ty-action {
min-width: 200px;
}
}

.ty-action,
.ty-action:visited {
color: #3a25ff;
}

.ty-action {
position: relative;
top: -5px; /*balance out margins*/
display: inline-block;
margin: 5px;
padding: 8px 20px; /*40px height*/
text-align: center;
border: 2px solid #3a25ff;
border-radius: 2px;
cursor: pointer;
text-decoration: none;
transition: all 0.15s ease-in-out;
}

@media all and (min-width: 768px) {
.ty-action {
padding: 10px 21px 11px 19px; /*45px height*/
}
}

.ty-action:hover,
.ty-action:focus {
text-decoration: none;
}

.ty-action:hover,
.ty-action:focus,
.ty-share.highlight .ty-action {
color: #fff;
background-color: #2516b5;
border-color: #2516b5;
}

.ty-action:focus {
outline: 0;
box-shadow: inset 0 0 0 1px #2516b5, inset 0 0 0 2px #fff
}

.ty-primary .ty-icon {
margin-top: 5px;
}

.ty-primary .ty-description {
margin: 5px auto 0;
}

@media all and (min-width: 768px) {
.ty-primary .ty-description {
margin: 10px auto 0;
}
}

.ty-description-small {
display: block;
font-size: 12px;
line-height: 16px;
margin-top: 10px;
}

.ty-icon-social {
height: 19px;
margin-bottom: -4px;
margin-right: 4px;
}

.ty-icon-social path {
transition: all 0.15s ease-in-out;
}

.ty-secondary .ty-icon-social path {
fill: #3a25ff;
}

.ty-secondary {
max-width: 1024px;
padding-left: 16px;
padding-right: 16px;
}

@media all and (min-width: 768px) {
.ty-secondary {
display: table;
}
}

@media all and (min-width: 768px) {
.ty-secondary .ty-area {
display: table-cell;
}
}

@media all and (min-width: 768px) {
.ty-secondary .ty-icon {
margin-top: 10px;
}
}

.ty-area {
display: block;
text-align: center;
text-decoration: none;
transition: all 0.15s ease-in-out;
}

@media all and (min-width: 768px) {
.ty-area {
padding: 0 16px;
}
}

.ty-area + .ty-area {
margin-top: 16px;
}

@media all and (min-width: 768px) {
.ty-area + .ty-area {
margin-top: 0;
}
}

.ty-area:before {
display: block;
margin-bottom: 14px;
content: "* * *";
color: #f51971;
font-weight: bold;
font-size: 16px;
line-height: 1;
}

@media all and (min-width: 768px) {
.ty-area:before {
display: none;
}
}

.ty-primary .ty-area:before {
display: none;
}

.ty-secondary .ty-description {
margin-top: 10px;
}

.ty-section-title a,
.mw-parser-output .ty-footer a,
.ty-description-small a {
color: #3a25ff;
}

.ty-section-title a:hover,
.ty-section-title a:focus,
.mw-parser-output .ty-footer a:hover,
.mw-parser-output .ty-footer a:focus,
.ty-description-small a:hover,
.ty-description-small a:focus {
color: #2516b5;
}

.ty-page .ty-section-subtitle {
margin-top: 5px;
}

.mw-parser-output .ty-footer a {
padding: 0;
background-image: none;
}

/*Reset visited link style color*/
.mw-parser-output .ty-description a:visited,
.mw-parser-output .ty-footer a:visited {
color: #3a25ff !important;
}

</style>
<div class="ty-page plainlinks">
<header class="ty-header">
<div class="ty-wrapper">
<h1 class="ty-header-logo">
<a href="https://wikimediafoundation.org/" title="Wikimedia Foundation">
<svg class="ty-logo-wmf" role="img" aria-labelledby="ty-logo-wmf-title" xmlns="http://www.w3.org/2000/svg" width="110" height="80" viewBox="0 0 110 80"><title id="ty-logo-wmf-title">Wikimedia Foundation</title><g fill="#FFF"><path d="M5.848 61.871l2.319-7.524h3.041l2.3 7.524 2.592-7.524h3.158l-4.561 13.08h-2.164l-2.865-9.103-2.846 9.103H4.659L.097 54.347h3.158zm14.989-7.524h2.923v13.08h-2.923zm6.139 0H29.9v5.38l4.932-5.38h3.606l-5.205 5.79c.449.623 1.287 1.793 2.495 3.489 1.209 1.696 2.105 2.963 2.71 3.8h-3.411l-3.82-5.165-1.307 1.462v3.704h-2.924v-13.08zm13.274 0h2.924v13.08H40.25zm17.855 4.854l-3.528 7.154h-1.755l-3.508-7.154v8.226H46.39v-13.08h3.957l3.372 7.193 3.392-7.193h3.937v13.08h-2.924v-8.226zm15.574-4.854v2.593h-6.511v2.69h5.848v2.495h-5.848v2.709h6.705v2.573h-9.628v-13.08h9.434zm12.786 1.715c1.248 1.15 1.871 2.73 1.871 4.757 0 2.027-.604 3.645-1.832 4.834-1.208 1.19-3.08 1.774-5.575 1.774h-4.463v-13.08h4.62c2.358 0 4.132.585 5.379 1.715zm-2.144 7.778c.721-.682 1.072-1.657 1.072-2.943 0-1.287-.35-2.281-1.072-2.963-.721-.702-1.813-1.033-3.294-1.033H79.39v7.953h1.851c1.345 0 2.378-.332 3.08-1.014zm6.549-9.493h2.924v13.08H90.87zm15.457 13.08L105.12 64.6h-5.48l-1.208 2.827h-3.1l5.653-13.08h2.827l5.652 13.08h-3.138zm-3.957-9.181l-1.637 3.8h3.275l-1.638-3.8zM12.923 75.322v1.501h2.417v.857h-2.417v2.242h-.916v-5.458h3.625v.858h-2.709zm11.851 3.84c-.546.546-1.228.799-2.047.799-.818 0-1.5-.273-2.046-.8-.546-.545-.819-1.208-.819-2.007 0-.8.273-1.481.819-2.008.545-.546 1.228-.799 2.046-.799.819 0 1.501.273 2.047.8.546.545.819 1.208.819 2.007 0 .8-.254 1.462-.82 2.008zm-.663-3.412a1.799 1.799 0 0 0-1.364-.584c-.546 0-.994.195-1.365.584-.37.39-.565.858-.565 1.404 0 .546.195 1.014.565 1.403.37.39.819.585 1.365.585s.994-.195 1.364-.585c.37-.39.565-.857.565-1.403s-.194-1.033-.565-1.404zm7.388 2.905c.253.292.584.429 1.013.429.429 0 .76-.137 1.014-.429.253-.292.37-.682.37-1.19v-3.02h.916v3.06c0 .78-.214 1.384-.643 1.813-.429.429-.994.643-1.657.643-.682 0-1.228-.214-1.657-.643-.429-.43-.643-1.033-.643-1.813v-3.06h.916v3.02c0 .508.117.898.37 1.19zm12.357-4.191h.916v5.458h-.994l-3.079-3.977v3.977h-.917v-5.458h.917l3.157 4.074v-4.074zm10.058.702c.526.468.78 1.13.78 1.988 0 .838-.254 1.52-.76 2.008-.507.487-1.287.74-2.34.74h-1.812v-5.458h1.87c.995.02 1.755.254 2.262.722zm-.136 2.007c0-1.247-.722-1.87-2.145-1.87h-.916v3.742h1.014c.663 0 1.17-.156 1.52-.468.351-.312.527-.78.527-1.404zm6.393 1.501l-.546 1.248h-.975l2.398-5.458h.974l2.398 5.458h-.975l-.545-1.248h-2.73zm2.358-.857l-.994-2.242-.994 2.242h1.988zm7.797-2.515v4.601h-.916v-4.601h-1.657v-.838h4.23v.838zm6.159-.838h.916v5.458h-.916zm10.506 4.698c-.545.546-1.228.799-2.046.799-.819 0-1.501-.273-2.047-.8-.546-.545-.819-1.208-.819-2.007 0-.8.273-1.481.82-2.008.545-.526 1.227-.799 2.046-.799.818 0 1.5.273 2.046.8.546.545.819 1.208.819 2.007 0 .8-.273 1.462-.819 2.008zm-.682-3.412a1.799 1.799 0 0 0-1.364-.584c-.546 0-.994.195-1.365.584-.37.39-.565.858-.565 1.404 0 .546.195 1.014.565 1.403.37.39.819.585 1.365.585.545 0 .994-.195 1.364-.585.37-.39.565-.857.565-1.403s-.195-1.033-.565-1.404zm10.253-1.286h.916v5.458h-.994l-3.08-3.977v3.977h-.916v-5.458h.916l3.158 4.074z"/><g transform="translate(31.231)"><path d="M25.544 38.075c6.984-.996 12.354-7.01 12.354-14.313 0-4.432-1.985-8.396-5.117-11.031l-7.256 7.283v18.06h.019zm-4.066 0V20.014L14.22 12.73a14.434 14.434 0 0 0-5.116 11.031c.02 7.283 5.389 13.317 12.373 14.313z"/><path d="M36.03 11.208c3.346 3.358 5.175 7.81 5.175 12.554 0 4.745-1.848 9.197-5.175 12.555a17.521 17.521 0 0 1-12.51 5.194c-4.727 0-9.162-1.855-12.509-5.194-3.346-3.339-5.175-7.81-5.175-12.555 0-4.744 1.849-9.196 5.175-12.554.292-.293.584-.567.876-.82L7.84 6.326c-.292.274-.583.547-.875.84a23.631 23.631 0 0 0-5.02 7.459 23.311 23.311 0 0 0-1.848 9.137c0 3.164.623 6.249 1.848 9.138 1.187 2.792 2.86 5.311 5.02 7.459a23.536 23.536 0 0 0 7.431 5.038 23.082 23.082 0 0 0 9.105 1.854c3.152 0 6.226-.624 9.105-1.854 2.782-1.191 5.292-2.87 7.432-5.038a23.631 23.631 0 0 0 5.019-7.459 23.311 23.311 0 0 0 1.848-9.138c0-3.163-.622-6.248-1.848-9.137-1.187-2.793-2.86-5.311-5.02-7.46a34.803 34.803 0 0 0-.875-.839l-4.046 4.062c.33.253.622.527.914.82z"/><ellipse cx="23.521" cy="7.478" rx="7.295" ry="7.322"/></g></g></svg>
</a>
</h1>
<h2 class="ty-header-title">
</html>Donation Badges FAQ<html>
</h2>
</p>
</div>
<div class="ty-mask"></div>
</header>
<div class="ty-main">
<section class="ty-section ty-primary">
<div class="ty-area ty-share">

<figure>
<img class="ty-badge" src="https://upload.wikimedia.org/wikipedia/donate/1/1c/BronzeBadge.png" alt="Bronze badge" title="Bronze badge">
<figcaption class="ty-description">
Donated once
</figcaption>
</figure>
<figure>
<img class="ty-badge" src="https://upload.wikimedia.org/wikipedia/donate/7/70/SilverBadge.png" alt="Silver badge" title="Silver badge">
<figcaption class="ty-description">
Donated twice
</figcaption>
</figure>
<figure>
<img class="ty-badge" src="https://upload.wikimedia.org/wikipedia/donate/6/64/GoldBadge.png" alt="Gold badge" title="Gold badge">
<figcaption class="ty-description">
Donated 3 times
</figcaption>
</figure>
<figure>
<img class="ty-badge" src="https://upload.wikimedia.org/wikipedia/donate/2/25/PlatinumBadge.png" alt="Platinum badge" title="Platinum badge">
<figcaption class="ty-description">
Donated 4 or more times
</figcaption>
</figure>

</div><!--ty-area-->
</section><!--ty-section-->
<section class="ty-section ty-primary">
<div class="ty-area ty-share">
<br>
<br>
<h3 class="ty-description">
</html>'''Frequently Asked Questions'''<html>
</h3>
<br>
<br>

<p class="ty-description">
</html>'''Q: What are badges?'''<html>
</p>
<p class="ty-description">
</html>Our fundraising team came up with the badges as a fun way of recognizing loyal donors’ continued support. They were just our light-hearted way of thanking you! If you would like to save the badges, you can right-click on them and save them to your device.<html>
</p>
<br>

<p class="ty-description">
</html>'''Q: Where do I get my badges?'''<html>
</p>
<p class="ty-description">
</html>Usually when you donate, you'll see which badges you have in one of our annual fundraising emails! If you've donated and don't see your badges, feel free to grab them from this page directly. You can simply right-click on them and save them to your device. We go by the honor system and trust our donors will get the ones applicable to them.<html>
</p>
<br>
<p class="ty-description">
</html>'''Q: Which badge do I get?'''<html>
</p>
<p class="ty-description">
</html>We go by the honor system and trust our donors will get the ones applicable to them. If you've donated once, you can download the bronze badge. If you've donated twice, you can download the bronze and the silver badge. Three donations mean you can download the bronze, silver, and gold badge. If you've donated four or more times, all four badges can be downloaded!<html>
</p>
<br>
<p class="ty-description">
</html>'''Q: How do I use the badges?'''<html>
</p>
<p class="ty-description">
</html>You may use them however you'd like! Some suggestions are to add them to your email signatures, or you can print them out and use them like stickers, or share them on your social media pages! We love seeing the love donors have for Wikipedia and this is a fun way to share that love with their community.<html>
</p>
<br>
<br>
<br>

</div><!--ty-area-->
</section><!--ty-section-->
<hr class="ty-hr ty-hr--narrow" />
<footer class="ty-section ty-footer">
<p></html>Have any other questions? Please reach out to [http://mailto:donate@wikimedia.org donate@wikimedia.org].<html></p>
</footer>
</div><!--ty-main-->
</div><!--ty-page-->
<div style="display: none;" class="loggedinonly">
</html>[{{fullurl:{{FULLPAGENAME}}|action=edit}} Edit this page] · [{{fullurl:Template:Thank_You_2018|action=edit}} Edit template] · [https://donate.wikimedia.org/wiki/Special:PrefixIndex?prefix=Thank+You&namespace=0 Other languages] · [[Support pages index]]<html>
</div><!--edit page snippet-->
</html>

[[Category:Thank You page]]
{{#if:{{{language|}}}|[[Category:{{#language:{{{language}}}}}]]}}

Latest revision as of 10:32, 13 January 2023

Retrieved from "https://donate.wikimedia.org/w/index.php?title=Template:DonationBadges&oldid=37974"