[qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider

[Daniel P . Berrangé]

We have a number of screenshots to display, with three fitted across the
width of the screen. The screenshots dominate the usage of screen real
estate on the front page, with other relevant information off the bottom
of the page.

As a step towards increasing the information density of the home screen
replace the horizontally presented screenshots with a rotating carousel
of images.

Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
 _data/screenshots.yml     | 14 ++++++++++++--
 _includes/screenshot.html |  8 ++++++--
 assets/css/style.css      | 10 +++++++---
 index.html                | 36 ++++++++++++++++--------------------
 4 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/_data/screenshots.yml b/_data/screenshots.yml
index 3b8b6a5..2811244 100644
--- a/_data/screenshots.yml
+++ b/_data/screenshots.yml
@@ -3,18 +3,28 @@
   author: "Screenshot by 
[User:Nurnware](https://commons.wikimedia.org/wiki/User:Nurnware)"
   description: "QEMU running the ReactOS operating system on Linux."
   description_md: "QEMU running the [ReactOS](http://www.reactos.org) 
operating system on Linux."
-- file: qemu-arm.png
-  description: "QEMU running a 32-bit ARM binary on a 64-bit Linux system."
+  heading: Full-system emulation
+  blurb: Run operating systems for any machine, on any supported architecture
 - file: qemu-advent-calendar-osv-redis.png
   source: http://www.qemu-advent-calendar.org/#day-11
   author: "Courtesy of Dor Laor"
   description: "The dashboard of the OSv operating system, running in the 
background as a QEMU/KVM process."
   description_md: "The dashboard of the [OSv](http://osv.io) operating system, 
running in the background as a QEMU/KVM process."
+  heading: Virtualization
+  blurb: Run KVM and Xen virtual machines with near native performance
+- file: qemu-arm.png
+  description: "QEMU running a 32-bit ARM binary on a 64-bit Linux system."
+  heading: User-mode emulation
+  blurb: Run programs for another Linux/BSD target, on any supported 
architecture
 - file: qemu-advent-calendar-s390-moon-buggy.png
   source: http://www.qemu-advent-calendar.org/#day-22
   author: "Courtesy of Alexander Graf"
   description: "QEMU emulating an ASCII art game for the System z (s390) 
mainframe."
+  heading: Full-system emulation
+  blurb: Run operating systems for non-native architectures
 - file: qemu-advent-calendar-second-reality.png
   source: http://www.qemu-advent-calendar.org/#day-13
   author: "Courtesy of Paolo Bonzini"
   description: "QEMU running Second Reality, a well-known PC demo from 1993, 
inside the FreeDOS operating system."
+  heading: Full-system emulation
+  blurb: Run demos written for classic / obsolete operating systems
diff --git a/_includes/screenshot.html b/_includes/screenshot.html
index 70b0d11..fb79e5d 100644
--- a/_includes/screenshot.html
+++ b/_includes/screenshot.html
@@ -1,9 +1,13 @@
 {% for screenshot in site.data.screenshots offset: {{include.offset}} limit: 
{{include.limit}} %}
-<a href="screenshots/{{screenshot.file}}" class="colorbox"
+<section>
+  {% if screenshot.heading %}<h3>{{ screenshot.heading }}</h3>{% endif %}
+  <div class="pennant"><a href="screenshots/{{screenshot.file}}" 
class="colorbox"
    title="{{screenshot.description}}"
    data-title="{% if screenshot.description_md %}{{screenshot.description_md | 
markdownify | remove: '<p>' | remove: '</p>' | strip_newlines | escape}}{%
    else %}{{screenshot.description}}{%endif %}{%
    if screenshot.author %} {{screenshot.author | markdownify | remove: '<p>' | 
remove: '</p>' | strip_newlines | escape}} {% endif %}{%
    if screenshot.source %} (&lt;a 
href=&quot;{{screenshot.source}}&quot;&gt;Source&lt;/a&gt;){%endif %}"><img
-   src="screenshots/{{screenshot.file}}" alt="Screenshot: 
{{screenshot.description}}"/></a>
+   src="screenshots/{{screenshot.file}}" alt="Screenshot: 
{{screenshot.description}}"/></a></div>
+  {% if screenshot.blurb %}<p>{{ screenshot.blurb }}</p>{% endif %}
+</section>
 {% endfor %}
diff --git a/assets/css/style.css b/assets/css/style.css
index e09b383..855217b 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -557,13 +557,14 @@
        #featured header
        {
                border-bottom: 1px solid #333333;
+               margin-bottom: 0.5em;
        }
        #featured h2
        {
                margin-bottom: 0em;
        }
 
-       #featured h3
+       #featured .screenshots h3
        {
                padding: 1.5em 0em;
                font-size: 1.6em;
@@ -573,12 +574,15 @@
                margin: 0em 0em 1em 0em;
        }
 
-       #featured .pennant
+       #featured .screenshots .pennant
        {
                font-size: 4em;
+               width: 40%;
+               margin-left: auto;
+               margin-right: auto;
        }
 
-       #featured .pennant img
+       #featured .screenshots .pennant img
        {
                width: 100%;
                object-fit: contain;
diff --git a/index.html b/index.html
index e52868d..48304c8 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 title: QEMU
 layout: home
 colorbox: True
+bxslider: True
 ---
 {% include relative_root.html %}
        <!-- Header -->
@@ -19,25 +20,9 @@ colorbox: True
                        <h2>What is QEMU?</h2>
                        <p>QEMU is a generic and open source machine emulator 
and virtualizer.</p>
                </header>
-               <div class="row">
-                       <section class="4u">
-                               <div class="pennant">{% include screenshot.html 
offset=0 limit=1 %}</div>
-                               <h3>Full-system<br class="only-desktop"> 
emulation</h3>
-                               <p>Run operating systems for any machine, on 
any supported architecture</p>
-                       </section>
-                       <section class="4u">
-                               <div class="pennant">{% include screenshot.html 
offset=1 limit=1 %}</div>
-                               <h3>User-mode<br class="only-desktop"> 
emulation</h3>
-                               <p>Run programs for another Linux/BSD target, 
on any supported architecture</p>
-                       </section>
-                       <section class="4u">
-                               <div class="pennant">{% include screenshot.html 
offset=2 limit=1 %}</div>
-                               <h3>Virtualization</h3>
-                               <p>Run KVM and Xen virtual machines with near 
native performance</p>
-                       </section>
-                       <section style="display: none;">
-                       {% include screenshot.html offset=3 limit=10 %}
-                       </section>
+               <div class="row slider screenshots">
+                       {% include screenshot.html %}
+               </div>
 
 <script src="{{ relative_root }}/assets/js/object-fit.js"></script>
 <script>
@@ -59,9 +44,20 @@ $(window).on("load resize", function() {
 $('.colorbox').on("click.random-namespace", function() {
     return window.hasColorBox;
 })
+
+$(document).ready(function(){
+    $('.slider').bxSlider({
+        auto: true,
+        autoHover: true,
+        mode: "fade",
+        infiniteLoop: true,
+        controls: false,
+        speed: 500,
+        pause: 5000,
+    });
+});
 </script>
 
-               </div>
                <hr>
                <p>QEMU is a member of <a href="{{ relative_root 
}}/conservancy/">Software Freedom Conservancy</a>.</p>
        </div>
-- 
2.26.2