Template:Support Page: Difference between revisions

From Donate
Jump to navigation Jump to search
Browse history interactively
← Older editNewer edit →
Content deleted Content added
VisualWikitext
remove unused vertical logo
CSS linting/cleanup
Line 2: Line 2:
{{Add viewport tag.js}}<!-- Critical javascript to add the viewport tag. Other js is in MediaWiki:SupportPage.js -->
{{Add viewport tag.js}}<!-- Critical javascript to add the viewport tag. Other js is in MediaWiki:SupportPage.js -->
<html><style>
<html><style>
*,
*, *:before, *:after {
*:before,
*:after {
box-sizing: border-box;
box-sizing: border-box;
}
}


html, body {
html,
body {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica Neue,Helvetica,Arial,sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
⚫
font-size: 16px;
-ms-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
Line 45: Line 49:
.sp-dir-rtl {
.sp-dir-rtl {
direction: rtl;
direction: rtl;
⚫
}

/* Resets */
.sp-page li {
⚫
margin-bottom: 0;
}

/* OOUI focus styles are applied to buttons */
.sp-page .sp-btn:focus {
⚫
outline: 0;
}
}


/* Global font-size and line-height settings */
/* Global font-size and line-height settings */
html, body {
⚫
font-size: 16px;
}


p, li, dl,
p, li, dl, .sp-page table {
.sp-page table {
font-weight: 400;
font-weight: 400;
font-size: .875rem;
font-size: 0.875rem;
line-height: 1.5;
line-height: 1.5;
}
}


@media all and (min-width: 1281px) {
@media (min-width: 1281px) {
p, li, dl,
p, li, dl, .sp-page table {
⚫
font-size: 0.9375rem;
.sp-page table {
⚫
font-size: .9375rem;
}
}
}
}


.sp-footer-text {
.sp-footer-text {
font-size: .875rem;
font-size: 0.875rem;
line-height: 1.5; /*24px @16px*/
line-height: 1.5; /* 24px @16px */
}
}


Line 92: Line 81:
margin: 0;
margin: 0;
padding: 0;
padding: 0;
border: none;
border: 0;
}
}


Line 100: Line 89:
.sp-page h4,
.sp-page h4,
.sp-page h5,
.sp-page h5,
.sp-page h6 {
.sp-page h6 {
font-weight: bold;
font-weight: bold;
}
}
Line 109: Line 98:
border-bottom: 3px solid #000;
border-bottom: 3px solid #000;
margin-bottom: 1rem;
margin-bottom: 1rem;
/* letter-spacing: 0.03125rem; */
}
}

@media all and (min-width: 768px) {
@media (min-width: 768px) {
.sp-page h1 {
.sp-page h1 {
font-size: 2.375rem;
font-size: 2.375rem;
Line 120: Line 109:
margin-bottom: 1rem;
margin-bottom: 1rem;
font-size: 1.125rem;
font-size: 1.125rem;
line-height: 1.5; /*36px @24px*/
line-height: 1.5; /* 36px @24px */
/* border-bottom: 2px solid #000; */
}
}


Line 128: Line 116:
}
}


