studio-variable/botascopia-webiste-static
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

reorganisation style

Browse source
This commit is contained in:
Julie Blanc 2026-02-15 16:49:03 +01:00
parent e390d8cd5b
commit 718ca47696
20 changed files with 1187 additions and 821 deletions
Download patch file Download diff file Expand all files Collapse all files

154
assets/css/_slideshow.scss
View file

@ -1,154 +0,0 @@
$slideshow-items: 3;
.slideshow {
height: 100%;
width: 100%;
margin-left: 0;
// overflow-y: hidden;
overflow: visible;
--arrow-space: 40px;
*{
position: relative;
}
}
.slideshow-container{
height: 100%;
width: 100%;
overflow: hidden;
}
.slideshow-inner {
width: calc(100% * var(--items));
height: 100%;
}
.slideshow-item {
width: calc(100%/var(--items));
height: 100%;
float: left;
display: flex;
flex-direction: column;
align-items: center;
figure{
width: calc(100% - var(--arrow-space)*2);
height: calc(100% - var(--unit));
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
figcaption{
width: calc(100% - var(--arrow-space)*2);
font-size: var(--fs-small);
height: calc(var(--unit)*2);
padding-top: calc(var(--padding-inner)*0.5);
}
}
/* Display slides (input checked)
--------------------------------------------------------
-------------------------------------------------------- */
.slideshow-inner {
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
.slideshow-item {
transition: all 0.5s ease-out;
}
/* Controls (arrows)
--------------------------------------------------------
-------------------------------------------------------- */
.slideshow-controls {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.slide_controls {
width: 40px;
height: 100%;
position: absolute;
top: 0;
cursor: pointer;
will-change: z-index;
}
.slide_controls-previous {
left: 0;
}
.slide_controls-next {
right: 0;
}
span.controls {
height: 100%;
position: absolute;
width: 100%;
}
span.controls::before,
span.controls::after {
padding: 10px;
top: 50%;
transform: translateY(-50%);
position: absolute;
// background: white;
font-size: 20px;
z-index: 9;
}
.slide_controls-previous:hover ~ span.controls:before,
.slide_controls-next:hover ~ span.controls:after {
// background: #bfbfbf!important;
opacity: 0.7;
}
span.controls::before {
content: "❬";
left: -1px;
}
span.controls::after {
content: "❭";
right: -1px;
}
/* Position slide + Control arrows display -------------------------------------------- */
@for $i from 1 through $slideshow-items {
#slide-input-#{$i}:checked ~ .slideshow-inner {
left: #{($i - 1) * -100%};
}
}
@for $i from 1 through $slideshow-items {
#slide-input-#{$i}:checked ~ .slideshow-controls label {
z-index: -1;
}
#slide-input-#{$i}:checked ~ .slideshow-controls label:nth-of-type(#{$i * 2 - 1}),
#slide-input-#{$i}:checked ~ .slideshow-controls label:nth-of-type(#{$i * 2}) {
z-index: 11;
}
}