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