Migrate screens to new directory

- Update screenshot paths in index.html
- Update screenshot files with higher quality assets

css/style.css

@@ -97,6 +97,7 @@ footer {
     background: #000;
     border-top: var(--rd-purple) 5px solid;
     border-bottom: var(--rd-purple) 5px solid;
+    transition: 0.25s;
 }
 
 /* #feature-row {
@@ -127,7 +128,6 @@ img.screenshot {
     border: white 2px solid;
     border-radius: 5px;
     margin: auto;
-    /* width: 150%; */
 }
 
 .feature-card {
@@ -135,10 +135,12 @@ img.screenshot {
     border: white 2px solid;
     border-radius: 5px;
     text-align: left;
-    /* transition: 0.5s; */
-    /* width: 75%; */
 }
 
+/* img.screenshot, .feature-card {
+    max-width: 800px;
+} */
+
 .feature-card h3 {
     color: white;
     font-family: var(--pixel-font);
@@ -146,7 +148,6 @@ img.screenshot {
 }
 
 .feature-card p {
-    /* font-size: larger; */
     font-family: var(--body-font);
 }
 

index.html

@@ -295,58 +295,43 @@
                     <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">
-                        <img src="assets/screens/large/screen01.png" class="d-block w-100 screenshot" alt="" />
+                <div class="carousel-inner pb-md-5" role="listbox">
+                    <div class="carousel-item active feature-container px-md-5">
+                        <img src="assets/screens/screen01.png" class="d-block img-fluid screenshot" alt="The RetroDECK and ES-DE logos on a black screen" />
                         <div class="feature-card px-2 mt-2 mx-auto">
-                            <h3>Feature 1</h3>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
-                                sodales
-                                mattis. Praesent eget lacinia risus, ut bibendum est.</p>
+                            <h3>A One-Stop Shop</h3>
+                            <p>Designed with the Steam Deck in mind, RetroDECK is your perfect emulation companion.
+                                It combines the amazing work of Emulation Station Desktop Edition with our own special features to the best Linux emulation platform around.</p>
                         </div>
                     </div>
 
-                    <div class="carousel-item feature-container">
-                        <img src="assets/screens/large/screen02.png" class="d-block w-100 screenshot" alt="" />
+                    <div class="carousel-item feature-container px-md-5">
+                        <img src="assets/screens/screen02.png" class="d-block img-fluid screenshot" alt="" />
                         <div class="feature-card px-2 mt-2 mx-auto">
-                            <h3>Feature 2</h3>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
-                                sodales
-                                mattis. Praesent eget lacinia risus, ut bibendum est.</p>
+                            <h3>Designed for Gaming Mode</h3>
+                            <p>RetroDECK fits right in with the other games in your Steam library.</p>
                         </div>
                     </div>
 
-                    <div class="carousel-item feature-container">
-                        <img src="assets/screens/large/screen03.png" class="d-block w-100 screenshot" alt="" />
+                    <div class="carousel-item feature-container px-md-5">
+                        <img src="assets/screens/screen03.png" class="d-block img-fluid screenshot" alt="" />
                         <div class="feature-card px-2 mt-2 mx-auto">
-                            <h3>Feature 3</h3>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
-                                sodales
-                                mattis. Praesent eget lacinia risus, ut bibendum est.</p>
+                            <h3>Custom ES-DE Theme</h3>
+                            <p>RetroDECK includes a custom ES-DE theme with pixel text and retro vibes.
+                                But you can also choose any ES-DE theme in the settings menu.
+                            </p>
                         </div>
                     </div>
 
-                    <div class="carousel-item feature-container">
-                        <img src="assets/screens/large/screen04.png" class="d-block w-100 screenshot" alt="" />
+                    <div class="carousel-item feature-container px-md-5">
+                        <img src="assets/screens/screen04.png" class="d-block img-fluid screenshot" alt="" />
                         <div class="feature-card px-2 mt-2 mx-auto">
-                            <h3>Feature 4</h3>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
-                                sodales
-                                mattis. Praesent eget lacinia risus, ut bibendum est.</p>
+                            <h3>Easy art scraping</h3>
+                            <p>Use the built-in scraping integration to grab beautiful artwork and metadata for your games. You can use Screenscraper or The GamesDB.</p>
                         </div>
                     </div>
 
-                    <div class="carousel-item feature-container">
-                        <img src="assets/screens/large/screen05.png" class="d-block w-100 screenshot" alt="" />
-                        <div class="feature-card px-2 mt-2 mx-auto">
-                            <h3>Feature 5</h3>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
-                                sodales
-                                mattis. Praesent eget lacinia risus, ut bibendum est.</p>
-                        </div>
-                    </div>
                 </div>
                 
                 <button class="carousel-control-prev carousel-button" type="button" data-bs-target="#features-carousel" data-bs-slide="prev" id="carousel-prev">