html {
text-rendering: optimizeLegibility;
font-kerning: normal;
}
body {
background-color: #eee;
}
nav.path {
position: fixed;
top: 0;
left:0;
width:100%;
z-index: 1;
background-color: white;
border-bottom: 1px solid black;
padding-bottom:0.5ex;
padding-left: 1em;
padding-right: 1em;
font-size: 1.2rem;
}
.camera {
clear:right;
padding-top:2rem;
}
.camera > ul {
display: grid;
/* This causes items to appear out of order,
* which is bad for following the chronological order of captures.
* grid-auto-flow: dense;
*/
grid-gap: 1em;
/* Grow the pictures when the screen grows,
* fitting as many 640x360 videos per row as possible,
* without resizing a video more than its width,
* substracting 2*5px for the margins.
*/
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
padding: 0 0;
}
/*
@media screen and (min-width: 320px) {
.camera > ul {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
}
@media screen and (min-width: 768px) {
.camera > ul {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
}
*/
.camera > ul > li {
list-style-type: none;
position: relative;
}
.camera > ul > li.wow {
grid-column: span 2;
}
.camera > ul > li.vid-orient- {
grid-column: span 2;
}
.camera > ul > li img {
border: 1px solid black;
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
display: block;
object-fit: contain;
margin: auto;
/*height: 100%;*/
width: 100%;
}
.camera > ul > li video {
border: 1px solid black;
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
background-color: black;
display: block;
object-fit: contain;
margin: auto;
width: 100%;
height: 100%;
}
.camera > ul > li video.orient-90 {
}
.camera > ul > li:target img,
.camera > ul > li:target video {
border: 1px solid blue;
box-shadow: 1px 3px 8px rgba(0, 0, 255, 0.5);
}
.camera > ul > li div.item {
display: flex;
flex-direction: column;
}
.camera > ul > li div.item > span.comment {
display: inline-block;
margin: 1ex 1ex 1ex 1ex;
}
.camera > ul > li span.infos {
display:none;
font-size: 0.8rem;
font-weight: normal;
position: absolute;
top: 0;
left: 0;
//margin: 1ex 1ex 1ex 1ex;
/*-webkit-text-stroke: 1px black;*/
flex-direction: column;
justify-content: space-between;
}
.camera > ul > li:hover span.infos {
display:inline;
}
.camera > ul > li:hover span.infos > span {
color: #fff;
background-color: black;
}
.camera > ul > li span.links {
display:none;
font-size: 1rem;
font-weight: normal;
position: absolute;
top: 0;
right: -1px; /* 0 is not perfectly aligned */
//margin: 1ex 1ex 1ex 1ex;
text-decoration: none;
flex-direction: column;
row-gap: 3px;
justify-content: space-between;
/*-webkit-text-stroke: 1px black;*/
}
.camera > ul > li:hover span.links {
display:flex;
}
.camera > ul > li span.links > a {
color: #fff;
background-color: black;
text-decoration: none;
padding: 2px 0px 2px 2px;
}