@media all and (min-width: 1281px) {
@media (min-width: 1281px) {
.sp-page h2 {
.sp-page h2 {
font-size: 1.375rem;
font-size: 1.375rem;
Line 141: Line 129:
.sp-page {
.sp-page {
font-size: 18px;
font-size: 18px;
line-height: 1.5555555556; /*28px @18px*/
line-height: 1.5555555556; /* 28px @18px */
}
}

@media all and (min-width: 768px) {
@media (min-width: 768px) {
.sp-page {
.sp-page {
font-size: 20px;
font-size: 20px;
line-height: 1.5; /*30px @20px*/
line-height: 1.5; /* 30px @20px */
}
}
}
}
Line 155: Line 144:
.sp-content ol,
.sp-content ol,
.sp-content dl {
.sp-content dl {
margin-bottom: 1rem; /*16px*/
margin-bottom: 1rem; /* 16px */
}
}


Line 190: Line 179:
position: relative;
position: relative;
}
}

.sp-languages.-expanded {
.sp-languages.-expanded {
height: auto;
height: auto;
Line 197: Line 187:
position: absolute;
position: absolute;
top: 10px;
top: 10px;
left: 16px
left: 16px;
}
}

.sp-dir-rtl .sp-languages-icon {
.sp-dir-rtl .sp-languages-icon {
left: auto;
left: auto;
Line 211: Line 202:
transition: all 100ms;
transition: all 100ms;
}
}

.sp-dir-rtl .sp-languages-expand {
.sp-dir-rtl .sp-languages-expand {
right: auto;
right: auto;
Line 220: Line 212:
fill: #222;
fill: #222;
}
}

.sp-languages.-expanded .sp-languages-expand {
.sp-languages.-expanded .sp-languages-expand {
transform: rotate(90deg);
transform: rotate(90deg);
Line 247: Line 240:
} */
} */
.sp-dir-rtl .sp-languages ul li:after {
.sp-dir-rtl .sp-languages ul li:after {
padding: 0 .4em 0 .2em;
padding: 0 0.4em 0 0.2em;
}
}


Line 256: Line 249:
.sp-languages a,
.sp-languages a,
.sp-languages a:visited {
.sp-languages a:visited {
color: #54595D;
color: #54595d;
font-size: 14px;
font-size: 14px;
font-weight: 600;
font-weight: 600;
Line 278: Line 271:
margin: 0 auto;
margin: 0 auto;
}
}

@media (min-width: 768px) {
@media (min-width: 768px) {
.mw-1360 {
.mw-1360 {
Line 298: Line 292:
}
}
}
}



/* Header */
/* Header */
Line 304: Line 297:
padding-bottom: 2rem;
padding-bottom: 2rem;
}
}

@media all and (min-width: 1024px){
@media (min-width: 1024px) {
.sp-header {
.sp-header {
padding-top: 61px;
padding-top: 61px;
}
}
}
}



.sp-header-inner {
.sp-header-inner {
Line 331: Line 324:
align-items: center;
align-items: center;
width: 100%;
width: 100%;
background-color: #ffffff;
background-color: #fff;
z-index: 9999;
z-index: 9999;
left: 0;
left: 0;
Line 348: Line 341:
vertical-align: middle;
vertical-align: middle;
}
}

