Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-23 23:25:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Style adjustments to carousel

Browse source
This commit is contained in:
Adam Iannazzone 2024-09-27 13:05:42 -04:00
parent 176f7a77e3
commit 0cc667ef4f
2 changed files with 45 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
css/style.css
View file

@ -134,8 +134,9 @@ img.screenshot {
background: var(--rd-blue); background: var(--rd-blue);
border: white 2px solid; border: white 2px solid;
border-radius: 5px; border-radius: 5px;
text-align: left;
/* transition: 0.5s; */ /* transition: 0.5s; */
width: 75%; /* width: 75%; */
} }
.feature-card h3 { .feature-card h3 {
@ -149,6 +150,28 @@ img.screenshot {
font-family: var(--body-font); font-family: var(--body-font);
} }
img.d-pad {
opacity: 0%;
transition: 0.25s;
}
.carousel-button:hover img.d-pad {
opacity: 100%;
transition: 0.25s;
}
.carousel-indicators {
opacity: 0%;
pointer-events: none;
transition: 0.25s;
}
.carousel:hover .carousel-indicators {
opacity: 100%;
pointer-events: auto;
transition: 0.25s;
}
/* Link Styles */ /* Link Styles */
.jumbotron p a, footer a, a.btn { .jumbotron p a, footer a, a.btn {
color: var(--rd-purple); color: var(--rd-purple);

38
index.html
View file

@ -290,10 +290,17 @@
<!-- Screenshots and Features as Bootstrap Carousel --> <!-- Screenshots and Features as Bootstrap Carousel -->
<div class="container-fluid mb-4" id="features"> <div class="container-fluid mb-4" id="features">
<div class="carousel slide py-2" id="features-carousel"> <div class="carousel slide py-2" id="features-carousel">
<div class="carousel-inner"> <div class="carousel-indicators">
<button type="button" data-bs-target="#features-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#features-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#features-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#features-carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#features-carousel" data-bs-slide-to="4" aria-label="Slide 5"></button>
</div>
<div class="carousel-inner pb-md-5">
<div class="carousel-item active feature-container"> <div class="carousel-item active feature-container">
<img src="assets/screens/large/screen01.png" class="d-block w-75 screenshot" alt="" /> <img src="assets/screens/large/screen01.png" class="d-block w-100 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto"> <div class="feature-card px-2 mt-2 mx-auto">
<h3>Feature 1</h3> <h3>Feature 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales sodales
@ -302,8 +309,8 @@
</div> </div>
<div class="carousel-item feature-container"> <div class="carousel-item feature-container">
<img src="assets/screens/large/screen02.png" class="d-block w-75 screenshot" alt="" /> <img src="assets/screens/large/screen02.png" class="d-block w-100 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto"> <div class="feature-card px-2 mt-2 mx-auto">
<h3>Feature 2</h3> <h3>Feature 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales sodales
@ -312,8 +319,8 @@
</div> </div>
<div class="carousel-item feature-container"> <div class="carousel-item feature-container">
<img src="assets/screens/large/screen03.png" class="d-block w-75 screenshot" alt="" /> <img src="assets/screens/large/screen03.png" class="d-block w-100 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto"> <div class="feature-card px-2 mt-2 mx-auto">
<h3>Feature 3</h3> <h3>Feature 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales sodales
@ -322,8 +329,8 @@
</div> </div>
<div class="carousel-item feature-container"> <div class="carousel-item feature-container">
<img src="assets/screens/large/screen04.png" class="d-block w-75 screenshot" alt="" /> <img src="assets/screens/large/screen04.png" class="d-block w-100 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto"> <div class="feature-card px-2 mt-2 mx-auto">
<h3>Feature 4</h3> <h3>Feature 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales sodales
@ -332,8 +339,8 @@
</div> </div>
<div class="carousel-item feature-container"> <div class="carousel-item feature-container">
<img src="assets/screens/large/screen05.png" class="d-block w-75 screenshot" alt="" /> <img src="assets/screens/large/screen05.png" class="d-block w-100 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto"> <div class="feature-card px-2 mt-2 mx-auto">
<h3>Feature 5</h3> <h3>Feature 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales sodales
@ -341,15 +348,12 @@
</div> </div>
</div> </div>
</div> </div>
<button class="carousel-control-prev" type="button" data-bs-target="#features-carousel" data-bs-slide="prev" id="carousel-prev">
<!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span> --> <button class="carousel-control-prev carousel-button" type="button" data-bs-target="#features-carousel" data-bs-slide="prev" id="carousel-prev">
<img class="d-pad d-none d-md-block" src="assets/pixel-icons/steamdeck_dpad_left_outline.svg" aria-hidden="true"/> <img class="d-pad d-none d-md-block" src="assets/pixel-icons/steamdeck_dpad_left_outline.svg" aria-hidden="true"/>
<span class="visually-hidden">Previous</span>
</button> </button>
<button class="carousel-control-next" type="button" data-bs-target="#features-carousel" data-bs-slide="next" id="carousel-next"> <button class="carousel-control-next carousel-button" type="button" data-bs-target="#features-carousel" data-bs-slide="next" id="carousel-next">
<!-- <span class="carousel-control-next-icon" aria-hidden="true"></span> -->
<img class="d-pad d-none d-md-block" src="assets/pixel-icons/steamdeck_dpad_right_outline.svg" aria-hidden="true"/> <img class="d-pad d-none d-md-block" src="assets/pixel-icons/steamdeck_dpad_right_outline.svg" aria-hidden="true"/>
<span class="visually-hidden">Next</span>
</button> </button>
</div> </div>
</div> </div>