index.css

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