finga
4aff0378ac
Deprecate the bulma css framework in favor of normalize and milligram. Adapt the templates to work with the new css libraries.
132 lines
2.3 KiB
SCSS
132 lines
2.3 KiB
SCSS
div.gallery {
|
||
width: calc(100% + 10px);
|
||
margin-left: -5px;
|
||
line-height: 0;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
div.gallery img.thumbnail {
|
||
padding: 5px;
|
||
}
|
||
|
||
div.gallery a img.thumbnail:hover {
|
||
box-shadow: 0 0 0px $color-tertiary !important;
|
||
transform: scale(1.1);
|
||
transition: transform .2s;
|
||
}
|
||
|
||
div.lightbox {
|
||
opacity: 0;
|
||
z-index: 700;
|
||
transition: opacity 0.2s linear;
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: rgba($color-black, 0.7);
|
||
overflow: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
pointer-events: none;
|
||
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
||
-webkit-backdrop-filter: blur(5px);
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
}
|
||
|
||
div.lightbox:target {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
div.lightbox a.full {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
div.lightbox span {
|
||
font-size: 2em;
|
||
line-height: normal;
|
||
position: absolute;
|
||
color: $color-tertiary;
|
||
cursor: pointer;
|
||
}
|
||
|
||
div.lightbox span:hover {
|
||
color: $color-secondary;
|
||
}
|
||
|
||
|
||
div.lightbox span.close {
|
||
z-index: 900;
|
||
top: 0;
|
||
right: 0;
|
||
padding: .7em 1em;
|
||
}
|
||
|
||
div.lightbox span.close:before {
|
||
content: "✖";
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
div.lightbox span.prev {
|
||
z-index: 800;
|
||
top: 0;
|
||
left: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 6em;
|
||
height: 100%;
|
||
padding: 0 .3em;
|
||
}
|
||
|
||
div.lightbox span.prev:before {
|
||
content: "‹";
|
||
}
|
||
|
||
div.lightbox span.end:before {
|
||
content: "⟳";
|
||
font-size: .7em;
|
||
}
|
||
|
||
div.lightbox span.next {
|
||
z-index: 800;
|
||
top: 0;
|
||
right: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 6em;
|
||
height: 100%;
|
||
padding: 0 .3em;
|
||
}
|
||
|
||
div.lightbox span.next:before {
|
||
content: "›";
|
||
}
|
||
|
||
div.lightbox span.start:before {
|
||
content: "⟲";
|
||
font-size: .7em;
|
||
}
|
||
|
||
div.lightbox div.image {
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 80%;
|
||
height: 80%;
|
||
}
|
||
|
||
div.lightbox div.image img {
|
||
filter: drop-shadow(0 0 10px $color-black);
|
||
object-fit: contain;
|
||
max-height: 100%;
|
||
max-width: 100%;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|