On Tue, Oct 27, 2020 at 01:20:05PM +0000, Daniel P. Berrangé wrote: > 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(-)
The carousel slider looks effective; also makes the page a little more cleaner. And I also noticed -- if I click on an image, conveniently enough, the slider lets me rotate through the images manually as well. Reviewed-by: Kashyap Chamarthy <[email protected]> > > 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 > > -- /kashyap
