Link to article: fragment:uncut-gem.
#u-start{$num} {
display: none;
}
#u-end{$num} {
display: none;
}
.popup {
position: absolute;
z-index: 1;
top: 15%;
left: 50%;
transform: translate(-50%, -50%);
}
.big-image {
position: fixed !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(128,255,128,0.8);
overflow: hidden;
width: 100%;
height: 100%;
display: none;
z-index: 1000;
}
.big-image {
opacity: 0;
background: rgba(var(--dblue));
border-radius: 6px;
overflow: hidden;
outline: none;
border: 3px solid rgba(var(--gold), 1);
border-radius: 15px;
transition: .5s ease;
}
.big-image:not(.glyphs) img {
width: 100%;
height: 100%;
object-fit: contain !important;
display: block;
background: #000 !important;
}
.big-image.glyphs img {
width: 100%;
height: 100%;
object-fit: contain !important;
display: block;
background: #fff !important;
}
#u-start{$num}:target ~ .big-image{
display: block;
opacity: 1;
}
#u-end{$num}:target ~ .big-image{
display: none;
opacity: 0;
}
.big-image .blockquote {
color: rgba(128,255,128,0.8);
overflow: hidden;
display: block;
}
.popup {
font-size: .85em;
margin: auto;
width: auto;
background-color: rgba(var(--lblue),.8);
border: 1px solid rgb(var(--gold), 1);
border-radius: 15px;
text-align: center;
padding: .1em .5em;
}
@media (max-width: 600px) {
.popup {
font-size: clamp(0.25rem, 1vw, 0.35rem) !important;
line-height: 1.1;
border-radius: 5px;
}
}
big-image
{$alt-class}
popup