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é <[email protected]> --- _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 %} (<a href="{{screenshot.source}}">Source</a>){%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
