www/squelettes-dist/css/media.css

   1 /* --------------------------------------------------
   2
   3    media.css
   4    Illustrations, images et albums
   5    (c) 2010-2016 Tiny Typo v1.3 - MIT License - tinytypo.tetue.net
   6
   7 ----------------------------------------------------- */
   8 /* Rendre les images responsive par defaut */
   9 img {
  10   max-width: 100%;
  11   height: auto;
  12 }
  13 @media print {
  14   img {
  15     max-width: 100% !important;
  16   }
  17 }
  18 img {
  19   vertical-align: middle;
  20 }
  21 /**
  22  * 1. Correct `inline-block` display not defined in IE 8/9.
  23  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
  24  */
  25 audio,
  26 canvas,
  27 progress,
  28 video {
  29   display: inline-block;
  30   /* 1 */
  31
  32   vertical-align: baseline;
  33   /* 2 */
  34
  35 }
  36 /**
  37  * Prevent modern browsers from displaying `audio` without controls.
  38  * Remove excess height in iOS 5 devices.
  39  */
  40 audio:not([controls]) {
  41   display: none;
  42   height: 0;
  43 }
  44 /**
  45  * Address `[hidden]` styling not present in IE 8/9/10.
  46  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
  47  */
  48 [hidden],
  49 template {
  50   display: none;
  51 }
  52 /**
  53  * Remove border when inside `a` element in IE 8/9/10.
  54  */
  55 img {
  56   border: 0;
  57 }
  58 /**
  59  * Correct overflow not hidden in IE 9/10/11.
  60  */
  61 svg:not(:root) {
  62   overflow: hidden;
  63 }
  64 /* thumbnail */
  65 .thumb,
  66 .thumb.left {
  67   margin: 0 10px 10px 0;
  68 }
  69 .thumb.right {
  70   margin: 0 0 10px 10px;
  71 }
  72 /* style effects */
  73 img.round {
  74   border-radius: 5px;
  75 }
  76 img.circle {
  77   border-radius: 50%;
  78 }
  79 img.border {
  80   padding: 4px;
  81   background-color: #fff;
  82   border: 1px solid #bbb;
  83 }
  84 img.shadow {
  85   box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7), -1px 2px 20px rgba(255, 255, 255, 0.6) inset;
  86 }
  87 /* figure */
  88 figure {
  89   margin: 0;
  90   margin-bottom: 0.75em;
  91   text-align: center;
  92 }
  93 figure.center {
  94   margin-bottom: 1.5em;
  95 }
  96 figure.left {
  97   margin-right: 1.5em;
  98 }
  99 figure.right {
 100   margin-left: 1.5em;
 101 }
 102 @media (max-width: 640px) {
 103   figure {
 104     margin-bottom: 1.5em;
 105   }
 106   figure.left {
 107     float: none;
 108     margin-right: 0;
 109   }
 110   figure.right {
 111     float: none;
 112     margin-left: 0;
 113   }
 114 }
 115 /* album */
 116 .album {
 117   margin-bottom: 1.5em;
 118 }
 119 .album ul {
 120   overflow: hidden;
 121   margin: 0;
 122   list-style: none;
 123 }
 124 .album li {
 125   float: left;
 126   margin: 0;
 127   margin: 0 10px 10px 0;
 128 }
 129 .album .thumb {
 130   margin: 0;
 131 }
 132
 133 /* fin */