@@ -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 */
/*********************************************************************************/
@@ -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
@@ -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;
+ }
@@ -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;
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(-)