120 lines
2.7 KiB
CSS
120 lines
2.7 KiB
CSS
/*
|
|
Copyright (c) 2024 by Jennifer (https://codepen.io/jwjertzoch/pen/JjyGeRy)
|
|
|
|
Permission is hereby granted, free of charge, to any person
|
|
obtaining a copy of this software and associated documentation
|
|
files (the "Software"), to deal in the Software without restriction,
|
|
including without limitation the rights to use, copy, modify,
|
|
merge, publish, distribute, sublicense, and/or sell copies of
|
|
the Software, and to permit persons to whom the Software is
|
|
furnished to do so, subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall
|
|
be included in all copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
|
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
|
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
|
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
|
DEALINGS IN THE SOFTWARE.
|
|
*/
|
|
|
|
.carousel {
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
|
|
.slides {
|
|
width: 100%;
|
|
display: flex;
|
|
overflow-x: scroll;
|
|
scrollbar-width: none;
|
|
scroll-snap-type: x mandatory;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.slides::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.slides-item {
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
font-size: 100px;
|
|
height: 600px;
|
|
justify-content: center;
|
|
margin: 0 1rem;
|
|
position: relative;
|
|
scroll-snap-align: start;
|
|
transform: scale(1);
|
|
transform-origin: center center;
|
|
transition: transform .5s;
|
|
width: 100%;
|
|
}
|
|
|
|
.carousel__nav {
|
|
padding: 1.25rem .5rem;
|
|
}
|
|
|
|
.slider-nav {
|
|
align-items: center;
|
|
background-color: #ddd;
|
|
border-radius: 50%;
|
|
color: #000;
|
|
display: inline-flex;
|
|
height: 1.5rem;
|
|
justify-content: center;
|
|
padding: .5rem;
|
|
position: relative;
|
|
text-decoration: none;
|
|
width: 1.5rem;
|
|
}
|
|
|
|
.skip-link {
|
|
height: 1px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: auto;
|
|
width: 1px;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
align-items: center;
|
|
background-color: #000;
|
|
color: #fff;
|
|
display: flex;
|
|
font-size: 30px;
|
|
height: 30px;
|
|
justify-content: center;
|
|
opacity: .8;
|
|
text-decoration: none;
|
|
width: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.light-theme .slider-nav {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.dark-theme .slider-nav {
|
|
background-color: #0005;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.no-theme .slider-nav {
|
|
background-color: #ddd;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.no-theme .slider-nav {
|
|
background-color: #0005;
|
|
}
|
|
}
|