Implement image display

This commit is contained in:
Zoey 2022-12-14 21:39:19 -08:00
parent 97b9fbf46d
commit c0ed59b2cd
19 changed files with 730 additions and 25 deletions

View file

@ -51,3 +51,44 @@ main.page {
abbr {
cursor: help;
}
.images-list {
display: flex;
flex-wrap: wrap;
.image {
position: relative;
padding: 4px;
height: auto;
.image-actual {
display: block;
width: 300px;
height: 100%;
object-fit: cover;
}
.title {
position: absolute;
bottom: 0;
left: 0;
padding: 4px;
margin: 4px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
}
}
}
.image-full {
.title, .tags-title {
margin-bottom: 0;
}
.image-actual {
width: 100%;
max-height: 80vh;
object-fit: contain;
background-color: rgba(0, 0, 0, 0.3);
}
}