html, body {
margin: 0em;
padding: 0em;
}
body {
text-align: center;
font-family: sans-serif;
background-color: #fafafa;
color: black;
font-size: 75%;
}
a {
text-decoration: none;
color: #006064;
}
a:hover {
text-decoration: none;
color: #0097a7;
}
p {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
margin-bottom: 0.5em;
}
h1 {
padding: 0;
font-size: 1.1em;
color: #263238;
}
/*
* Flex layout
*/
.container {
display: flex;
height: 100%;
}
.container > .mainpic {
flex: 1;
margin: 0;
}
.container > .mainpic > img {
/* 90vh ensures that the image is never too tall to fit in the display.
* 90% ensures that the image is never too wide to go over the thumbnails,
* leaving a reasonable margin. */
max-height: 90vh;
max-width: 90%;
border: 1px solid #aaa;
/* Center */
margin: auto;
}
.container > .mainpic > p {
margin-bottom: 0.5em;
}
.container > .mainpic > p > span#title {
font-weight: bold;
}
.container > .thumbnails {
min-width: 100px;
max-width: 15%;
/* Simplifies default margins and paddings. */
font-size: 0;
overflow-y: scroll;
/* Flex to display them nicely */
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.container > .thumbnails > img {
width: 90%;
/* Leave a small space around earch image. */
margin-left: 2%;
margin-right: 2%;
margin-bottom: 2%;
transition: .3s opacity;
opacity: 0.8;
border: 1px solid #aaa;
}
.container > .thumbnails > img:hover {
opacity: 1;
}
/* Div used to preload images, do not display. */
.preload {
display: none;
}