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>
|
<p class="Carousel-text">Made with Eleventy and SCSS.</p>
|
||||||
</div>
|
</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>
|
</main>
|
||||||
|
|
||||||
<footer class="Footer" id="footer">
|
<footer class="Footer" id="footer">
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
block-size: 100%;
|
block-size: 100%;
|
||||||
inline-size: 60%;
|
inline-size: 70%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -20,4 +20,51 @@
|
||||||
border-color: var(--c-purple);
|
border-color: var(--c-purple);
|
||||||
transition: border-color 500ms;
|
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 {
|
@layer layout {
|
||||||
.Main {
|
.Main {
|
||||||
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
align-items: center;
|
||||||
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue