[qemu-web PATCH v2 10/16] Use two column layout to display screenshots and releases

[Daniel P . Berrangé]

Now that the screenshots are using a carousel, they don't consume the
full width of the page. This enables switching to a two column layout
with information about the latest release placed in one column, and
screenshots in the other. This means release information is no longer
hidden off the bottom of the page.

Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
 assets/css/style-desktop.css | 13 +++++++++
 assets/css/style-mobile.css  | 10 -------
 assets/css/style.css         | 56 +++++++++++++++++++++++++++++++++---
 index.html                   | 33 ++++++++++++---------
 4 files changed, 85 insertions(+), 27 deletions(-)

diff --git a/assets/css/style-desktop.css b/assets/css/style-desktop.css
index b7e403a..2b25532 100644
--- a/assets/css/style-desktop.css
+++ b/assets/css/style-desktop.css
@@ -133,6 +133,8 @@
        #featured
        {
                padding: 3em 0em 1em 0em;
+               width: 50%;
+               float: left;
        }
        
        #featured p
@@ -153,6 +155,17 @@
        .\31 1u img { height: 66vw; }
        .\31 2u img { height: 72vw; }
        
+/*********************************************************************************/
+/* Quickstart                                                                  
  */
+/*********************************************************************************/
+
+       #quickstart
+       {
+               padding-top: 5em;
+               width: 50%;
+               float: right;
+       }
+
 
/*********************************************************************************/
 /* Horizontal menu                                                             
  */
 
/*********************************************************************************/
diff --git a/assets/css/style-mobile.css b/assets/css/style-mobile.css
index d045d84..5dab41c 100644
--- a/assets/css/style-mobile.css
+++ b/assets/css/style-mobile.css
@@ -49,20 +49,10 @@
                        background-attachment: fixed;
                }
 
-       #featured
-       {
-               padding-top: 250px;
-       }
-       @media (min-width:500px) {
-               body
-               {
-                       background-image: 
url(../images/qemu_head_400_faint.png);
-               }
                #featured
                {
                        padding-top: 50px;
                }
-       }
 
        section,
        article
diff --git a/assets/css/style.css b/assets/css/style.css
index a12a9e3..6308084 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -548,11 +548,17 @@
        #featured
        {
                position: relative;
-               background: rgba(0,0,0,0.05);
                text-align: center;
                margin-bottom: 2em;
        }
        
+       #featured .container
+       {
+               max-width: 500px;
+               margin-let: auto;
+               margin-right: auto;
+       }
+
        #featured header
        {
                border-bottom: 1px solid #333333;
@@ -576,9 +582,6 @@
        #featured .screenshots .pennant
        {
                font-size: 4em;
-               width: 40%;
-               margin-left: auto;
-               margin-right: auto;
        }
 
        #featured .screenshots .pennant img
@@ -593,3 +596,48 @@
        {
                margin-top: 1.5em;
        }
+
+
+/*********************************************************************************/
+/* Quickstart                                                                  
  */
+/*********************************************************************************/
+
+       #quickstart
+       {
+               margin: 0em;
+               padding: 3em 0em 1em 0em;
+       }
+
+       #quickstart .container
+       {
+               max-width: 500px;
+               margin-let: auto;
+               margin-right: auto;
+       }
+
+       #quickstart ul, #quickstart p
+       {
+               margin: 0em;
+               padding-left: 0.5em;
+       }
+
+       #quickstart ul > li
+       {
+               list-style: none;
+               display: block;
+               padding-bottom: 2em;
+       }
+
+       #quickstart ul > li > strong
+       {
+               list-style: none;
+               display: block;
+               font-size: 2em;
+               margin-bottom: 0.2em;
+       }
+
+       #quickstart li span
+       {
+               display: inline-block;
+               padding-left: 1.5em;
+       }
diff --git a/index.html b/index.html
index 4501811..d057a87 100644
--- a/index.html
+++ b/index.html
@@ -12,11 +12,29 @@ bxslider: True
                        <span class="tag">A generic and open source machine 
emulator and virtualizer</p>
                </div>
        </div>
-       
+
+<!-- Main -->
+<div id="quickstart">
+       <div class="container">
+               <ul>
+{% for release in site.data.releases offset: 0 limit: 1 %}
+                       <li><strong>Latest release: <a
+  
href="https://download.qemu.org/qemu-{{release.branch}}.{{release.patch}}.tar.xz";>{{release.branch}}.{{release.patch}}</a></strong>
+                         <span>{{release.date}} </span>
+                         <span><a 
href="https://download.qemu.org/qemu-{{release.branch}}.{{release.patch}}.tar.xz.sig";>signature</a></span>
+                         <span><a 
href="https://wiki.qemu.org/ChangeLog/{{release.branch}}";>changes</a></span>
+                         <br>
+                         <span><a href="{{ relative_root }}/download">Other 
releases</a></span>
+                       </li>
+{% endfor %}
+               </ul>
+       </div>
+</div>
+
 <!-- Featured -->
 <div id="featured">
        <div class="container">
-               <div class="row slider screenshots">
+               <div class="slider screenshots">
                        {% include screenshot.html %}
                </div>
 
@@ -56,17 +74,6 @@ $(document).ready(function(){
        </div>
 </div>
 
-<!-- Main -->
-       <div id="releases">
-               <header>
-                       <h2>Latest releases</h2>
-               </header>
-               <div class="container">
-                       {% include releases.html %}
-               </div>
-       </div>
-
-
 <script>
        $(window).on("scroll", function() {
                isScroll = window.scrollY < 120;
-- 
2.26.2