Template:Support Page: Difference between revisions
Content deleted Content added
fix 1st header spacing when another element above it |
No edit summary |
||
(57 intermediate revisions by 2 users not shown) | |||
Line 2:
{{Add viewport tag.js}}<!-- Critical javascript to add the viewport tag. Other js is in MediaWiki:SupportPage.js -->
<html><style>
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body { margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 16px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
Line 21 ⟶ 25:
#mw-navigation, #mw-page-base, #mw-head-base,
#firstHeading, #siteSub, #contentSub, #contentSub2, #jump-to-nav,
#catlinks, #footer, .mw-editsection {
display: none;
}
/* and because we have to deal with minerva now for some reason */
.pre-content, .header-container, .minerva-footer {
display: none;
}
.content {
max-width: none !important;
width: auto !important;
}
/* more minerva nonsense for the toc */
.toc {
display: block;
}
.client-js .toc .toctogglecheckbox ~ ul {
visibility: visible;
height: auto;
margin: 0;
}
.content .mw-heading2, .content h2 {
clear: none;
}
Line 45 ⟶ 71:
.sp-dir-rtl {
direction: rtl;
}
/* Global font-size and line-height settings */
p, li, dl, .sp-page table {
font-weight: 400;
font-size: 0.
line-height: 1.
}
@media
p, li, dl, .sp-page table {
font-size: 0.9375rem;
}
}
.sp-footer-text {
font-size: 0.875rem;
line-height: 1.5; /* 24px @16px */
}
.sp-page
.sp-page
.sp-page
.sp-page
.sp-page
.sp-page
.sp-page ol,
.sp-page ul,
Line 90 ⟶ 103:
margin: 0;
padding: 0;
border:
}
.sp-page h1,
.sp-page h2
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.sp-page
font-size: 2.25rem;
font-weight: 500;
border-bottom: 3px solid #000;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.sp-page .mw-heading1 {
font-size: 2.375rem;
}
}
.sp-page
margin-bottom: 1rem;
font-size: 1.125rem;
line-height: 1.5; /* 36px @24px */
}
.sp-page
}
@media (min-width: 1281px) {
.sp-page .mw-heading2 {
font-size: 1.375rem;
}
}
.sp-page .mw-heading3 {
font-size: 1.05rem;
margin-top: 2rem;
font-weight: normal;
}
.sp-page {
font-size: 18px;
line-height: 1.5555555556; /* 28px @18px */
}
@media (min-width: 768px) {
.sp-page {
font-size: 20px;
line-height: 1.5; /* 30px @20px */
}
}
Line 153 ⟶ 163:
.sp-content ol,
.sp-content dl {
margin-bottom: 1rem; /* 16px */
}
Line 180 ⟶ 190:
.sp-page blockquote {
font-style: italic;
}
Line 276 ⟶ 197:
margin: 0 auto;
}
@media (min-width: 768px) {
.mw-1360 {
Line 296 ⟶ 218:
}
}
/* Header */
.sp-header {
padding-
padding-bottom: 2rem;
}
.sp-top-nav {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
background-color: #fff;
z-index: 9999;
}
.sp-top-nav.pinned {
box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
}
Line 319 ⟶ 242:
text-align: center;
border-bottom: 1px solid #f4f4f4;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
left: 0;
right: 0;
}
Line 353 ⟶ 260:
vertical-align: middle;
}
@media (min-width: 640px) {
.sp-logo-horizontal {
height: 60px;
}
}
.sp-nav-container {
display: flex;
gap: 0.5rem;
text-align: inherit;
}
@media (min-width: 768px) {
.sp-nav-container {
text-align: right;
Line 381 ⟶ 279:
}
/* Buttons */
border-radius: 2px;
font-weight:
height: 34px;
display: inline-flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
border: 1px solid;
border-color: #a2a9b1;
background: #f8f9fa;
color: #202122;
cursor: pointer;
gap: 6px;
}
.sp-btn:focus {
color: #3a25ff;
border-color: currentColor;
}
.language-switcher__button:hover {
color: #3a25ff;
border-color: currentColor;
}
.btn-label-a11y {
display: block;
font-size: 0;
height: 1px;
overflow: hidden;
}
.dropdown-backdrop {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #000;
opacity: 0;
pointer-events: none;
transition: .3s opacity;
z-index: 2;
}
body[data-dropdown-open=true] .dropdown-backdrop {
opacity: .6;
pointer-events: auto;
}
.language-switcher {
text-align: left;
position: relative;
}
.language-switcher__icon {
height: 1.25rem;
width: 1.25rem;
}
.language-switcher__expand {
height: 0.875rem;
width: 0.875rem;
}
.language-switcher__label {
text-transform: uppercase;
}
.language-switcher__content {
background: #fff;
box-sizing: border-box;
flex-direction: column;
padding: 1.875rem 0.75rem;
position: fixed;
right: 0;
top: 62px;
width: 100%;
overflow: auto;
max-height: 80vh;
}
@media (min-width: 768px) {
.language-switcher__content {
border: 1px solid #3a25ff;
max-width: 100vw;
padding: 0.75rem;
position: absolute;
right: 0;
top: calc(100% - 1px);
width: 200px;
}
}
@media (min-width: 1060px) {
.language-switcher__content {
left: 0;
right: unset;
}
}
.language-switcher__content ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.language-switcher__content ul li {
font-size: .875rem;
font-weight: 700;
line-height: 175%;
list-style: none;
margin: 0;
margin-bottom: 1.1875rem;
}
@media (min-width: 768px) {
.language-switcher__content ul li {
margin-bottom: .875rem;
}
}
.language-switcher__content a {
color: #000;
display: block;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.25rem;
transition: background-color 0.3s;
}
.language-switcher__content a:hover {
background-color: #eeeaff;
text-decoration: none;
}
.language-switcher__content a.selflink {
}
.language-switcher .language-name {
display: inline-block;
}
.language-switcher .language-name::first-letter {
text-transform: uppercase;
}
.language-switcher .language-name::after {
border-bottom: 3px solid transparent;
content: "";
display: block;
}
.language-switcher a.selflink .language-name::after {
border-color: #3a25ff;
}
.scroll-shadow {
box-shadow: inset 0 -25px 50px -35px rgba(0, 0, 0, 1);
}
/* Donate Now button */
.sp-page .sp-donate-now-btn {
background: #fde8f0;
border-color:
color: #d40356;
}
Line 429 ⟶ 458:
border-color: #f61971;
background: #fde8f0;
outline:
}
.sp-donate-now-btn .icon-lock,
.sp-donate-now-btn .icon-heart {
height: 1rem;
width: 1rem;
fill: currentColor;
}
.sp-donate-now-btn .icon-lock,
.sp-donate-now-txt {
display: none;
}
@media (min-width: 768px) {
.sp-donate-now-btn .icon-lock,
.sp-donate-now-txt {
display: inline;
}
.sp-donate-now-btn .icon-heart {
display: none;
}
}
Line 440 ⟶ 488:
.toc {
background: none;
border:
padding: 0;
font-weight: bold;
margin-bottom: 3rem;
}
.toc .toctogglecheckbox,
.toc .toctitle,
.toc .tocnumber {
display: none;
}
.toc ul {
margin-left: 0;
margin-bottom: 0;
}
.toc li {
}
.toc
margin-top:
}
Line 470 ⟶ 520:
.toc a {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: #3a25ff;
}
.toc a:hover {
text-decoration: none;
color: #000;
}
Line 490 ⟶ 534:
position: sticky;
float: left;
top:
overflow-y:
width: 32%;
height: calc(100vh - 4.5rem);
margin-bottom: 0;
padding-bottom: 2rem; /* 32px */
padding-right:
}
.sp-dir-rtl .sp-toc {
float: left;
padding-left: 0.5rem;
padding-right: 2rem;
}
.toc a {
border-left: 4px solid transparent;
}
.sp-dir-rtl .toc a {
padding-left: 0;
Line 520 ⟶ 561:
}
@media
.sp-largetoc .toc li {
}
}
Line 532 ⟶ 572:
margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
.sp-content {
Line 537 ⟶ 578:
}
}
@media (min-width: 1024px) {
.sp-content {
Line 542 ⟶ 584:
margin-bottom: 2.5rem;
margin-left: 34%;
padding-left: 1.5rem;
}
}
/* Links */
.sp-content a,
.sp-content a:visited,
Line 557 ⟶ 601:
background-image: none;
}
.sp-content a:hover,
.sp-content a.external:hover,
Line 564 ⟶ 609:
.sp-content a.no-underline {
background: none;
}
Line 580 ⟶ 625:
flex-direction: column;
}
@media (min-width: 768px) {
.sp-footer-row {
flex-direction: row;
}
.sp-footer-text {
width: 57%;
Line 602 ⟶ 649:
/* Footnotes */
.sp-page .references
.sp-page .sp-endnote {
margin-top: 2rem;
padding-top: 2rem;
Line 609 ⟶ 657:
}
/*
.NL-info-summary {
font-size: 16px;
}
.NL-info-summary th {
text-align: left !important;
}
.NL-info-summary ul {
list-style-type: none;
margin-left: 0;
margin-bottom: 0;
}
</style>
<div class="dropdown-backdrop"></div>
<div class="sp-page sp-dir-</html>{{dir|{{pagelang}}}}<html>">
<div class="sp-
<div class="sp-logo-nav-container mw-980">
<div class="sp-logo-container">
<a href="https://wikimediafoundation.org/">
<svg class="sp-logo-horizontal" aria-labelledby="sp-logo-horizontal-title" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 797.3 185.2">
<title id="sp-logo-horizontal-title">Wikimedia Foundation</title>
<path d="M243.2 78.4l11.9-38.6h15.6l11.8 38.6 13.3-38.6H312l-23.4 67.1h-11.1l-14.7-46.7-14.6 46.7h-11.1l-23.4-67.1h16.2l13.3 38.6zM320.1 39.8h15v67.1h-15V39.8zM351.6 39.8h15v27.6l25.3-27.6h18.5l-26.7 29.7c2.3 3.2 6.6 9.2 12.8 17.9 6.2 8.7 10.8 15.2 13.9 19.5h-17.5l-19.7-26.5-6.7 7.5v19h-15V39.8zM419.7 39.8h15v67.1h-15V39.8zM511.3 64.7l-18.1 36.7h-8.9l-18-36.7v42.2h-15V39.8h20.3l17.3 36.9 17.4-36.9h20.2v67.1h-15V64.7zM591.2 39.8v13.3h-33.4V67h30v12.8h-30v13.9h34.5v13.2h-49.4V39.8h48.3zM656.8 48.6c6.4 5.9 9.6 14 9.6 24.4 0 10.4-3.1 18.7-9.4 24.8-6.2 6.1-15.8 9.1-28.6 9.1h-22.9V39.8h23.7c12.1 0 21.2 3 27.6 8.8zm-10.9 39.9c3.7-3.5 5.5-8.5 5.5-15.1s-1.8-11.7-5.5-15.2c-3.7-3.6-9.3-5.3-16.9-5.3h-8.4v40.8h9.5c6.8 0 12.1-1.7 15.8-5.2zM679.4 39.8h15v67.1h-15V39.8zM758.7 106.9l-6.2-14.5h-28.1l-6.2 14.5h-15.9l29-67.1h14.5l29 67.1h-16.1zm-20.3-47.1L730 79.3h16.8l-8.4-19.5z"/><g><path d="M241 137.4v8.1h13v4.6h-13v12.1h-5v-29.4h19.6v4.6H241zM311.2 158c-3 2.9-6.6 4.3-11 4.3s-8-1.4-11-4.3-4.5-6.5-4.5-10.8c0-4.3 1.5-7.9 4.5-10.8 3-2.9 6.6-4.3 11-4.3s8 1.4 11 4.3 4.5 6.5 4.5 10.8c0 4.3-1.5 7.9-4.5 10.8zm-3.6-18.3c-2-2.1-4.5-3.1-7.4-3.1s-5.4 1-7.4 3.1-3 4.6-3 7.5c0 3 1 5.5 3 7.5s4.5 3.1 7.4 3.1 5.4-1 7.4-3.1 3-4.6 3-7.5c0-3-1-5.5-3-7.5zM353.7 155.4c1.3 1.6 3.2 2.4 5.5 2.4s4.1-.8 5.5-2.4 2-3.7 2-6.4v-16.3h5v16.5c0 4.2-1.2 7.5-3.5 9.8-2.3 2.3-5.3 3.4-8.9 3.4-3.6 0-6.6-1.1-8.9-3.4s-3.5-5.5-3.5-9.8v-16.5h5V149c-.2 2.7.5 4.8 1.8 6.4zM426.6 132.7h5v29.4h-5.4l-16.6-21.4v21.4h-5v-29.4h5l17.1 21.9v-21.9zM487.1 136.6c2.8 2.6 4.2 6.1 4.2 10.7s-1.4 8.2-4.1 10.8c-2.7 2.7-6.9 4-12.6 4h-9.7v-29.4H475c5.2 0 9.3 1.3 12.1 3.9zm-.7 10.8c0-6.7-3.9-10.1-11.5-10.1h-5v20.1h5.5c3.6 0 6.3-.8 8.2-2.5 1.8-1.7 2.8-4.2 2.8-7.5zM527.1 155.4l-2.9 6.7h-5.3l12.9-29.4h5.3l12.9 29.4h-5.3l-2.9-6.7h-14.7zm12.7-4.6l-5.3-12.1-5.3 12.1h10.6zM588.1 137.3v24.8h-5v-24.8h-8.9v-4.5H597v4.5h-8.9zM627.6 132.7h5v29.4h-5v-29.4zM690.4 158c-3 2.9-6.6 4.3-11 4.3s-8-1.4-11-4.3-4.5-6.5-4.5-10.8c0-4.3 1.5-7.9 4.5-10.8 3-2.9 6.6-4.3 11-4.3s8 1.4 11 4.3 4.5 6.5 4.5 10.8c0 4.3-1.5 7.9-4.5 10.8zm-3.6-18.3c-2-2.1-4.5-3.1-7.4-3.1s-5.4 1-7.4 3.1-3 4.6-3 7.5c0 3 1 5.5 3 7.5s4.5 3.1 7.4 3.1 5.4-1 7.4-3.1 3-4.6 3-7.5c0-3-1-5.5-3-7.5zM748.3 132.7h5v29.4h-5.4l-16.6-21.4v21.4h-5v-29.4h5l17.1 21.9v-21.9z"/></g><g><path d="M108.3 144.4c25.3-3.6 44.7-25.3 44.7-51.5 0-16-7.2-30.2-18.5-39.8l-26.2 26.2v65.1zM93.6 144.4V79.3L67.4 53a51.86 51.86 0 0 0-18.5 39.8c0 26.3 19.4 48 44.7 51.6z"/><path d="M146.2 47.6c12.1 12.1 18.7 28.2 18.7 45.2s-6.7 33.2-18.7 45.2c-12.1 12.1-28.2 18.7-45.2 18.7S67.8 150 55.8 138 37 109.9 37 92.8s6.7-33.2 18.7-45.2c1-1 2.1-2 3.2-3L44.3 30c-1.1 1-2.1 2-3.2 3-7.8 7.8-13.9 16.8-18.1 26.9-4.4 10.4-6.7 21.5-6.7 32.9 0 11.4 2.2 22.5 6.7 32.9 4.3 10.1 10.4 19.1 18.1 26.9 7.8 7.8 16.8 13.9 26.9 18.1 10.4 4.4 21.5 6.7 32.9 6.7 11.4 0 22.5-2.2 32.9-6.7 10.1-4.3 19.1-10.4 26.9-18.1 7.8-7.8 13.9-16.8 18.1-26.9 4.4-10.4 6.7-21.5 6.7-32.9 0-11.4-2.2-22.5-6.7-32.9-4.3-10.1-10.4-19.1-18.1-26.9-1-1-2.1-2-3.2-3L143 44.6c1.1.9 2.1 1.9 3.2 3z"/><circle cx="100.9" cy="34.1" r="26.4"/></g>
<
<div class="sp-nav-container">
<div class="language-switcher">
<button class="sp-btn language-switcher__button" aria-expanded="false">
<svg class="language-switcher__icon" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20">
<path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"></path>
<span class="language-switcher__label">
</html>{{#invoke:Main|page_language}}<html>
</span>
<svg class="language-switcher__expand" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>expand</title><path d="M19 6.25l-1.5-1.5-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z"/></svg>
</button>
<div class="language-switcher__content" hidden="">
</html>{{Languages2}}<html>
</div>
</div>
<a class="sp-btn sp-donate-now-btn" href="https://donate.wikimedia.org/</html>?uselang={{pagelang}}&wmf_medium=donatewiki_page&wmf_campaign=donate_now_btn&wmf_source={{urlencode:{{#titleparts:{{PAGENAME}}|1}}|WIKI}}<html>">
<svg class="icon-lock" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" role="img" aria-hidden="true">
<path d="M16.07 8H15V5s0-5-5-5-5 5-5 5v3H3.93A1.93 1.93 0 0 0 2 9.93v8.15A1.93 1.93 0 0 0 3.93 20h12.14A1.93 1.93 0 0 0 18 18.07V9.93A1.93 1.93 0 0 0 16.07 8zM10 16a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm3-8H7V5.5C7 4 7 2 10 2s3 2 3 3.5z"/>
</svg>
<svg class="icon-heart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" role="img" aria-hidden="true">
<path d="M14.75 1A5.24 5.24 0 0 0 10 4 5.24 5.24 0 0 0 0 6.25C0 11.75 10 19 10 19s10-7.25 10-12.75A5.25 5.25 0 0 0 14.75 1z"/>
</svg>
<span class="sp-donate-now-txt">
</html>{{MediaWiki:donate_interface-donate-now/{{Pagelang}}}}<html>
</span>
</a>
</div>
</div>
</div>
<header class="sp-header mw-980">
<h1></html>{{{title|Example title}}}<html></h1>
</header>
<article class="sp-main mw-980">
Line 664 ⟶ 727:
==Heading==
Nulla est risus, vehicula sit amet lectus convallis, tristique lobortis nisl.<ref>Example footnote</ref> 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.<ref>Another example footnote</ref>
===3rd level heading===
* Lorem ipsum
Line 707 ⟶ 772:
<references/>
{{Support Page end}}
__NOINDEX__
</noinclude>
|