Template:Support Page WMF redesign: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
(35 intermediate revisions by 2 users not shown) | |||
Line 9:
margin: 0;
padding: 0;
font-family: -apple-system,
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Line 56 ⟶ 60:
html, body {
font-size: 16px;
}
p, li {
font-weight: 400;
font-size: .8125rem;
line-height: 1.466;
}
@media all and (min-width: 1281px) {
p, li {
font-size: .9375rem;
}
}
.sp-footer-text {
font-size:
line-height: 1.5; /*24px @16px*/
}
Line 90 ⟶ 106:
.sp-page h1 {
font-size:
font-weight: 500;
border-bottom: 3px solid #000;
margin-bottom: 1rem;
/* letter-spacing: 0.03125rem; */
}
@media all and (min-width: 768px) {
.sp-page h1 {
font-size:
}
}
.sp-page h2 {
margin-bottom:
font-size:
line-height: 1.5; /*36px @24px*/
/* border-bottom: 2px solid #000; */
}
.sp-page h2:not(:first-of-type) {
margin-top: 4rem;
}
@media all and (min-width: 1024px) {
.sp-page h2:not(:first-of-type) {
margin-top: 6rem;
}
}
@media all and (min-width: 1281px) {
.sp-page h2 {
}
}
Line 159 ⟶ 187:
/* Language Header */
.sp-languages {
height: 56px;
overflow: hidden;
Line 170 ⟶ 197:
.sp-languages-icon {
position: absolute;
top:
left: 16px
}
Line 180 ⟶ 207:
.sp-languages-expand {
position: absolute;
top:
right: 16px;
cursor: pointer;
Line 209 ⟶ 236:
.sp-languages ul li {
display: inline-block;
padding: 12px
margin-top: 0;
margin-bottom: 0;
white-space: nowrap;
text-transform: capitalize;
}
/* .sp-languages ul li:after {
content: "·";
padding: 0 .2em 0 .4em;
} */
.sp-dir-rtl .sp-languages ul li:after {
padding: 0 .4em 0 .2em;
Line 229 ⟶ 257:
.sp-languages a,
.sp-languages a:visited {
color: #
font-size: 14px;
font-weight: 600;
border-bottom: 4px solid transparent;
padding: 12px 0;
}
Line 242 ⟶ 270:
.sp-languages a.selflink {
text-decoration: none;
border-color: #
color: #3a25ff;
}
Line 252 ⟶ 281:
@media (min-width: 768px) {
.mw-1360 {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 2.5rem;
}
}
.mw-980 {
max-width: 66.25rem;
padding: 0 1.25rem;
margin: 0 auto;
}
@media (min-width: 768px) {
.mw-980 {
padding: 0 2.5rem;
}
}
/* Header */
.sp-header {
padding-bottom: 3rem;
}
@media all and (min-width:
.sp-header {
padding-
}
}
.sp-header-inner {
position: relative;
z-index: 2;
margin-top: 3rem;
width: 100%;
}
.sp-logo-nav-container {
text-align: center;
border-bottom: 1px solid #f4f4f4;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
max-width: 980px;
margin: 0 auto;
background-color: #ffffff;
z-index: 9999;
left: 0;
right: 0;
position: fixed;
}
@media all and (
.sp-logo-nav-container {
}
}
Line 296 ⟶ 354:
max-width: 17.4375rem;
height: 62px;
}
@media all and (min-width: 640px) {
.sp-logo-horizontal {
height: 60px;
}
}
Line 319 ⟶ 376:
.sp-nav-container {
text-align: inherit;
}
@media all and (min-width: 768px) {
.sp-nav-container {
text-align: right;
}
Line 335 ⟶ 390:
border: 0;
border-radius: 2px;
font-weight: bold;
line-height: 1.25; /*20px @16px*/
Line 360 ⟶ 414:
background: #fde8f0;
border: 1px solid #fde8f0;
color: #
font-weight: 700;
padding: .4rem .8rem;
font-size: 15px;
height: 34px;
}
.sp-donate-now-btn
height: 14px;
margin-right:
margin-bottom: -1px;
vertical-align: initial;
}
.sp-page .sp-donate-now-btn:hover,
.sp-page .sp-donate-now-btn:active {
background: #fde8f0;
outline: none;
}
Line 390 ⟶ 446:
padding: 0;
font-weight: bold;
margin-bottom:
}
.toc .toctogglecheckbox,
Line 417 ⟶ 473:
.toc a {
display: block;
font-weight: 600;
color: #3a25ff;
margin-bottom: 15px;
}
.toc a:hover {
text-decoration: none;
color: #000;
}
@media (min-width: 1281px) {
.toc a {
font-size: 1rem;
}
}
Line 429 ⟶ 492:
.sp-toc {
position: sticky;
float:
top:
overflow-y: scroll;
width:
margin-bottom: 0;
padding-bottom: 2rem; /*32px*/
padding-right: 1.5rem;
}
.sp-dir-rtl .sp-toc {
Line 450 ⟶ 513:
}
.toc a {
border-left: 4px solid transparent;
}
Line 484 ⟶ 546:
@media (min-width: 1024px) {
.sp-content {
/* width:
margin-bottom: 2.5rem;
margin-left: 34%;
}
}
Line 496 ⟶ 559:
.sp-content a.extiw,
.sp-content a.extiw:visited {
color:
/* No external link arrows */
padding: 0;
background-image:
}
.sp-content a:hover,
.sp-content a.external:hover,
.sp-content a.extiw:hover {
}
Line 520 ⟶ 575:
.sp-footer {
background: #
color: #fff;
margin-top: 4rem;
padding-top:
padding-bottom:
}
Line 579 ⟶ 633:
</style>
<div class="sp-page sp-dir-</html>{{dir|{{pagelang}}}}<html>">
<
<div class="sp-logo
<svg class="sp-logo-horizontal" role="img" aria-labelledby="sp-logo-horizontal-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 797.3 185.2"><title id="sp-logo-wmf-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></svg>
</div>
<a class="sp-btn sp-donate-now-btn" href="https://donate.wikimedia.org/</html>?uselang={{pagelang}}&utm_medium=donatewiki_page&utm_campaign=donate_now_btn&utm_source={{urlencode:{{#titleparts:{{PAGENAME}}|1}}|WIKI}}<html>"><svg class="secure" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<title>
<
<path fill="#f61971" 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></html>{{MediaWiki:donate_interface-donate-now/{{Pagelang}}}}<html></a>
<
Lorem Ipsum Dolor Sit Amet
</nav>
-->
</div>
</div>
<header class="sp-header mw-980">
<div class="translation-bar sp-languages">
<svg class="sp-languages-icon" role="img" aria-labelledby="sp-languages-icon-title" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20"><g fill="#000"><title id="sp-languages-icon-title">Language</title><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"/></g></svg>
</html>{{
<svg class="sp-languages-expand" role="img" aria-labelledby="sp-languages-icon-title" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20" onclick="$('.sp-languages').toggleClass('-expanded');"><g fill="#6c8699"><title>more languages</title><path d="M6.2 1L4.8 2.5l7.4 7.5-7.4 7.5L6.2 19l9-9z"/></g></svg>
</div>
<div class="sp-header-inner
<h1></html>{{{title|Example title}}}<html></h1>
</div>
</header>
<article class="sp-main mw-
<div class="sp-toc </html>{{#if:{{{smalltoc|}}}|sp-smalltoc|sp-largetoc}}<html>">
</html>__TOC__<html>
|