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.8rem;
  21 }
  22
  23 .camera {
  24   clear: right;
  25   margin-top: 3rem;
  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-landscape {
  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
  86
  87 .camera > ul > li.day {
  88   grid-column: 1 / -1;
  89   border-bottom: 1px solid #000;
  90   font-variant: small-caps;
  91   margin-top: 3ex;
  92 }
  93 .camera > ul > li.day:first-child {
  94   margin-top: 0;
  95 }
  96 .camera > ul > li.day > div {
  97   display: flex;
  98   flex-direction: row;
  99   justify-content: space-between;
 100 }
 101 .camera > ul > li.day a {
 102   color: inherit;
 103   text-decoration: inherit;
 104 }
 105 .camera > ul > li.day a:hover {
 106   color: inherit;
 107   text-decoration: inherit;
 108 }
 109
 110
 111 .camera > ul > li:target img,
 112 .camera > ul > li:target video {
 113   border: 1px solid blue;
 114   box-shadow: 1px 3px 8px rgba(0, 0, 255, 0.5);
 115 }
 116
 117 .camera > ul > li div.item {
 118   display: flex;
 119   flex-direction: column;
 120 }
 121 .camera > ul > li div.item > span.comment {
 122   display: inline-block;
 123   margin: 1ex 1ex 1ex 1ex;
 124 }
 125
 126
 127 .camera > ul > li span.infos {
 128   display:none;
 129   font-size: 0.8rem;
 130   font-weight: normal;
 131   position: absolute;
 132   top: 0;
 133   left: 0;
 134   //margin: 1ex 1ex 1ex 1ex;
 135   /*-webkit-text-stroke: 1px black;*/
 136   flex-direction: column;
 137   justify-content: space-between;
 138 }
 139 .camera > ul > li:hover span.infos {
 140   display:inline;
 141 }
 142 .camera > ul > li:hover span.infos > span {
 143   color: #fff;
 144   background-color: black;
 145 }
 146
 147 .camera > ul > li span.links {
 148   display:none;
 149   font-size: 1rem;
 150   font-weight: normal;
 151   position: absolute;
 152   top: 0;
 153   right: -1px; /* 0 is not perfectly aligned */
 154   //margin: 1ex 1ex 1ex 1ex;
 155   text-decoration: none;
 156   flex-direction: column;
 157   row-gap: 3px;
 158   justify-content: space-between;
 159   /*-webkit-text-stroke: 1px black;*/
 160 }
 161 .camera > ul > li:hover span.links {
 162   display:flex;
 163 }
 164 .camera > ul > li span.links > a {
 165   color: #fff;
 166   background-color: black;
 167   text-decoration: none;
 168   padding: 2px 0px 2px 2px;
 169 }
 170
 171 .camera > ul > li span.downloads {
 172 }