« Vivian/common.css » : différence entre les versions
sur le Dico des Ados : ton dictionnaire collaboratif, libre et gratuit !
m Vivian a déplacé la page Utilisateur:Admin/common.css vers Utilisateur:Vivian/common.css : Page déplacée automatiquement lorsque l’utilisateur « Admin » est devenu « Vivian » |
test d'aménagement pour dyslexiques |
||
Ligne 3 : | Ligne 3 : | ||
} | } | ||
#mwe-pt-toolbar {display:visible;} | #mwe-pt-toolbar {display:visible;} | ||
/* Example stylesheet for to increase readability on websites */ | |||
/* Shameless plug, but use a font designed | |||
for greater readability than just looking cool. | |||
This one is designed for dyslexic readers, though | |||
it can be useful to increase readability for anyone | |||
else */ | |||
@font-face{ | |||
font-family: "opendyslexic"; | |||
src: url('../fonts/OpenDyslexic-Regular.otf'); | |||
font-style: normal; | |||
font-weight: normal; | |||
} | |||
@font-face{ | |||
font-family: "opendyslexic"; | |||
src: url('../fonts/OpenDyslexic-Italic.otf'); | |||
font-style: italic; | |||
font-weight: normal; | |||
} | |||
@font-face{ | |||
font-family: "opendyslexic"; | |||
src: url('../fonts/OpenDyslexic-Bold.otf'); | |||
font-weight: bold; | |||
font-style: normal; | |||
} | |||
@font-face{ | |||
font-family: "opendyslexic"; | |||
src: url('../fonts/OpenDyslexic-BoldItalic.otf'); | |||
font-weight: bold; | |||
font-style: italic; | |||
} | |||
* { | |||
font-family: "opendyslexic" !important; | |||
} | |||
/* Use an off-white background. Some users need high | |||
contrast for better reading. Some need low contrast. | |||
A happy medium would be off white to reduce "glare" | |||
and black text. Anyone that needs a greater extreme | |||
likely overrides stylesheets. | |||
The text is colored dark blue to assist with "glare" | |||
issues, but also to make the black symbols subtly stand | |||
out. */ | |||
body { | |||
font-size: 14px; | |||
line-height: 200%; | |||
background: snow; | |||
margin: auto 0; | |||
padding: 0 100; | |||
color: #1A0033; | |||
} | |||
/* the highlight class is being used in conjuction | |||
with a script that results in symbols being colored | |||
differently. This helps comprehension by making them | |||
subtly more visable. */ | |||
h1, h2, h3, h4, .highlight { | |||
font-style: bold; | |||
color: black; | |||
} | |||
.highlight, .symbolPop { | |||
font-size: 125%; | |||
} | |||
/* alternate paragraph shading helps users stay | |||
on track while reading. This shading is very | |||
subtle so it is not annoying, but it still | |||
helps. */ | |||
p:nth-child(even), li:nth-child(even) { | |||
background-color: rgba(0,0,0, 0.03); | |||
} | |||
/* highlight text under cursor helps users focus | |||
on what they are currently reading. This shading | |||
is darker than the alt-paragraph shading. */ | |||
p:hover, li:hover { | |||
background-color: rgba(0,0,0, 0.5) !important; | |||
} |
Version du 10 février 2021 à 11:35
.mw-editfont-monospace {
font-family: Source Code Pro;
}
#mwe-pt-toolbar {display:visible;}
/* Example stylesheet for to increase readability on websites */
/* Shameless plug, but use a font designed
for greater readability than just looking cool.
This one is designed for dyslexic readers, though
it can be useful to increase readability for anyone
else */
@font-face{
font-family: "opendyslexic";
src: url('../fonts/OpenDyslexic-Regular.otf');
font-style: normal;
font-weight: normal;
}
@font-face{
font-family: "opendyslexic";
src: url('../fonts/OpenDyslexic-Italic.otf');
font-style: italic;
font-weight: normal;
}
@font-face{
font-family: "opendyslexic";
src: url('../fonts/OpenDyslexic-Bold.otf');
font-weight: bold;
font-style: normal;
}
@font-face{
font-family: "opendyslexic";
src: url('../fonts/OpenDyslexic-BoldItalic.otf');
font-weight: bold;
font-style: italic;
}
* {
font-family: "opendyslexic" !important;
}
/* Use an off-white background. Some users need high
contrast for better reading. Some need low contrast.
A happy medium would be off white to reduce "glare"
and black text. Anyone that needs a greater extreme
likely overrides stylesheets.
The text is colored dark blue to assist with "glare"
issues, but also to make the black symbols subtly stand
out. */
body {
font-size: 14px;
line-height: 200%;
background: snow;
margin: auto 0;
padding: 0 100;
color: #1A0033;
}
/* the highlight class is being used in conjuction
with a script that results in symbols being colored
differently. This helps comprehension by making them
subtly more visable. */
h1, h2, h3, h4, .highlight {
font-style: bold;
color: black;
}
.highlight, .symbolPop {
font-size: 125%;
}
/* alternate paragraph shading helps users stay
on track while reading. This shading is very
subtle so it is not annoying, but it still
helps. */
p:nth-child(even), li:nth-child(even) {
background-color: rgba(0,0,0, 0.03);
}
/* highlight text under cursor helps users focus
on what they are currently reading. This shading
is darker than the alt-paragraph shading. */
p:hover, li:hover {
background-color: rgba(0,0,0, 0.5) !important;
}