@media all and (min-width: 640px) {
@media (min-width: 640px) {
.sp-logo-horizontal {
.sp-logo-horizontal {
height: 60px;
height: 60px;
Line 357: Line 351:
text-align: inherit;
text-align: inherit;
}
}

@media all and (min-width: 768px) {
@media (min-width: 768px) {
.sp-nav-container {
.sp-nav-container {
text-align: right;
text-align: right;
Line 370: Line 365:
border-radius: 2px;
border-radius: 2px;
font-weight: bold;
font-weight: bold;
line-height: 1.25; /*20px @16px*/
line-height: 1.25; /* 20px @16px */
background: #36c;
background: #36c;
}
}

.sp-page .sp-btn:hover {
.sp-page .sp-btn:hover {
text-decoration: none;
text-decoration: none;
background: #447ff5;
background: #447ff5;
}
}

.sp-page .sp-btn:active {
.sp-page .sp-btn:active {
box-shadow: none;
box-shadow: none;
background: #2a4b8d;
background: #2a4b8d;
}
}

.sp-page .sp-btn:focus {
.sp-page .sp-btn:focus {
⚫
outline: 0;
border-color: #36c;
border-color: #36c;
box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
Line 388: Line 387:
/* Donate Now button */
/* Donate Now button */
.sp-page .sp-donate-now-btn {
.sp-page .sp-donate-now-btn {
border: none;
background: 0 0;
border-radius: 2px;
border-radius: 2px;
background: #fde8f0;
background: #fde8f0;
Line 395: Line 392:
color: #d40356;
color: #d40356;
font-weight: 700;
font-weight: 700;
padding: .4rem .8rem;
padding: 0.4rem 0.8rem;
font-size: 15px;
font-size: 15px;
height: 34px;
height: 34px;
Line 411: Line 408:
border-color: #f61971;
border-color: #f61971;
background: #fde8f0;
background: #fde8f0;
outline: none;
outline: 0;
}
}


Line 422: Line 419:
.toc {
.toc {
background: none;
background: none;
border: none;
border: 0;
padding: 0;
padding: 0;
font-weight: bold;
font-weight: bold;
margin-bottom: 3rem;
margin-bottom: 3rem;
}
}

.toc .toctogglecheckbox,
.toc .toctogglecheckbox,
.toc .toctitle,
.toc .toctitle,
.toc .tocnumber {
.toc .tocnumber {
display: none;
display: none;
}
}

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

.toc li {
.toc li {
margin-bottom: 12px;
margin-bottom: 12px;
}
}

/* Second level navigation */
/* Second level navigation */
.toc li ul {
.toc li ul {
Line 451: Line 452:
.toc a {
.toc a {
display: block;
display: block;
font-size: .875rem;
font-size: 0.875rem;
font-weight: 600;
font-weight: 600;
color: #3a25ff;
color: #3a25ff;
}
}

.toc a:hover {
.toc a:hover {
text-decoration: none;
text-decoration: none;
Line 469: Line 471:
height: calc(100vh - 4.5rem);
height: calc(100vh - 4.5rem);
margin-bottom: 0;
margin-bottom: 0;
padding-bottom: 2rem; /*32px*/
padding-bottom: 2rem; /* 32px */
}
}

.sp-dir-rtl .sp-toc {
.sp-dir-rtl .sp-toc {
float: left;
float: left;
Line 476: Line 479:
padding-right: 2rem;
padding-right: 2rem;
}
}

.toc a {
.toc a {
border-left: 4px solid transparent;
border-left: 4px solid transparent;
}
}

.sp-dir-rtl .toc a {
.sp-dir-rtl .toc a {
padding-left: 0;
padding-left: 0;
Line 487: Line 492:
}
}


@media all and (min-width: 1280px) {
@media (min-width: 1280px) {
.sp-largetoc .toc li {
.sp-largetoc .toc li {
margin-bottom: 16px;
margin-bottom: 16px;
Line 498: Line 503:
margin-bottom: 2.5rem;
margin-bottom: 2.5rem;
}
}

@media (min-width: 768px) {
@media (min-width: 768px) {
.sp-content {
.sp-content {
Line 503: Line 509:
}
}
}
}

@media (min-width: 1024px) {
@media (min-width: 1024px) {
.sp-content {
.sp-content {
Line 513: Line 520:


/* Links */
/* Links */

.sp-content a,
.sp-content a,
.sp-content a:visited,
.sp-content a:visited,
Line 524: Line 532:
background-image: none;
background-image: none;
}
}

.sp-content a:hover,
.sp-content a:hover,
.sp-content a.external:hover,
.sp-content a.external:hover,
Line 531: Line 540:


.sp-content a.no-underline {
.sp-content a.no-underline {
background: none;
background: none;
}
}


Line 547: Line 556:
flex-direction: column;
flex-direction: column;
}
}

@media (min-width: 768px) {
@media (min-width: 768px) {
.sp-footer-row {
.sp-footer-row {
flex-direction: row;
flex-direction: row;
}
}

.sp-footer-text {
.sp-footer-text {
width: 57%;
width: 57%;
Line 576: Line 587:
}
}


/* Tables */
/* NL info table */
.wikitable th {
⚫
text-align: left !important;
}
.wikitable ul {
margin-bottom: 0;
}
.NL-info-summary {
.NL-info-summary {
font-size: 16px;
font-size: 16px;
}
}

.NL-info-summary th {
⚫
text-align: left !important;
⚫
}

.NL-info-summary ul {
.NL-info-summary ul {
list-style-type: none;
list-style-type: none;
margin-left: 0;
margin-left: 0;
⚫
margin-bottom: 0;
}
}
</style>
</style>

Revision as of 14:30, 10 March 2021

Wikimedia Foundation
lock Donate now
Language more languages

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]

3rd level heading

  • Lorem ipsum
  • Dolor sit amet
  • Coffee
Definition list
Foo
Bar
Baz

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.

A table
Hey Quisque mattis luctus pulvinar. Quisque vel felis sed leo finibus convallis. Nam non felis venenatis, faucibus quam id, ultrices dolor.
Header Interdum et malesuada fames ac ante ipsum primis in faucibus. In vitae dignissim nulla, at porttitor nibh. 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.
List
  • Sometimes
  • tables
  • need
  • a list

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

The Wikimedia Foundation is the nonprofit organization that supports Wikipedia, the other Wikimedia free knowledge projects, and our mission of free knowledge for every single person.


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