mirror of
https://github.com/danbee/my-images
synced 2025-03-04 08:49:05 +00:00
69 lines
1.2 KiB
SCSS
69 lines
1.2 KiB
SCSS
.show-image {
|
|
display: grid;
|
|
grid-gap: 1.5rem;
|
|
height: calc(100% - 12rem);
|
|
|
|
.image-container {
|
|
align-items: center;
|
|
display: flex;
|
|
grid-area: image-container;
|
|
justify-content: center;
|
|
}
|
|
|
|
.image-info {
|
|
grid-area: image-info;
|
|
}
|
|
|
|
.image-tags-list {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.image-tag {
|
|
font-size: 0.8rem;
|
|
border-radius: 0.25rem;
|
|
display: inline-block;
|
|
background: white;
|
|
color: #333;
|
|
margin: 0.25rem 0.125rem;
|
|
padding: 0.125rem 0.5rem;
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
img {
|
|
background-color: white;
|
|
max-width: calc(100% - 1rem);
|
|
max-height: calc(100vh - 9rem);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
|
border-radius: 2px;
|
|
padding: 0.5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 799px) {
|
|
.show-image {
|
|
grid-template-areas:
|
|
"image-container"
|
|
"image-info";
|
|
grid-template-rows: min-content min-content;
|
|
}
|
|
|
|
.image-tags {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.show-image {
|
|
grid-template-areas:
|
|
"image-container image-info"
|
|
"image-container image-info";
|
|
grid-template-columns: 4fr 1fr;
|
|
grid-template-rows: 4fr 1fr;
|
|
}
|
|
}
|