www/squelettes-dist/css/typo.css

   1 /* --------------------------------------------------------------
   2
   3    typo.css
   4    Base typographique
   5    Cf.: http://contrib.spip.net/3820
   6
   7 -------------------------------------------------------------- */
   8
   9 html { font-size: 100.01%; } /* pour IE < 6 */
  10 /* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/ et http://forum.alsacreations.com/topic-4-54377-1.html */
  11 body { background: #FFFFFF; font: 1em/1.5em Georgia, Cambria, Times New Roman, Times, serif; color: #222222; }
  12
  13 /* Titraille / Intertitres */
  14 h1,.h1,
  15 h2,.h2,
  16 h3,.h3,
  17 h4,.h4,
  18 h5,.h5,
  19 h6,.h6 { display: block; margin: 0; padding: 0; font-size: 100%; font-weight: normal; }
  20 hr { height: 1px; margin: 1.5em 0; border: 0; background: #222222; color: #222222; }
  21
  22 h1,.h1 { font-size: 2em; line-height: 1.5; margin-bottom: .75em; }
  23 h2,.h2 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
  24 h3,.h3 { font-size: 1.25em; line-height: 1.2; margin-bottom: 1.2em; }
  25 h4,.h4 { font-size: 1.1em; line-height: 1.364; margin-bottom: 1.364em; }
  26 h5,.h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
  27 h6,.h6 { font-size: 1em; font-weight: bold; }
  28
  29 /* Enrichissements typographiques */
  30 strong, b { font-weight: bold; }
  31 em, i { font-style: italic; }
  32 small, .small { font-size: 90%; }
  33 big, .big { font-size: 130%; }
  34 abbr[title], acronym[title] { border-bottom: .1em dotted; cursor: help; }
  35 @media print { abbr[title]:after { content: " (" attr(title) ")"; } }
  36 dfn { font-weight: bold; font-style: italic; }
  37 del, .del { background-color: #FFDDDD; border-color: #CC0000; color: #CC0000; text-decoration: line-through; }
  38 ins, .ins { background-color: #DDFFDD; border-color: #00AA00; color: #00AA00; text-decoration: none; }
  39 sup, sub { font-size: .8em; font-variant: normal; line-height: 0; }
  40 sup { vertical-align: super; }
  41 .ie sup { vertical-align: text-top; }
  42 sub { vertical-align: sub; }
  43 .ie sub { vertical-align: text-bottom; }
  44 .caps { font-variant: small-caps; }
  45
  46 /* Listes */
  47 ul, ol, li, dl, dt, dd {}
  48 ul ul, ol ol, ul ol, ol ul { margin-top: 0; margin-bottom: 0; }
  49
  50 dl dt { font-weight: bold; }
  51 dl dd {}
  52
  53 /* Tableaux */
  54 table {}
  55 caption { background: #EEE; }
  56 th { font-weight: bold; }
  57 thead th { background: #DDD; }
  58 th,td,caption { padding: 0.75em; }
  59 tbody tr:nth-child(even) th,
  60 tbody tr:nth-child(even) td,
  61 tbody tr.even th,
  62 tbody tr.even td { background: #EEE; }
  63 tfoot { font-style: italic; }
  64
  65 /* Citations, code et poesie */
  66 q { font-style: italic; }
  67 blockquote { padding: 0 50px; }
  68 cite { font-style: italic; }
  69
  70 address { font-style: italic; }
  71
  72 pre,code,kbd,samp,var,tt { font-family: 'Courier New', Courier, monospace; font-size: 1em; }
  73 pre { margin: 1.5em 0;
  74   /* Cf.: http://perishablepress.com/press/2010/06/01/wrapping-content/ */
  75   white-space: pre;           /* CSS 2.0 */
  76   white-space: pre-wrap;      /* CSS 2.1 */
  77   white-space: pre-line;      /* CSS 3.0 */
  78   white-space: -pre-wrap;     /* Opera 4-6 */
  79   white-space: -o-pre-wrap;   /* Opera 7 */
  80   white-space: -moz-pre-wrap; /* Mozilla */
  81   white-space: -hp-pre-wrap;  /* HP Printers */
  82   word-wrap: break-word;      /* IE 5+ */
  83 }
  84 kbd { background-color: #222222; color: #FFFFFF; }
  85 samp { font-weight: bold; }
  86 var { font-style: italic; }
  87
  88 /* Paragraphes */
  89 p, .p, dl, dd, blockquote, address, pre, table, fieldset { margin-bottom: 1.5em; }
  90
  91 /* Liens */
  92 a {}
  93 a:hover {}
  94 a[hreflang]:after { content: "\0000a0(" attr(hreflang) ")"; }
  95 @media print {
  96   a, a:visited { color: #222222; text-decoration: underline; }
  97   .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
  98 }
  99
 100 .on { font-weight: bold; }
 101
 102 /**
 103 * Print styles from HTML5 Boilerplate
 104 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
 105 */
 106
 107 @media print {
 108   pre, blockquote { page-break-inside: avoid; }
 109   thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
 110   tr, img { page-break-inside: avoid; }
 111   @page { margin: 0.5cm; }
 112   p, h2, h3 { orphans: 3; widows: 3; }
 113   h2, h3 { page-break-after: avoid; }
 114 }
 115
 116 /**
 117 * Base typo sur petits ecrans
 118 * Cf.: http://www.alsacreations.com/astuce/lire/1177
 119 */
 120
 121 @media (max-width: 640px) {
 122
 123   /* fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
 124   img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100% !important; }
 125   /* conserver le ratio des images, necessaire car attribut height existant */
 126   img { height: auto; }
 127
 128   /* gestion des mots longs */
 129   textarea, table, td, th, code, pre, samp { word-wrap: break-word; /* cesure forcee */ }
 130   code, pre, samp { white-space: pre-line; /* passage a la ligne specifique pour les elements a chasse fixe */ }
 131
 132 }
 133
 134 @media screen and (max-width:640px) and (orientation: landscape) {
 135   body { -webkit-text-size-adjust: 70%; }
 136 }
 137
 138 /*
 139
 140     ATTENTION
 141     L'usage de proprietes -webkit-* sans leurs contreparties
 142     (-o-*, -moz-*, etc.) est fortement deconseille !
 143     cf. http://www.webstandards.org/2012/02/09/call-for-action-on-vendor-prefixes/
 144
 145     Prenez le temps de corriger s'il vous plait : les proprietes CSS prefixees ne sont en theorie
 146     destinees qu'a des fins de test.
 147
 148 */
 149
 150 /* end */