586 lines
8.9 KiB
SCSS
Executable File
586 lines
8.9 KiB
SCSS
Executable File
/* --------------------------------------------------
|
|
|
|
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 */
|