index.css

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