MediaWiki:Mobile.css: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ========================= | /* ========================= | ||
MOBILE WIKI | ACCESSIBLE MOBILE WIKI CSS | ||
Designed for readability | |||
========================= */ | ========================= */ | ||
/* Prevent | /* Prevent iPhone text shrinking */ | ||
html { | html { | ||
-webkit-text-size-adjust: 100%; | -webkit-text-size-adjust: 100%; | ||
} | } | ||
/* | /* Main body text */ | ||
body, | body, | ||
.mw-body, | .mw-body, | ||
.vector-body { | .vector-body { | ||
font-size: | font-size: 22px; | ||
line-height: 1. | line-height: 1.8; | ||
font-family: sans-serif; | |||
max-width: 100%; | max-width: 100%; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
padding-left: 14px; | |||
padding-right: 14px; | |||
box-sizing: border-box; | |||
word-wrap: break-word; | word-wrap: break-word; | ||
overflow-wrap: break-word; | overflow-wrap: break-word; | ||
} | } | ||
/* Paragraphs | /* Paragraphs */ | ||
p, | p, | ||
li, | li, | ||
| Line 29: | Line 31: | ||
th { | th { | ||
font-size: 1rem; | font-size: 1rem; | ||
line-height: 1. | line-height: 1.8; | ||
} | } | ||
/* Headings */ | /* Headings */ | ||
h1 { | h1 { | ||
font-size: 2rem; | font-size: 2.2rem; | ||
line-height: 1.2; | line-height: 1.2; | ||
margin-top: 0.5em; | |||
} | } | ||
h2 { | h2 { | ||
font-size: 1. | font-size: 1.8rem; | ||
line-height: 1.3; | line-height: 1.3; | ||
margin-top: 1em; | |||
} | } | ||
h3 { | h3 { | ||
font-size: 1. | font-size: 1.5rem; | ||
line-height: 1.4; | line-height: 1.4; | ||
} | } | ||
/* Infobox */ | |||
.infobox { | |||
float: none; | |||
width: 100%; | |||
max-width: 100%; | max-width: 100%; | ||
margin: 1em 0; | |||
padding: 14px; | |||
border: 1px solid #aaa; | |||
background-color: #f9f9f9; | |||
box-sizing: border-box; | |||
font-size: 1rem; | |||
} | } | ||
| Line 61: | Line 68: | ||
table { | table { | ||
width: 100%; | width: 100%; | ||
display: block; | display: block; | ||
overflow-x: auto; | overflow-x: auto; | ||
| Line 67: | Line 73: | ||
} | } | ||
/* | /* Images */ | ||
img { | |||
max-width: 100%; | max-width: 100%; | ||
height: auto; | |||
} | } | ||
/* | /* Links */ | ||
a { | |||
word-break: break-word; | |||
} | } | ||
/* Sidebar | /* Sidebar */ | ||
#mw-panel, | #mw-panel, | ||
.vector-sidebar, | .vector-sidebar, | ||
.vector-toc { | .vector-toc { | ||
font-size: 1rem; | font-size: 1rem; | ||
} | } | ||
/* | /* Forms */ | ||
input, | |||
button, | |||
select, | |||
textarea { | |||
font-size: 1rem; | |||
} | } | ||
| Line 104: | Line 104: | ||
overflow-x: auto; | overflow-x: auto; | ||
max-width: 100%; | max-width: 100%; | ||
font-size: 0. | font-size: 0.9rem; | ||
} | } | ||
Revision as of 22:57, 15 May 2026
/* =========================
ACCESSIBLE MOBILE WIKI CSS
Designed for readability
========================= */
/* Prevent iPhone text shrinking */
html {
-webkit-text-size-adjust: 100%;
}
/* Main body text */
body,
.mw-body,
.vector-body {
font-size: 22px;
line-height: 1.8;
font-family: sans-serif;
max-width: 100%;
overflow-x: hidden;
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Paragraphs */
p,
li,
td,
th {
font-size: 1rem;
line-height: 1.8;
}
/* Headings */
h1 {
font-size: 2.2rem;
line-height: 1.2;
margin-top: 0.5em;
}
h2 {
font-size: 1.8rem;
line-height: 1.3;
margin-top: 1em;
}
h3 {
font-size: 1.5rem;
line-height: 1.4;
}
/* Infobox */
.infobox {
float: none;
width: 100%;
max-width: 100%;
margin: 1em 0;
padding: 14px;
border: 1px solid #aaa;
background-color: #f9f9f9;
box-sizing: border-box;
font-size: 1rem;
}
/* Tables */
table {
width: 100%;
display: block;
overflow-x: auto;
border-collapse: collapse;
}
/* Images */
img {
max-width: 100%;
height: auto;
}
/* Links */
a {
word-break: break-word;
}
/* Sidebar */
#mw-panel,
.vector-sidebar,
.vector-toc {
font-size: 1rem;
}
/* Forms */
input,
button,
select,
textarea {
font-size: 1rem;
}
/* Code blocks */
pre,
code {
overflow-x: auto;
max-width: 100%;
font-size: 0.9rem;
}