Improve screenshot page

A few ideas were taken from #241.
qbittorrent · Feb 22, 2025 · bcd7c73 · bcd7c73
1 parent c5bfadf
commit bcd7c73
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 28 deletions.
diff --git a/_site/css/style.css b/_site/css/style.css
@@ -52,11 +52,12 @@ div .flexbox_screenshots {
   gap: 1.5em 1em;
 }
 
-div .flexbox_screenshots div {
+div .flexbox_screenshots figure {
+  margin: 0;
   text-align: center;
 }
 
-div .flexbox_screenshots div img {
+div .flexbox_screenshots figure img {
   margin-left: auto;
   margin-right: auto;
 }

diff --git a/_site/screenshots.html b/_site/screenshots.html
@@ -57,30 +57,30 @@ <h3 id="linux">
   <a class="header-anchor" href="#linux">Linux</a>
 </h3>
 <div class="flexbox_screenshots">
-  <div>
+  <figure>
     <a href="img/screenshots/linux/1.webp">
       <img src="img/screenshots/linux/1.webp" alt="Main window (General tab collapsed)" width="256">
     </a>
-    Main window (General tab collapsed)
-  </div>
-  <div>
+    <figcaption>Main window (General tab collapsed)</figcaption>
+  </figure>
+  <figure>
     <a href="img/screenshots/linux/2.webp">
       <img src="img/screenshots/linux/2.webp" alt="Main window (General tab expanded)" width="256">
     </a>
-    Main window (General tab expanded)
-  </div>
-  <div>
+    <figcaption>Main window (General tab expanded)</figcaption>
+  </figure>
+  <figure>
     <a href="img/screenshots/linux/3.webp">
       <img src="img/screenshots/linux/3.webp" alt="Options dialog" width="256">
     </a>
-    Options dialog
-  </div>
-  <div>
+    <figcaption>Options dialog</figcaption>
+  </figure>
+  <figure>
     <a href="img/screenshots/linux/4.webp">
       <img src="img/screenshots/linux/4.webp" alt="Search engine" width="256">
     </a>
-    Search engine
-  </div>
+    <figcaption>Search engine</figcaption>
+  </figure>
 </div>
 
               </div>

diff --git a/src/css/style.css b/src/css/style.css
@@ -52,11 +52,12 @@ div .flexbox_screenshots {
   gap: 1.5em 1em;
 }
 
-div .flexbox_screenshots div {
+div .flexbox_screenshots figure {
+  margin: 0;
   text-align: center;
 }
 
-div .flexbox_screenshots div img {
+div .flexbox_screenshots figure img {
   margin-left: auto;
   margin-right: auto;
 }

diff --git a/src/screenshots.liquid b/src/screenshots.liquid
@@ -8,28 +8,28 @@ permalink: "{{ page.filePathStem }}.html"
   <a class="header-anchor" href="#linux">Linux</a>
 </h3>
 <div class="flexbox_screenshots">
-  <div>
+  <figure>
     <a href="img/screenshots/linux/1.webp">
       <img src="img/screenshots/linux/1.webp" alt="Main window (General tab collapsed)" width="256">
     </a>
-    Main window (General tab collapsed)
-  </div>
-  <div>
+    <figcaption>Main window (General tab collapsed)</figcaption>
+  </figure>
+  <figure>
     <a href="img/screenshots/linux/2.webp">
       <img src="img/screenshots/linux/2.webp" alt="Main window (General tab expanded)" width="256">
     </a>
-    Main window (General tab expanded)
-  </div>
-  <div>
+    <figcaption>Main window (General tab expanded)</figcaption>
+  </figure>
+  <figure>
     <a href="img/screenshots/linux/3.webp">
       <img src="img/screenshots/linux/3.webp" alt="Options dialog" width="256">
     </a>
-    Options dialog
-  </div>
-  <div>
+    <figcaption>Options dialog</figcaption>
+  </figure>
+  <figure>
     <a href="img/screenshots/linux/4.webp">
       <img src="img/screenshots/linux/4.webp" alt="Search engine" width="256">
     </a>
-    Search engine
-  </div>
+    <figcaption>Search engine</figcaption>
+  </figure>
 </div>