www/squelettes-dist/css/typo.css

   1 /* --------------------------------------------------
   2
   3    typo.css
   4    Base typographique
   5    (c) 2010-2016 Tiny Typo v1.3 - MIT License - tinytypo.tetue.net
   6
   7 ----------------------------------------------------- */
   8 html {
   9   font-size: 100.01%;
  10   -ms-text-size-adjust: 100%;
  11   -webkit-text-size-adjust: 100%;
  12 }
  13 /* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/
  14 et http://forum.alsacreations.com/topic-4-54377-1.html
  15 [en] http://stackoverflow.com/questions/2703056/body-font-size-100-01-vs-body-font-size-100 */
  16 body {
  17   font-size: 1em;
  18   line-height: 1.5;
  19 }
  20 /* Fonts */
  21 .font1 {
  22   font-family: serif;
  23 }
  24 .font2 {
  25   font-family: sans-serif;
  26 }
  27 .font3 {
  28   font-family: monospace;
  29 }
  30 .font4 {
  31   font-family: fantasy;
  32 }
  33 /* Titraille / Intertitres */
  34 h1,
  35 .h1,
  36 h2,
  37 .h2,
  38 h3,
  39 .h3,
  40 h4,
  41 .h4,
  42 h5,
  43 .h5,
  44 h6,
  45 .h6 {
  46   display: block;
  47   margin: 0;
  48   padding: 0;
  49   font-size: 100%;
  50   font-weight: normal;
  51 }
  52 h1,
  53 .h1 {
  54   font-size: 2em;
  55   line-height: 1.5;
  56   margin-bottom: .75em;
  57 }
  58 h2,
  59 .h2 {
  60   font-size: 1.5em;
  61   line-height: 1;
  62   margin-bottom: 1em;
  63 }
  64 h3,
  65 .h3 {
  66   font-size: 1.25em;
  67   line-height: 1.2;
  68   margin-bottom: 1.2em;
  69 }
  70 h4,
  71 .h4 {
  72   font-size: 1.1em;
  73   line-height: 1.364;
  74   margin-bottom: 1.364em;
  75 }
  76 h5,
  77 .h5 {
  78   font-size: 1em;
  79   font-weight: bold;
  80   margin-bottom: 1.5em;
  81 }
  82 h6,
  83 .h6 {
  84   font-size: 1em;
  85   font-weight: bold;
  86 }
  87 h1 small,
  88 .h1 small,
  89 h2 small,
  90 .h2 small,
  91 h3 small,
  92 .h3 small,
  93 h4 small,
  94 .h4 small,
  95 h5 small,
  96 .h5 small,
  97 h6 small,
  98 .h6 small {
  99   font-size: 60%;
 100   line-height: 0;
 101 }
 102 hr {
 103   -moz-box-sizing: content-box;
 104   box-sizing: content-box;
 105   height: 0;
 106   margin: 1.5em 0;
 107   border: solid;
 108   border-width: 1px 0 0;
 109 }
 110 /* Typographical enhancements */
 111 em,
 112 i,
 113 .i {
 114   font-style: italic;
 115 }
 116 strong,
 117 b,
 118 .b {
 119   font-weight: bold;
 120 }
 121 mark,
 122 .mark {
 123   background: #ff0;
 124   color: #000;
 125 }
 126 .smaller {
 127   font-size: 75%;
 128 }
 129 small,
 130 .small {
 131   font-size: 80%;
 132 }
 133 big,
 134 .big {
 135   font-size: 130%;
 136 }
 137 .bigger {
 138   font-size: 175%;
 139 }
 140 .biggest {
 141   font-size: 200%;
 142 }
 143 abbr[title],
 144 acronym[title] {
 145   border-bottom: .1em dotted;
 146   text-decoration: none;
 147   cursor: help;
 148 }
 149 @media print {
 150   abbr[title] {
 151     border-bottom: 0;
 152   }
 153   abbr[title]:after {
 154     content: " (" attr(title) ")";
 155   }
 156 }
 157 dfn,
 158 .dfn {
 159   font-weight: bold;
 160   font-style: italic;
 161 }
 162 s,
 163 strike,
 164 del,
 165 .del {
 166   opacity: .5;
 167   text-decoration: line-through;
 168 }
 169 ins,
 170 .ins {
 171   background-color: rgba(255, 255, 204, 0.5);
 172   text-decoration: none;
 173 }
 174 u,
 175 .u {
 176   text-decoration: underline;
 177 }
 178 sup,
 179 .sup,
 180 sub,
 181 .sub {
 182   position: relative;
 183   font-size: 80%;
 184   font-variant: normal;
 185   line-height: 0;
 186   vertical-align: baseline;
 187 }
 188 sup,
 189 .sup {
 190   top: -0.5em;
 191 }
 192 sub,
 193 .sub {
 194   bottom: -0.25em;
 195 }
 196 .lead {
 197   font-size: 120%;
 198 }
 199 .caps {
 200   font-variant: small-caps;
 201 }
 202 .quiet {
 203   color: #555555;
 204 }
 205 /* Alignement */
 206 .text-left {
 207   text-align: left;
 208 }
 209 .text-right {
 210   text-align: right;
 211 }
 212 .text-center {
 213   text-align: center;
 214 }
 215 .text-justify {
 216   text-align: justify;
 217   text-justify: newspaper;
 218 }
 219 /* Lists */
 220 ul {
 221   list-style-type: disc;
 222 }
 223 ul ul {
 224   list-style-type: circle;
 225 }
 226 ul ul ul {
 227   list-style-type: square;
 228 }
 229 ol {
 230   list-style-type: decimal;
 231 }
 232 ol ol {
 233   list-style-type: lower-alpha;
 234 }
 235 ol ol ol {
 236   list-style-type: lower-greek;
 237 }
 238 ul ul,
 239 ol ol,
 240 ul ol,
 241 ol ul {
 242   margin-top: 0;
 243   margin-bottom: 0;
 244 }
 245 ol,
 246 ul {
 247   margin-left: 1.5em;
 248   -webkit-margin-before: 0;
 249   -webkit-margin-after: 0;
 250 }
 251 dt {
 252   font-weight: bold;
 253 }
 254 dd {
 255   margin-left: 1.5em;
 256 }
 257 .list-none {
 258   margin-left: 0;
 259   list-style: none;
 260 }
 261 .list-none li:before {
 262   content: '';
 263 }
 264 .list-square {
 265   margin-left: 1.5em;
 266   list-style: square;
 267 }
 268 .list-square li:before {
 269   content: '';
 270 }
 271 .list-disc {
 272   margin-left: 1.5em;
 273   list-style: disc;
 274 }
 275 .list-disc li:before {
 276   content: '';
 277 }
 278 .list-circle {
 279   margin-left: 1.5em;
 280   list-style: circle;
 281 }
 282 .list-circle li:before {
 283   content: '';
 284 }
 285 .list-decimal {
 286   margin-left: 1.5em;
 287   list-style: decimal;
 288 }
 289 .list-decimal li:before {
 290   content: '';
 291 }
 292 .list-inline {
 293   margin-left: 0;
 294 }
 295 .list-inline li {
 296   display: inline-block;
 297   margin: 0;
 298   margin-right: 1em;
 299 }
 300 .list-inline li:Last-Child {
 301   margin-right: 0;
 302 }
 303 .list-inline.list-inline-sep li {
 304   margin-right: 0;
 305 }
 306 .list-inline.list-inline-sep li:after {
 307   content: " | ";
 308 }
 309 .list-inline.list-inline-sep li:Last-Child:after {
 310   content: '';
 311 }
 312 .list-inline.list-inline-dash li {
 313   margin-right: 0;
 314 }
 315 .list-inline.list-inline-dash li:after {
 316   content: " - ";
 317 }
 318 .list-inline.list-inline-dash li:Last-Child:after {
 319   content: '';
 320 }
 321 .list-inline.list-inline-comma li {
 322   margin-right: 0;
 323 }
 324 .list-inline.list-inline-comma li:after {
 325   content: ", ";
 326 }
 327 .list-inline.list-inline-comma li:Last-Child:after {
 328   content: ". ";
 329 }
 330 .list-block li {
 331   display: block;
 332   margin-right: 0;
 333 }
 334 /* Tableaux */
 335 table {
 336   max-width: 100%;
 337   border-collapse: collapse;
 338   border-spacing: 0;
 339 }
 340 .table {
 341   width: 100%;
 342 }
 343 .table caption, table.spip caption,
 344 .table th, table.spip th,
 345 .table td, table.spip td  {
 346   padding: 0.375em;
 347 }
 348 .table caption, table.spip caption {
 349   font-weight: bold;
 350   text-align: left;
 351   border-bottom: 2px solid;
 352 }
 353 .table th, table.spip th {
 354   font-weight: bold;
 355 }
 356 .table th, table.spip th,
 357 .table td, table.spip td {
 358   border-bottom: 1px solid;
 359 }
 360 .table thead th, table.spip thead th {
 361   vertical-align: bottom;
 362 }
 363 .table tbody tr:hover td {
 364   background-color: rgba(34, 34, 34, 0.050000000000000044);
 365 }
 366 .table tfoot {
 367   font-style: italic;
 368 }
 369 .table tfoot td {
 370   border-bottom: 0;
 371   vertical-align: top;
 372 }
 373 @media (max-width: 640px) {
 374   .table-responsive {
 375     width: 100%;
 376     overflow-y: hidden;
 377     overflow-x: scroll;
 378     margin-bottom: 1.5em;
 379   }
 380   .table-responsive table {
 381     width: 100%;
 382     margin-bottom: 0;
 383   }
 384   .table-responsive thead,
 385   .table-responsive tbody,
 386   .table-responsive tfoot,
 387   .table-responsive tr,
 388   .table-responsive th,
 389   .table-responsive td {
 390     white-space: nowrap;
 391   }
 392 }
 393 /* Quotes, code et poetry */
 394 q {
 395   quotes: "\201C" "\201D" "\2018" "\2019";
 396 }
 397 :lang(en) > q {
 398   quotes: "\201C" "\201D" "\2018" "\2019";
 399 }
 400 :lang(fr) > q {
 401   quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
 402 }
 403 :lang(es) > q {
 404   quotes: "\00AB" "\00BB" "\201C" "\201D";
 405 }
 406 :lang(it) > q {
 407   quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";
 408 }
 409 :lang(de) > q {
 410   quotes: "\00BB" "\00AB" "\203A" "\2039";
 411 }
 412 :lang(no) > q {
 413   quotes: "\00AB\A0" "\A0\00BB" "\2039" "\203A";
 414 }
 415 /* [en] http://en.wikipedia.org/wiki/International_variation_in_quotation_marks */
 416 q:before {
 417   content: open-quote;
 418 }
 419 q:after {
 420   content: close-quote;
 421 }
 422 blockquote {
 423   position: relative;
 424   padding-left: 1.5em;
 425   border: solid rgba(34, 34, 34, 0.19999999999999996);
 426   border-width: 0 0 0 5px;
 427 }
 428 blockquote:before {
 429   z-index: -1;
 430   position: absolute;
 431   left: 0;
 432   top: 0;
 433   content: "\00AB";
 434   line-height: 0;
 435   font-size: 10em;
 436   color: rgba(34, 34, 34, 0.09999999999999998);
 437 }
 438 cite,
 439 .cite {
 440   font-style: italic;
 441 }
 442 address {
 443   font-style: italic;
 444 }
 445 pre,
 446 code,
 447 kbd,
 448 samp,
 449 var,
 450 tt {
 451   font-family: monospace;
 452   font-size: 1em;
 453 }
 454 pre {
 455   white-space: pre-wrap;
 456   word-break: break-all;
 457   word-wrap: break-word;
 458 }
 459 kbd {
 460   white-space: nowrap;
 461   padding: .1em .3em;
 462   background-color: #eee;
 463   border: 1px solid #aaa;
 464   border-radius: 4px;
 465   box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
 466   color: #333;
 467 }
 468 samp {
 469   font-weight: bold;
 470 }
 471 var {
 472   font-style: italic;
 473 }
 474 /* Box */
 475 .box {
 476   display: block;
 477   margin-bottom: 1.5em;
 478   padding: 1.5em 1.5em;
 479   padding-bottom: .1em;
 480   border: 1px solid;
 481 }
 482 @media print {
 483   .box {
 484     border: 1px solid !important;
 485   }
 486 }
 487 @media (min-width: 640px) {
 488   .box.right {
 489     width: 33%;
 490     margin-left: 1.5em;
 491   }
 492   .box.left {
 493     width: 33%;
 494     margin-right: 1.5em;
 495   }
 496   .box.center {
 497     width: 75%;
 498   }
 499 }
 500 /* Paragraphes */
 501 p,
 502 .p,
 503 ul,
 504 ol,
 505 dl,
 506 dd,
 507 blockquote,
 508 address,
 509 pre,
 510 .table,
 511 fieldset {
 512   margin-bottom: 1.5em;
 513 }
 514 /* Typographie pour petites ecrans
 515 [fr] http://www.alsacreations.com/astuce/lire/1177 */
 516 @media (max-width: 640px) {
 517   /* Fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
 518   img,
 519   table,
 520   td,
 521   blockquote,
 522   code,
 523   pre,
 524   textarea,
 525   input,
 526   iframe,
 527   object,
 528   embed,
 529   video {
 530     max-width: 100% !important;
 531   }
 532   /* Gestion des mots longs */
 533   textarea,
 534   table,
 535   td,
 536   th,
 537   pre,
 538   code,
 539   samp {
 540     word-wrap: break-word;
 541     /* cesure forcee */
 542   }
 543   pre,
 544   code,
 545   samp {
 546     white-space: pre-line;
 547     /* Passage a la ligne specifique pour les elements a chasse fixe */
 548   }
 549 }
 550 /* Orientation iOS5 font-size fix */
 551 @media (orientation: landscape) and (max-device-width: 640px) {
 552   html,
 553   body {
 554     -webkit-text-size-adjust: 100%;
 555   }
 556 }
 557 /* Style pour l'impression (HTML5 Boilerplate)
 558 Inlined to avoid required HTTP connection: h5bp.com/r */
 559 @media print {
 560   pre,
 561   blockquote {
 562     page-break-inside: avoid;
 563   }
 564   thead {
 565     display: table-header-group;
 566   }
 567   tr,
 568   img {
 569     page-break-inside: avoid;
 570   }
 571   @page  {
 572     margin: 2cm .5cm;
 573   }
 574   p,
 575   h2,
 576   h3 {
 577     orphans: 3;
 578     widows: 3;
 579   }
 580   h2,
 581   h3 {
 582     page-break-after: avoid;
 583   }
 584 }
 585
 586 /* fin */