Refine docs screenshot labels and enlarge showcase slider

Author: Shripad735

README.md

@@ -4,25 +4,25 @@ Cross-platform desktop downloader for YouTube and other platforms, built with El
 
 ## Screenshots
 
-### Dashboard 01
+### Link & Fetch Workspace
 
 ![StreamFetch Main Dashboard](Images/Dashboard-01.png)
 
 Main dashboard for pasting a link, fetching metadata, selecting clip range, enabling Turbo download, adding items to queue, and using the built-in `yt-dlp` updater.
 
-### Dashboard 02
+### Queue Overview & Logs
 
 ![StreamFetch Active Queue](Images/Dashboard-02.png)
 
 Active queue workspace with download overview, per-job status, and inline logs for the selected item.
 
-### Dashboard 03
+### History Archive
 
 ![StreamFetch History Dashboard](Images/Dashboard-03.png)
 
 History dashboard for browsing past downloads, completed items, failed jobs, and archived activity.
 
-### Dashboard 04
+### Defaults & Updates Settings
 
 ![StreamFetch Settings Dashboard](Images/Dashboard-04.png)
 

docs/index.html

@@ -174,28 +174,28 @@ <h2>Large dashboard views that cycle through the full StreamFetch workspace</h2>
             <figure class="showcase-card" style="--delay: 0s;">
               <img src="./assets/screenshots/Dashboard-01.png" alt="Main StreamFetch dashboard with paste link, fetch info, clip range, turbo download, queue action, and yt-dlp updater" />
               <figcaption>
-                <strong>Dashboard 01</strong>
+                <strong>Link &amp; Fetch Workspace</strong>
                 Main dashboard for pasting a link, fetching info, selecting range, enabling Turbo download, and adding items to queue.
               </figcaption>
             </figure>
             <figure class="showcase-card" style="--delay: 6s;">
               <img src="./assets/screenshots/Dashboard-02.png" alt="Active queue dashboard with download overview and logs" />
               <figcaption>
-                <strong>Dashboard 02</strong>
+                <strong>Queue Overview &amp; Logs</strong>
                 Active queue view with overview cards, live progress, and detailed logs for the selected download.
               </figcaption>
             </figure>
             <figure class="showcase-card" style="--delay: 12s;">
               <img src="./assets/screenshots/Dashboard-03.png" alt="History dashboard with past downloads and archive list" />
               <figcaption>
-                <strong>Dashboard 03</strong>
+                <strong>History Archive</strong>
                 History workspace for browsing past downloads, completed jobs, and archived activity.
               </figcaption>
             </figure>
             <figure class="showcase-card" style="--delay: 18s;">
               <img src="./assets/screenshots/Dashboard-04.png" alt="Settings dashboard with saved defaults and app updater options" />
               <figcaption>
-                <strong>Dashboard 04</strong>
+                <strong>Defaults &amp; Updates Settings</strong>
                 Settings view for saving defaults, tuning preferences, and checking updater status.
               </figcaption>
             </figure>
@@ -205,28 +205,28 @@ <h2>Large dashboard views that cycle through the full StreamFetch workspace</h2>
             <article class="shot-note">
               <span>01</span>
               <div>
-                <h3>Main Dashboard</h3>
+                <h3>Link &amp; Fetch Workspace</h3>
                 <p>Paste a link, fetch metadata, trim with Clip Studio, enable Turbo download, and queue the job.</p>
               </div>
             </article>
             <article class="shot-note">
               <span>02</span>
               <div>
-                <h3>Active Queue</h3>
+                <h3>Queue Overview &amp; Logs</h3>
                 <p>Monitor the overview, inspect the selected job, and follow logs while downloads are running.</p>
               </div>
             </article>
             <article class="shot-note">
               <span>03</span>
               <div>
-                <h3>History</h3>
+                <h3>History Archive</h3>
                 <p>Review previous downloads, failed jobs, and archived activity in one structured list.</p>
               </div>
             </article>
             <article class="shot-note">
               <span>04</span>
               <div>
-                <h3>Settings</h3>
+                <h3>Defaults &amp; Updates Settings</h3>
                 <p>Save defaults, manage clipboard watcher behavior, and access app and `yt-dlp` updater options.</p>
               </div>
             </article>

docs/styles.css

@@ -48,7 +48,7 @@ body {
 .site-header,
 main,
 .site-footer {
-  width: min(1120px, calc(100% - 2.2rem));
+  width: min(1360px, calc(100% - 2.2rem));
   margin-inline: auto;
 }
 
@@ -362,13 +362,13 @@ h2 {
 .shot-showcase {
   margin-top: 1rem;
   display: grid;
-  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
+  grid-template-columns: 1fr;
   gap: 1rem;
 }
 
 .shot-stage {
   position: relative;
-  min-height: 760px;
+  min-height: 920px;
   border: 1px solid rgba(255, 255, 255, 0.65);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.8));
   border-radius: var(--radius);
@@ -388,8 +388,8 @@ h2 {
   border: 1px solid var(--line);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 253, 0.92));
   opacity: 0;
-  transform: translateY(28px) scale(0.98);
-  animation: showcase-cycle 24s infinite;
+  transform: translateX(120px) scale(0.985);
+  animation: showcase-slide 24s infinite;
   animation-delay: var(--delay);
 }
 
@@ -418,6 +418,7 @@ h2 {
 
 .shot-notes {
   display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 0.85rem;
 }
 
@@ -524,20 +525,20 @@ h2 {
   }
 }
 
-@keyframes showcase-cycle {
+@keyframes showcase-slide {
   0% {
     opacity: 0;
-    transform: translateY(28px) scale(0.98);
+    transform: translateX(120px) scale(0.985);
   }
   4%,
   22% {
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: translateX(0) scale(1);
   }
   25%,
   100% {
     opacity: 0;
-    transform: translateY(-16px) scale(1.01);
+    transform: translateX(-120px) scale(1.01);
   }
 }
 
@@ -559,7 +560,11 @@ h2 {
   }
 
   .shot-stage {
-    min-height: 620px;
+    min-height: 720px;
+  }
+
+  .shot-notes {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
@@ -584,14 +589,18 @@ h2 {
   }
 
   .shot-stage {
-    min-height: 460px;
+    min-height: 520px;
     padding: 0.7rem;
   }
 
   .showcase-card {
     inset: 0.7rem;
   }
 
+  .shot-notes {
+    grid-template-columns: 1fr;
+  }
+
   main {
     padding-top: 1.75rem;
   }