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   position: absolute;
  97   top: 0;
  98   left: 0;
  99   //margin: 1ex 1ex 1ex 1ex;
 100   /*-webkit-text-stroke: 1px black;*/
 101   flex-direction: column;
 102   justify-content: space-between;
 103 }
 104 .camera > ul > li:hover span.infos {
 105   display:inline;
 106 }
 107 .camera > ul > li:hover span.infos > span {
 108   color: #fff;
 109   background-color: black;
 110 }
 111
 112 .camera > ul > li span.links {
 113   display:none;
 114   font-size: 1rem;
 115   font-weight: normal;
 116   position: absolute;
 117   top: 0;
 118   right: -1px; /* 0 is not perfectly aligned */
 119   //margin: 1ex 1ex 1ex 1ex;
 120   text-decoration: none;
 121   flex-direction: column;
 122   row-gap: 3px;
 123   justify-content: space-between;
 124   /*-webkit-text-stroke: 1px black;*/
 125 }
 126 .camera > ul > li:hover span.links {
 127   display:flex;
 128 }
 129 .camera > ul > li span.links > a {
 130   color: #fff;
 131   background-color: black;
 132   text-decoration: none;
 133   padding: 2px 0px 2px 2px;
 134 }