Carousel buttons
This commit is contained in:
parent
c19a8f4c56
commit
6abf8d0918
3 changed files with 61 additions and 1 deletions
|
@ -47,6 +47,16 @@
|
|||
|
||||
<p class="Carousel-text">Made with Eleventy and SCSS.</p>
|
||||
</div>
|
||||
|
||||
<button class="Carousel-controls Carousel-controls--left"
|
||||
id="carousel-left">
|
||||
<i class="fa-solid fa-chevron-left" title="Previous item"></i>
|
||||
</button>
|
||||
|
||||
<button class="Carousel-controls Carousel-controls--right"
|
||||
id="carousel-right">
|
||||
<i class="fa-solid fa-chevron-right" title="Next item"></i>
|
||||
</button>
|
||||
</main>
|
||||
|
||||
<footer class="Footer" id="footer">
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
align-items: center;
|
||||
margin: auto;
|
||||
block-size: 100%;
|
||||
inline-size: 60%;
|
||||
inline-size: 70%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
@ -20,4 +20,51 @@
|
|||
border-color: var(--c-purple);
|
||||
transition: border-color 500ms;
|
||||
}
|
||||
|
||||
.Carousel-controls {
|
||||
--Carousel-controls-translateY: -100%;
|
||||
|
||||
font-size: var(--t-step-2);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
translate: 0 var(--Carousel-controls-translateY);
|
||||
}
|
||||
|
||||
.Carousel-controls--left {
|
||||
order: -100;
|
||||
}
|
||||
|
||||
.Carousel-controls--right {
|
||||
order: 100;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.Carousel-controls {
|
||||
transition: color 300ms;
|
||||
}
|
||||
|
||||
.Carousel-controls:hover, .Carousel-controls:focus {
|
||||
color: var(--c-purple);
|
||||
transition: color 300ms;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.Carousel-controls {
|
||||
transition: translate 300ms, padding-inline-end 300ms;
|
||||
}
|
||||
|
||||
.Carousel-controls--left:hover, .Carousel-controls--left:focus {
|
||||
padding-inline-end: 0.25rem;
|
||||
transition: translate 300ms, padding-inline-end 300ms;
|
||||
translate: -0.25rem var(--Carousel-controls-translateY);
|
||||
}
|
||||
|
||||
.Carousel-controls--right:hover, .Carousel-controls--right:focus {
|
||||
padding-inline-start: 0.25rem;
|
||||
transition: translate 300ms, padding-inline-end 300ms;
|
||||
translate: 0.25rem var(--Carousel-controls-translateY);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
@layer layout {
|
||||
.Main {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
inline-size: 90%;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue