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