You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
585 lines
8.9 KiB
585 lines
8.9 KiB
/* -------------------------------------------------- |
|
|
|
typo.css |
|
Base typographique |
|
(c) 2010-2014 Tiny Typo v1.3 - MIT License - tinytypo.tetue.net |
|
|
|
----------------------------------------------------- */ |
|
html { |
|
font-size: 100.01%; |
|
-ms-text-size-adjust: 100%; |
|
-webkit-text-size-adjust: 100%; |
|
} |
|
/* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/ |
|
et http://forum.alsacreations.com/topic-4-54377-1.html |
|
[en] http://stackoverflow.com/questions/2703056/body-font-size-100-01-vs-body-font-size-100 */ |
|
body { |
|
font-size: 1em; |
|
line-height: 1.3; |
|
} |
|
/* Fonts */ |
|
.font1 { |
|
font-family: serif; |
|
} |
|
.font2 { |
|
font-family: sans-serif; |
|
} |
|
.font3 { |
|
font-family: monospace; |
|
} |
|
.font4 { |
|
font-family: fantasy; |
|
} |
|
/* Titraille / Intertitres */ |
|
h1, |
|
.h1, |
|
h2, |
|
.h2, |
|
h3, |
|
.h3, |
|
h4, |
|
.h4, |
|
h5, |
|
.h5, |
|
h6, |
|
.h6 { |
|
display: block; |
|
margin: 0; |
|
padding: 0; |
|
font-size: 100%; |
|
font-weight: normal; |
|
} |
|
h1, |
|
.h1 { |
|
font-size: 2em; |
|
line-height: 1.5; |
|
margin-bottom: 0.75em; |
|
} |
|
h2, |
|
.h2 { |
|
font-size: 1.5em; |
|
line-height: 1; |
|
margin-bottom: 0.5em; |
|
} |
|
h3, |
|
.h3 { |
|
font-size: 1.35em; |
|
line-height: 1.2; |
|
margin-bottom: 0.2em; |
|
font-weight:700; |
|
} |
|
h4, |
|
.h4 { |
|
font-size: 1.1em; |
|
line-height: 1.364; |
|
margin-bottom: 0.2em; |
|
} |
|
h5, |
|
.h5 { |
|
font-size: 1em; |
|
font-weight: bold; |
|
} |
|
h6, |
|
.h6 { |
|
font-size: 1em; |
|
font-weight: bold; |
|
} |
|
h1 small, |
|
.h1 small, |
|
h2 small, |
|
.h2 small, |
|
h3 small, |
|
.h3 small, |
|
h4 small, |
|
.h4 small, |
|
h5 small, |
|
.h5 small, |
|
h6 small, |
|
.h6 small { |
|
font-size: 60%; |
|
line-height: 1; |
|
} |
|
hr { |
|
-moz-box-sizing: content-box; |
|
box-sizing: content-box; |
|
height: 0; |
|
margin: 1.5em 0; |
|
border: solid; |
|
border-width: 1px 0 0; |
|
} |
|
/* Typographical enhancements */ |
|
em, |
|
i, |
|
.i { |
|
font-style: italic; |
|
} |
|
strong, |
|
b, |
|
.b { |
|
font-weight: bold; |
|
} |
|
mark, |
|
.mark { |
|
background: #ff0; |
|
color: #000; |
|
} |
|
.smaller { |
|
font-size: 75%; |
|
} |
|
small, |
|
.small { |
|
font-size: 80%; |
|
} |
|
big, |
|
.big { |
|
font-size: 130%; |
|
} |
|
.bigger { |
|
font-size: 175%; |
|
} |
|
.biggest { |
|
font-size: 200%; |
|
} |
|
abbr[title], |
|
acronym[title] { |
|
border-bottom: .1em dotted; |
|
cursor: help; |
|
} |
|
@media print { |
|
abbr[title] { |
|
border-bottom: 0; |
|
} |
|
abbr[title]:after { |
|
content: " (" attr(title) ")"; |
|
} |
|
} |
|
dfn, |
|
.dfn { |
|
font-weight: bold; |
|
font-style: italic; |
|
} |
|
s, |
|
strike, |
|
del, |
|
.del { |
|
opacity: .5; |
|
text-decoration: line-through; |
|
} |
|
ins, |
|
.ins { |
|
background-color: rgba(255, 255, 204, 0.5); |
|
text-decoration: none; |
|
} |
|
u, |
|
.u { |
|
text-decoration: underline; |
|
} |
|
sup, |
|
.sup, |
|
sub, |
|
.sub { |
|
position: relative; |
|
font-size: 80%; |
|
font-variant: normal; |
|
line-height: 0; |
|
vertical-align: baseline; |
|
} |
|
sup, |
|
.sup { |
|
top: -0.5em; |
|
} |
|
sub, |
|
.sub { |
|
bottom: -0.25em; |
|
} |
|
.lead { |
|
font-size: 120%; |
|
} |
|
.caps { |
|
font-variant: small-caps; |
|
} |
|
.quiet { |
|
color: #555555; |
|
} |
|
/* Alignement */ |
|
.text-left { |
|
text-align: left; |
|
} |
|
.text-right { |
|
text-align: right; |
|
} |
|
.text-center { |
|
text-align: center; |
|
} |
|
.text-justify { |
|
text-align: justify; |
|
text-justify: newspaper; |
|
} |
|
/* Lists */ |
|
ul { |
|
list-style-type: disc; |
|
} |
|
ul ul { |
|
list-style-type: circle; |
|
} |
|
ul ul ul { |
|
list-style-type: square; |
|
} |
|
ol { |
|
list-style-type: decimal; |
|
} |
|
ol ol { |
|
list-style-type: lower-alpha; |
|
} |
|
ol ol ol { |
|
list-style-type: lower-greek; |
|
} |
|
ul ul, |
|
ol ol, |
|
ul ol, |
|
ol ul { |
|
margin-top: 0; |
|
margin-bottom: 0; |
|
} |
|
ol, |
|
ul { |
|
margin-left: 1em; |
|
-webkit-margin-before: 0; |
|
-webkit-margin-after: 0; |
|
} |
|
dt { |
|
font-weight: bold; |
|
} |
|
dd { |
|
margin-left: 1em; |
|
} |
|
.list-none { |
|
margin-left: 0; |
|
list-style: none; |
|
} |
|
.list-none li:before { |
|
content: ''; |
|
} |
|
.list-square { |
|
margin-left: 1em; |
|
list-style: square; |
|
} |
|
.list-square li:before { |
|
content: ''; |
|
} |
|
.list-disc { |
|
margin-left: 1em; |
|
list-style: disc; |
|
} |
|
.list-disc li:before { |
|
content: ''; |
|
} |
|
.list-circle { |
|
margin-left: 1em; |
|
list-style: circle; |
|
} |
|
.list-circle li:before { |
|
content: ''; |
|
} |
|
.list-decimal { |
|
margin-left: 1em; |
|
list-style: decimal; |
|
} |
|
.list-decimal li:before { |
|
content: ''; |
|
} |
|
.list-inline { |
|
margin-left: 0; |
|
} |
|
.list-inline li { |
|
display: inline-block; |
|
margin: 0; |
|
margin-right: 1em; |
|
} |
|
.list-inline li:Last-Child { |
|
margin-right: 0; |
|
} |
|
.list-inline.list-inline-sep li { |
|
margin-right: 0; |
|
} |
|
.list-inline.list-inline-sep li:after { |
|
content: " | "; |
|
} |
|
.list-inline.list-inline-sep li:Last-Child:after { |
|
content: ''; |
|
} |
|
.list-inline.list-inline-dash li { |
|
margin-right: 0; |
|
} |
|
.list-inline.list-inline-dash li:after { |
|
content: " - "; |
|
} |
|
.list-inline.list-inline-dash li:Last-Child:after { |
|
content: ''; |
|
} |
|
.list-inline.list-inline-comma li { |
|
margin-right: 0; |
|
} |
|
.list-inline.list-inline-comma li:after { |
|
content: ", "; |
|
} |
|
.list-inline.list-inline-comma li:Last-Child:after { |
|
content: ". "; |
|
} |
|
.list-block li { |
|
display: block; |
|
margin-right: 0; |
|
} |
|
/* Tableaux */ |
|
table { |
|
max-width: 100%; |
|
border-collapse: collapse; |
|
border-spacing: 0; |
|
} |
|
.table { |
|
width: 100%; |
|
} |
|
.table caption, table.spip caption, |
|
.table th, table.spip th, |
|
.table td, table.spip td { |
|
padding: 0.375em; |
|
} |
|
.table caption, table.spip caption { |
|
font-weight: bold; |
|
text-align: left; |
|
border-bottom: 2px solid; |
|
} |
|
.table th, table.spip th { |
|
font-weight: bold; |
|
} |
|
.table th, table.spip th, |
|
.table td, table.spip td { |
|
border-bottom: 1px solid; |
|
} |
|
.table thead th, table.spip thead th { |
|
vertical-align: bottom; |
|
} |
|
.table tbody tr:hover td { |
|
background-color: rgba(34, 34, 34, 0.050000000000000044); |
|
} |
|
.table tfoot { |
|
font-style: italic; |
|
} |
|
.table tfoot td { |
|
border-bottom: 0; |
|
vertical-align: top; |
|
} |
|
@media (max-width:640px) { |
|
.table-responsive { |
|
width: 100%; |
|
overflow-y: hidden; |
|
overflow-x: scroll; |
|
margin-bottom: 1.5em; |
|
} |
|
.table-responsive table { |
|
width: 100%; |
|
margin-bottom: 0; |
|
} |
|
.table-responsive thead, |
|
.table-responsive tbody, |
|
.table-responsive tfoot, |
|
.table-responsive tr, |
|
.table-responsive th, |
|
.table-responsive td { |
|
white-space: nowrap; |
|
} |
|
} |
|
/* Quotes, code et poetry */ |
|
q { |
|
quotes: "\201C" "\201D" "\2018" "\2019"; |
|
} |
|
:lang(en) > q { |
|
quotes: "\201C" "\201D" "\2018" "\2019"; |
|
} |
|
:lang(fr) > q { |
|
quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019"; |
|
} |
|
:lang(es) > q { |
|
quotes: "\00AB" "\00BB" "\201C" "\201D"; |
|
} |
|
:lang(it) > q { |
|
quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D"; |
|
} |
|
:lang(de) > q { |
|
quotes: "\00BB" "\00AB" "\203A" "\2039"; |
|
} |
|
:lang(no) > q { |
|
quotes: "\00AB\A0" "\A0\00BB" "\2039" "\203A"; |
|
} |
|
/* [en] http://en.wikipedia.org/wiki/International_variation_in_quotation_marks */ |
|
q:before { |
|
content: open-quote; |
|
} |
|
q:after { |
|
content: close-quote; |
|
} |
|
blockquote { |
|
position: relative; |
|
padding-left: 1.5em; |
|
border: solid rgba(34, 34, 34, 0.19999999999999996); |
|
border-width: 0 0 0 5px; |
|
} |
|
blockquote:before { |
|
z-index: -1; |
|
position: absolute; |
|
left: 0; |
|
top: 0; |
|
content: "\00AB"; |
|
line-height: 0; |
|
font-size: 10em; |
|
color: rgba(34, 34, 34, 0.09999999999999998); |
|
} |
|
cite, |
|
.cite { |
|
font-style: italic; |
|
} |
|
address { |
|
font-style: italic; |
|
} |
|
pre, |
|
code, |
|
kbd, |
|
samp, |
|
var, |
|
tt { |
|
font-family: monospace; |
|
font-size: 1em; |
|
} |
|
pre { |
|
white-space: pre-wrap; |
|
word-break: break-all; |
|
word-wrap: break-word; |
|
} |
|
kbd { |
|
white-space: nowrap; |
|
padding: .1em .3em; |
|
background-color: #eee; |
|
border: 1px solid #aaa; |
|
border-radius: 4px; |
|
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset; |
|
color: #333; |
|
} |
|
samp { |
|
font-weight: bold; |
|
} |
|
var { |
|
font-style: italic; |
|
} |
|
/* Box */ |
|
.box { |
|
display: block; |
|
margin-bottom: 1.5em; |
|
padding: 1.5em 1.5em; |
|
padding-bottom: .1em; |
|
border: 1px solid; |
|
} |
|
@media print { |
|
.box { |
|
border: 1px solid !important; |
|
} |
|
} |
|
@media (min-width:640px) { |
|
.box.right { |
|
width: 33%; |
|
margin-left: 1em; |
|
} |
|
.box.left { |
|
width: 33%; |
|
margin-right: 1em; |
|
} |
|
.box.center { |
|
width: 75%; |
|
} |
|
} |
|
/* Paragraphes */ |
|
p, |
|
.p, |
|
ul, |
|
ol, |
|
dl, |
|
dd, |
|
blockquote, |
|
address, |
|
pre, |
|
.table, |
|
fieldset { |
|
margin-bottom: 0.6em; |
|
} |
|
/* Typographie pour petites ecrans |
|
[fr] http://www.alsacreations.com/astuce/lire/1177 */ |
|
@media (max-width:640px) { |
|
/* Fixer une largeur maximale de 100 % aux elements potentiellement problematiques */ |
|
/*img,*//* je suis pas d'accord pour img, au contraire ça fait des soucis avec photoswipe par exemple, juste à cause du !important qui est un peu péremptoire */ |
|
table, |
|
td, |
|
blockquote, |
|
code, |
|
pre, |
|
textarea, |
|
input, |
|
iframe, |
|
object, |
|
embed, |
|
video { |
|
max-width: 100% !important; |
|
} |
|
/* Gestion des mots longs */ |
|
textarea, |
|
table, |
|
td, |
|
th, |
|
pre, |
|
code, |
|
samp { |
|
word-wrap: break-word; |
|
/* cesure forcee */ |
|
} |
|
pre, |
|
code, |
|
samp { |
|
white-space: pre-line; |
|
/* Passage a la ligne specifique pour les elements a chasse fixe */ |
|
} |
|
} |
|
/* Orientation iOS5 font-size fix */ |
|
@media (orientation:landscape) and (max-device-width:640px) { |
|
html, |
|
body { |
|
-webkit-text-size-adjust: 100%; |
|
} |
|
} |
|
/* Style pour l'impression (HTML5 Boilerplate) |
|
Inlined to avoid required HTTP connection: h5bp.com/r */ |
|
@media print { |
|
pre, |
|
blockquote { |
|
page-break-inside: avoid; |
|
} |
|
thead { |
|
display: table-header-group; |
|
} |
|
tr, |
|
img { |
|
page-break-inside: avoid; |
|
} |
|
@page { |
|
margin: 2cm .5cm; |
|
} |
|
p, |
|
h2, |
|
h3 { |
|
orphans: 3; |
|
widows: 3; |
|
} |
|
h2, |
|
h3 { |
|
page-break-after: avoid; |
|
} |
|
} |
|
|
|
/* fin */
|
|
|