index.css

   1 html {
   2   text-rendering: optimizeLegibility;
   3   font-kerning: normal;
   4 }
   5
   6 nav.path > ul {
   7   padding-left: 0;
   8 }
   9 nav.path > ul > li {
  10   list-style-type: none;
  11 }
  12
  13 .camera {
  14   clear:right;
  15 }
  16 .camera > ul {
  17   display: grid;
  18   grid-auto-flow: dense;
  19   grid-gap: 1em;
  20   /* Grow the pictures when the screen grows,
  21    * fitting as many 640x360 videos per row as possible,
  22    * without resizing a video more than its width,
  23    * substracting 2*5px for the margins.
  24    */
  25   grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  26   padding: 0 0;
  27 }
  28
  29 /*
  30 @media screen and (min-width: 320px) {
  31   .camera > ul {
  32     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  33   }
  34 }
  35 @media screen and (min-width: 768px) {
  36   .camera > ul {
  37     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  38   }
  39 }
  40 */
  41
  42 .camera > ul > li {
  43   list-style-type: none;
  44   position: relative;
  45 }
  46 .camera > ul > li.highlight-box {
  47   grid-row: span 2;
  48   grid-column: span 2;
  49 }
  50 .camera > ul > li.highlight-tall {
  51   grid-row: span 2;
  52 }
  53 .camera > ul > li.highlight-wide {
  54   grid-column: span 2;
  55 }
  56 .camera > ul > li img {
  57   border: 1px solid black;
  58   box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
  59   display: block;
  60   object-fit: contain;
  61   margin: auto;
  62   /*height: 100%;*/
  63   width: 100%;
  64 }
  65 .camera > ul > li video {
  66   border: 1px solid black;
  67   box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
  68   background-color: black;
  69   display: block;
  70   object-fit: contain;
  71   margin: auto;
  72   width: 100%;
  73   height: 100%;
  74 }
  75 .camera > ul > li video.orient-90 {
  76 }
  77 .camera > ul > li:target img,
  78 .camera > ul > li:target video {
  79   border: 1px solid blue;
  80 }
  81
  82 .camera > ul > li div.item {
  83   display: flex;
  84   flex-direction: column;
  85 }
  86 .camera > ul > li div.item > span.comment {
  87   display: inline-block;
  88   margin: 1ex 1ex 1ex 1ex;
  89 }
  90
  91
  92 .camera > ul > li span.infos {
  93   display:none;
  94   font-size: 0.8rem;
  95   font-weight: normal;
  96   color: #fff;
  97   position: absolute;
  98   top: 0;
  99   left: 0;
 100   margin: 1ex 1ex 1ex 1ex;
 101   text-shadow: 2px 2px 6px rgba(0, 0, 0, 1);
 102 }
 103 .camera > ul > li:hover span.infos {
 104   display:inline;
 105 }
 106
 107 .camera > ul > li span.links {
 108   display:none;
 109   font-size: 0.8rem;
 110   font-weight: normal;
 111   color: #fff;
 112   position: absolute;
 113   top: 0;
 114   right: 0;
 115   margin: 1ex 1ex 1ex 1ex;
 116   text-decoration: none;
 117   flex-direction: column;
 118 }
 119 .camera > ul > li:hover span.links {
 120   display:flex;
 121 }
 122 .camera > ul > li span.links > a {
 123   color: inherit;
 124   text-decoration: none;
 125 }