inhji/chiya
inhji/chiya
1
1
Fork 0
Code Issues 8 Pull requests 9 Activity

move lightbox

Browse source
This commit is contained in:
Inhji 2023-03-13 02:03:48 +01:00
parent c969e6e90f
commit 5caca9d532
2 changed files with 39 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
assets/css/app.css
View file

@ -2,39 +2,5 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* Lightbox Image */
.lightbox {
/* Default to hidden */
display: none;
/* Overlay entire screen */
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* A bit of padding around image */
padding: 1em;
/* Translucent background */
background: rgba(0, 0, 0, 0.8);
}
/* Unhide the lightbox when it's the target */
.lightbox:target {
display: block;
}
.lightbox span {
/* Full width and height */
display: block;
width: 100%;
height: 100%;
/* Size and position background image */
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
@import "./lolight.css";
@import "./lightbox.css";

37
assets/css/lightbox.css Normal file
View file

@ -0,0 +1,37 @@
/* Lightbox Image */
.lightbox {
/* Default to hidden */
display: none;
/* Overlay entire screen */
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* A bit of padding around image */
padding: 1em;
/* Translucent background */
background: rgba(0, 0, 0, 0.8);
}
/* Unhide the lightbox when it's the target */
.lightbox:target {
display: block;
}
.lightbox span {
/* Full width and height */
display: block;
width: 100%;
height: 100%;
/* Size and position background image */
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}