Thank You 2020: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
Seddon (WMF) (talk | contribs) No edit summary |
Seddon (WMF) (talk | contribs) No edit summary |
||
Line 1:
<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>
|
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.
Secondary Action 2
Sed ornare ligula neque, non porttitor nulla vestibulum id. Ut sed velit ac dolor eleifend scelerisque a et ligula.
Get email updates
Subscribe to news about ongoing projects and initiatives.