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é <[email protected]> --- 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
