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 video.orient-90 {
  86 }
  87 .camera > ul > li:target img,
  88 .camera > ul > li:target video {
  89   border: 1px solid blue;
  90   box-shadow: 1px 3px 8px rgba(0, 0, 255, 0.5);
  91 }
  92
  93 .camera > ul > li div.item {
  94   display: flex;
  95   flex-direction: column;
  96 }
  97 .camera > ul > li div.item > span.comment {
  98   display: inline-block;
  99   margin: 1ex 1ex 1ex 1ex;
 100 }
 101
 102
 103 .camera > ul > li span.infos {
 104   display:none;
 105   font-size: 0.8rem;
 106   font-weight: normal;
 107   position: absolute;
 108   top: 0;
 109   left: 0;
 110   //margin: 1ex 1ex 1ex 1ex;
 111   /*-webkit-text-stroke: 1px black;*/
 112   flex-direction: column;
 113   justify-content: space-between;
 114 }
 115 .camera > ul > li:hover span.infos {
 116   display:inline;
 117 }
 118 .camera > ul > li:hover span.infos > span {
 119   color: #fff;
 120   background-color: black;
 121 }
 122
 123 .camera > ul > li span.links {
 124   display:none;
 125   font-size: 1rem;
 126   font-weight: normal;
 127   position: absolute;
 128   top: 0;
 129   right: -1px; /* 0 is not perfectly aligned */
 130   //margin: 1ex 1ex 1ex 1ex;
 131   text-decoration: none;
 132   flex-direction: column;
 133   row-gap: 3px;
 134   justify-content: space-between;
 135   /*-webkit-text-stroke: 1px black;*/
 136 }
 137 .camera > ul > li:hover span.links {
 138   display:flex;
 139 }
 140 .camera > ul > li span.links > a {
 141   color: #fff;
 142   background-color: black;
 143   text-decoration: none;
 144   padding: 2px 0px 2px 2px;
 145 }