Donate

Template:DonationBadges: Difference between revisions

Browse history interactively
← Older edit
Content deleted Content added
VisualWikitext
use <figure> and <figcaption> for better accessibility
blank page
Tag: Blanking
 
(6 intermediate revisions by 2 users not shown)
Line 1:
{{DISPLAYTITLE:{{{header|Thank You}}}}}
{{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-->
<hr class="ty-hr ty-hr--narrow" />
<footer class="ty-section ty-footer">
<p></html>{{{footer-text1}}}<html></p>
<p></html>{{{footer-text2}}}<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>
{{Hide banners}}<!-- Important - do not remove! -->
[[Category:Thank You page]]
{{#if:{{{language|}}}|[[Category:{{#language:{{{language}}}}}]]}}
Retrieved from "https://donate.wikimedia.org/wiki/Template:DonationBadges"