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