<html><head>
<title>Humbird0's Lab: Gallery</title>
<style>
body{
margin: 0;
}
a{
text-decoration: none;
color: slateblue;
}
#gallery{
background-color: #d1e9ff;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
/* justify-content: space-between;*/
align-content: flex-start;
/* align-content: space-between;*/
/* align-content: stretch;*/
/* align-items: flex-start;*/
min-height: 100vh;
/*min-height: 10vh;*/
margin: 0;
padding: 0;
}
.thumb{
background-color: white;
outline: solid lightgrey 1px;
list-style-type: none;
margin: 1pc;
padding: 0.5pc;
font-size: 14pt;
/* Segoe UI is a default Windows 7 font with a thin elegant look. It's also the default UI font for windows itself. */
font-family: Segoe UI, sans-serif;
text-align: center;
width: 27vw;
min-width: 12pc;
max-width: 13pc;
box-shadow: 0 3pt 0.8pc -0.5pc rgba(0,0,160, 1);
}
.thumbImage{
width: 100%;
/* Remove the mysterious gap under wide images */
margin: -0.4pc;
padding-top: 0.4pc;
}
.folderImage{
/* reduce its size... */
padding: 0 0.5pc;
padding-top: 0.5pc;
/* ... relative to the image area */
width: 100%;
/* make the padding shrink the item's contents, instead of growing its size */
box-sizing: border-box;
background-image: url("/css/folderIndex_gallery/folder.svg");
background-repeat: no-repeat;
height: 11pc;
}
.thumbImageCrop{
background-color: white;
/* checkerboard pattern */
background-image: linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%), linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%);
/* background-position: 0 0, 10px 10px;*/
/* background-size: 20px 20px;*/
background-position: 0 0, 1pc 1pc;
background-size: 2pc 2pc;
max-height: 11pc;
overflow: hidden;
/* makes the border appear inside the image and trace its cropped edges. Also shrinks the image to fit inside of its border */
box-sizing: border-box;
border: solid lightgrey 1px;
}
.fileName{
text-align: center;
margin: 0;
padding-top: 0.5pc;
/* padding-bottom: 1pc;*/
line-height: 1.3em;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hide the server's file-listing */
pre{
display: none;
}
</style>
</head><body>
<ul id="gallery"></ul>