-/* --------------------------------------------------------------
+/* --------------------------------------------------
typo.css
Base typographique
- Cf.: https://contrib.spip.net/3820
-
--------------------------------------------------------------- */
-
-html { font-size: 100.01%; } /* pour IE < 6 */
-/* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/ et http://forum.alsacreations.com/topic-4-54377-1.html */
-body { background: #FFFFFF; font: 1em/1.5em Georgia, Cambria, Times New Roman, Times, serif; color: #222222; }
+ (c) 2010-2016 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.5;
+}
+/* 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; }
-hr { height: 1px; margin: 1.5em 0; border: 0; background: #222222; color: #222222; }
-
-h1,.h1 { font-size: 2em; line-height: 1.5; margin-bottom: .75em; }
-h2,.h2 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
-h3,.h3 { font-size: 1.25em; line-height: 1.2; margin-bottom: 1.2em; }
-h4,.h4 { font-size: 1.1em; line-height: 1.364; margin-bottom: 1.364em; }
-h5,.h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
-h6,.h6 { font-size: 1em; font-weight: bold; }
-
-/* Enrichissements typographiques */
-strong, b { font-weight: bold; }
-em, i { font-style: italic; }
-small, .small { font-size: 90%; }
-big, .big { font-size: 130%; }
-abbr[title], acronym[title] { border-bottom: .1em dotted; cursor: help; }
-@media print { abbr[title]:after { content: " (" attr(title) ")"; } }
-dfn { font-weight: bold; font-style: italic; }
-del, .del { background-color: #FFDDDD; border-color: #CC0000; color: #CC0000; text-decoration: line-through; }
-ins, .ins { background-color: #DDFFDD; border-color: #00AA00; color: #00AA00; text-decoration: none; }
-sup, sub { font-size: .8em; font-variant: normal; line-height: 0; }
-sup { vertical-align: super; }
-.ie sup { vertical-align: text-top; }
-sub { vertical-align: sub; }
-.ie sub { vertical-align: text-bottom; }
-.caps { font-variant: small-caps; }
-
-/* Listes */
-ul, ol, li, dl, dt, dd {}
-ul ul, ol ol, ul ol, ol ul { margin-top: 0; margin-bottom: 0; }
-
-dl dt { font-weight: bold; }
-dl dd {}
-
-/* Tableaux */
-table {}
-caption { background: #EEE; }
-th { font-weight: bold; }
-thead th { background: #DDD; }
-th,td,caption { padding: 0.75em; }
-tbody tr:nth-child(even) th,
-tbody tr:nth-child(even) td,
-tbody tr.even th,
-tbody tr.even td { background: #EEE; }
-tfoot { font-style: italic; }
-
-/* Citations, code et poesie */
-q { font-style: italic; }
-blockquote { padding: 0 50px; }
-cite { font-style: italic; }
-
-address { font-style: italic; }
-
-pre,code,kbd,samp,var,tt { font-family: 'Courier New', Courier, monospace; font-size: 1em; }
-pre { margin: 1.5em 0;
- /* Cf.: http://perishablepress.com/press/2010/06/01/wrapping-content/ */
- white-space: pre; /* CSS 2.0 */
- white-space: pre-wrap; /* CSS 2.1 */
- white-space: pre-line; /* CSS 3.0 */
- white-space: -pre-wrap; /* Opera 4-6 */
- white-space: -o-pre-wrap; /* Opera 7 */
- white-space: -moz-pre-wrap; /* Mozilla */
- white-space: -hp-pre-wrap; /* HP Printers */
- word-wrap: break-word; /* IE 5+ */
-}
-kbd { background-color: #222222; color: #FFFFFF; }
-samp { font-weight: bold; }
-var { font-style: italic; }
-
-/* Paragraphes */
-p, .p, dl, dd, blockquote, address, pre, table, fieldset { margin-bottom: 1.5em; }
-
-/* Liens */
-a {}
-a:hover {}
-a[hreflang]:after { content: "\0000a0(" attr(hreflang) ")"; }
+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: .75em;
+}
+h2,
+.h2 {
+ font-size: 1.5em;
+ line-height: 1;
+ margin-bottom: 1em;
+}
+h3,
+.h3 {
+ font-size: 1.25em;
+ line-height: 1.2;
+ margin-bottom: 1.2em;
+}
+h4,
+.h4 {
+ font-size: 1.1em;
+ line-height: 1.364;
+ margin-bottom: 1.364em;
+}
+h5,
+.h5 {
+ font-size: 1em;
+ font-weight: bold;
+ margin-bottom: 1.5em;
+}
+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: 0;
+}
+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;
+ text-decoration: none;
+ cursor: help;
+}
@media print {
- a, a:visited { color: #222222; text-decoration: underline; }
- .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
+ 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: 1.5em;
+ -webkit-margin-before: 0;
+ -webkit-margin-after: 0;
+}
+dt {
+ font-weight: bold;
+}
+dd {
+ margin-left: 1.5em;
+}
+.list-none {
+ margin-left: 0;
+ list-style: none;
+}
+.list-none li:before {
+ content: '';
+}
+.list-square {
+ margin-left: 1.5em;
+ list-style: square;
+}
+.list-square li:before {
+ content: '';
+}
+.list-disc {
+ margin-left: 1.5em;
+ list-style: disc;
+}
+.list-disc li:before {
+ content: '';
+}
+.list-circle {
+ margin-left: 1.5em;
+ list-style: circle;
+}
+.list-circle li:before {
+ content: '';
+}
+.list-decimal {
+ margin-left: 1.5em;
+ 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;
}
-
-.on { font-weight: bold; }
-
-/**
-* Print styles from HTML5 Boilerplate
-* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
-*/
-
@media print {
- pre, blockquote { page-break-inside: avoid; }
- thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
- tr, img { page-break-inside: avoid; }
- @page { margin: 0.5cm; }
- p, h2, h3 { orphans: 3; widows: 3; }
- h2, h3 { page-break-after: avoid; }
+ .box {
+ border: 1px solid !important;
+ }
}
-
-/**
-* Base typo sur petits ecrans
-* Cf.: http://www.alsacreations.com/astuce/lire/1177
-*/
-
+@media (min-width: 640px) {
+ .box.right {
+ width: 33%;
+ margin-left: 1.5em;
+ }
+ .box.left {
+ width: 33%;
+ margin-right: 1.5em;
+ }
+ .box.center {
+ width: 75%;
+ }
+}
+/* Paragraphes */
+p,
+.p,
+ul,
+ol,
+dl,
+dd,
+blockquote,
+address,
+pre,
+.table,
+fieldset {
+ margin-bottom: 1.5em;
+}
+/* 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, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100% !important; }
- /* conserver le ratio des images, necessaire car attribut height existant */
- img { height: auto; }
-
- /* gestion des mots longs */
- textarea, table, td, th, code, pre, samp { word-wrap: break-word; /* cesure forcee */ }
- code, pre, samp { white-space: pre-line; /* passage a la ligne specifique pour les elements a chasse fixe */ }
-
+ /* Fixer une largeur maximale de 100 % aux elements potentiellement problematiques */
+ img,
+ 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 */
+ }
}
-
-@media screen and (max-width:640px) and (orientation: landscape) {
- body { -webkit-text-size-adjust: 70%; }
+/* 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;
+ }
}
-/*
-
- ATTENTION
- L'usage de proprietes -webkit-* sans leurs contreparties
- (-o-*, -moz-*, etc.) est fortement deconseille !
- cf. http://www.webstandards.org/2012/02/09/call-for-action-on-vendor-prefixes/
-
- Prenez le temps de corriger s'il vous plait : les proprietes CSS prefixees ne sont en theorie
- destinees qu'a des fins de test.
-
-*/
-
-/* end */
\ No newline at end of file
+/* fin */
\ No newline at end of file
dépôts / lhc / web / www.git / blobdiff