Thank You 2020: Difference between revisions

From Donate
Jump to navigation Jump to search
Browse history interactively
← Older editNewer edit →
Content deleted Content added
VisualWikitext
Seddon (WMF) (talk | contribs)
1,190 edits
No edit summary
Seddon (WMF) (talk | contribs)
1,190 edits
No edit summary
Line 1: Line 1:
<html><body>
<html><body>
<style>
html, body {
margin: 0 auto;
text-align: center; }
body {
margin: 0 auto; }
html{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
body{
margin:0
}
*{
box-sizing:border-box
}
address,article,aside,blockquote,canvas,dd,div,dl,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,li,main,nav,noscript,ol,output,p,.p,pre,section,table,tfoot,ul,video{
margin:0;
padding:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
display:block
}
input, textarea {
display: block;
width: 100%;
border: 1px solid
#b6c3cc;
border-radius: 0;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding: .625rem;
background: 0 0;
}
button, input, optgroup, select, progress, meter, textarea {
color: inherit;
font: inherit;
font-size: inherit;
margin: 0;
padding: 0;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
}
a{
text-decoration:none;
color:inherit
}
a:focus {outline:1px dotted currentColor}
body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:100%;background:#fff;color:#000;text-align:left;direction:ltr}
.mar-bottom{margin-bottom:16px}


h1,h2 {
font-size:inherit;
font-weight:700
}
h1,.h1{font-size:1.875rem}
@media (min-width:768px) and (max-width:1280px){
h1,.h1{font-size:2.9375rem}
}
@media (min-width:1281px){
h1,.h1{font-size:4rem}
}
h2,.h2{margin-bottom:2rem;font-size:1.125rem}
@media (min-width:768px){
h2,.h2{margin-bottom:2rem}
}
@media (min-width:768px) and (max-width:1280px){
h2,.h2{font-size:1.25rem}
}
@media (min-width:1281px){
h2,.h2{font-size:1.375rem}
}
h3,.h3{margin-bottom:2rem;font-size:1.125rem}
@media (min-width:768px){
h3,.h3{margin-bottom:2rem}
}
@media (min-width:768px) and (max-width:1280px){
h3,.h3{font-size:1.25rem}
}
@media (min-width:1281px){
h3,.h3{font-size:1.375rem}
}
p,.p{font-size:.8125rem;line-height:1.466}
@media (min-width:768px) and (max-width:1280px){
p,.p{font-size:.875rem}
}
@media (min-width:1281px){
p,.p{font-size:.9375rem}
}

strong {font-weight:700}
.mw-1120{max-width:70rem;padding:0 1.25rem;margin:0 auto}
@media (min-width:768px){.mw-1120{padding:0}}
.w-100p{width:100%;max-width:100%}
.flex.flex-medium{display:flex;flex-direction:column}
@media (min-width:768px){.flex.flex-medium{flex-direction:row;flex-wrap:nowrap}}
.flex.flex-wrap{flex-wrap:wrap}
.flex.flex-space-between{justify-content:space-between}
.flex.flex-align-center{align-items:center}
.mod-margin-bottom_sm{margin-bottom:2rem}
@media (min-width:768px){.mod-margin-bottom_sm{margin-bottom:0}}
.wysiwyg p a,.wysiwyg .p a,.wysiwyg li a{color:#3a25ff}
.wysiwyg p a:hover,.wysiwyg .p a:hover{text-decoration:underline}

.header-home a{transition:.3s all}
.header-home .header-content{position:relative;z-index:1}
.card{position:relative}
@media (min-width:768px){
.card{margin-right:1.25rem}
.card:last-child{margin-right:0}
}
@media (min-width:768px){.img-left-content-right .card{display:flex;justify-content:flex-end}}
.screen-reader-text {
border: 0;
clip: rect(1px,1px,1px,1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
/* buttons */
.btn{
display:inline-block;
font-weight:700;
border-radius:5px;
cursor:pointer;
padding:1rem 1.5rem;
padding:.6rem 1rem;
transition:.3s all;
border:none;
outline:none
}
.btn:hover{
box-shadow:0 10px 20px 0 rgba(0,0,0,.21)
}
@media (min-width:1200px){
.btn.btn-blue,
.btn.btn-pink{
padding:11px 1.5rem
}
}
.btn.btn-blue,
.btn.btn-blue:hover{
background-color:#3a25ff;
color:#fff;
}
.btn.btn-blue:focus{
outline:1px dotted #3a25ff
}

.btn.btn-pink,
.btn.btn-pink:hover{
background-color:#d40356;
color:#fff;
}
.btn.btn-pink:focus{
outline:1px dotted #d40356
}
.btn.btn-lt-blue{
background-color:#eeeaff;
color:#3a25ff;
}
.btn.btn-lt-blue:hover{
background-color:#3a25ff;
color:#fff;
}
.btn.btn-lt-blue:focus{
outline:1px dotted #3a25ff
}

.btn.btn-lt-pink {
background-color:#fde8f0;
color:#d40356;
}
.btn.btn-lt-pink:hover{
background-color:#d40356;
color:#fff;
}
.btn.btn-lt-pink:focus{
outline:1px dotted #d40356
}
/* header */
.header-home {
position: relative;
background: #fff
}
.logo-container {
width:320px;
margin: auto;
margin-bottom: 1.5rem;
}
.logo-container a {
display:inline-block;
width: 45%;
margin: 0 2%;
}
.logo-container a:hover {
opacity:.8
}
.logo-container svg {
width:100%;
max-width:17.4375rem;
margin: auto
}
.logo-container svg path {
fill: white;
}
.wikipedia-logo {
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.btn-label-a11y{font-size:0;height:1px;overflow:hidden;display:block}
/* hero */

.header-img {
width: 100%;
position: relative;
left: 50%;
right: 50%;
margin-left: -50%;
margin-right: -50%;
padding: 0;
height: auto;
/*overflow-x: hidden;*/
}
@media (min-width:768px){
.header-img {
height: 175px;
}
}
.header-bg-img {
position:relative;
height: 175px;
width:100%;
background-image:url("https://wikimediafoundation.org/wp-content/themes/shiro/assets/src/svg/header.svg");
background-size:cover;
background-position: -150px center;
background-repeat:repeat-x;
animation:mover 300s linear infinite
}
@media (min-width:768px){
.header-bg-img {
position:absolute;
height:100%;
width:100%;
z-index:-1;
background-position:0 0;
}
}

.mw-1120{
max-width:70rem;
height: 100%;
padding:0;
margin:0 auto;
position: relative;
}
.vision_container {
transition: height .3s ease;
display: inline-block;
padding: .4rem 1rem .6rem;
text-align: center;
background: #fefd34;
position: absolute;
bottom: -1rem;
left: 50%;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
@media (max-width:767px){
.vision_container {
width: 100%;
position: relative;
bottom: auto;
}
}
.vision_container h1 {
font-size: 1.4rem;
}
@media (min-width:768px){
.vision_container h1 {
white-space: nowrap;
}
}
@media (min-width:1023px){
.vision_container h1 {
font-size: 1.8rem;
}
}
/* thank you message */
.w-68p, .email-signup .w-32p {
width:100%;
text-align: center;
}
@media (min-width:1025px){
.w-68p {
width:68%;
margin: auto;
padding: 0;
}
.w-32p,
.email-signup .w-32p {
width: 32%;
}
}

.page-intro {
margin:2rem auto auto;
padding: .5rem 0 2rem;
text-align: center;
max-width: 1000px;
}
@media (max-width:1024px){
.page-intro {
padding:1.5rem;
margin:0;
}
}
.page-intro p {
font-size: 1.1rem;
}
/* share links */
.w-50p {
width:100%;
margin: auto;
}
@media (min-width:768px){ .w-50p { width:50% } }
.social-share{margin-top:auto;width:100%;align-self:flex-end}
@media (min-width:768px){
.mw-600 {
max-width:37.5rem;
margin: auto;
}
.mw-620 {
max-width:38.75rem;
margin: auto;
}
.page-intro .mw-600 {
padding: 1rem 0;
}
}
@media (min-width:1025px){
.page-intro .mw-600 {
padding: 1rem 0 2.5rem;
}
}
.link-list a {
color: #3a25ff;
display: inline-flex;
}
.link-list > li {
list-style-type: none;
}
.link-list {
font-size: .8125rem;
}

/* featured action */

.cta-primary {
background: #fdf3f8;
padding: 3rem 0;
}
.cta-primary .card {
color:#000;
padding: 0 1.25rem;
text-align: center;
}
@media (min-width:768px){
.cta-primary .card{
padding: 0;
text-align: left;
}
}
.cta-primary .card-content.w-68p {
text-align: left;
}
@media (min-width:768px){.cta-primary .card-content{padding:2rem 0;margin-top:0}}
@media (max-width:768px){.cta-primary .card-content{padding:1rem 0}}
.cta-primary .h2,
.cta-primary .h3 { color:#d40356;line-height:1.2 }
.cta .card-content{position:relative;z-index:2}
@media (min-width:768px){.cta .card-content{padding:.75rem 0}}
.cta .card-content .h2 {
font-size:2rem;
margin-bottom: 1rem;
}
.cta .card-content p,.
.cta .card-content .p { margin-bottom:1.5rem }
@media (min-width:768px){
.cta .card-content p,
.cta .card-content .p {
margin-bottom:1.25rem
}
}
.cta-description {
font-size:1.1rem;
line-height:1.45;
}

.small {
font-size:.95rem;
line-height:1.45;
}

.cta-primary a { color:#d40356; }
.cta-primary p a:hover { color:#3a25ff; }
.w-25p,
.w-32p,
.w-75p { width:100% }
@media (min-width:768px){
.w-25p { width:25% }
.w-32p { width:32% }
.w-75p { width:75% }
}
.sm-img-container {
vertical-align: top;
}
.sm-img {
position:relative;
overflow:hidden;
position:relative;
height:auto;
width:35%;
max-width: 120px;
}
@media (min-width:768px){
.sm-img {
width:70%;
}
}
/* other ctas */
.other-ctas {
padding: 1.25rem;
}
@media (min-width:1025px){
.other-ctas {
padding: 3rem;
}
}
.bg-ltgray {
background: #eaecf0;
}

.other-ctas .h2 {
text-align: center;
font-size: 1.5rem;
}
@media (min-width:768px){
.other-ctas .h2 {
font-size: 2rem;
}
}
.rounded{border-radius:5px}
.shadow{border:1px solid #e5e5e5;transition:all .25s ease}
/*.shadow:hover{box-shadow:0 5px 20px 0 rgba(0,0,0,.15)} */
.focus-block {
background-color:#fff;
overflow:hidden;
display:block
}
.focus-block .card,
.focus-block .card-content {
height:100%;
display:block
}
.focus-block .card-content{ padding:1.5rem }
@media (max-width:1023px){
.focus-block .card-content .btn { max-width: calc(100% - 3rem);}
}
.focus-block .stick-to-bottom {
position:absolute;
bottom:22px
}
@media (max-width:1023px){
.focus-block .email-signup.stick-to-bottom { position:relative; bottom:auto }
}

.focus-block .mar-bottom {
padding-bottom:2rem;
display:block
}
@media (max-width:1023px){
.signup.focus-block .mar-bottom { padding-bottom:0; }
}
.focus-block .h3 {
margin-bottom:.3125rem;
font-size:1.5rem;
line-height: 1.2;
}
@media (min-width:768px){.focus-block .h3{margin-bottom:.3125rem}}
.focus-block p {
margin-bottom: 1rem;
}
.focus-block .small {
font-size: .85rem;
}
.focus-block p a {
text-decoration: underline;
}
.focus-block a:hover {
color: #3a25ff;
}
/* footer */
footer{padding:3rem 1.5rem;}
footer.bg-black{background:#54595d}
.color-white{color:#fff;transition:.3s all}
@media (min-width:768px){footer{padding:3rem 0 4rem}}
footer .footer-legal {
text-align:center;
}

footer .footer-legal p,
footer .footer-legal .p {
padding-bottom:.75rem;
font-size:.75rem;
line-height: 1.3;
}
@media (min-width:768px) and (max-width:1280px){footer .footer-legal p,footer .footer-legal .p{font-size:.85rem}}
@media (min-width:1281px){footer .footer-legal p,footer .footer-legal .p{font-size:.95rem}}
footer .footer-legal p a,
footer .footer-legal .p a {text-decoration:underline}
/* Video */
.video-container {
position: relative;
width: 100vw;
height: 56.25vw;
max-height: 81vh;
max-width: 144vh;
max-height: 72vh;
max-width: 128vh;
margin: auto auto 2rem;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Email form */
.email-signup #wmf-subscribe-input-email {
box-sizing: border-box;
padding-left: 1rem;
border-radius: 5px;
background:
#fff;
margin: 0;
height: 100%;
}
@media (min-width:1024px){
.email-signup #wmf-subscribe-input-email {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.email-signup input {
padding:.8rem 1rem;
color:#3a25ff;
font-size:1rem
}
@media (min-width:768px) and (max-width:1280px) {
.email-signup input {
font-size:1.125rem
}
}
@media (min-width:1281px) {
.email-signup input {
font-size:1.25rem
}
}
.email-signup input:focus {
background:#f1f3f5;
outline:2px solid #3a25ff;
box-shadow:0px 0px 5px 1px #3a25ff
}
@media (max-width:1155px) {
.email-signup input {
max-width:31.25rem
}
}
.email-signup input::-webkit-input-placeholder {
color:#6d7378;
font-weight:700;
font-size:1rem
}
@media (min-width:768px) and (max-width:1280px) {
.email-signup input::-webkit-input-placeholder {
font-size:1.125rem
}
}
@media (min-width:1281px) {
.email-signup input::-webkit-input-placeholder {
font-size:1.25rem
}
}
.email-signup input::-moz-placeholder {
color:#6d7378;
font-weight:700;
font-size:1rem
}
@media (min-width:768px) and (max-width:1280px) {
.email-signup input::-moz-placeholder {
font-size:1.125rem
}
}
@media (min-width:1281px) {
.email-signup input::-moz-placeholder {
font-size:1.25rem
}
}
.email-signup input:-ms-input-placeholder {
color:#6d7378;
font-weight:700;
font-size:1rem
}
@media (min-width:768px) and (max-width:1280px) {
.email-signup input:-ms-input-placeholder {
font-size:1.125rem
}
}
@media (min-width:1281px) {
.email-signup input:-ms-input-placeholder {
font-size:1.25rem
}
}
.email-signup input:-moz-placeholder {
color:#6d7378;
font-weight:700;
font-size:1rem
}
@media (min-width:768px) and (max-width:1280px) {
.email-signup input:-moz-placeholder {
font-size:1.125rem
}
}
@media (min-width:1281px) {
.email-signup input:-moz-placeholder {
font-size:1.25rem
}
}
.email-signup .btn {
box-sizing: border-box;
height: 100%;
}
@media (min-width:1025px){
.email-signup .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 1.03rem .78rem;
}
.email-signup .flex { width: calc(100% - 1.5rem); }
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

</style>
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>


Revision as of 13:54, 6 January 2020

Thank you for being with us in 2019

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis turpis leo, sit amet convallis ipsum aliquet malesuada. Aliquam erat volutpat. Sed ornare ligula neque, non porttitor nulla vestibulum id. Ut sed velit ac dolor eleifend scelerisque a et ligula. Nullam sit amet orci egestas, convallis orci vitae, ultricies urna. Aenean egestas porttitor nunc, vel feugiat lacus cursus et.

Secondary Action 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis turpis leo, sit amet convallis ipsum aliquet malesuada. Aliquam erat volutpat.

Action Button

Secondary Action 2

Sed ornare ligula neque, non porttitor nulla vestibulum id. Ut sed velit ac dolor eleifend scelerisque a et ligula.

Action Button
Wikimedia Foundation

Duis hendrerit augue sem, sed ullamcorper orci volutpat sed. Donec congue, mi a tempor euismod, sem urna commodo tellus, et ultricies augue augue a orci. Curabitur nec quam magna.

Retrieved from "https://donate.wikimedia.org/w/index.php?title=Thank_You_2020&oldid=35270"