studio-variable/index-main
4
0
Fork 0
Code Issues 14 Pull requests Projects Releases Packages Wiki Activity Actions

fix #15
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
isUnknown 2026-02-27 15:24:50 +01:00
parent c34a564aa5
commit 9f2b85087d
6 changed files with 214 additions and 254 deletions
Download patch file Download diff file Expand all files Collapse all files

148
assets/css/components/_slider-before-after.scss
View file

@ -1,86 +1,80 @@
.slider-before-after {
width: 100%;
.slider-before-after{
max-width: 700px;
z-index: 300;
display: grid;
place-content: center;
position: relative;
overflow: hidden;
--position: 50%;
width: 100%;
img {
display: block;
max-width: 100%;
}
max-width: 700px;
z-index: 300;
display: grid;
place-content: center;
.image-container {
position: relative;
overflow: hidden;
--position: 50%;
width: 100%;
// max-width: 800px;
// max-height: 90vh;
// aspect-ratio: 1/1;
}
img {
display: block;
max-width: 100%;
}
.slider-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.image-before {
position: absolute;
inset: 0;
width: var(--position);
}
.image-container {
position: relative;
width: 100%;
// max-width: 800px;
// max-height: 90vh;
// aspect-ratio: 1/1;
}
.slider {
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
/* for Firefox */
width: 100%;
height: 100%;
}
.slider-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.image-before {
position: absolute;
inset: 0;
width: var(--position);
}
.slider {
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
/* for Firefox */
width: 100%;
height: 100%;
}
.slider:focus-visible ~ .slider-button {
outline: 5px solid black;
outline-offset: 3px;
}
.slider-line {
position: absolute;
inset: 0;
width: .2rem;
height: 100%;
background-color: #fff;
/* z-index: 10; */
left: var(--position);
transform: translateX(-50%);
pointer-events: none;
}
.slider-button {
position: absolute;
background-color: #fff;
color: black;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
/* z-index: 100; */
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}
.slider:focus-visible ~ .slider-button {
outline: 5px solid black;
outline-offset: 3px;
}
}
.slider-line {
position: absolute;
inset: 0;
width: 0.2rem;
height: 100%;
background-color: #fff;
/* z-index: 10; */
left: var(--position);
transform: translateX(-50%);
pointer-events: none;
}
.slider-button {
position: absolute;
background-color: #fff;
color: black;
padding: 0.5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
/* z-index: 100; */
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, 0.5);
}
}

2
assets/css/components/_text.scss
View file

@ -53,7 +53,7 @@
video,
figure,
img,
img:not(.slider-before-after img),
picture {
width: 100%;
height: auto;