* [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information
@ 2020-10-27 13:19 Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 01/16] Convert files to UNIX line endings Daniel P. Berrangé
` (16 more replies)
0 siblings, 17 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:19 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
This is a v2 of:
https://lists.gnu.org/archive/html/qemu-devel/2020-10/msg07025.html
This series started off as a desire to add an "Edit page" link to every
page on the site. In doing this I felt that the footer would benefit
from simplication so that it was not a massive wall of links,
duplicating links elsewhere in the navigation or content pages. Then
after response to v1, I realized that the home page actually needed
alot more design work to better present information to contributors
immediately.
The key theme was to ensure that the home page of the website has all
the important information available on screen without requiring the
user to scroll down or otherwise search for it.
I also add gitlab CI jobs so that users can push a branch to gitlab and
then browse the rendered result.
eg see this pipeline:
https://gitlab.com/berrange/qemu-web/-/pipelines/208194087
and the rendered result of this series:
https://berrange.gitlab.io/qemu-web/
Or browsable at
https://gitlab.com/berrange/qemu-web/-/jobs/814392582/artifacts/browse/publ=
ic/
Or download ZIP at
https://gitlab.com/berrange/qemu-web/-/jobs/814392582/artifacts/download
notice how the resulting content needs to cope with being used from a
variety of different paths. IOW, we cannot use absolute hyperlinks that
assume the root is "/". Jekyll doesn't make this easy, so we use a hack
with a custom template that sets a variable we can then reference.
The logical next step for this would be to accept merge requests, so
that once the user saves their edits in gitlab, they can directly submit
a MR, instead of sending via email. I noticed we don't currently have a
CONTRIBUTING.md file in qemu-web.git telling people how to submit. So
this series includes such a file directing people to send patches via
email for now.
Daniel P. Berrang=C3=A9 (16):
Convert files to UNIX line endings
gitlab: introduce a CI job to publish the site content
make all links be relative to the root
Make page header nav narrower
Introduce support for "bxslider" jquery add on
Rework display of screenshots to use a carousel slider
Compress the two front page headings into one
Simplify copyright and integrate into footer
Put a full SFC membership blurb in footer of every page
Use two column layout to display screenshots and releases
Bring contribution links out of the footer into the home page
Add recent blog posts to the front page featured content
Move wiki link from footer into the header navbar
Simplify and restructure the page footer
Add link to "page source" for all pages
Add a CONTRIBUTING.md file as guidance for contributors
.gitlab-ci.yml | 16 +
CONTRIBUTING.md | 32 +
_config.yml | 1 +
_data/screenshots.yml | 14 +-
_includes/assets.html | 32 +-
_includes/copyright.html | 8 -
_includes/footer.html | 33 +-
_includes/nav.html | 13 +-
_includes/relative_root.html | 12 +
_includes/screenshot.html | 8 +-
_includes/sidebar.html | 6 +-
_layouts/archive.html | 4 +-
_layouts/blog.html | 4 +-
_layouts/home.html | 2 +-
_layouts/page.html | 2 +-
assets/css/jquery.bxslider.css | 179 ++++
assets/css/style-desktop.css | 581 ++++++------
assets/css/style-mobile.css | 720 +++++++-------
assets/css/style.css | 1252 +++++++++++++------------
assets/js/jquery.bxslider.js | 1607 ++++++++++++++++++++++++++++++++
blog/index.html | 4 +-
index.html | 195 ++--
22 files changed, 3312 insertions(+), 1413 deletions(-)
create mode 100644 .gitlab-ci.yml
create mode 100644 CONTRIBUTING.md
delete mode 100644 _includes/copyright.html
create mode 100644 _includes/relative_root.html
create mode 100644 assets/css/jquery.bxslider.css
create mode 100644 assets/js/jquery.bxslider.js
--=20
2.26.2
^ permalink raw reply [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 01/16] Convert files to UNIX line endings
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 17:40 ` Thomas Huth
2020-10-27 13:20 ` [qemu-web PATCH v2 02/16] gitlab: introduce a CI job to publish the site content Daniel P. Berrangé
` (15 subsequent siblings)
16 siblings, 1 reply; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
assets/css/style-desktop.css | 586 ++++++++---------
assets/css/style-mobile.css | 750 ++++++++++-----------
assets/css/style.css | 1184 +++++++++++++++++-----------------
index.html | 178 ++---
4 files changed, 1349 insertions(+), 1349 deletions(-)
diff --git a/assets/css/style-desktop.css b/assets/css/style-desktop.css
index b6c5aa1..ce58fe2 100644
--- a/assets/css/style-desktop.css
+++ b/assets/css/style-desktop.css
@@ -1,295 +1,295 @@
-/*
- Linear by TEMPLATED
- templated.co @templatedco
- Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-*/
-
-/*********************************************************************************/
-/* Grid */
-/*********************************************************************************/
-
-@import url(cells.css);
-
- .row > * {
- padding-left: 50px;
- }
- .row > *:first-child {
- padding-left: 0px;
- }
- .row + .row {
- padding-top: 50px;
- }
-
-/*********************************************************************************/
-/* Basic */
-/*********************************************************************************/
-
- .only-mobile, .not-desktop
- {
- display: none !important;
- }
-
- body
- {
- /* 90% transparent */
- background: url(../images/qemu_head_200.png) no-repeat fixed 2em 80px;
+/*
+ Linear by TEMPLATED
+ templated.co @templatedco
+ Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
+*/
+
+/*********************************************************************************/
+/* Grid */
+/*********************************************************************************/
+
+@import url(cells.css);
+
+ .row > * {
+ padding-left: 50px;
+ }
+ .row > *:first-child {
+ padding-left: 0px;
+ }
+ .row + .row {
+ padding-top: 50px;
+ }
+
+/*********************************************************************************/
+/* Basic */
+/*********************************************************************************/
+
+ .only-mobile, .not-desktop
+ {
+ display: none !important;
+ }
+
+ body
+ {
+ /* 90% transparent */
+ background: url(../images/qemu_head_200.png) no-repeat fixed 2em 80px;
background-color: #FFF;
- }
-
- body.homepage
- {
- /* 90% transparent */
- background: url(../images/qemu_head_400_faint.png) no-repeat fixed center 60%;
+ }
+
+ body.homepage
+ {
+ /* 90% transparent */
+ background: url(../images/qemu_head_400_faint.png) no-repeat fixed center 60%;
background-color: #FFF;
- }
-
- body,input,textarea,select
- {
- }
-
- .homepage h1
- {
- font-size: 7em;
- letter-spacing: -0.05em;
- }
-
- .homepage h2
- {
- font-size: 2.2em;
- }
-
- h1
- {
- font-size: 3em;
- }
-
- header
- {
- margin-bottom: 2em;
- }
-
- header .byline
- {
- font-size: 1.7em;
- }
-
-/*********************************************************************************/
-/* Header */
-/*********************************************************************************/
-
- #header
- {
- padding: 5em 0 2em 0;
- }
-
-/*********************************************************************************/
-/* Main */
-/*********************************************************************************/
-
- #main,#sidebar {
- margin-top: 5em;
- }
-
- #sidebar h1
- {
- font-size: 2.4em;
- letter-spacing: 0em;
- line-height: 1.2em;
- margin-top: -0.2em;
- }
-
-/*********************************************************************************/
-/* Footer */
-/*********************************************************************************/
-
- #footer
- {
- padding: 1em 0em;
- }
-
- #footer-inner
- {
- width: 95%;
- display: table;
- margin: auto;
- }
-
- #footer ul
- {
- width: 25%;
- display: table-cell;
- padding-left: 2em;
- }
-
- #footer ul:first-child
- {
- padding-left: 0px;
- }
-
-/*********************************************************************************/
-/* Featured */
-/*********************************************************************************/
-
- #featured
- {
- padding: 3em 0em 1em 0em;
- }
-
- #featured p
- {
- line-height: 1.5em;
- font-size: 1.2em;
- }
-
- .\31 u img { height: 6vw; }
- .\32 u img { height: 12vw; }
- .\33 u img { height: 18vw; }
- .\34 u img { height: 24vw; }
- .\36 u img { height: 36vw; }
- .\37 u img { height: 42vw; }
- .\38 u img { height: 48vw; }
- .\39 u img { height: 54vw; }
- .\31 0u img { height: 60vw; }
- .\31 1u img { height: 66vw; }
- .\31 2u img { height: 72vw; }
-
-/*********************************************************************************/
-/* Horizontal menu */
-/*********************************************************************************/
- .horiz-menu > ul
- {
- width: 100%;
- margin: 0;
- padding: 0;
- display: table;
- border-collapse: collapse;
- }
- .horiz-menu > ul > li
- {
- width: 25%;
- border: 1px solid #000000;
- display: table-cell;
- color: #F03B11;
- }
- .horiz-menu > ul > li:hover
- {
- background: #FCECD4;
- color: #802400;
- }
-
- .horiz-menu > ul > li > a
- {
- display: block;
- padding: 1em;
- border-bottom: 5px transparent;
- white-space: nowrap;
- color: inherit;
- }
- .horiz-menu > ul > li > a:hover
- {
- text-decoration: none;
- }
- .horiz-menu > ul > li.active > a
- {
- border-bottom: 5px #F03B11 solid;
- }
-
- .horiz-menu > ul > li.active > a:hover
- {
- border-bottom: 5px #802400 solid;
- }
-
- .horiz-menu > article
- {
- padding-top: 1em;
- margin: 0;
- display: none;
- }
-
- .horiz-menu > article.active
- {
- display: block;
- }
-
-/*********************************************************************************/
-/* Nav */
-/*********************************************************************************/
-
- #titleBar
- {
- display: none !important;
- }
-
- #nav
- {
- display: block !important;
- z-index: 2;
- position: fixed;
- background: #802400;
- background: -webkit-linear-gradient(top, #802400 0%,#800800 100%);
- background: linear-gradient(to bottom, #802400 0%,#800800 100%);
- left: 0;
- top: 0;
- width: 100%;
- }
-
- #nav > ul
- {
- text-align: right;
- margin: 0;
- }
-
- #nav > ul > li
- {
- display: inline-block;
- margin: 0;
- padding: 0.5em 2em 0.5em 0em;
- color: #FFF;
- letter-spacing: 0.06em;
- text-transform: uppercase;
- font-size: 1.1em;
- }
-
- #nav a
- {
- text-decoration: none;
- color: inherit;
- }
-
- #nav > ul > li > a,
- #nav > ul > li > span
- {
- display: inline-block;
- padding: 3px 0.5em 3px 0.5em;
- }
-
- #nav > ul > li:hover > a,
- #nav > ul > li:hover > span
- {
- border-bottom: 3px solid #F0A833;
- padding-bottom: 0px;
- }
-
- #nav li.current a
- {
- font-weight: 500;
- }
-
-/*
- #nav > ul > li.home
- {
- display: block;
- float: left;
- }
-*/
-
- #nav > ul > li > ul
- {
- display: none;
- }
-
-
-/* Colorbox customization */
-
- body #cboxTitle { height: 50px; bottom: 24px; color: #000000; text-align: left; }
- body #cboxMiddleLeft, body #cboxMiddleRight, body #cboxContent { padding-bottom: 50px; box-sizing: content-box; }
+ }
+
+ body,input,textarea,select
+ {
+ }
+
+ .homepage h1
+ {
+ font-size: 7em;
+ letter-spacing: -0.05em;
+ }
+
+ .homepage h2
+ {
+ font-size: 2.2em;
+ }
+
+ h1
+ {
+ font-size: 3em;
+ }
+
+ header
+ {
+ margin-bottom: 2em;
+ }
+
+ header .byline
+ {
+ font-size: 1.7em;
+ }
+
+/*********************************************************************************/
+/* Header */
+/*********************************************************************************/
+
+ #header
+ {
+ padding: 5em 0 2em 0;
+ }
+
+/*********************************************************************************/
+/* Main */
+/*********************************************************************************/
+
+ #main,#sidebar {
+ margin-top: 5em;
+ }
+
+ #sidebar h1
+ {
+ font-size: 2.4em;
+ letter-spacing: 0em;
+ line-height: 1.2em;
+ margin-top: -0.2em;
+ }
+
+/*********************************************************************************/
+/* Footer */
+/*********************************************************************************/
+
+ #footer
+ {
+ padding: 1em 0em;
+ }
+
+ #footer-inner
+ {
+ width: 95%;
+ display: table;
+ margin: auto;
+ }
+
+ #footer ul
+ {
+ width: 25%;
+ display: table-cell;
+ padding-left: 2em;
+ }
+
+ #footer ul:first-child
+ {
+ padding-left: 0px;
+ }
+
+/*********************************************************************************/
+/* Featured */
+/*********************************************************************************/
+
+ #featured
+ {
+ padding: 3em 0em 1em 0em;
+ }
+
+ #featured p
+ {
+ line-height: 1.5em;
+ font-size: 1.2em;
+ }
+
+ .\31 u img { height: 6vw; }
+ .\32 u img { height: 12vw; }
+ .\33 u img { height: 18vw; }
+ .\34 u img { height: 24vw; }
+ .\36 u img { height: 36vw; }
+ .\37 u img { height: 42vw; }
+ .\38 u img { height: 48vw; }
+ .\39 u img { height: 54vw; }
+ .\31 0u img { height: 60vw; }
+ .\31 1u img { height: 66vw; }
+ .\31 2u img { height: 72vw; }
+
+/*********************************************************************************/
+/* Horizontal menu */
+/*********************************************************************************/
+ .horiz-menu > ul
+ {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ display: table;
+ border-collapse: collapse;
+ }
+ .horiz-menu > ul > li
+ {
+ width: 25%;
+ border: 1px solid #000000;
+ display: table-cell;
+ color: #F03B11;
+ }
+ .horiz-menu > ul > li:hover
+ {
+ background: #FCECD4;
+ color: #802400;
+ }
+
+ .horiz-menu > ul > li > a
+ {
+ display: block;
+ padding: 1em;
+ border-bottom: 5px transparent;
+ white-space: nowrap;
+ color: inherit;
+ }
+ .horiz-menu > ul > li > a:hover
+ {
+ text-decoration: none;
+ }
+ .horiz-menu > ul > li.active > a
+ {
+ border-bottom: 5px #F03B11 solid;
+ }
+
+ .horiz-menu > ul > li.active > a:hover
+ {
+ border-bottom: 5px #802400 solid;
+ }
+
+ .horiz-menu > article
+ {
+ padding-top: 1em;
+ margin: 0;
+ display: none;
+ }
+
+ .horiz-menu > article.active
+ {
+ display: block;
+ }
+
+/*********************************************************************************/
+/* Nav */
+/*********************************************************************************/
+
+ #titleBar
+ {
+ display: none !important;
+ }
+
+ #nav
+ {
+ display: block !important;
+ z-index: 2;
+ position: fixed;
+ background: #802400;
+ background: -webkit-linear-gradient(top, #802400 0%,#800800 100%);
+ background: linear-gradient(to bottom, #802400 0%,#800800 100%);
+ left: 0;
+ top: 0;
+ width: 100%;
+ }
+
+ #nav > ul
+ {
+ text-align: right;
+ margin: 0;
+ }
+
+ #nav > ul > li
+ {
+ display: inline-block;
+ margin: 0;
+ padding: 0.5em 2em 0.5em 0em;
+ color: #FFF;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ font-size: 1.1em;
+ }
+
+ #nav a
+ {
+ text-decoration: none;
+ color: inherit;
+ }
+
+ #nav > ul > li > a,
+ #nav > ul > li > span
+ {
+ display: inline-block;
+ padding: 3px 0.5em 3px 0.5em;
+ }
+
+ #nav > ul > li:hover > a,
+ #nav > ul > li:hover > span
+ {
+ border-bottom: 3px solid #F0A833;
+ padding-bottom: 0px;
+ }
+
+ #nav li.current a
+ {
+ font-weight: 500;
+ }
+
+/*
+ #nav > ul > li.home
+ {
+ display: block;
+ float: left;
+ }
+*/
+
+ #nav > ul > li > ul
+ {
+ display: none;
+ }
+
+
+/* Colorbox customization */
+
+ body #cboxTitle { height: 50px; bottom: 24px; color: #000000; text-align: left; }
+ body #cboxMiddleLeft, body #cboxMiddleRight, body #cboxContent { padding-bottom: 50px; box-sizing: content-box; }
diff --git a/assets/css/style-mobile.css b/assets/css/style-mobile.css
index 9f2f033..8910e71 100644
--- a/assets/css/style-mobile.css
+++ b/assets/css/style-mobile.css
@@ -1,375 +1,375 @@
-/*
- Linear by TEMPLATED
- templated.co @templatedco
- Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-*/
-
-/*********************************************************************************/
-/* Grid */
-/*********************************************************************************/
-
- .row > * {
- padding: 15px 0 0 0;
- float: none;
- margin-left: auto !important;
- margin-right: auto !important;
- }
- .row + .row > * {
- padding-top: 15px;
- }
-
-/*********************************************************************************/
-/* Basic */
-/*********************************************************************************/
-
- .only-desktop, .not-mobile
- {
- display: none !important;
- }
-
- body,input,textarea,select
- {
- line-height: 1.5em;
- font-size: 10.5pt;
- letter-spacing: 0;
- }
-
- body
- {
- background: url(../images/qemu_head_200_faint.png) no-repeat fixed center center;
- }
- body.homepage
- {
- background-position: center 200px;
- background-attachment: scroll;
- }
- body.fixed
- {
- background-position: center 80px;
- 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
- {
- clear: both;
- margin: 2em 0 2em 0;
- }
-
- .container
- {
- padding: 0em 1em;
- }
-
- header
- {
- margin-bottom: 1.6em;
- }
-
- header .byline
- {
- font-size: 1.2em;
- }
-
- .button
- {
- display: block;
- width: 100%;
- text-align: center;
- }
-
- .homepage h1
- {
- font-size: 3em;
- padding-top: 0.6em;
- }
-
- h1, .homepage h2
- {
- font-size: 2em;
- }
-
- h2, .homepage h3
- {
- font-size: 1.6em;
- }
-
- h3, h4, h5, h6
- {
- font-size: 1.5em;
- }
-
-/*********************************************************************************/
-/* UI */
-/*********************************************************************************/
-
- #titleBar
- {
- width: 100%;
- background: #161616;
- height: 44px;
- overflow: hidden;
- position: fixed;
- margin-top: -44px;
- z-index: 2;
- }
-
- body.js {
- padding-top: 44px;
- }
-
- #titleBar .title
- {
- color: #fff;
- text-align: center;
- line-height: 44px;
- font-weight: 300;
- text-decoration: none;
- display: block;
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- z-index: 1;
- }
-
- button[aria-controls="nav"]
- {
- float: left;
- position: relative;
- left: 0;
- top: 0;
- width: 80px;
- height: 44px;
- cursor: pointer;
- z-index: 2;
- background: transparent;
- border: 0px;
- color: #808080;
- }
-
- button[aria-controls="nav"] > span.fa
- {
- width: 20px;
- height: 12px;
- position: absolute;
- left: 12px;
- top: 10px;
- }
-
- button[aria-controls="nav"]:active
- {
- color: #c0c0c0;
- }
- #nav
- {
- padding: 0em;
- background: #1f1f1f;
- }
-
- #titleBar + #nav {
- position: fixed;
- margin-left: -80%;
- width: 80%;
- height: 100%;
- z-index: 2;
- left: 0;
- top: 0;
- }
-
- #nav > ul
- {
- margin: 0em;
- padding: 0.3em;
- }
-
- #nav > ul > li
- {
- border-top: 1px solid white;
- margin: 0;
- padding: 0.3em;
- color: #ffffff;
- }
-
- #nav > ul > li:first-child
- {
- border-top: 0px;
- }
-
- #nav > ul > li > a,
- #nav > ul > li > span
- {
- display: block;
- padding: 0 1em 0 1em;
- letter-spacing: 1px;
- color: inherit;
- text-align: left;
- }
-
-/*********************************************************************************/
-/* Header */
-/*********************************************************************************/
-
- #header {
- height: 9em;
- }
-
- #header h1 {
- margin-bottom: 0.2em;
- }
-
-/*********************************************************************************/
-/* Logo */
-/*********************************************************************************/
-
-
-/*********************************************************************************/
-/* Columns */
-/*********************************************************************************/
-
- #main, #footer-inner, #copyright-inner
- {
- margin-left: 0%;
- width: 100%;
- }
-
- #sidebar
- {
- margin-left: 0%;
- width: 100%;
- }
-
-/*********************************************************************************/
-/* Main */
-/*********************************************************************************/
-
- #main
- {
- padding: 2em 0em 1em 0em;
- }
-
-/*********************************************************************************/
-/* Sidebar */
-/*********************************************************************************/
-
- #sidebar
- {
- clear: left;
- }
-
- #sidebar h1
- {
- font-size: 1.6em;
- }
-
-/*********************************************************************************/
-/* Footer */
-/*********************************************************************************/
-
- #footer
- {
- padding: 1em;
- }
-
- #footer ul
- {
- padding: 0.6em 0px;
- border-top: 1px solid white;
- }
-
- #footer ul:first-child
- {
- border-top: 0px;
- }
-
-/*********************************************************************************/
-/* Featured */
-/*********************************************************************************/
-
- #featured
- {
- padding-bottom: 3em;
- }
-
- #featured h3
- {
- padding: 0.5em 0em;
- font-size: 1.4em;
- margin: 0em;
- }
- #featured h3+p
- {
- margin-top: 0em;
- }
-
- #featured .pennant a
- {
- cursor: inherit;
- }
-
- #featured .pennant img
- {
- object-position: bottom;
- background-position: bottom; /* for IE polyfill */
- }
- @media (orientation: landscape) {
- #featured .pennant img
- {
- height: 70vh;
- }
- }
-
-/*********************************************************************************/
-/* Welcome */
-/*********************************************************************************/
-
- #welcome
- {
- padding: 4em 0em 3em 0em;
- }
-
-/*********************************************************************************/
-/* Horizontal menu */
-/*********************************************************************************/
- .horiz-menu > ul
- {
- display: none !important;
- }
- .horiz-menu > article
- {
- display: block !important;
- border: 1px solid #000000;
- padding: 1em;
- margin-bottom: 1em;
- }
- .horiz-menu > article > header
- {
- display: block !important;
- }
- .horiz-menu pre
- {
- border: 0px;
- }
-
-/*********************************************************************************/
-/* Releases */
-/*********************************************************************************/
-
- #releases ul > li {
- width: 48%;
- }
+/*
+ Linear by TEMPLATED
+ templated.co @templatedco
+ Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
+*/
+
+/*********************************************************************************/
+/* Grid */
+/*********************************************************************************/
+
+ .row > * {
+ padding: 15px 0 0 0;
+ float: none;
+ margin-left: auto !important;
+ margin-right: auto !important;
+ }
+ .row + .row > * {
+ padding-top: 15px;
+ }
+
+/*********************************************************************************/
+/* Basic */
+/*********************************************************************************/
+
+ .only-desktop, .not-mobile
+ {
+ display: none !important;
+ }
+
+ body,input,textarea,select
+ {
+ line-height: 1.5em;
+ font-size: 10.5pt;
+ letter-spacing: 0;
+ }
+
+ body
+ {
+ background: url(../images/qemu_head_200_faint.png) no-repeat fixed center center;
+ }
+ body.homepage
+ {
+ background-position: center 200px;
+ background-attachment: scroll;
+ }
+ body.fixed
+ {
+ background-position: center 80px;
+ 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
+ {
+ clear: both;
+ margin: 2em 0 2em 0;
+ }
+
+ .container
+ {
+ padding: 0em 1em;
+ }
+
+ header
+ {
+ margin-bottom: 1.6em;
+ }
+
+ header .byline
+ {
+ font-size: 1.2em;
+ }
+
+ .button
+ {
+ display: block;
+ width: 100%;
+ text-align: center;
+ }
+
+ .homepage h1
+ {
+ font-size: 3em;
+ padding-top: 0.6em;
+ }
+
+ h1, .homepage h2
+ {
+ font-size: 2em;
+ }
+
+ h2, .homepage h3
+ {
+ font-size: 1.6em;
+ }
+
+ h3, h4, h5, h6
+ {
+ font-size: 1.5em;
+ }
+
+/*********************************************************************************/
+/* UI */
+/*********************************************************************************/
+
+ #titleBar
+ {
+ width: 100%;
+ background: #161616;
+ height: 44px;
+ overflow: hidden;
+ position: fixed;
+ margin-top: -44px;
+ z-index: 2;
+ }
+
+ body.js {
+ padding-top: 44px;
+ }
+
+ #titleBar .title
+ {
+ color: #fff;
+ text-align: center;
+ line-height: 44px;
+ font-weight: 300;
+ text-decoration: none;
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ z-index: 1;
+ }
+
+ button[aria-controls="nav"]
+ {
+ float: left;
+ position: relative;
+ left: 0;
+ top: 0;
+ width: 80px;
+ height: 44px;
+ cursor: pointer;
+ z-index: 2;
+ background: transparent;
+ border: 0px;
+ color: #808080;
+ }
+
+ button[aria-controls="nav"] > span.fa
+ {
+ width: 20px;
+ height: 12px;
+ position: absolute;
+ left: 12px;
+ top: 10px;
+ }
+
+ button[aria-controls="nav"]:active
+ {
+ color: #c0c0c0;
+ }
+ #nav
+ {
+ padding: 0em;
+ background: #1f1f1f;
+ }
+
+ #titleBar + #nav {
+ position: fixed;
+ margin-left: -80%;
+ width: 80%;
+ height: 100%;
+ z-index: 2;
+ left: 0;
+ top: 0;
+ }
+
+ #nav > ul
+ {
+ margin: 0em;
+ padding: 0.3em;
+ }
+
+ #nav > ul > li
+ {
+ border-top: 1px solid white;
+ margin: 0;
+ padding: 0.3em;
+ color: #ffffff;
+ }
+
+ #nav > ul > li:first-child
+ {
+ border-top: 0px;
+ }
+
+ #nav > ul > li > a,
+ #nav > ul > li > span
+ {
+ display: block;
+ padding: 0 1em 0 1em;
+ letter-spacing: 1px;
+ color: inherit;
+ text-align: left;
+ }
+
+/*********************************************************************************/
+/* Header */
+/*********************************************************************************/
+
+ #header {
+ height: 9em;
+ }
+
+ #header h1 {
+ margin-bottom: 0.2em;
+ }
+
+/*********************************************************************************/
+/* Logo */
+/*********************************************************************************/
+
+
+/*********************************************************************************/
+/* Columns */
+/*********************************************************************************/
+
+ #main, #footer-inner, #copyright-inner
+ {
+ margin-left: 0%;
+ width: 100%;
+ }
+
+ #sidebar
+ {
+ margin-left: 0%;
+ width: 100%;
+ }
+
+/*********************************************************************************/
+/* Main */
+/*********************************************************************************/
+
+ #main
+ {
+ padding: 2em 0em 1em 0em;
+ }
+
+/*********************************************************************************/
+/* Sidebar */
+/*********************************************************************************/
+
+ #sidebar
+ {
+ clear: left;
+ }
+
+ #sidebar h1
+ {
+ font-size: 1.6em;
+ }
+
+/*********************************************************************************/
+/* Footer */
+/*********************************************************************************/
+
+ #footer
+ {
+ padding: 1em;
+ }
+
+ #footer ul
+ {
+ padding: 0.6em 0px;
+ border-top: 1px solid white;
+ }
+
+ #footer ul:first-child
+ {
+ border-top: 0px;
+ }
+
+/*********************************************************************************/
+/* Featured */
+/*********************************************************************************/
+
+ #featured
+ {
+ padding-bottom: 3em;
+ }
+
+ #featured h3
+ {
+ padding: 0.5em 0em;
+ font-size: 1.4em;
+ margin: 0em;
+ }
+ #featured h3+p
+ {
+ margin-top: 0em;
+ }
+
+ #featured .pennant a
+ {
+ cursor: inherit;
+ }
+
+ #featured .pennant img
+ {
+ object-position: bottom;
+ background-position: bottom; /* for IE polyfill */
+ }
+ @media (orientation: landscape) {
+ #featured .pennant img
+ {
+ height: 70vh;
+ }
+ }
+
+/*********************************************************************************/
+/* Welcome */
+/*********************************************************************************/
+
+ #welcome
+ {
+ padding: 4em 0em 3em 0em;
+ }
+
+/*********************************************************************************/
+/* Horizontal menu */
+/*********************************************************************************/
+ .horiz-menu > ul
+ {
+ display: none !important;
+ }
+ .horiz-menu > article
+ {
+ display: block !important;
+ border: 1px solid #000000;
+ padding: 1em;
+ margin-bottom: 1em;
+ }
+ .horiz-menu > article > header
+ {
+ display: block !important;
+ }
+ .horiz-menu pre
+ {
+ border: 0px;
+ }
+
+/*********************************************************************************/
+/* Releases */
+/*********************************************************************************/
+
+ #releases ul > li {
+ width: 48%;
+ }
diff --git a/assets/css/style.css b/assets/css/style.css
index b828887..e09b383 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,592 +1,592 @@
-@charset 'UTF-8';
-/*
- Linear by TEMPLATED
- templated.co @templatedco
- Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-*/
-
-/*********************************************************************************/
-/* Basic */
-/*********************************************************************************/
-
- body
- {
- margin: 0;
- padding: 0;
- background: #ffffff;
- }
-
- body,input,textarea,select
- {
- font-family: 'Roboto', sans-serif;
- font-size: 11pt;
- font-weight: 300;
- line-height: 1.75em;
- color: #000000;
- }
-
- strong,b,a
- {
- font-weight: 400;
- }
- strong a,b a
- {
- font-weight: 500;
- }
- h1,.homepage h2
- {
- font-weight: 300;
- color: black;
- }
- h2,h3,h4,h5,h6
- {
- font-weight: 400;
- color: #802400;
- }
-
- pre,code,samp,tt
- {
- font-family: 'Roboto Mono', monospace;
- }
- pre,code
- {
- background: rgba(0,0,0,0.05);
- }
-
- .homepage h1 {
- margin: 0;
- }
-
- h1, .homepage h2
- {
- letter-spacing: -0.025em;
- line-height: 1.025em;
- margin-top: -0.125em;
- }
-
- h2, .homepage h3
- {
- font-size: 2em;
- }
-
- h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
- {
- color: inherit;
- font-weight: inherit;
- }
-
- h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
- {
- text-decoration: none;
- }
-
- pre
- {
- padding: 1em;
- border: 1px #000000 solid;
- max-width: 100%;
- overflow-x: auto;
- }
-
- a
- {
- text-decoration: none;
- color: #F03B11;
- }
-
- a:hover
- {
- text-decoration: underline;
- }
-
- sub
- {
- position: relative;
- top: 0.5em;
- font-size: 0.8em;
- }
-
- sup
- {
- position: relative;
- top: -0.5em;
- font-size: 0.8em;
- }
-
- hr
- {
- border: 0;
- border-top: solid 1px #333;
- margin: 2em 0 2em 0;
- padding: 0;
- }
-
- blockquote
- {
- border-left: solid 0.5em #333;
- padding: 1em 0 1em 2em;
- font-style: italic;
- }
-
- p, ul, ol, dl, table
- {
- margin-bottom: 1em;
- }
-
- header
- {
- margin-bottom: 1em;
- }
-
- header h1, header h2, header h3, header h4, header h5, header h6
- {
- margin-bottom: 0em;
- }
-
- header .byline
- {
- display: block;
- margin: 1.5em 0 0 0;
- padding: 0 0 0.5em 0;
- }
-
- .posted {
- letter-spacing: 1px;
- text-transform: uppercase;
- font-size: 80%;
- color: #999999;
- }
-
- footer
- {
- margin-top: 1em;
- }
-
- .clear
- {
- clear: both;
- }
-
- .pennant
- {
- color: #999999;
- }
-
- /* Sections/Articles */
-
- section,
- article
- {
- margin-bottom: 3em;
- }
-
- section > :last-child,
- article > :last-child
- {
- margin-bottom: 0;
- }
-
- section:last-child,
- article:last-child
- {
- margin-bottom: 0;
- }
-
- .row > section,
- .row > article
- {
- margin-bottom: 0;
- }
-
- /* Images */
-
- img {
- max-width: 100%;
- }
-
- .image
- {
- display: inline-block;
- }
-
- .image img
- {
- display: block;
- width: 100%;
- }
-
- .image.featured
- {
- display: block;
- width: 100%;
- margin: 0 0 2em 0;
- }
-
- .image.full
- {
- display: block;
- width: 100%;
- margin-bottom: 2em;
- }
-
- .image.left
- {
- float: left;
- margin: 0 2em 2em 0;
- }
-
- .image.centered
- {
- display: block;
- margin: 0 0 2em 0;
- }
-
- .image.centered img
- {
- margin: 0 auto;
- width: auto;
- }
-
- /* Lists */
-
- ul.style
- {
- margin-bottom: 0em;
- padding: 0;
- }
-
- ul.style li {
- margin: 0;
- padding: 0em 0em 1.5em 0em;
- list-style: none;
- }
-
- ul.category
- {
- margin: 0;
- padding: 0;
- letter-spacing: 1px;
- text-transform: uppercase;
- font-size: 80%;
- color: #999999;
- }
-
- ul.category li {
- display: inline;
- margin: 0;
- padding: 0;
- list-style: none;
- padding-right: 1em;
- }
- ul.category li::before {
- padding-right: 0.3em;
- }
-
-
- /* Buttons */
-
- .button
- {
- position: relative;
- display: inline-block;
- background: #F03B11;
- padding: 0.8em 2em;
- font-size: 1.2em;
- color: #FFF;
- -moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
- -webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
- -o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
- -ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
- transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
- text-align: center;
- border-radius: 0.25em;
- }
-
- .button:hover
- {
- background: #F01111;
- text-decoration: none;
- }
-
-/*********************************************************************************/
-/* Icons */
-/* Powered by Font Awesome by Dave Gandy | http://fontawesome.io */
-/* Licensed under the SIL OFL 1.1 (font), MIT (CSS) */
-/*********************************************************************************/
-
- .fa
- {
- text-decoration: none;
- }
-
- .fa.solo
- {
- }
-
- .fa.solo span
- {
- display: none;
- }
-
- .fa:before
- {
- display:inline-block;
- font-family: FontAwesome;
- font-size: 1.25em;
- text-decoration: none;
- font-style: normal;
- font-weight: normal;
- line-height: 1;
- -webkit-font-smoothing:antialiased;
- -moz-osx-font-smoothing:grayscale;
- }
-
-/*********************************************************************************/
-/* Social Icon Styles */
-/*********************************************************************************/
-
- ul.contact
- {
- padding: 1.5em 0 0 0;
- list-style: none;
- cursor: default;
- }
-
- ul.contact li
- {
- display: inline-block;
- margin: 0 1em;
- }
-
- ul.contact li span
- {
- display: none;
- margin: 0;
- padding: 0;
- }
-
- ul.contact li a
- {
- color: inherit;
- font-size: 1.75em;
- display: inline-block;
- -moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
- -webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
- -o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
- -ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
- transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
- }
-
- ul.contact li a:hover
- {
- color: #fff;
- }
-
-/*********************************************************************************/
-/* Header */
-/*********************************************************************************/
-
- #header
- {
- position: relative;
- background: #f03b11;
- background: -webkit-linear-gradient(top, #f03b11 0%,#f01139 100%);
- background: linear-gradient(to bottom, #f03b11 0%,#f01139 100%);
- background-size: cover;
- text-align: center;
- }
-
- #header:after
- {
- content: '';
- position: relative;
- width: 0;
- height: 6em;
- left: 0;
- top: 0;
- float: left;
- }
-
-/*********************************************************************************/
-/* Logo */
-/*********************************************************************************/
-
- #header h1
- {
- color: #FFF;
- text-decoration: none;
- font-weight: 300;
- line-height: 1em;
- }
- #header .tag
- {
- font-size: 1.4em;
- color: #FFF;
- }
-
-/*********************************************************************************/
-/* Columns */
-/*********************************************************************************/
-
- #main, #copyright-inner
- {
- margin-left: 16.667%;
- width: 66.667%;
- }
-
- #sidebar
- {
- width: 16.667%;
- }
-
-/*********************************************************************************/
-/* Main */
-/*********************************************************************************/
-
- #main
- {
- clear: left;
- }
-
- #main, #sidebar
- {
- position: relative;
- float: left;
- padding-bottom: 3em;
- }
-
- .homepage header, .homepage p
- {
- text-align: center;
- }
-
- #sidebar header
- {
- margin-bottom: 0.50em;
- }
-
-/*********************************************************************************/
-/* Releases */
-/*********************************************************************************/
- #releases
- {
- margin: 2em 0em;
- text-align: center;
- }
-
- #releases ul, #releases p
- {
- margin: 0em;
- }
-
- #releases ul > li
- {
- list-style: none;
- display: inline-block;
- width: 40%;
- margin: 1em 0em;
- }
-
- #releases ul > li > strong
- {
- list-style: none;
- display: block;
- font-size: 3em;
- margin-bottom: 0.2em;
- }
-
-/*********************************************************************************/
-/* Footer */
-/*********************************************************************************/
-
- #footer
- {
- position: relative;
- clear: left;
- background: #401200;
- color: #FFF;
- }
-
- #footer a
- {
- color: inherit;
- }
-
- #footer ul
- {
- vertical-align: top;
- }
-
- #footer ul, #footer ul > li
- {
- padding: 0;
- margin: 0
- }
-
-/*********************************************************************************/
-/* Copyright */
-/*********************************************************************************/
-
- #copyright
- {
- clear: left;
- border-top: 1px solid #aaaaaa;
- position: relative;
- color: #aaaaaa;
- background: #ffffff;
- padding: 1em 0em;
- }
-
- #copyright a
- {
- color: inherit;
- }
-
-/*********************************************************************************/
-/* Featured */
-/*********************************************************************************/
-
- #featured
- {
- position: relative;
- background: rgba(0,0,0,0.05);
- text-align: center;
- margin-bottom: 2em;
- }
-
- #featured header
- {
- border-bottom: 1px solid #333333;
- }
- #featured h2
- {
- margin-bottom: 0em;
- }
-
- #featured h3
- {
- padding: 1.5em 0em;
- font-size: 1.6em;
- display: block;
- font-weight: 300;
- height: 2em;
- margin: 0em 0em 1em 0em;
- }
-
- #featured .pennant
- {
- font-size: 4em;
- }
-
- #featured .pennant img
- {
- width: 100%;
- object-fit: contain;
- background-size: contain; /* for IE polyfill */
- background-repeat: no-repeat; /* for IE polyfill */
- }
-
- #featured .button
- {
- margin-top: 1.5em;
- }
+@charset 'UTF-8';
+/*
+ Linear by TEMPLATED
+ templated.co @templatedco
+ Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
+*/
+
+/*********************************************************************************/
+/* Basic */
+/*********************************************************************************/
+
+ body
+ {
+ margin: 0;
+ padding: 0;
+ background: #ffffff;
+ }
+
+ body,input,textarea,select
+ {
+ font-family: 'Roboto', sans-serif;
+ font-size: 11pt;
+ font-weight: 300;
+ line-height: 1.75em;
+ color: #000000;
+ }
+
+ strong,b,a
+ {
+ font-weight: 400;
+ }
+ strong a,b a
+ {
+ font-weight: 500;
+ }
+ h1,.homepage h2
+ {
+ font-weight: 300;
+ color: black;
+ }
+ h2,h3,h4,h5,h6
+ {
+ font-weight: 400;
+ color: #802400;
+ }
+
+ pre,code,samp,tt
+ {
+ font-family: 'Roboto Mono', monospace;
+ }
+ pre,code
+ {
+ background: rgba(0,0,0,0.05);
+ }
+
+ .homepage h1 {
+ margin: 0;
+ }
+
+ h1, .homepage h2
+ {
+ letter-spacing: -0.025em;
+ line-height: 1.025em;
+ margin-top: -0.125em;
+ }
+
+ h2, .homepage h3
+ {
+ font-size: 2em;
+ }
+
+ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
+ {
+ color: inherit;
+ font-weight: inherit;
+ }
+
+ h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
+ {
+ text-decoration: none;
+ }
+
+ pre
+ {
+ padding: 1em;
+ border: 1px #000000 solid;
+ max-width: 100%;
+ overflow-x: auto;
+ }
+
+ a
+ {
+ text-decoration: none;
+ color: #F03B11;
+ }
+
+ a:hover
+ {
+ text-decoration: underline;
+ }
+
+ sub
+ {
+ position: relative;
+ top: 0.5em;
+ font-size: 0.8em;
+ }
+
+ sup
+ {
+ position: relative;
+ top: -0.5em;
+ font-size: 0.8em;
+ }
+
+ hr
+ {
+ border: 0;
+ border-top: solid 1px #333;
+ margin: 2em 0 2em 0;
+ padding: 0;
+ }
+
+ blockquote
+ {
+ border-left: solid 0.5em #333;
+ padding: 1em 0 1em 2em;
+ font-style: italic;
+ }
+
+ p, ul, ol, dl, table
+ {
+ margin-bottom: 1em;
+ }
+
+ header
+ {
+ margin-bottom: 1em;
+ }
+
+ header h1, header h2, header h3, header h4, header h5, header h6
+ {
+ margin-bottom: 0em;
+ }
+
+ header .byline
+ {
+ display: block;
+ margin: 1.5em 0 0 0;
+ padding: 0 0 0.5em 0;
+ }
+
+ .posted {
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ font-size: 80%;
+ color: #999999;
+ }
+
+ footer
+ {
+ margin-top: 1em;
+ }
+
+ .clear
+ {
+ clear: both;
+ }
+
+ .pennant
+ {
+ color: #999999;
+ }
+
+ /* Sections/Articles */
+
+ section,
+ article
+ {
+ margin-bottom: 3em;
+ }
+
+ section > :last-child,
+ article > :last-child
+ {
+ margin-bottom: 0;
+ }
+
+ section:last-child,
+ article:last-child
+ {
+ margin-bottom: 0;
+ }
+
+ .row > section,
+ .row > article
+ {
+ margin-bottom: 0;
+ }
+
+ /* Images */
+
+ img {
+ max-width: 100%;
+ }
+
+ .image
+ {
+ display: inline-block;
+ }
+
+ .image img
+ {
+ display: block;
+ width: 100%;
+ }
+
+ .image.featured
+ {
+ display: block;
+ width: 100%;
+ margin: 0 0 2em 0;
+ }
+
+ .image.full
+ {
+ display: block;
+ width: 100%;
+ margin-bottom: 2em;
+ }
+
+ .image.left
+ {
+ float: left;
+ margin: 0 2em 2em 0;
+ }
+
+ .image.centered
+ {
+ display: block;
+ margin: 0 0 2em 0;
+ }
+
+ .image.centered img
+ {
+ margin: 0 auto;
+ width: auto;
+ }
+
+ /* Lists */
+
+ ul.style
+ {
+ margin-bottom: 0em;
+ padding: 0;
+ }
+
+ ul.style li {
+ margin: 0;
+ padding: 0em 0em 1.5em 0em;
+ list-style: none;
+ }
+
+ ul.category
+ {
+ margin: 0;
+ padding: 0;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ font-size: 80%;
+ color: #999999;
+ }
+
+ ul.category li {
+ display: inline;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ padding-right: 1em;
+ }
+ ul.category li::before {
+ padding-right: 0.3em;
+ }
+
+
+ /* Buttons */
+
+ .button
+ {
+ position: relative;
+ display: inline-block;
+ background: #F03B11;
+ padding: 0.8em 2em;
+ font-size: 1.2em;
+ color: #FFF;
+ -moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
+ -webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
+ -o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
+ -ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
+ transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
+ text-align: center;
+ border-radius: 0.25em;
+ }
+
+ .button:hover
+ {
+ background: #F01111;
+ text-decoration: none;
+ }
+
+/*********************************************************************************/
+/* Icons */
+/* Powered by Font Awesome by Dave Gandy | http://fontawesome.io */
+/* Licensed under the SIL OFL 1.1 (font), MIT (CSS) */
+/*********************************************************************************/
+
+ .fa
+ {
+ text-decoration: none;
+ }
+
+ .fa.solo
+ {
+ }
+
+ .fa.solo span
+ {
+ display: none;
+ }
+
+ .fa:before
+ {
+ display:inline-block;
+ font-family: FontAwesome;
+ font-size: 1.25em;
+ text-decoration: none;
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ -webkit-font-smoothing:antialiased;
+ -moz-osx-font-smoothing:grayscale;
+ }
+
+/*********************************************************************************/
+/* Social Icon Styles */
+/*********************************************************************************/
+
+ ul.contact
+ {
+ padding: 1.5em 0 0 0;
+ list-style: none;
+ cursor: default;
+ }
+
+ ul.contact li
+ {
+ display: inline-block;
+ margin: 0 1em;
+ }
+
+ ul.contact li span
+ {
+ display: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ ul.contact li a
+ {
+ color: inherit;
+ font-size: 1.75em;
+ display: inline-block;
+ -moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
+ -webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
+ -o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
+ -ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
+ transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
+ }
+
+ ul.contact li a:hover
+ {
+ color: #fff;
+ }
+
+/*********************************************************************************/
+/* Header */
+/*********************************************************************************/
+
+ #header
+ {
+ position: relative;
+ background: #f03b11;
+ background: -webkit-linear-gradient(top, #f03b11 0%,#f01139 100%);
+ background: linear-gradient(to bottom, #f03b11 0%,#f01139 100%);
+ background-size: cover;
+ text-align: center;
+ }
+
+ #header:after
+ {
+ content: '';
+ position: relative;
+ width: 0;
+ height: 6em;
+ left: 0;
+ top: 0;
+ float: left;
+ }
+
+/*********************************************************************************/
+/* Logo */
+/*********************************************************************************/
+
+ #header h1
+ {
+ color: #FFF;
+ text-decoration: none;
+ font-weight: 300;
+ line-height: 1em;
+ }
+ #header .tag
+ {
+ font-size: 1.4em;
+ color: #FFF;
+ }
+
+/*********************************************************************************/
+/* Columns */
+/*********************************************************************************/
+
+ #main, #copyright-inner
+ {
+ margin-left: 16.667%;
+ width: 66.667%;
+ }
+
+ #sidebar
+ {
+ width: 16.667%;
+ }
+
+/*********************************************************************************/
+/* Main */
+/*********************************************************************************/
+
+ #main
+ {
+ clear: left;
+ }
+
+ #main, #sidebar
+ {
+ position: relative;
+ float: left;
+ padding-bottom: 3em;
+ }
+
+ .homepage header, .homepage p
+ {
+ text-align: center;
+ }
+
+ #sidebar header
+ {
+ margin-bottom: 0.50em;
+ }
+
+/*********************************************************************************/
+/* Releases */
+/*********************************************************************************/
+ #releases
+ {
+ margin: 2em 0em;
+ text-align: center;
+ }
+
+ #releases ul, #releases p
+ {
+ margin: 0em;
+ }
+
+ #releases ul > li
+ {
+ list-style: none;
+ display: inline-block;
+ width: 40%;
+ margin: 1em 0em;
+ }
+
+ #releases ul > li > strong
+ {
+ list-style: none;
+ display: block;
+ font-size: 3em;
+ margin-bottom: 0.2em;
+ }
+
+/*********************************************************************************/
+/* Footer */
+/*********************************************************************************/
+
+ #footer
+ {
+ position: relative;
+ clear: left;
+ background: #401200;
+ color: #FFF;
+ }
+
+ #footer a
+ {
+ color: inherit;
+ }
+
+ #footer ul
+ {
+ vertical-align: top;
+ }
+
+ #footer ul, #footer ul > li
+ {
+ padding: 0;
+ margin: 0
+ }
+
+/*********************************************************************************/
+/* Copyright */
+/*********************************************************************************/
+
+ #copyright
+ {
+ clear: left;
+ border-top: 1px solid #aaaaaa;
+ position: relative;
+ color: #aaaaaa;
+ background: #ffffff;
+ padding: 1em 0em;
+ }
+
+ #copyright a
+ {
+ color: inherit;
+ }
+
+/*********************************************************************************/
+/* Featured */
+/*********************************************************************************/
+
+ #featured
+ {
+ position: relative;
+ background: rgba(0,0,0,0.05);
+ text-align: center;
+ margin-bottom: 2em;
+ }
+
+ #featured header
+ {
+ border-bottom: 1px solid #333333;
+ }
+ #featured h2
+ {
+ margin-bottom: 0em;
+ }
+
+ #featured h3
+ {
+ padding: 1.5em 0em;
+ font-size: 1.6em;
+ display: block;
+ font-weight: 300;
+ height: 2em;
+ margin: 0em 0em 1em 0em;
+ }
+
+ #featured .pennant
+ {
+ font-size: 4em;
+ }
+
+ #featured .pennant img
+ {
+ width: 100%;
+ object-fit: contain;
+ background-size: contain; /* for IE polyfill */
+ background-repeat: no-repeat; /* for IE polyfill */
+ }
+
+ #featured .button
+ {
+ margin-top: 1.5em;
+ }
diff --git a/index.html b/index.html
index 1de3fe3..4c65101 100644
--- a/index.html
+++ b/index.html
@@ -1,89 +1,89 @@
----
-title: QEMU
-layout: home
-colorbox: True
----
- <!-- Header -->
- <div id="header">
- <div class="container">
- <h1>QEMU</h1>
- <span class="tag">the FAST! processor emulator</span>
- </div>
- </div>
-
-<!-- Featured -->
-<div id="featured">
- <div class="container">
- <header>
- <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>
-
-<script src="/assets/js/object-fit.js"></script>
-<script>
-window.hasColorBox = false;
-$(window).on("load resize", function() {
- isMobile = window.innerWidth < 700;
- if (isMobile && window.hasColorBox) {
- window.hasColorBox = false;
- $.colorbox.remove();
- } else if (!isMobile && !window.hasColorBox) {
- window.hasColorBox = true;
- $('.colorbox').colorbox({
- 'rel': '.colorbox',
- 'title': function() { return $(this).attr("data-title"); }
- });
- }
-});
-// make links to images inactive, except through the colorbox
-$('.colorbox').on("click.random-namespace", function() {
- return window.hasColorBox;
-})
-</script>
-
- </div>
- <hr>
- <p>QEMU is a member of <a href="/conservancy/">Software Freedom Conservancy</a>.</p>
- </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;
- jqBody = $('body');
- if (isScroll && jqBody.hasClass('fixed'))
- jqBody.removeClass('fixed')
- else if (!isScroll && !jqBody.hasClass('fixed'))
- jqBody.addClass('fixed')
- });
- </script>
+---
+title: QEMU
+layout: home
+colorbox: True
+---
+ <!-- Header -->
+ <div id="header">
+ <div class="container">
+ <h1>QEMU</h1>
+ <span class="tag">the FAST! processor emulator</span>
+ </div>
+ </div>
+
+<!-- Featured -->
+<div id="featured">
+ <div class="container">
+ <header>
+ <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>
+
+<script src="/assets/js/object-fit.js"></script>
+<script>
+window.hasColorBox = false;
+$(window).on("load resize", function() {
+ isMobile = window.innerWidth < 700;
+ if (isMobile && window.hasColorBox) {
+ window.hasColorBox = false;
+ $.colorbox.remove();
+ } else if (!isMobile && !window.hasColorBox) {
+ window.hasColorBox = true;
+ $('.colorbox').colorbox({
+ 'rel': '.colorbox',
+ 'title': function() { return $(this).attr("data-title"); }
+ });
+ }
+});
+// make links to images inactive, except through the colorbox
+$('.colorbox').on("click.random-namespace", function() {
+ return window.hasColorBox;
+})
+</script>
+
+ </div>
+ <hr>
+ <p>QEMU is a member of <a href="/conservancy/">Software Freedom Conservancy</a>.</p>
+ </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;
+ jqBody = $('body');
+ if (isScroll && jqBody.hasClass('fixed'))
+ jqBody.removeClass('fixed')
+ else if (!isScroll && !jqBody.hasClass('fixed'))
+ jqBody.addClass('fixed')
+ });
+ </script>
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 02/16] gitlab: introduce a CI job to publish the site content
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 01/16] Convert files to UNIX line endings Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 03/16] make all links be relative to the root Daniel P. Berrangé
` (14 subsequent siblings)
16 siblings, 0 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
.gitlab-ci.yml | 16 ++++++++++++++++
1 file changed, 16 insertions(+)
create mode 100644 .gitlab-ci.yml
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 0000000..5fa3041
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,16 @@
+
+pages:
+ image: centos:8
+ cache:
+ paths:
+ - vendor
+ before_script:
+ - dnf install -y ruby ruby-devel rubygem-bundler openssl-devel
+ - dnf install -y gcc gcc-c++ make redhat-rpm-config
+ - bundle install --path vendor
+ script:
+ - bundle exec jekyll build
+ - mv _site public
+ artifacts:
+ paths:
+ - public
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 03/16] make all links be relative to the root
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 01/16] Convert files to UNIX line endings Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 02/16] gitlab: introduce a CI job to publish the site content Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 04/16] Make page header nav narrower Daniel P. Berrangé
` (13 subsequent siblings)
16 siblings, 0 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
This enables the site to be hosted at URLs with different base
directories. This is useful when viewing the site after being
published as GitLab CI artifacts.
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
_includes/assets.html | 28 ++++++++++++++--------------
_includes/copyright.html | 2 +-
| 12 ++++++------
_includes/nav.html | 12 ++++++------
_includes/relative_root.html | 12 ++++++++++++
| 6 +++---
_layouts/archive.html | 4 ++--
_layouts/blog.html | 3 ++-
_layouts/home.html | 1 +
_layouts/page.html | 1 +
blog/index.html | 4 ++--
index.html | 5 +++--
12 files changed, 53 insertions(+), 37 deletions(-)
create mode 100644 _includes/relative_root.html
diff --git a/_includes/assets.html b/_includes/assets.html
index 826a50f..411a1ac 100644
--- a/_includes/assets.html
+++ b/_includes/assets.html
@@ -4,23 +4,23 @@
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:300,400%7cRoboto:300,400,500' rel='stylesheet' type='text/css'>
- <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
- <link rel="manifest" href="/assets/favicons/manifest.json">
- <link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
- <meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
+ <link rel="apple-touch-icon" sizes="180x180" href="{{ relative_root }}/assets/favicons/apple-touch-icon.png">
+ <link rel="icon" type="image/png" sizes="32x32" href="{{ relative_root }}/assets/favicons/favicon-32x32.png">
+ <link rel="icon" type="image/png" sizes="16x16" href="{{ relative_root }}/assets/favicons/favicon-16x16.png">
+ <link rel="manifest" href="{{ relative_root }}/assets/favicons/manifest.json">
+ <link rel="mask-icon" href="{{ relative_root }}/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
+ <meta name="msapplication-config" content="{{ relative_root }}/assets/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
- <link rel="stylesheet" href="/assets/css/normalize.css" />
+ <link rel="stylesheet" href="{{ relative_root }}/assets/css/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
- <link rel="stylesheet" href="/assets/css/skel-noscript.css" />
- <link rel="stylesheet" href="/assets/css/style.css" />
- <link rel="stylesheet" href="/assets/css/style-mobile.css" media="(max-width:699px)"/>
- <link rel="stylesheet" href="/assets/css/style-desktop.css" media="(min-width:700px)" />
- <link rel="alternate" title="QEMU Blog (Atom feed)" href="/feed.xml" type="application/atom+xml" />
+ <link rel="stylesheet" href="{{ relative_root }}/assets/css/skel-noscript.css" />
+ <link rel="stylesheet" href="{{ relative_root }}/assets/css/style.css" />
+ <link rel="stylesheet" href="{{ relative_root }}/assets/css/style-mobile.css" media="(max-width:699px)"/>
+ <link rel="stylesheet" href="{{ relative_root }}/assets/css/style-desktop.css" media="(min-width:700px)" />
+ <link rel="alternate" title="QEMU Blog (Atom feed)" href="{{ relative_root }}/feed.xml" type="application/atom+xml" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
{% if page.colorbox %}
- <script src="/assets/js/jquery.colorbox.js"></script>
- <link rel="stylesheet" href="/assets/css/colorbox.css" />
+ <script src="{{ relative_root }}/assets/js/jquery.colorbox.js"></script>
+ <link rel="stylesheet" href="{{ relative_root }}/assets/css/colorbox.css" />
{% endif %}
diff --git a/_includes/copyright.html b/_includes/copyright.html
index 3e6e6a3..cdcd98f 100644
--- a/_includes/copyright.html
+++ b/_includes/copyright.html
@@ -2,7 +2,7 @@
<div id="copyright-inner">
<div class="container">
This site is made available under the terms of
- <a href="/license.html">a number of licenses</a>.
+ <a href="{{ relative_root }}/license.html">a number of licenses</a>.
</div>
</div>
</div>
--git a/_includes/footer.html b/_includes/footer.html
index c8f1042..b614795 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,20 +1,20 @@
<div id="footer">
<div id="footer-inner">
<ul class="style">
- <li><a href="/">Home</a></li>
- <li><a href="/download">Download</a></li>
- <li><a href="/conservancy/">Conservancy / Committee</a></li>
+ <li><a href="{{ relative_root }}/">Home</a></li>
+ <li><a href="{{ relative_root }}/download">Download</a></li>
+ <li><a href="{{ relative_root }}/conservancy/">Conservancy / Committee</a></li>
<li><a href="http://qemu-advent-calendar.org">QEMU advent calendar</a></li>
</ul>
<ul class="style">
- <li><a href="/contribute">Contribute</a></li>
- <li><a href="/contribute/report-a-bug">Reporting a bug</a></li>
+ <li><a href="{{ relative_root }}/contribute">Contribute</a></li>
+ <li><a href="{{ relative_root }}/contribute/report-a-bug">Reporting a bug</a></li>
<li><a href="https://wiki.qemu.org/Documentation/GettingStartedDevelopers">New contributors</a></li>
<li><a href="https://wiki.qemu.org/Contribute/SubmitAPatch">Submitting a patch</a></li>
<li><a href="https://wiki.qemu.org/Contribute/FAQ">Contributor FAQ</a></li>
</ul>
<ul class="style">
- <li><a href="/documentation">Documentation</a></li>
+ <li><a href="{{ relative_root }}/documentation">Documentation</a></li>
<li><a href="https://www.qemu.org/docs/master/">Main docs</a></li>
<li><a href="https://wiki.qemu.org/Category:Developer_documentation">Developer docs</a></li>
<li><a href="https://wiki.qemu.org/">Wiki</a></li>
diff --git a/_includes/nav.html b/_includes/nav.html
index 0c81e24..58b6c5a 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -2,12 +2,12 @@
<nav id="nav">
<ul>
{% assign current = page.url | downcase | split: '/' %}
- <li class='{% if page.url == '/' %}not-desktop {%endif %}home'><a href="/">Home</a>
- </li><li {% if current[1] == 'download' %}class='current'{% endif %}><a href="/download">Download</a>
- </li><li {% if current[1] == 'support' %}class='current'{% endif %}><a href="/support">Support</a>
- </li><li {% if current[1] == 'contribute' %}class='current'{% endif %}><a href="/contribute">Contribute</a>
- </li><li {% if current[1] == 'documentation' %}class='current'{% endif %}><a href="/documentation">Documentation</a>
- </li><li {% if current[1] == 'blog' %}class='current'{% endif %}><a href="/blog">Blog</a></li>
+ <li class='{% if page.url == '/' %}not-desktop {%endif %}home'><a href="{{ relative_root }}/">Home</a>
+ </li><li {% if current[1] == 'download' %}class='current'{% endif %}><a href="{{ relative_root }}/download">Download</a>
+ </li><li {% if current[1] == 'support' %}class='current'{% endif %}><a href="{{ relative_root }}/support">Support</a>
+ </li><li {% if current[1] == 'contribute' %}class='current'{% endif %}><a href="{{ relative_root }}/contribute">Contribute</a>
+ </li><li {% if current[1] == 'documentation' %}class='current'{% endif %}><a href="{{ relative_root }}/documentation">Documentation</a>
+ </li><li {% if current[1] == 'blog' %}class='current'{% endif %}><a href="{{ relative_root }}/blog">Blog</a></li>
</ul>
</nav>
diff --git a/_includes/relative_root.html b/_includes/relative_root.html
new file mode 100644
index 0000000..87c30e2
--- /dev/null
+++ b/_includes/relative_root.html
@@ -0,0 +1,12 @@
+{% assign relative_root = '' %}
+{% assign tempDepth = page.url | append: 'hackish-solution' | split: '/' | size | minus: 2 %}
+{% for i in (1..tempDepth) %}
+ {% if forloop.last %}
+ {% assign relative_root = relative_root | append: ".." %}
+ {% else %}
+ {% assign relative_root = relative_root | append: "../" %}
+ {% endif %}
+{% endfor %}
+{% if relative_root == '' %}
+ {% assign relative_root = '.' %}
+{% endif %}
--git a/_includes/sidebar.html b/_includes/sidebar.html
index 0dc3538..f0cec2a 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -9,7 +9,7 @@
<ul class="style">
{% for post in site.posts offset: 0 limit: 2 %}
<li>
- <a href="{{ site.prefix }}{{ post.url }}">{{ post.title }}</a><br/>
+ <a href="{{ relative_root }}{{ post.url }}">{{ post.title }}</a><br/>
<span class="posted">{{ post.date | date_to_string }}</span>
</li>
{% endfor %}
@@ -31,12 +31,12 @@
{% assign thisurl = post.date | date: "%Y/%m" %}
{% assign thisdate = post.date | date: "%B %Y" %}
{% if thisurl != prevurl and prevurl != "" %}
- <li><a href="/blog/{{ prevurl }}/">{{ prevdate }} ({{ counter }})</a></li>
+ <li><a href="{{ relative_root }}/blog/{{ prevurl }}/">{{ prevdate }} ({{ counter }})</a></li>
{% assign counter = 0 %}
{% endif %}
{% assign counter = counter | plus: 1 %}
{% endfor %}
- <li><a href="/blog/{{ thisurl }}/">{{ thisdate }} ({{ counter }})</a></li>
+ <li><a href="{{ relative_root }}/blog/{{ thisurl }}/">{{ thisdate }} ({{ counter }})</a></li>
</ul>
</section>
</div>
diff --git a/_layouts/archive.html b/_layouts/archive.html
index 4e67749..a0be7b8 100644
--- a/_layouts/archive.html
+++ b/_layouts/archive.html
@@ -9,13 +9,13 @@ layout: blog
{% for post in page.posts %}
<article>
<header>
- <h2><a href="{{ site.prefix }}{{ post.url }}">{{ post.title }}</a></h2>
+ <h2><a href="../../..{{ post.url }}">{{ post.title }}</a></h2>
<div class="posted">{{ post.date | date_to_string }}{%
if post.last_modified_at %} (Updated {{ post.last_modified_at | date_to_string }}) {%
endif %}{% if post.author %} — by {{ post.author }}{% endif %}</div>
</header>
{{ post.excerpt }}
- <a href="{{ site.prefix }}{{ post.url }}" class="button button-style1">Read More</a>
+ <a href="../../..{{ post.url }}" class="button button-style1">Read More</a>
</article>
{% endfor %}
</section>
diff --git a/_layouts/blog.html b/_layouts/blog.html
index 2dfb9c8..b300636 100644
--- a/_layouts/blog.html
+++ b/_layouts/blog.html
@@ -3,7 +3,8 @@
Linear by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
--->
+ -->
+{% include relative_root.html %}
<html>
<head>
<title>{{ page.title }} - {{ site.title }}</title>
diff --git a/_layouts/home.html b/_layouts/home.html
index b96e391..d94c9b0 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -4,6 +4,7 @@ Linear by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
+{% include relative_root.html %}
<html>
<head>
<title>{{ site.title }}</title>
diff --git a/_layouts/page.html b/_layouts/page.html
index 110ca97..d650054 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -4,6 +4,7 @@ Linear by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
+{% include relative_root.html %}
<html>
<head>
<title>{{ page.title }} - {{ site.title }}</title>
diff --git a/blog/index.html b/blog/index.html
index 313b994..c7ceb0a 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -8,7 +8,7 @@ layout: blog
<div class="row">
<section>
<header>
- <h1><a href="{{ site.prefix }}{{ post.url }}">{{ post.title }}</a></h1>
+ <h1><a href="{{ relative_root }}{{ post.url }}">{{ post.title }}</a></h1>
<div class="posted">{{ post.date | date_to_string }}{%
if post.last_modified_at %} (Updated {{ post.last_modified_at | date_to_string }}) {%
endif %}{% if post.author %} — by {{ post.author }}{% endif %}</div>
@@ -22,7 +22,7 @@ layout: blog
</ul>
{% else %}
{{ post.excerpt }}
- <a href="{{ site.prefix }}{{ post.url }}" class="button button-style1">Read More</a>
+ <a href="{{ relative_root }}{{ post.url }}" class="button button-style1">Read More</a>
{% endif %}
</section>
</div>
diff --git a/index.html b/index.html
index 4c65101..e52868d 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@ title: QEMU
layout: home
colorbox: True
---
+{% include relative_root.html %}
<!-- Header -->
<div id="header">
<div class="container">
@@ -38,7 +39,7 @@ colorbox: True
{% include screenshot.html offset=3 limit=10 %}
</section>
-<script src="/assets/js/object-fit.js"></script>
+<script src="{{ relative_root }}/assets/js/object-fit.js"></script>
<script>
window.hasColorBox = false;
$(window).on("load resize", function() {
@@ -62,7 +63,7 @@ $('.colorbox').on("click.random-namespace", function() {
</div>
<hr>
- <p>QEMU is a member of <a href="/conservancy/">Software Freedom Conservancy</a>.</p>
+ <p>QEMU is a member of <a href="{{ relative_root }}/conservancy/">Software Freedom Conservancy</a>.</p>
</div>
</div>
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 04/16] Make page header nav narrower
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (2 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 03/16] make all links be relative to the root Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2021-01-19 11:18 ` Thomas Huth
2020-10-27 13:20 ` [qemu-web PATCH v2 05/16] Introduce support for "bxslider" jquery add on Daniel P. Berrangé
` (12 subsequent siblings)
16 siblings, 1 reply; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
When the browser window is narrow, but not yet switched into the mobile
layout, the page header nav will line wrap. This breaks layout
assumptions resulting in overlapping/obscured text.
This deals with the probem by reducing padding between the links, and
shortening "Documentation" to just "Docs".
This avoids the line wrapping, as well as making room for new links in
the future.
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
_includes/nav.html | 2 +-
assets/css/style-desktop.css | 3 ++-
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/_includes/nav.html b/_includes/nav.html
index 58b6c5a..c66ee92 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -6,7 +6,7 @@
</li><li {% if current[1] == 'download' %}class='current'{% endif %}><a href="{{ relative_root }}/download">Download</a>
</li><li {% if current[1] == 'support' %}class='current'{% endif %}><a href="{{ relative_root }}/support">Support</a>
</li><li {% if current[1] == 'contribute' %}class='current'{% endif %}><a href="{{ relative_root }}/contribute">Contribute</a>
- </li><li {% if current[1] == 'documentation' %}class='current'{% endif %}><a href="{{ relative_root }}/documentation">Documentation</a>
+ </li><li {% if current[1] == 'documentation' %}class='current'{% endif %}><a href="{{ relative_root }}/documentation">Docs</a>
</li><li {% if current[1] == 'blog' %}class='current'{% endif %}><a href="{{ relative_root }}/blog">Blog</a></li>
</ul>
</nav>
diff --git a/assets/css/style-desktop.css b/assets/css/style-desktop.css
index ce58fe2..b7e403a 100644
--- a/assets/css/style-desktop.css
+++ b/assets/css/style-desktop.css
@@ -237,13 +237,14 @@
{
text-align: right;
margin: 0;
+ padding: 0;
}
#nav > ul > li
{
display: inline-block;
margin: 0;
- padding: 0.5em 2em 0.5em 0em;
+ padding: 0.5em 1em 0.5em 0em;
color: #FFF;
letter-spacing: 0.06em;
text-transform: uppercase;
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 05/16] Introduce support for "bxslider" jquery add on
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (3 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 04/16] Make page header nav narrower Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider Daniel P. Berrangé
` (11 subsequent siblings)
16 siblings, 0 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
The "bxslider" provides an auto-rotating carosel of images.
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
_includes/assets.html | 4 +
assets/css/jquery.bxslider.css | 179 ++++
assets/js/jquery.bxslider.js | 1607 ++++++++++++++++++++++++++++++++
3 files changed, 1790 insertions(+)
create mode 100644 assets/css/jquery.bxslider.css
create mode 100644 assets/js/jquery.bxslider.js
diff --git a/_includes/assets.html b/_includes/assets.html
index 411a1ac..56d7042 100644
--- a/_includes/assets.html
+++ b/_includes/assets.html
@@ -24,3 +24,7 @@
<script src="{{ relative_root }}/assets/js/jquery.colorbox.js"></script>
<link rel="stylesheet" href="{{ relative_root }}/assets/css/colorbox.css" />
{% endif %}
+ {% if page.bxslider %}
+ <script src="{{ relative_root }}/assets/js/jquery.bxslider.js"></script>
+ <link rel="stylesheet" href="{{ relative_root }}/assets/css/jquery.bxslider.css" />
+ {% endif %}
diff --git a/assets/css/jquery.bxslider.css b/assets/css/jquery.bxslider.css
new file mode 100644
index 0000000..e817fe1
--- /dev/null
+++ b/assets/css/jquery.bxslider.css
@@ -0,0 +1,179 @@
+/** VARIABLES
+===================================*/
+/** RESET AND LAYOUT
+===================================*/
+.bx-wrapper {
+ position: relative;
+ margin-bottom: 60px;
+ padding: 0;
+ *zoom: 1;
+ -ms-touch-action: pan-y;
+ touch-action: pan-y;
+}
+.bx-wrapper img {
+ max-width: 100%;
+ display: block;
+}
+.bxslider {
+ margin: 0;
+ padding: 0;
+}
+ul.bxslider {
+ list-style: none;
+}
+.bx-viewport {
+ /*fix other elements on the page moving (on Chrome)*/
+ -webkit-transform: translatez(0);
+}
+/** THEME
+===================================*/
+.bx-wrapper {
+ /* Disabled for QEMU
+ -moz-box-shadow: 0 0 5px #ccc;
+ -webkit-box-shadow: 0 0 5px #ccc;
+ box-shadow: 0 0 5px #ccc;
+ border: 5px solid #fff;
+ background: #fff;
+ */
+}
+.bx-wrapper .bx-pager,
+.bx-wrapper .bx-controls-auto {
+ position: absolute;
+ bottom: -30px;
+ width: 100%;
+}
+/* LOADER */
+.bx-wrapper .bx-loading {
+ min-height: 50px;
+ background: url('images/bx_loader.gif') center center no-repeat #ffffff;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2000;
+}
+/* PAGER */
+.bx-wrapper .bx-pager {
+ text-align: center;
+ font-size: .85em;
+ font-family: Arial;
+ font-weight: bold;
+ color: #666;
+ padding-top: 20px;
+}
+.bx-wrapper .bx-pager.bx-default-pager a {
+ background: #666;
+ text-indent: -9999px;
+ display: block;
+ width: 10px;
+ height: 10px;
+ margin: 0 5px;
+ outline: 0;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+}
+.bx-wrapper .bx-pager.bx-default-pager a:hover,
+.bx-wrapper .bx-pager.bx-default-pager a.active,
+.bx-wrapper .bx-pager.bx-default-pager a:focus {
+ background: #000;
+}
+.bx-wrapper .bx-pager-item,
+.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
+ display: inline-block;
+ vertical-align: bottom;
+ *zoom: 1;
+ *display: inline;
+}
+.bx-wrapper .bx-pager-item {
+ font-size: 0;
+ line-height: 0;
+}
+/* DIRECTION CONTROLS (NEXT / PREV) */
+.bx-wrapper .bx-prev {
+ left: 10px;
+ background: url('images/controls.png') no-repeat 0 -32px;
+}
+.bx-wrapper .bx-prev:hover,
+.bx-wrapper .bx-prev:focus {
+ background-position: 0 0;
+}
+.bx-wrapper .bx-next {
+ right: 10px;
+ background: url('images/controls.png') no-repeat -43px -32px;
+}
+.bx-wrapper .bx-next:hover,
+.bx-wrapper .bx-next:focus {
+ background-position: -43px 0;
+}
+.bx-wrapper .bx-controls-direction a {
+ position: absolute;
+ top: 50%;
+ margin-top: -16px;
+ outline: 0;
+ width: 32px;
+ height: 32px;
+ text-indent: -9999px;
+ z-index: 9999;
+}
+.bx-wrapper .bx-controls-direction a.disabled {
+ display: none;
+}
+/* AUTO CONTROLS (START / STOP) */
+.bx-wrapper .bx-controls-auto {
+ text-align: center;
+}
+.bx-wrapper .bx-controls-auto .bx-start {
+ display: block;
+ text-indent: -9999px;
+ width: 10px;
+ height: 11px;
+ outline: 0;
+ background: url('images/controls.png') -86px -11px no-repeat;
+ margin: 0 3px;
+}
+.bx-wrapper .bx-controls-auto .bx-start:hover,
+.bx-wrapper .bx-controls-auto .bx-start.active,
+.bx-wrapper .bx-controls-auto .bx-start:focus {
+ background-position: -86px 0;
+}
+.bx-wrapper .bx-controls-auto .bx-stop {
+ display: block;
+ text-indent: -9999px;
+ width: 9px;
+ height: 11px;
+ outline: 0;
+ background: url('images/controls.png') -86px -44px no-repeat;
+ margin: 0 3px;
+}
+.bx-wrapper .bx-controls-auto .bx-stop:hover,
+.bx-wrapper .bx-controls-auto .bx-stop.active,
+.bx-wrapper .bx-controls-auto .bx-stop:focus {
+ background-position: -86px -33px;
+}
+/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
+.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
+ text-align: left;
+ width: 80%;
+}
+.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
+ right: 0;
+ width: 35px;
+}
+/* IMAGE CAPTIONS */
+.bx-wrapper .bx-caption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background: #666;
+ background: rgba(80, 80, 80, 0.75);
+ width: 100%;
+}
+.bx-wrapper .bx-caption span {
+ color: #fff;
+ font-family: Arial;
+ display: block;
+ font-size: .85em;
+ padding: 10px;
+}
diff --git a/assets/js/jquery.bxslider.js b/assets/js/jquery.bxslider.js
new file mode 100644
index 0000000..67ac4d8
--- /dev/null
+++ b/assets/js/jquery.bxslider.js
@@ -0,0 +1,1607 @@
+/**
+ * bxSlider v4.2.12
+ * Copyright 2013-2015 Steven Wanderski
+ * Written while drinking Belgian ales and listening to jazz
+ * Licensed under MIT (http://opensource.org/licenses/MIT)
+ */
+
+;(function($) {
+
+ var defaults = {
+
+ // GENERAL
+ mode: 'horizontal',
+ slideSelector: '',
+ infiniteLoop: true,
+ hideControlOnEnd: false,
+ speed: 500,
+ easing: null,
+ slideMargin: 0,
+ startSlide: 0,
+ randomStart: false,
+ captions: false,
+ ticker: false,
+ tickerHover: false,
+ adaptiveHeight: false,
+ adaptiveHeightSpeed: 500,
+ video: false,
+ useCSS: true,
+ preloadImages: 'visible',
+ responsive: true,
+ slideZIndex: 50,
+ wrapperClass: 'bx-wrapper',
+
+ // TOUCH
+ touchEnabled: true,
+ swipeThreshold: 50,
+ oneToOneTouch: true,
+ preventDefaultSwipeX: true,
+ preventDefaultSwipeY: false,
+
+ // ACCESSIBILITY
+ ariaLive: true,
+ ariaHidden: true,
+
+ // KEYBOARD
+ keyboardEnabled: false,
+
+ // PAGER
+ pager: true,
+ pagerType: 'full',
+ pagerShortSeparator: ' / ',
+ pagerSelector: null,
+ buildPager: null,
+ pagerCustom: null,
+
+ // CONTROLS
+ controls: true,
+ nextText: 'Next',
+ prevText: 'Prev',
+ nextSelector: null,
+ prevSelector: null,
+ autoControls: false,
+ startText: 'Start',
+ stopText: 'Stop',
+ autoControlsCombine: false,
+ autoControlsSelector: null,
+
+ // AUTO
+ auto: false,
+ pause: 4000,
+ autoStart: true,
+ autoDirection: 'next',
+ stopAutoOnClick: false,
+ autoHover: false,
+ autoDelay: 0,
+ autoSlideForOnePage: false,
+
+ // CAROUSEL
+ minSlides: 1,
+ maxSlides: 1,
+ moveSlides: 0,
+ slideWidth: 0,
+ shrinkItems: false,
+
+ // CALLBACKS
+ onSliderLoad: function() { return true; },
+ onSlideBefore: function() { return true; },
+ onSlideAfter: function() { return true; },
+ onSlideNext: function() { return true; },
+ onSlidePrev: function() { return true; },
+ onSliderResize: function() { return true; }
+ };
+
+ $.fn.bxSlider = function(options) {
+
+ if (this.length === 0) {
+ return this;
+ }
+
+ // support multiple elements
+ if (this.length > 1) {
+ this.each(function() {
+ $(this).bxSlider(options);
+ });
+ return this;
+ }
+
+ // create a namespace to be used throughout the plugin
+ var slider = {},
+ // set a reference to our slider element
+ el = this,
+ // get the original window dimens (thanks a lot IE)
+ windowWidth = $(window).width(),
+ windowHeight = $(window).height();
+
+ // Return if slider is already initialized
+ if ($(el).data('bxSlider')) { return; }
+
+ /**
+ * ===================================================================================
+ * = PRIVATE FUNCTIONS
+ * ===================================================================================
+ */
+
+ /**
+ * Initializes namespace settings to be used throughout plugin
+ */
+ var init = function() {
+ // Return if slider is already initialized
+ if ($(el).data('bxSlider')) { return; }
+ // merge user-supplied options with the defaults
+ slider.settings = $.extend({}, defaults, options);
+ // parse slideWidth setting
+ slider.settings.slideWidth = parseInt(slider.settings.slideWidth);
+ // store the original children
+ slider.children = el.children(slider.settings.slideSelector);
+ // check if actual number of slides is less than minSlides / maxSlides
+ if (slider.children.length < slider.settings.minSlides) { slider.settings.minSlides = slider.children.length; }
+ if (slider.children.length < slider.settings.maxSlides) { slider.settings.maxSlides = slider.children.length; }
+ // if random start, set the startSlide setting to random number
+ if (slider.settings.randomStart) { slider.settings.startSlide = Math.floor(Math.random() * slider.children.length); }
+ // store active slide information
+ slider.active = { index: slider.settings.startSlide };
+ // store if the slider is in carousel mode (displaying / moving multiple slides)
+ slider.carousel = slider.settings.minSlides > 1 || slider.settings.maxSlides > 1 ? true : false;
+ // if carousel, force preloadImages = 'all'
+ if (slider.carousel) { slider.settings.preloadImages = 'all'; }
+ // calculate the min / max width thresholds based on min / max number of slides
+ // used to setup and update carousel slides dimensions
+ slider.minThreshold = (slider.settings.minSlides * slider.settings.slideWidth) + ((slider.settings.minSlides - 1) * slider.settings.slideMargin);
+ slider.maxThreshold = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
+ // store the current state of the slider (if currently animating, working is true)
+ slider.working = false;
+ // initialize the controls object
+ slider.controls = {};
+ // initialize an auto interval
+ slider.interval = null;
+ // determine which property to use for transitions
+ slider.animProp = slider.settings.mode === 'vertical' ? 'top' : 'left';
+ // determine if hardware acceleration can be used
+ slider.usingCSS = slider.settings.useCSS && slider.settings.mode !== 'fade' && (function() {
+ // create our test div element
+ var div = document.createElement('div'),
+ // css transition properties
+ props = ['WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
+ // test for each property
+ for (var i = 0; i < props.length; i++) {
+ if (div.style[props[i]] !== undefined) {
+ slider.cssPrefix = props[i].replace('Perspective', '').toLowerCase();
+ slider.animProp = '-' + slider.cssPrefix + '-transform';
+ return true;
+ }
+ }
+ return false;
+ }());
+ // if vertical mode always make maxSlides and minSlides equal
+ if (slider.settings.mode === 'vertical') { slider.settings.maxSlides = slider.settings.minSlides; }
+ // save original style data
+ el.data('origStyle', el.attr('style'));
+ el.children(slider.settings.slideSelector).each(function() {
+ $(this).data('origStyle', $(this).attr('style'));
+ });
+
+ // perform all DOM / CSS modifications
+ setup();
+ };
+
+ /**
+ * Performs all DOM and CSS modifications
+ */
+ var setup = function() {
+ var preloadSelector = slider.children.eq(slider.settings.startSlide); // set the default preload selector (visible)
+
+ // wrap el in a wrapper
+ el.wrap('<div class="' + slider.settings.wrapperClass + '"><div class="bx-viewport"></div></div>');
+ // store a namespace reference to .bx-viewport
+ slider.viewport = el.parent();
+
+ // add aria-live if the setting is enabled and ticker mode is disabled
+ if (slider.settings.ariaLive && !slider.settings.ticker) {
+ slider.viewport.attr('aria-live', 'polite');
+ }
+ // add a loading div to display while images are loading
+ slider.loader = $('<div class="bx-loading" />');
+ slider.viewport.prepend(slider.loader);
+ // set el to a massive width, to hold any needed slides
+ // also strip any margin and padding from el
+ el.css({
+ width: slider.settings.mode === 'horizontal' ? (slider.children.length * 1000 + 215) + '%' : 'auto',
+ position: 'relative'
+ });
+ // if using CSS, add the easing property
+ if (slider.usingCSS && slider.settings.easing) {
+ el.css('-' + slider.cssPrefix + '-transition-timing-function', slider.settings.easing);
+ // if not using CSS and no easing value was supplied, use the default JS animation easing (swing)
+ } else if (!slider.settings.easing) {
+ slider.settings.easing = 'swing';
+ }
+ // make modifications to the viewport (.bx-viewport)
+ slider.viewport.css({
+ width: '100%',
+ overflow: 'hidden',
+ position: 'relative'
+ });
+ slider.viewport.parent().css({
+ maxWidth: getViewportMaxWidth()
+ });
+ // apply css to all slider children
+ slider.children.css({
+ float: slider.settings.mode === 'horizontal' ? 'left' : 'none',
+ listStyle: 'none',
+ position: 'relative'
+ });
+ // apply the calculated width after the float is applied to prevent scrollbar interference
+ slider.children.css('width', getSlideWidth());
+ // if slideMargin is supplied, add the css
+ if (slider.settings.mode === 'horizontal' && slider.settings.slideMargin > 0) { slider.children.css('marginRight', slider.settings.slideMargin); }
+ if (slider.settings.mode === 'vertical' && slider.settings.slideMargin > 0) { slider.children.css('marginBottom', slider.settings.slideMargin); }
+ // if "fade" mode, add positioning and z-index CSS
+ if (slider.settings.mode === 'fade') {
+ slider.children.css({
+ position: 'absolute',
+ zIndex: 0,
+ display: 'none'
+ });
+ // prepare the z-index on the showing element
+ slider.children.eq(slider.settings.startSlide).css({zIndex: slider.settings.slideZIndex, display: 'block'});
+ }
+ // create an element to contain all slider controls (pager, start / stop, etc)
+ slider.controls.el = $('<div class="bx-controls" />');
+ // if captions are requested, add them
+ if (slider.settings.captions) { appendCaptions(); }
+ // check if startSlide is last slide
+ slider.active.last = slider.settings.startSlide === getPagerQty() - 1;
+ // if video is true, set up the fitVids plugin
+ if (slider.settings.video) { el.fitVids(); }
+ if (slider.settings.preloadImages === 'all' || slider.settings.ticker) { preloadSelector = slider.children; }
+ // only check for control addition if not in "ticker" mode
+ if (!slider.settings.ticker) {
+ // if controls are requested, add them
+ if (slider.settings.controls) { appendControls(); }
+ // if auto is true, and auto controls are requested, add them
+ if (slider.settings.auto && slider.settings.autoControls) { appendControlsAuto(); }
+ // if pager is requested, add it
+ if (slider.settings.pager) { appendPager(); }
+ // if any control option is requested, add the controls wrapper
+ if (slider.settings.controls || slider.settings.autoControls || slider.settings.pager) { slider.viewport.after(slider.controls.el); }
+ // if ticker mode, do not allow a pager
+ } else {
+ slider.settings.pager = false;
+ }
+ loadElements(preloadSelector, start);
+ };
+
+ var loadElements = function(selector, callback) {
+ var total = selector.find('img:not([src=""]), iframe').length,
+ count = 0;
+ if (total === 0) {
+ callback();
+ return;
+ }
+ selector.find('img:not([src=""]), iframe').each(function() {
+ $(this).one('load error', function() {
+ if (++count === total) { callback(); }
+ }).each(function() {
+ if (this.complete) { $(this).trigger('load'); }
+ });
+ });
+ };
+
+ /**
+ * Start the slider
+ */
+ var start = function() {
+ // if infinite loop, prepare additional slides
+ if (slider.settings.infiniteLoop && slider.settings.mode !== 'fade' && !slider.settings.ticker) {
+ var slice = slider.settings.mode === 'vertical' ? slider.settings.minSlides : slider.settings.maxSlides,
+ sliceAppend = slider.children.slice(0, slice).clone(true).addClass('bx-clone'),
+ slicePrepend = slider.children.slice(-slice).clone(true).addClass('bx-clone');
+ if (slider.settings.ariaHidden) {
+ sliceAppend.attr('aria-hidden', true);
+ slicePrepend.attr('aria-hidden', true);
+ }
+ el.append(sliceAppend).prepend(slicePrepend);
+ }
+ // remove the loading DOM element
+ slider.loader.remove();
+ // set the left / top position of "el"
+ setSlidePosition();
+ // if "vertical" mode, always use adaptiveHeight to prevent odd behavior
+ if (slider.settings.mode === 'vertical') { slider.settings.adaptiveHeight = true; }
+ // set the viewport height
+ slider.viewport.height(getViewportHeight());
+ // make sure everything is positioned just right (same as a window resize)
+ el.redrawSlider();
+ // onSliderLoad callback
+ slider.settings.onSliderLoad.call(el, slider.active.index);
+ // slider has been fully initialized
+ slider.initialized = true;
+ // bind the resize call to the window
+ if (slider.settings.responsive) { $(window).bind('resize', resizeWindow); }
+ // if auto is true and has more than 1 page, start the show
+ if (slider.settings.auto && slider.settings.autoStart && (getPagerQty() > 1 || slider.settings.autoSlideForOnePage)) { initAuto(); }
+ // if ticker is true, start the ticker
+ if (slider.settings.ticker) { initTicker(); }
+ // if pager is requested, make the appropriate pager link active
+ if (slider.settings.pager) { updatePagerActive(slider.settings.startSlide); }
+ // check for any updates to the controls (like hideControlOnEnd updates)
+ if (slider.settings.controls) { updateDirectionControls(); }
+ // if touchEnabled is true, setup the touch events
+ if (slider.settings.touchEnabled && !slider.settings.ticker) { initTouch(); }
+ // if keyboardEnabled is true, setup the keyboard events
+ if (slider.settings.keyboardEnabled && !slider.settings.ticker) {
+ $(document).keydown(keyPress);
+ }
+ };
+
+ /**
+ * Returns the calculated height of the viewport, used to determine either adaptiveHeight or the maxHeight value
+ */
+ var getViewportHeight = function() {
+ var height = 0;
+ // first determine which children (slides) should be used in our height calculation
+ var children = $();
+ // if mode is not "vertical" and adaptiveHeight is false, include all children
+ if (slider.settings.mode !== 'vertical' && !slider.settings.adaptiveHeight) {
+ children = slider.children;
+ } else {
+ // if not carousel, return the single active child
+ if (!slider.carousel) {
+ children = slider.children.eq(slider.active.index);
+ // if carousel, return a slice of children
+ } else {
+ // get the individual slide index
+ var currentIndex = slider.settings.moveSlides === 1 ? slider.active.index : slider.active.index * getMoveBy();
+ // add the current slide to the children
+ children = slider.children.eq(currentIndex);
+ // cycle through the remaining "showing" slides
+ for (i = 1; i <= slider.settings.maxSlides - 1; i++) {
+ // if looped back to the start
+ if (currentIndex + i >= slider.children.length) {
+ children = children.add(slider.children.eq(i - 1));
+ } else {
+ children = children.add(slider.children.eq(currentIndex + i));
+ }
+ }
+ }
+ }
+ // if "vertical" mode, calculate the sum of the heights of the children
+ if (slider.settings.mode === 'vertical') {
+ children.each(function(index) {
+ height += $(this).outerHeight();
+ });
+ // add user-supplied margins
+ if (slider.settings.slideMargin > 0) {
+ height += slider.settings.slideMargin * (slider.settings.minSlides - 1);
+ }
+ // if not "vertical" mode, calculate the max height of the children
+ } else {
+ height = Math.max.apply(Math, children.map(function() {
+ return $(this).outerHeight(false);
+ }).get());
+ }
+
+ if (slider.viewport.css('box-sizing') === 'border-box') {
+ height += parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom')) +
+ parseFloat(slider.viewport.css('border-top-width')) + parseFloat(slider.viewport.css('border-bottom-width'));
+ } else if (slider.viewport.css('box-sizing') === 'padding-box') {
+ height += parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom'));
+ }
+
+ return height;
+ };
+
+ /**
+ * Returns the calculated width to be used for the outer wrapper / viewport
+ */
+ var getViewportMaxWidth = function() {
+ var width = '100%';
+ if (slider.settings.slideWidth > 0) {
+ if (slider.settings.mode === 'horizontal') {
+ width = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
+ } else {
+ width = slider.settings.slideWidth;
+ }
+ }
+ return width;
+ };
+
+ /**
+ * Returns the calculated width to be applied to each slide
+ */
+ var getSlideWidth = function() {
+ var newElWidth = slider.settings.slideWidth, // start with any user-supplied slide width
+ wrapWidth = slider.viewport.width(); // get the current viewport width
+ // if slide width was not supplied, or is larger than the viewport use the viewport width
+ if (slider.settings.slideWidth === 0 ||
+ (slider.settings.slideWidth > wrapWidth && !slider.carousel) ||
+ slider.settings.mode === 'vertical') {
+ newElWidth = wrapWidth;
+ // if carousel, use the thresholds to determine the width
+ } else if (slider.settings.maxSlides > 1 && slider.settings.mode === 'horizontal') {
+ if (wrapWidth > slider.maxThreshold) {
+ return newElWidth;
+ } else if (wrapWidth < slider.minThreshold) {
+ newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.minSlides - 1))) / slider.settings.minSlides;
+ } else if (slider.settings.shrinkItems) {
+ newElWidth = Math.floor((wrapWidth + slider.settings.slideMargin) / (Math.ceil((wrapWidth + slider.settings.slideMargin) / (newElWidth + slider.settings.slideMargin))) - slider.settings.slideMargin);
+ }
+ }
+ return newElWidth;
+ };
+
+ /**
+ * Returns the number of slides currently visible in the viewport (includes partially visible slides)
+ */
+ var getNumberSlidesShowing = function() {
+ var slidesShowing = 1,
+ childWidth = null;
+ if (slider.settings.mode === 'horizontal' && slider.settings.slideWidth > 0) {
+ // if viewport is smaller than minThreshold, return minSlides
+ if (slider.viewport.width() < slider.minThreshold) {
+ slidesShowing = slider.settings.minSlides;
+ // if viewport is larger than maxThreshold, return maxSlides
+ } else if (slider.viewport.width() > slider.maxThreshold) {
+ slidesShowing = slider.settings.maxSlides;
+ // if viewport is between min / max thresholds, divide viewport width by first child width
+ } else {
+ childWidth = slider.children.first().width() + slider.settings.slideMargin;
+ slidesShowing = Math.floor((slider.viewport.width() +
+ slider.settings.slideMargin) / childWidth);
+ }
+ // if "vertical" mode, slides showing will always be minSlides
+ } else if (slider.settings.mode === 'vertical') {
+ slidesShowing = slider.settings.minSlides;
+ }
+ return slidesShowing;
+ };
+
+ /**
+ * Returns the number of pages (one full viewport of slides is one "page")
+ */
+ var getPagerQty = function() {
+ var pagerQty = 0,
+ breakPoint = 0,
+ counter = 0;
+ // if moveSlides is specified by the user
+ if (slider.settings.moveSlides > 0) {
+ if (slider.settings.infiniteLoop) {
+ pagerQty = Math.ceil(slider.children.length / getMoveBy());
+ } else {
+ // when breakpoint goes above children length, counter is the number of pages
+ while (breakPoint < slider.children.length) {
+ ++pagerQty;
+ breakPoint = counter + getNumberSlidesShowing();
+ counter += slider.settings.moveSlides <= getNumberSlidesShowing() ? slider.settings.moveSlides : getNumberSlidesShowing();
+ }
+ }
+ // if moveSlides is 0 (auto) divide children length by sides showing, then round up
+ } else {
+ pagerQty = Math.ceil(slider.children.length / getNumberSlidesShowing());
+ }
+ return pagerQty;
+ };
+
+ /**
+ * Returns the number of individual slides by which to shift the slider
+ */
+ var getMoveBy = function() {
+ // if moveSlides was set by the user and moveSlides is less than number of slides showing
+ if (slider.settings.moveSlides > 0 && slider.settings.moveSlides <= getNumberSlidesShowing()) {
+ return slider.settings.moveSlides;
+ }
+ // if moveSlides is 0 (auto)
+ return getNumberSlidesShowing();
+ };
+
+ /**
+ * Sets the slider's (el) left or top position
+ */
+ var setSlidePosition = function() {
+ var position, lastChild, lastShowingIndex;
+ // if last slide, not infinite loop, and number of children is larger than specified maxSlides
+ if (slider.children.length > slider.settings.maxSlides && slider.active.last && !slider.settings.infiniteLoop) {
+ if (slider.settings.mode === 'horizontal') {
+ // get the last child's position
+ lastChild = slider.children.last();
+ position = lastChild.position();
+ // set the left position
+ setPositionProperty(-(position.left - (slider.viewport.width() - lastChild.outerWidth())), 'reset', 0);
+ } else if (slider.settings.mode === 'vertical') {
+ // get the last showing index's position
+ lastShowingIndex = slider.children.length - slider.settings.minSlides;
+ position = slider.children.eq(lastShowingIndex).position();
+ // set the top position
+ setPositionProperty(-position.top, 'reset', 0);
+ }
+ // if not last slide
+ } else {
+ // get the position of the first showing slide
+ position = slider.children.eq(slider.active.index * getMoveBy()).position();
+ // check for last slide
+ if (slider.active.index === getPagerQty() - 1) { slider.active.last = true; }
+ // set the respective position
+ if (position !== undefined) {
+ if (slider.settings.mode === 'horizontal') { setPositionProperty(-position.left, 'reset', 0); }
+ else if (slider.settings.mode === 'vertical') { setPositionProperty(-position.top, 'reset', 0); }
+ }
+ }
+ };
+
+ /**
+ * Sets the el's animating property position (which in turn will sometimes animate el).
+ * If using CSS, sets the transform property. If not using CSS, sets the top / left property.
+ *
+ * @param value (int)
+ * - the animating property's value
+ *
+ * @param type (string) 'slide', 'reset', 'ticker'
+ * - the type of instance for which the function is being
+ *
+ * @param duration (int)
+ * - the amount of time (in ms) the transition should occupy
+ *
+ * @param params (array) optional
+ * - an optional parameter containing any variables that need to be passed in
+ */
+ var setPositionProperty = function(value, type, duration, params) {
+ var animateObj, propValue;
+ // use CSS transform
+ if (slider.usingCSS) {
+ // determine the translate3d value
+ propValue = slider.settings.mode === 'vertical' ? 'translate3d(0, ' + value + 'px, 0)' : 'translate3d(' + value + 'px, 0, 0)';
+ // add the CSS transition-duration
+ el.css('-' + slider.cssPrefix + '-transition-duration', duration / 1000 + 's');
+ if (type === 'slide') {
+ // set the property value
+ el.css(slider.animProp, propValue);
+ if (duration !== 0) {
+ // bind a callback method - executes when CSS transition completes
+ el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
+ //make sure it's the correct one
+ if (!$(e.target).is(el)) { return; }
+ // unbind the callback
+ el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
+ updateAfterSlideTransition();
+ });
+ } else { //duration = 0
+ updateAfterSlideTransition();
+ }
+ } else if (type === 'reset') {
+ el.css(slider.animProp, propValue);
+ } else if (type === 'ticker') {
+ // make the transition use 'linear'
+ el.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear');
+ el.css(slider.animProp, propValue);
+ if (duration !== 0) {
+ el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
+ //make sure it's the correct one
+ if (!$(e.target).is(el)) { return; }
+ // unbind the callback
+ el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
+ // reset the position
+ setPositionProperty(params.resetValue, 'reset', 0);
+ // start the loop again
+ tickerLoop();
+ });
+ } else { //duration = 0
+ setPositionProperty(params.resetValue, 'reset', 0);
+ tickerLoop();
+ }
+ }
+ // use JS animate
+ } else {
+ animateObj = {};
+ animateObj[slider.animProp] = value;
+ if (type === 'slide') {
+ el.animate(animateObj, duration, slider.settings.easing, function() {
+ updateAfterSlideTransition();
+ });
+ } else if (type === 'reset') {
+ el.css(slider.animProp, value);
+ } else if (type === 'ticker') {
+ el.animate(animateObj, duration, 'linear', function() {
+ setPositionProperty(params.resetValue, 'reset', 0);
+ // run the recursive loop after animation
+ tickerLoop();
+ });
+ }
+ }
+ };
+
+ /**
+ * Populates the pager with proper amount of pages
+ */
+ var populatePager = function() {
+ var pagerHtml = '',
+ linkContent = '',
+ pagerQty = getPagerQty();
+ // loop through each pager item
+ for (var i = 0; i < pagerQty; i++) {
+ linkContent = '';
+ // if a buildPager function is supplied, use it to get pager link value, else use index + 1
+ if (slider.settings.buildPager && $.isFunction(slider.settings.buildPager) || slider.settings.pagerCustom) {
+ linkContent = slider.settings.buildPager(i);
+ slider.pagerEl.addClass('bx-custom-pager');
+ } else {
+ linkContent = i + 1;
+ slider.pagerEl.addClass('bx-default-pager');
+ }
+ // var linkContent = slider.settings.buildPager && $.isFunction(slider.settings.buildPager) ? slider.settings.buildPager(i) : i + 1;
+ // add the markup to the string
+ pagerHtml += '<div class="bx-pager-item"><a href="" data-slide-index="' + i + '" class="bx-pager-link">' + linkContent + '</a></div>';
+ }
+ // populate the pager element with pager links
+ slider.pagerEl.html(pagerHtml);
+ };
+
+ /**
+ * Appends the pager to the controls element
+ */
+ var appendPager = function() {
+ if (!slider.settings.pagerCustom) {
+ // create the pager DOM element
+ slider.pagerEl = $('<div class="bx-pager" />');
+ // if a pager selector was supplied, populate it with the pager
+ if (slider.settings.pagerSelector) {
+ $(slider.settings.pagerSelector).html(slider.pagerEl);
+ // if no pager selector was supplied, add it after the wrapper
+ } else {
+ slider.controls.el.addClass('bx-has-pager').append(slider.pagerEl);
+ }
+ // populate the pager
+ populatePager();
+ } else {
+ slider.pagerEl = $(slider.settings.pagerCustom);
+ }
+ // assign the pager click binding
+ slider.pagerEl.on('click touchend', 'a', clickPagerBind);
+ };
+
+ /**
+ * Appends prev / next controls to the controls element
+ */
+ var appendControls = function() {
+ slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a>');
+ slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>');
+ // bind click actions to the controls
+ slider.controls.next.bind('click touchend', clickNextBind);
+ slider.controls.prev.bind('click touchend', clickPrevBind);
+ // if nextSelector was supplied, populate it
+ if (slider.settings.nextSelector) {
+ $(slider.settings.nextSelector).append(slider.controls.next);
+ }
+ // if prevSelector was supplied, populate it
+ if (slider.settings.prevSelector) {
+ $(slider.settings.prevSelector).append(slider.controls.prev);
+ }
+ // if no custom selectors were supplied
+ if (!slider.settings.nextSelector && !slider.settings.prevSelector) {
+ // add the controls to the DOM
+ slider.controls.directionEl = $('<div class="bx-controls-direction" />');
+ // add the control elements to the directionEl
+ slider.controls.directionEl.append(slider.controls.prev).append(slider.controls.next);
+ // slider.viewport.append(slider.controls.directionEl);
+ slider.controls.el.addClass('bx-has-controls-direction').append(slider.controls.directionEl);
+ }
+ };
+
+ /**
+ * Appends start / stop auto controls to the controls element
+ */
+ var appendControlsAuto = function() {
+ slider.controls.start = $('<div class="bx-controls-auto-item"><a class="bx-start" href="">' + slider.settings.startText + '</a></div>');
+ slider.controls.stop = $('<div class="bx-controls-auto-item"><a class="bx-stop" href="">' + slider.settings.stopText + '</a></div>');
+ // add the controls to the DOM
+ slider.controls.autoEl = $('<div class="bx-controls-auto" />');
+ // bind click actions to the controls
+ slider.controls.autoEl.on('click', '.bx-start', clickStartBind);
+ slider.controls.autoEl.on('click', '.bx-stop', clickStopBind);
+ // if autoControlsCombine, insert only the "start" control
+ if (slider.settings.autoControlsCombine) {
+ slider.controls.autoEl.append(slider.controls.start);
+ // if autoControlsCombine is false, insert both controls
+ } else {
+ slider.controls.autoEl.append(slider.controls.start).append(slider.controls.stop);
+ }
+ // if auto controls selector was supplied, populate it with the controls
+ if (slider.settings.autoControlsSelector) {
+ $(slider.settings.autoControlsSelector).html(slider.controls.autoEl);
+ // if auto controls selector was not supplied, add it after the wrapper
+ } else {
+ slider.controls.el.addClass('bx-has-controls-auto').append(slider.controls.autoEl);
+ }
+ // update the auto controls
+ updateAutoControls(slider.settings.autoStart ? 'stop' : 'start');
+ };
+
+ /**
+ * Appends image captions to the DOM
+ */
+ var appendCaptions = function() {
+ // cycle through each child
+ slider.children.each(function(index) {
+ // get the image title attribute
+ var title = $(this).find('img:first').attr('title');
+ // append the caption
+ if (title !== undefined && ('' + title).length) {
+ $(this).append('<div class="bx-caption"><span>' + title + '</span></div>');
+ }
+ });
+ };
+
+ /**
+ * Click next binding
+ *
+ * @param e (event)
+ * - DOM event object
+ */
+ var clickNextBind = function(e) {
+ e.preventDefault();
+ if (slider.controls.el.hasClass('disabled')) { return; }
+ // if auto show is running, stop it
+ if (slider.settings.auto && slider.settings.stopAutoOnClick) { el.stopAuto(); }
+ el.goToNextSlide();
+ };
+
+ /**
+ * Click prev binding
+ *
+ * @param e (event)
+ * - DOM event object
+ */
+ var clickPrevBind = function(e) {
+ e.preventDefault();
+ if (slider.controls.el.hasClass('disabled')) { return; }
+ // if auto show is running, stop it
+ if (slider.settings.auto && slider.settings.stopAutoOnClick) { el.stopAuto(); }
+ el.goToPrevSlide();
+ };
+
+ /**
+ * Click start binding
+ *
+ * @param e (event)
+ * - DOM event object
+ */
+ var clickStartBind = function(e) {
+ el.startAuto();
+ e.preventDefault();
+ };
+
+ /**
+ * Click stop binding
+ *
+ * @param e (event)
+ * - DOM event object
+ */
+ var clickStopBind = function(e) {
+ el.stopAuto();
+ e.preventDefault();
+ };
+
+ /**
+ * Click pager binding
+ *
+ * @param e (event)
+ * - DOM event object
+ */
+ var clickPagerBind = function(e) {
+ var pagerLink, pagerIndex;
+ e.preventDefault();
+ if (slider.controls.el.hasClass('disabled')) {
+ return;
+ }
+ // if auto show is running, stop it
+ if (slider.settings.auto && slider.settings.stopAutoOnClick) { el.stopAuto(); }
+ pagerLink = $(e.currentTarget);
+ if (pagerLink.attr('data-slide-index') !== undefined) {
+ pagerIndex = parseInt(pagerLink.attr('data-slide-index'));
+ // if clicked pager link is not active, continue with the goToSlide call
+ if (pagerIndex !== slider.active.index) { el.goToSlide(pagerIndex); }
+ }
+ };
+
+ /**
+ * Updates the pager links with an active class
+ *
+ * @param slideIndex (int)
+ * - index of slide to make active
+ */
+ var updatePagerActive = function(slideIndex) {
+ // if "short" pager type
+ var len = slider.children.length; // nb of children
+ if (slider.settings.pagerType === 'short') {
+ if (slider.settings.maxSlides > 1) {
+ len = Math.ceil(slider.children.length / slider.settings.maxSlides);
+ }
+ slider.pagerEl.html((slideIndex + 1) + slider.settings.pagerShortSeparator + len);
+ return;
+ }
+ // remove all pager active classes
+ slider.pagerEl.find('a').removeClass('active');
+ // apply the active class for all pagers
+ slider.pagerEl.each(function(i, el) { $(el).find('a').eq(slideIndex).addClass('active'); });
+ };
+
+ /**
+ * Performs needed actions after a slide transition
+ */
+ var updateAfterSlideTransition = function() {
+ // if infinite loop is true
+ if (slider.settings.infiniteLoop) {
+ var position = '';
+ // first slide
+ if (slider.active.index === 0) {
+ // set the new position
+ position = slider.children.eq(0).position();
+ // carousel, last slide
+ } else if (slider.active.index === getPagerQty() - 1 && slider.carousel) {
+ position = slider.children.eq((getPagerQty() - 1) * getMoveBy()).position();
+ // last slide
+ } else if (slider.active.index === slider.children.length - 1) {
+ position = slider.children.eq(slider.children.length - 1).position();
+ }
+ if (position) {
+ if (slider.settings.mode === 'horizontal') { setPositionProperty(-position.left, 'reset', 0); }
+ else if (slider.settings.mode === 'vertical') { setPositionProperty(-position.top, 'reset', 0); }
+ }
+ }
+ // declare that the transition is complete
+ slider.working = false;
+ // onSlideAfter callback
+ slider.settings.onSlideAfter.call(el, slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
+ };
+
+ /**
+ * Updates the auto controls state (either active, or combined switch)
+ *
+ * @param state (string) "start", "stop"
+ * - the new state of the auto show
+ */
+ var updateAutoControls = function(state) {
+ // if autoControlsCombine is true, replace the current control with the new state
+ if (slider.settings.autoControlsCombine) {
+ slider.controls.autoEl.html(slider.controls[state]);
+ // if autoControlsCombine is false, apply the "active" class to the appropriate control
+ } else {
+ slider.controls.autoEl.find('a').removeClass('active');
+ slider.controls.autoEl.find('a:not(.bx-' + state + ')').addClass('active');
+ }
+ };
+
+ /**
+ * Updates the direction controls (checks if either should be hidden)
+ */
+ var updateDirectionControls = function() {
+ if (getPagerQty() === 1) {
+ slider.controls.prev.addClass('disabled');
+ slider.controls.next.addClass('disabled');
+ } else if (!slider.settings.infiniteLoop && slider.settings.hideControlOnEnd) {
+ // if first slide
+ if (slider.active.index === 0) {
+ slider.controls.prev.addClass('disabled');
+ slider.controls.next.removeClass('disabled');
+ // if last slide
+ } else if (slider.active.index === getPagerQty() - 1) {
+ slider.controls.next.addClass('disabled');
+ slider.controls.prev.removeClass('disabled');
+ // if any slide in the middle
+ } else {
+ slider.controls.prev.removeClass('disabled');
+ slider.controls.next.removeClass('disabled');
+ }
+ }
+ };
+
+ /**
+ * Initializes the auto process
+ */
+ var initAuto = function() {
+ // if autoDelay was supplied, launch the auto show using a setTimeout() call
+ if (slider.settings.autoDelay > 0) {
+ var timeout = setTimeout(el.startAuto, slider.settings.autoDelay);
+ // if autoDelay was not supplied, start the auto show normally
+ } else {
+ el.startAuto();
+
+ //add focus and blur events to ensure its running if timeout gets paused
+ $(window).focus(function() {
+ el.startAuto();
+ }).blur(function() {
+ el.stopAuto();
+ });
+ }
+ // if autoHover is requested
+ if (slider.settings.autoHover) {
+ // on el hover
+ el.hover(function() {
+ // if the auto show is currently playing (has an active interval)
+ if (slider.interval) {
+ // stop the auto show and pass true argument which will prevent control update
+ el.stopAuto(true);
+ // create a new autoPaused value which will be used by the relative "mouseout" event
+ slider.autoPaused = true;
+ }
+ }, function() {
+ // if the autoPaused value was created be the prior "mouseover" event
+ if (slider.autoPaused) {
+ // start the auto show and pass true argument which will prevent control update
+ el.startAuto(true);
+ // reset the autoPaused value
+ slider.autoPaused = null;
+ }
+ });
+ }
+ };
+
+ /**
+ * Initializes the ticker process
+ */
+ var initTicker = function() {
+ var startPosition = 0,
+ position, transform, value, idx, ratio, property, newSpeed, totalDimens;
+ // if autoDirection is "next", append a clone of the entire slider
+ if (slider.settings.autoDirection === 'next') {
+ el.append(slider.children.clone().addClass('bx-clone'));
+ // if autoDirection is "prev", prepend a clone of the entire slider, and set the left position
+ } else {
+ el.prepend(slider.children.clone().addClass('bx-clone'));
+ position = slider.children.first().position();
+ startPosition = slider.settings.mode === 'horizontal' ? -position.left : -position.top;
+ }
+ setPositionProperty(startPosition, 'reset', 0);
+ // do not allow controls in ticker mode
+ slider.settings.pager = false;
+ slider.settings.controls = false;
+ slider.settings.autoControls = false;
+ // if autoHover is requested
+ if (slider.settings.tickerHover) {
+ if (slider.usingCSS) {
+ idx = slider.settings.mode === 'horizontal' ? 4 : 5;
+ slider.viewport.hover(function() {
+ transform = el.css('-' + slider.cssPrefix + '-transform');
+ value = parseFloat(transform.split(',')[idx]);
+ setPositionProperty(value, 'reset', 0);
+ }, function() {
+ totalDimens = 0;
+ slider.children.each(function(index) {
+ totalDimens += slider.settings.mode === 'horizontal' ? $(this).outerWidth(true) : $(this).outerHeight(true);
+ });
+ // calculate the speed ratio (used to determine the new speed to finish the paused animation)
+ ratio = slider.settings.speed / totalDimens;
+ // determine which property to use
+ property = slider.settings.mode === 'horizontal' ? 'left' : 'top';
+ // calculate the new speed
+ newSpeed = ratio * (totalDimens - (Math.abs(parseInt(value))));
+ tickerLoop(newSpeed);
+ });
+ } else {
+ // on el hover
+ slider.viewport.hover(function() {
+ el.stop();
+ }, function() {
+ // calculate the total width of children (used to calculate the speed ratio)
+ totalDimens = 0;
+ slider.children.each(function(index) {
+ totalDimens += slider.settings.mode === 'horizontal' ? $(this).outerWidth(true) : $(this).outerHeight(true);
+ });
+ // calculate the speed ratio (used to determine the new speed to finish the paused animation)
+ ratio = slider.settings.speed / totalDimens;
+ // determine which property to use
+ property = slider.settings.mode === 'horizontal' ? 'left' : 'top';
+ // calculate the new speed
+ newSpeed = ratio * (totalDimens - (Math.abs(parseInt(el.css(property)))));
+ tickerLoop(newSpeed);
+ });
+ }
+ }
+ // start the ticker loop
+ tickerLoop();
+ };
+
+ /**
+ * Runs a continuous loop, news ticker-style
+ */
+ var tickerLoop = function(resumeSpeed) {
+ var speed = resumeSpeed ? resumeSpeed : slider.settings.speed,
+ position = {left: 0, top: 0},
+ reset = {left: 0, top: 0},
+ animateProperty, resetValue, params;
+
+ // if "next" animate left position to last child, then reset left to 0
+ if (slider.settings.autoDirection === 'next') {
+ position = el.find('.bx-clone').first().position();
+ // if "prev" animate left position to 0, then reset left to first non-clone child
+ } else {
+ reset = slider.children.first().position();
+ }
+ animateProperty = slider.settings.mode === 'horizontal' ? -position.left : -position.top;
+ resetValue = slider.settings.mode === 'horizontal' ? -reset.left : -reset.top;
+ params = {resetValue: resetValue};
+ setPositionProperty(animateProperty, 'ticker', speed, params);
+ };
+
+ /**
+ * Check if el is on screen
+ */
+ var isOnScreen = function(el) {
+ var win = $(window),
+ viewport = {
+ top: win.scrollTop(),
+ left: win.scrollLeft()
+ },
+ bounds = el.offset();
+
+ viewport.right = viewport.left + win.width();
+ viewport.bottom = viewport.top + win.height();
+ bounds.right = bounds.left + el.outerWidth();
+ bounds.bottom = bounds.top + el.outerHeight();
+
+ return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
+ };
+
+ /**
+ * Initializes keyboard events
+ */
+ var keyPress = function(e) {
+ var activeElementTag = document.activeElement.tagName.toLowerCase(),
+ tagFilters = 'input|textarea',
+ p = new RegExp(activeElementTag,['i']),
+ result = p.exec(tagFilters);
+
+ if (result == null && isOnScreen(el)) {
+ if (e.keyCode === 39) {
+ clickNextBind(e);
+ return false;
+ } else if (e.keyCode === 37) {
+ clickPrevBind(e);
+ return false;
+ }
+ }
+ };
+
+ /**
+ * Initializes touch events
+ */
+ var initTouch = function() {
+ // initialize object to contain all touch values
+ slider.touch = {
+ start: {x: 0, y: 0},
+ end: {x: 0, y: 0}
+ };
+ slider.viewport.bind('touchstart MSPointerDown pointerdown', onTouchStart);
+
+ //for browsers that have implemented pointer events and fire a click after
+ //every pointerup regardless of whether pointerup is on same screen location as pointerdown or not
+ slider.viewport.on('click', '.bxslider a', function(e) {
+ if (slider.viewport.hasClass('click-disabled')) {
+ e.preventDefault();
+ slider.viewport.removeClass('click-disabled');
+ }
+ });
+ };
+
+ /**
+ * Event handler for "touchstart"
+ *
+ * @param e (event)
+ * - DOM event object
+ */
+ var onTouchStart = function(e) {
+ //disable slider controls while user is interacting with slides to avoid slider freeze that happens on touch devices when a slide swipe happens immediately after interacting with slider controls
+ slider.controls.el.addClass('disabled');
+
+ if (slider.working) {
+ e.preventDefault();
+ slider.controls.el.removeClass('disabled');
+ } else {
+ // record the original position when touch starts
+ slider.touch.originalPos = el.position();
+ var orig = e.originalEvent,
+ touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig];
+ // record the starting touch x, y coordinates
+ slider.touch.start.x = touchPoints[0].pageX;
+ slider.touch.start.y = touchPoints[0].pageY;
+
+ if (slider.viewport.get(0).setPointerCapture) {
+ slider.pointerId = orig.pointerId;
+ slider.viewport.get(0).setPointerCapture(slider.pointerId);
+ }
+ // bind a "touchmove" event to the viewport
+ slider.viewport.bind('touchmove MSPointerMove pointermove', onTouchMove);
+ // bind a "touchend" event to the viewport
+ slider.viewport.bind('touchend MSPointerUp pointerup', onTouchEnd);
+ slider.viewport.bind('MSPointerCancel pointercancel', onPointerCancel);
+ }
+ };
+
+ /**
+ * Cancel Pointer for Windows Phone
+ *
+ * @param e (event)
+ * - DOM event object
+ */
+ var onPointerCancel = function(e) {
+ /* onPointerCancel handler is needed to deal with situations when a touchend
+ doesn't fire after a touchstart (this happens on windows phones only) */
+ setPositionProperty(slider.touch.originalPos.left, 'reset', 0);
+
+ //remove handlers
+ slider.controls.el.removeClass('disabled');
+ slider.viewport.unbind('MSPointerCancel pointercancel', onPointerCancel);
+ slider.viewport.unbind('touchmove MSPointerMove pointermove', onTouchMove);
+ slider.viewport.unbind('touchend MSPointerUp pointerup', onTouchEnd);
+ if (slider.viewport.get(0).releasePointerCapture) {
+ slider.viewport.get(0).releasePointerCapture(slider.pointerId);
+ }
+ };
+
+ /**
+ * Event handler for "touchmove"
+ *
+ * @param e (event)
+ * - DOM event object
+ */
+ var onTouchMove = function(e) {
+ var orig = e.originalEvent,
+ touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig],
+ // if scrolling on y axis, do not prevent default
+ xMovement = Math.abs(touchPoints[0].pageX - slider.touch.start.x),
+ yMovement = Math.abs(touchPoints[0].pageY - slider.touch.start.y),
+ value = 0,
+ change = 0;
+
+ // x axis swipe
+ if ((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX) {
+ e.preventDefault();
+ // y axis swipe
+ } else if ((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY) {
+ e.preventDefault();
+ }
+ if (slider.settings.mode !== 'fade' && slider.settings.oneToOneTouch) {
+ // if horizontal, drag along x axis
+ if (slider.settings.mode === 'horizontal') {
+ change = touchPoints[0].pageX - slider.touch.start.x;
+ value = slider.touch.originalPos.left + change;
+ // if vertical, drag along y axis
+ } else {
+ change = touchPoints[0].pageY - slider.touch.start.y;
+ value = slider.touch.originalPos.top + change;
+ }
+ setPositionProperty(value, 'reset', 0);
+ }
+ };
+
+ /**
+ * Event handler for "touchend"
+ *
+ * @param e (event)
+ * - DOM event object
+ */
+ var onTouchEnd = function(e) {
+ slider.viewport.unbind('touchmove MSPointerMove pointermove', onTouchMove);
+ //enable slider controls as soon as user stops interacing with slides
+ slider.controls.el.removeClass('disabled');
+ var orig = e.originalEvent,
+ touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig],
+ value = 0,
+ distance = 0;
+ // record end x, y positions
+ slider.touch.end.x = touchPoints[0].pageX;
+ slider.touch.end.y = touchPoints[0].pageY;
+ // if fade mode, check if absolute x distance clears the threshold
+ if (slider.settings.mode === 'fade') {
+ distance = Math.abs(slider.touch.start.x - slider.touch.end.x);
+ if (distance >= slider.settings.swipeThreshold) {
+ if (slider.touch.start.x > slider.touch.end.x) {
+ el.goToNextSlide();
+ } else {
+ el.goToPrevSlide();
+ }
+ el.stopAuto();
+ }
+ // not fade mode
+ } else {
+ // calculate distance and el's animate property
+ if (slider.settings.mode === 'horizontal') {
+ distance = slider.touch.end.x - slider.touch.start.x;
+ value = slider.touch.originalPos.left;
+ } else {
+ distance = slider.touch.end.y - slider.touch.start.y;
+ value = slider.touch.originalPos.top;
+ }
+ // if not infinite loop and first / last slide, do not attempt a slide transition
+ if (!slider.settings.infiniteLoop && ((slider.active.index === 0 && distance > 0) || (slider.active.last && distance < 0))) {
+ setPositionProperty(value, 'reset', 200);
+ } else {
+ // check if distance clears threshold
+ if (Math.abs(distance) >= slider.settings.swipeThreshold) {
+ if (distance < 0) {
+ el.goToNextSlide();
+ } else {
+ el.goToPrevSlide();
+ }
+ el.stopAuto();
+ } else {
+ // el.animate(property, 200);
+ setPositionProperty(value, 'reset', 200);
+ }
+ }
+ }
+ slider.viewport.unbind('touchend MSPointerUp pointerup', onTouchEnd);
+ if (slider.viewport.get(0).releasePointerCapture) {
+ slider.viewport.get(0).releasePointerCapture(slider.pointerId);
+ }
+ };
+
+ /**
+ * Window resize event callback
+ */
+ var resizeWindow = function(e) {
+ // don't do anything if slider isn't initialized.
+ if (!slider.initialized) { return; }
+ // Delay if slider working.
+ if (slider.working) {
+ window.setTimeout(resizeWindow, 10);
+ } else {
+ // get the new window dimens (again, thank you IE)
+ var windowWidthNew = $(window).width(),
+ windowHeightNew = $(window).height();
+ // make sure that it is a true window resize
+ // *we must check this because our dinosaur friend IE fires a window resize event when certain DOM elements
+ // are resized. Can you just die already?*
+ if (windowWidth !== windowWidthNew || windowHeight !== windowHeightNew) {
+ // set the new window dimens
+ windowWidth = windowWidthNew;
+ windowHeight = windowHeightNew;
+ // update all dynamic elements
+ el.redrawSlider();
+ // Call user resize handler
+ slider.settings.onSliderResize.call(el, slider.active.index);
+ }
+ }
+ };
+
+ /**
+ * Adds an aria-hidden=true attribute to each element
+ *
+ * @param startVisibleIndex (int)
+ * - the first visible element's index
+ */
+ var applyAriaHiddenAttributes = function(startVisibleIndex) {
+ var numberOfSlidesShowing = getNumberSlidesShowing();
+ // only apply attributes if the setting is enabled and not in ticker mode
+ if (slider.settings.ariaHidden && !slider.settings.ticker) {
+ // add aria-hidden=true to all elements
+ slider.children.attr('aria-hidden', 'true');
+ // get the visible elements and change to aria-hidden=false
+ slider.children.slice(startVisibleIndex, startVisibleIndex + numberOfSlidesShowing).attr('aria-hidden', 'false');
+ }
+ };
+
+ /**
+ * Returns index according to present page range
+ *
+ * @param slideOndex (int)
+ * - the desired slide index
+ */
+ var setSlideIndex = function(slideIndex) {
+ if (slideIndex < 0) {
+ if (slider.settings.infiniteLoop) {
+ return getPagerQty() - 1;
+ }else {
+ //we don't go to undefined slides
+ return slider.active.index;
+ }
+ // if slideIndex is greater than children length, set active index to 0 (this happens during infinite loop)
+ } else if (slideIndex >= getPagerQty()) {
+ if (slider.settings.infiniteLoop) {
+ return 0;
+ } else {
+ //we don't move to undefined pages
+ return slider.active.index;
+ }
+ // set active index to requested slide
+ } else {
+ return slideIndex;
+ }
+ };
+
+ /**
+ * ===================================================================================
+ * = PUBLIC FUNCTIONS
+ * ===================================================================================
+ */
+
+ /**
+ * Performs slide transition to the specified slide
+ *
+ * @param slideIndex (int)
+ * - the destination slide's index (zero-based)
+ *
+ * @param direction (string)
+ * - INTERNAL USE ONLY - the direction of travel ("prev" / "next")
+ */
+ el.goToSlide = function(slideIndex, direction) {
+ // onSlideBefore, onSlideNext, onSlidePrev callbacks
+ // Allow transition canceling based on returned value
+ var performTransition = true,
+ moveBy = 0,
+ position = {left: 0, top: 0},
+ lastChild = null,
+ lastShowingIndex, eq, value, requestEl;
+ // store the old index
+ slider.oldIndex = slider.active.index;
+ //set new index
+ slider.active.index = setSlideIndex(slideIndex);
+
+ // if plugin is currently in motion, ignore request
+ if (slider.working || slider.active.index === slider.oldIndex) { return; }
+ // declare that plugin is in motion
+ slider.working = true;
+
+ performTransition = slider.settings.onSlideBefore.call(el, slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
+
+ // If transitions canceled, reset and return
+ if (typeof (performTransition) !== 'undefined' && !performTransition) {
+ slider.active.index = slider.oldIndex; // restore old index
+ slider.working = false; // is not in motion
+ return;
+ }
+
+ if (direction === 'next') {
+ // Prevent canceling in future functions or lack there-of from negating previous commands to cancel
+ if (!slider.settings.onSlideNext.call(el, slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index)) {
+ performTransition = false;
+ }
+ } else if (direction === 'prev') {
+ // Prevent canceling in future functions or lack there-of from negating previous commands to cancel
+ if (!slider.settings.onSlidePrev.call(el, slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index)) {
+ performTransition = false;
+ }
+ }
+
+ // check if last slide
+ slider.active.last = slider.active.index >= getPagerQty() - 1;
+ // update the pager with active class
+ if (slider.settings.pager || slider.settings.pagerCustom) { updatePagerActive(slider.active.index); }
+ // // check for direction control update
+ if (slider.settings.controls) { updateDirectionControls(); }
+ // if slider is set to mode: "fade"
+ if (slider.settings.mode === 'fade') {
+ // if adaptiveHeight is true and next height is different from current height, animate to the new height
+ if (slider.settings.adaptiveHeight && slider.viewport.height() !== getViewportHeight()) {
+ slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
+ }
+ // fade out the visible child and reset its z-index value
+ slider.children.filter(':visible').fadeOut(slider.settings.speed).css({zIndex: 0});
+ // fade in the newly requested slide
+ slider.children.eq(slider.active.index).css('zIndex', slider.settings.slideZIndex + 1).fadeIn(slider.settings.speed, function() {
+ $(this).css('zIndex', slider.settings.slideZIndex);
+ updateAfterSlideTransition();
+ });
+ // slider mode is not "fade"
+ } else {
+ // if adaptiveHeight is true and next height is different from current height, animate to the new height
+ if (slider.settings.adaptiveHeight && slider.viewport.height() !== getViewportHeight()) {
+ slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
+ }
+ // if carousel and not infinite loop
+ if (!slider.settings.infiniteLoop && slider.carousel && slider.active.last) {
+ if (slider.settings.mode === 'horizontal') {
+ // get the last child position
+ lastChild = slider.children.eq(slider.children.length - 1);
+ position = lastChild.position();
+ // calculate the position of the last slide
+ moveBy = slider.viewport.width() - lastChild.outerWidth();
+ } else {
+ // get last showing index position
+ lastShowingIndex = slider.children.length - slider.settings.minSlides;
+ position = slider.children.eq(lastShowingIndex).position();
+ }
+ // horizontal carousel, going previous while on first slide (infiniteLoop mode)
+ } else if (slider.carousel && slider.active.last && direction === 'prev') {
+ // get the last child position
+ eq = slider.settings.moveSlides === 1 ? slider.settings.maxSlides - getMoveBy() : ((getPagerQty() - 1) * getMoveBy()) - (slider.children.length - slider.settings.maxSlides);
+ lastChild = el.children('.bx-clone').eq(eq);
+ position = lastChild.position();
+ // if infinite loop and "Next" is clicked on the last slide
+ } else if (direction === 'next' && slider.active.index === 0) {
+ // get the last clone position
+ position = el.find('> .bx-clone').eq(slider.settings.maxSlides).position();
+ slider.active.last = false;
+ // normal non-zero requests
+ } else if (slideIndex >= 0) {
+ //parseInt is applied to allow floats for slides/page
+ requestEl = slideIndex * parseInt(getMoveBy());
+ position = slider.children.eq(requestEl).position();
+ }
+
+ /* If the position doesn't exist
+ * (e.g. if you destroy the slider on a next click),
+ * it doesn't throw an error.
+ */
+ if (typeof (position) !== 'undefined') {
+ value = slider.settings.mode === 'horizontal' ? -(position.left - moveBy) : -position.top;
+ // plugin values to be animated
+ setPositionProperty(value, 'slide', slider.settings.speed);
+ } else {
+ slider.working = false;
+ }
+ }
+ if (slider.settings.ariaHidden) { applyAriaHiddenAttributes(slider.active.index * getMoveBy()); }
+ };
+
+ /**
+ * Transitions to the next slide in the show
+ */
+ el.goToNextSlide = function() {
+ // if infiniteLoop is false and last page is showing, disregard call
+ if (!slider.settings.infiniteLoop && slider.active.last) { return; }
+ var pagerIndex = parseInt(slider.active.index) + 1;
+ el.goToSlide(pagerIndex, 'next');
+ };
+
+ /**
+ * Transitions to the prev slide in the show
+ */
+ el.goToPrevSlide = function() {
+ // if infiniteLoop is false and last page is showing, disregard call
+ if (!slider.settings.infiniteLoop && slider.active.index === 0) { return; }
+ var pagerIndex = parseInt(slider.active.index) - 1;
+ el.goToSlide(pagerIndex, 'prev');
+ };
+
+ /**
+ * Starts the auto show
+ *
+ * @param preventControlUpdate (boolean)
+ * - if true, auto controls state will not be updated
+ */
+ el.startAuto = function(preventControlUpdate) {
+ // if an interval already exists, disregard call
+ if (slider.interval) { return; }
+ // create an interval
+ slider.interval = setInterval(function() {
+ if (slider.settings.autoDirection === 'next') {
+ el.goToNextSlide();
+ } else {
+ el.goToPrevSlide();
+ }
+ }, slider.settings.pause);
+ // if auto controls are displayed and preventControlUpdate is not true
+ if (slider.settings.autoControls && preventControlUpdate !== true) { updateAutoControls('stop'); }
+ };
+
+ /**
+ * Stops the auto show
+ *
+ * @param preventControlUpdate (boolean)
+ * - if true, auto controls state will not be updated
+ */
+ el.stopAuto = function(preventControlUpdate) {
+ // if no interval exists, disregard call
+ if (!slider.interval) { return; }
+ // clear the interval
+ clearInterval(slider.interval);
+ slider.interval = null;
+ // if auto controls are displayed and preventControlUpdate is not true
+ if (slider.settings.autoControls && preventControlUpdate !== true) { updateAutoControls('start'); }
+ };
+
+ /**
+ * Returns current slide index (zero-based)
+ */
+ el.getCurrentSlide = function() {
+ return slider.active.index;
+ };
+
+ /**
+ * Returns current slide element
+ */
+ el.getCurrentSlideElement = function() {
+ return slider.children.eq(slider.active.index);
+ };
+
+ /**
+ * Returns a slide element
+ * @param index (int)
+ * - The index (zero-based) of the element you want returned.
+ */
+ el.getSlideElement = function(index) {
+ return slider.children.eq(index);
+ };
+
+ /**
+ * Returns number of slides in show
+ */
+ el.getSlideCount = function() {
+ return slider.children.length;
+ };
+
+ /**
+ * Return slider.working variable
+ */
+ el.isWorking = function() {
+ return slider.working;
+ };
+
+ /**
+ * Update all dynamic slider elements
+ */
+ el.redrawSlider = function() {
+ // resize all children in ratio to new screen size
+ slider.children.add(el.find('.bx-clone')).outerWidth(getSlideWidth());
+ // adjust the height
+ slider.viewport.css('height', getViewportHeight());
+ // update the slide position
+ if (!slider.settings.ticker) { setSlidePosition(); }
+ // if active.last was true before the screen resize, we want
+ // to keep it last no matter what screen size we end on
+ if (slider.active.last) { slider.active.index = getPagerQty() - 1; }
+ // if the active index (page) no longer exists due to the resize, simply set the index as last
+ if (slider.active.index >= getPagerQty()) { slider.active.last = true; }
+ // if a pager is being displayed and a custom pager is not being used, update it
+ if (slider.settings.pager && !slider.settings.pagerCustom) {
+ populatePager();
+ updatePagerActive(slider.active.index);
+ }
+ if (slider.settings.ariaHidden) { applyAriaHiddenAttributes(slider.active.index * getMoveBy()); }
+ };
+
+ /**
+ * Destroy the current instance of the slider (revert everything back to original state)
+ */
+ el.destroySlider = function() {
+ // don't do anything if slider has already been destroyed
+ if (!slider.initialized) { return; }
+ slider.initialized = false;
+ $('.bx-clone', this).remove();
+ slider.children.each(function() {
+ if ($(this).data('origStyle') !== undefined) {
+ $(this).attr('style', $(this).data('origStyle'));
+ } else {
+ $(this).removeAttr('style');
+ }
+ });
+ if ($(this).data('origStyle') !== undefined) {
+ this.attr('style', $(this).data('origStyle'));
+ } else {
+ $(this).removeAttr('style');
+ }
+ $(this).unwrap().unwrap();
+ if (slider.controls.el) { slider.controls.el.remove(); }
+ if (slider.controls.next) { slider.controls.next.remove(); }
+ if (slider.controls.prev) { slider.controls.prev.remove(); }
+ if (slider.pagerEl && slider.settings.controls && !slider.settings.pagerCustom) { slider.pagerEl.remove(); }
+ $('.bx-caption', this).remove();
+ if (slider.controls.autoEl) { slider.controls.autoEl.remove(); }
+ clearInterval(slider.interval);
+ if (slider.settings.responsive) { $(window).unbind('resize', resizeWindow); }
+ if (slider.settings.keyboardEnabled) { $(document).unbind('keydown', keyPress); }
+ //remove self reference in data
+ $(this).removeData('bxSlider');
+ };
+
+ /**
+ * Reload the slider (revert all DOM changes, and re-initialize)
+ */
+ el.reloadSlider = function(settings) {
+ if (settings !== undefined) { options = settings; }
+ el.destroySlider();
+ init();
+ //store reference to self in order to access public functions later
+ $(el).data('bxSlider', this);
+ };
+
+ init();
+
+ $(el).data('bxSlider', this);
+
+ // returns the current jQuery object
+ return this;
+ };
+
+})(jQuery);
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (4 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 05/16] Introduce support for "bxslider" jquery add on Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 16:19 ` Kashyap Chamarthy
2020-10-27 18:45 ` Paolo Bonzini
2020-10-27 13:20 ` [qemu-web PATCH v2 07/16] Compress the two front page headings into one Daniel P. Berrangé
` (10 subsequent siblings)
16 siblings, 2 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
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é <berrange@redhat.com>
---
_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
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 07/16] Compress the two front page headings into one
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (5 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 08/16] Simplify copyright and integrate into footer Daniel P. Berrangé
` (9 subsequent siblings)
16 siblings, 0 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
The current headings are repetative and waste vertical screen real
estate which could hold more useful content.
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
index.html | 6 +-----
1 file changed, 1 insertion(+), 5 deletions(-)
diff --git a/index.html b/index.html
index 48304c8..4f01fe9 100644
--- a/index.html
+++ b/index.html
@@ -9,17 +9,13 @@ bxslider: True
<div id="header">
<div class="container">
<h1>QEMU</h1>
- <span class="tag">the FAST! processor emulator</span>
+ <span class="tag">A generic and open source machine emulator and virtualizer</p>
</div>
</div>
<!-- Featured -->
<div id="featured">
<div class="container">
- <header>
- <h2>What is QEMU?</h2>
- <p>QEMU is a generic and open source machine emulator and virtualizer.</p>
- </header>
<div class="row slider screenshots">
{% include screenshot.html %}
</div>
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 08/16] Simplify copyright and integrate into footer
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (6 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 07/16] Compress the two front page headings into one Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 09/16] Put a full SFC membership blurb in footer of every page Daniel P. Berrangé
` (8 subsequent siblings)
16 siblings, 0 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
The copyright information is at the base of the page so logically part of
the page footer structure.
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
_includes/copyright.html | 8 --------
| 3 +++
_layouts/blog.html | 1 -
_layouts/home.html | 1 -
_layouts/page.html | 1 -
assets/css/style-mobile.css | 2 +-
assets/css/style.css | 29 ++++++++++++-----------------
7 files changed, 16 insertions(+), 29 deletions(-)
delete mode 100644 _includes/copyright.html
diff --git a/_includes/copyright.html b/_includes/copyright.html
deleted file mode 100644
index cdcd98f..0000000
--- a/_includes/copyright.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div id="copyright">
- <div id="copyright-inner">
- <div class="container">
- This site is made available under the terms of
- <a href="{{ relative_root }}/license.html">a number of licenses</a>.
- </div>
- </div>
-</div>
--git a/_includes/footer.html b/_includes/footer.html
index b614795..6e1b247 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -27,4 +27,7 @@
<li><a href="https://xenproject.org">Xen</a></li>
</ul>
</div>
+ <div id="licenses">
+ <a href="{{ relative_root }}/license.html">Website licenses</a>
+ </div>
</div>
diff --git a/_layouts/blog.html b/_layouts/blog.html
index b300636..b7fcdbf 100644
--- a/_layouts/blog.html
+++ b/_layouts/blog.html
@@ -21,7 +21,6 @@ Released for free under the Creative Commons Attribution 3.0 license (templated.
{% include sidebar.html %}
{% include footer.html %}
- {% include copyright.html %}
</body>
</html>
diff --git a/_layouts/home.html b/_layouts/home.html
index d94c9b0..f7b6931 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -18,7 +18,6 @@ Released for free under the Creative Commons Attribution 3.0 license (templated.
{{ content }}
{% include footer.html %}
- {% include copyright.html %}
</body>
</html>
diff --git a/_layouts/page.html b/_layouts/page.html
index d650054..765d204 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -23,7 +23,6 @@ Released for free under the Creative Commons Attribution 3.0 license (templated.
</div>
{% include footer.html %}
- {% include copyright.html %}
</body>
</html>
diff --git a/assets/css/style-mobile.css b/assets/css/style-mobile.css
index 8910e71..d045d84 100644
--- a/assets/css/style-mobile.css
+++ b/assets/css/style-mobile.css
@@ -242,7 +242,7 @@
/* Columns */
/*********************************************************************************/
- #main, #footer-inner, #copyright-inner
+ #main, #footer-inner
{
margin-left: 0%;
width: 100%;
diff --git a/assets/css/style.css b/assets/css/style.css
index 855217b..c9452e3 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -428,7 +428,7 @@
/* Columns */
/*********************************************************************************/
- #main, #copyright-inner
+ #main
{
margin-left: 16.667%;
width: 66.667%;
@@ -523,23 +523,18 @@
margin: 0
}
-/*********************************************************************************/
-/* Copyright */
-/*********************************************************************************/
-
- #copyright
- {
- clear: left;
- border-top: 1px solid #aaaaaa;
- position: relative;
- color: #aaaaaa;
- background: #ffffff;
- padding: 1em 0em;
+ #licenses {
+ padding: 0em;
+ padding-left: 1em;
+ padding-right: 1em;
+ font-size: smaller;
+ color: #401200;
+ background: #fff;
+ margin: 1em;
}
-
- #copyright a
- {
- color: inherit;
+
+ #licenses {
+ float: right;
}
/*********************************************************************************/
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 09/16] Put a full SFC membership blurb in footer of every page
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (7 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 08/16] Simplify copyright and integrate into footer Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 10/16] Use two column layout to display screenshots and releases Daniel P. Berrangé
` (7 subsequent siblings)
16 siblings, 0 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
| 4 +++-
assets/css/style.css | 6 +++++-
index.html | 3 ---
3 files changed, 8 insertions(+), 5 deletions(-)
--git a/_includes/footer.html b/_includes/footer.html
index 6e1b247..411ff55 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -3,7 +3,6 @@
<ul class="style">
<li><a href="{{ relative_root }}/">Home</a></li>
<li><a href="{{ relative_root }}/download">Download</a></li>
- <li><a href="{{ relative_root }}/conservancy/">Conservancy / Committee</a></li>
<li><a href="http://qemu-advent-calendar.org">QEMU advent calendar</a></li>
</ul>
<ul class="style">
@@ -27,6 +26,9 @@
<li><a href="https://xenproject.org">Xen</a></li>
</ul>
</div>
+ <div id="conservancy">
+ QEMU is a member of <a href="{{ relative_root }}/conservancy/">Software Freedom Conservancy</a>
+ </div>
<div id="licenses">
<a href="{{ relative_root }}/license.html">Website licenses</a>
</div>
diff --git a/assets/css/style.css b/assets/css/style.css
index c9452e3..a12a9e3 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -523,7 +523,7 @@
margin: 0
}
- #licenses {
+ #licenses, #conservancy {
padding: 0em;
padding-left: 1em;
padding-right: 1em;
@@ -536,6 +536,10 @@
#licenses {
float: right;
}
+
+ #conservancy {
+ float: left;
+ }
/*********************************************************************************/
/* Featured */
diff --git a/index.html b/index.html
index 4f01fe9..4501811 100644
--- a/index.html
+++ b/index.html
@@ -53,9 +53,6 @@ $(document).ready(function(){
});
});
</script>
-
- <hr>
- <p>QEMU is a member of <a href="{{ relative_root }}/conservancy/">Software Freedom Conservancy</a>.</p>
</div>
</div>
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 10/16] Use two column layout to display screenshots and releases
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (8 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 09/16] Put a full SFC membership blurb in footer of every page Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 11/16] Bring contribution links out of the footer into the home page Daniel P. Berrangé
` (6 subsequent siblings)
16 siblings, 0 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, 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
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 11/16] Bring contribution links out of the footer into the home page
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (9 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 10/16] Use two column layout to display screenshots and releases Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 15:02 ` Kashyap Chamarthy
2020-10-27 13:20 ` [qemu-web PATCH v2 12/16] Add recent blog posts to the front page featured content Daniel P. Berrangé
` (5 subsequent siblings)
16 siblings, 1 reply; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
The selection of contribution links are important information to present
to visitors to the site. They are best placed in a prominent position on
the home page rather than in the footer
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
| 7 -------
index.html | 8 ++++++++
2 files changed, 8 insertions(+), 7 deletions(-)
--git a/_includes/footer.html b/_includes/footer.html
index 411ff55..07f7866 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -5,13 +5,6 @@
<li><a href="{{ relative_root }}/download">Download</a></li>
<li><a href="http://qemu-advent-calendar.org">QEMU advent calendar</a></li>
</ul>
- <ul class="style">
- <li><a href="{{ relative_root }}/contribute">Contribute</a></li>
- <li><a href="{{ relative_root }}/contribute/report-a-bug">Reporting a bug</a></li>
- <li><a href="https://wiki.qemu.org/Documentation/GettingStartedDevelopers">New contributors</a></li>
- <li><a href="https://wiki.qemu.org/Contribute/SubmitAPatch">Submitting a patch</a></li>
- <li><a href="https://wiki.qemu.org/Contribute/FAQ">Contributor FAQ</a></li>
- </ul>
<ul class="style">
<li><a href="{{ relative_root }}/documentation">Documentation</a></li>
<li><a href="https://www.qemu.org/docs/master/">Main docs</a></li>
diff --git a/index.html b/index.html
index d057a87..be1d210 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,14 @@ bxslider: True
<span><a href="{{ relative_root }}/download">Other releases</a></span>
</li>
{% endfor %}
+
+ <li><strong>Contribute</strong>
+ <span><a href="{{ relative_root }}/contribute">Overview</a></span>
+ <span><a href="{{ relative_root }}/contribute/report-a-bug">Reporting a bug</a></span>
+ <span><a href="https://wiki.qemu.org/Documentation/GettingStartedDevelopers">New contributors</a></span>
+ <span><a href="https://wiki.qemu.org/Contribute/SubmitAPatch">Submitting a patch</a></span>
+ <span><a href="https://wiki.qemu.org/Contribute/FAQ">Contributor FAQ</a></span>
+ </li>
</ul>
</div>
</div>
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 12/16] Add recent blog posts to the front page featured content
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (10 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 11/16] Bring contribution links out of the footer into the home page Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 13/16] Move wiki link from footer into the header navbar Daniel P. Berrangé
` (4 subsequent siblings)
16 siblings, 0 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
This makes it more likely that visitors will see and follow links to
interesting blogs.
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
assets/css/style.css | 5 +++++
index.html | 12 ++++++++++++
2 files changed, 17 insertions(+)
diff --git a/assets/css/style.css b/assets/css/style.css
index 6308084..a9d5b90 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -627,6 +627,11 @@
display: block;
padding-bottom: 2em;
}
+
+ #quickstart ul.blogs > li
+ {
+ padding-bottom: 0.5em;
+ }
#quickstart ul > li > strong
{
diff --git a/index.html b/index.html
index be1d210..9b38037 100644
--- a/index.html
+++ b/index.html
@@ -35,6 +35,18 @@ bxslider: True
<span><a href="https://wiki.qemu.org/Contribute/SubmitAPatch">Submitting a patch</a></span>
<span><a href="https://wiki.qemu.org/Contribute/FAQ">Contributor FAQ</a></span>
</li>
+
+ <li><strong>Recent posts</strong>
+ <ul class="blogs">
+ {% for post in site.posts offset: 0 limit: 4 %}
+ <li><a href="{{ relative_root }}{{ post.url }}">{{ post.title }}</a><br>
+ <div class="posted">{{ post.date | date_to_string }}{%
+ if post.last_modified_at %} (Updated {{ post.last_modified_at | date_to_string }}) {%
+ endif %}{% if post.author %} — by {{ post.author }}{% endif %}
+ </li>
+ {% endfor %}
+ </ul>
+ </li>
</ul>
</div>
</div>
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 13/16] Move wiki link from footer into the header navbar
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (11 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 12/16] Add recent blog posts to the front page featured content Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 14/16] Simplify and restructure the page footer Daniel P. Berrangé
` (3 subsequent siblings)
16 siblings, 0 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
The wiki is important enough that it should be presented more
prominently in the page header navbar, rather than the footer.
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
| 1 -
_includes/nav.html | 1 +
2 files changed, 1 insertion(+), 1 deletion(-)
--git a/_includes/footer.html b/_includes/footer.html
index 07f7866..fba5f08 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -9,7 +9,6 @@
<li><a href="{{ relative_root }}/documentation">Documentation</a></li>
<li><a href="https://www.qemu.org/docs/master/">Main docs</a></li>
<li><a href="https://wiki.qemu.org/Category:Developer_documentation">Developer docs</a></li>
- <li><a href="https://wiki.qemu.org/">Wiki</a></li>
</ul>
<ul class="style">
<li><a href="https://planet.virt-tools.org/">virt tools planet</a></li>
diff --git a/_includes/nav.html b/_includes/nav.html
index c66ee92..73b39b3 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -7,6 +7,7 @@
</li><li {% if current[1] == 'support' %}class='current'{% endif %}><a href="{{ relative_root }}/support">Support</a>
</li><li {% if current[1] == 'contribute' %}class='current'{% endif %}><a href="{{ relative_root }}/contribute">Contribute</a>
</li><li {% if current[1] == 'documentation' %}class='current'{% endif %}><a href="{{ relative_root }}/documentation">Docs</a>
+ </li><li><a href="https://wiki.qemu.org">Wiki</a>
</li><li {% if current[1] == 'blog' %}class='current'{% endif %}><a href="{{ relative_root }}/blog">Blog</a></li>
</ul>
</nav>
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 14/16] Simplify and restructure the page footer
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (12 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 13/16] Move wiki link from footer into the header navbar Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 15/16] Add link to "page source" for all pages Daniel P. Berrangé
` (2 subsequent siblings)
16 siblings, 0 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
Remove links from the footer than duplicate what is already present in
the header navbar or easily found from other places. The footer bar is
now simply a selection of links to related external sites, along with
the website license and SFC information.
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
| 15 +++------------
assets/css/style-desktop.css | 21 +--------------------
assets/css/style-mobile.css | 22 +---------------------
assets/css/style.css | 24 ++++++++++++++++--------
4 files changed, 21 insertions(+), 61 deletions(-)
--git a/_includes/footer.html b/_includes/footer.html
index fba5f08..5adc569 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,17 +1,8 @@
<div id="footer">
- <div id="footer-inner">
+ <div id="external-links">
<ul class="style">
- <li><a href="{{ relative_root }}/">Home</a></li>
- <li><a href="{{ relative_root }}/download">Download</a></li>
- <li><a href="http://qemu-advent-calendar.org">QEMU advent calendar</a></li>
- </ul>
- <ul class="style">
- <li><a href="{{ relative_root }}/documentation">Documentation</a></li>
- <li><a href="https://www.qemu.org/docs/master/">Main docs</a></li>
- <li><a href="https://wiki.qemu.org/Category:Developer_documentation">Developer docs</a></li>
- </ul>
- <ul class="style">
- <li><a href="https://planet.virt-tools.org/">virt tools planet</a></li>
+ <li><a href="http://qemu-advent-calendar.org">Advent calendar</a></li>
+ <li><a href="https://planet.virt-tools.org/">Blog planet</a></li>
<li><a href="https://www.linux-kvm.org/">KVM</a></li>
<li><a href="http://libguestfs.org/">Libguestfs</a></li>
<li><a href="https://libvirt.org/">Libvirt</a></li>
diff --git a/assets/css/style-desktop.css b/assets/css/style-desktop.css
index 2b25532..593f090 100644
--- a/assets/css/style-desktop.css
+++ b/assets/css/style-desktop.css
@@ -104,26 +104,7 @@
#footer
{
- padding: 1em 0em;
- }
-
- #footer-inner
- {
- width: 95%;
- display: table;
- margin: auto;
- }
-
- #footer ul
- {
- width: 25%;
- display: table-cell;
- padding-left: 2em;
- }
-
- #footer ul:first-child
- {
- padding-left: 0px;
+ clear: both;
}
/*********************************************************************************/
diff --git a/assets/css/style-mobile.css b/assets/css/style-mobile.css
index 5dab41c..2a18870 100644
--- a/assets/css/style-mobile.css
+++ b/assets/css/style-mobile.css
@@ -232,7 +232,7 @@
/* Columns */
/*********************************************************************************/
- #main, #footer-inner
+ #main
{
margin-left: 0%;
width: 100%;
@@ -267,26 +267,6 @@
font-size: 1.6em;
}
-/*********************************************************************************/
-/* Footer */
-/*********************************************************************************/
-
- #footer
- {
- padding: 1em;
- }
-
- #footer ul
- {
- padding: 0.6em 0px;
- border-top: 1px solid white;
- }
-
- #footer ul:first-child
- {
- border-top: 0px;
- }
-
/*********************************************************************************/
/* Featured */
/*********************************************************************************/
diff --git a/assets/css/style.css b/assets/css/style.css
index a9d5b90..369b57f 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -502,9 +502,6 @@
#footer
{
position: relative;
- clear: left;
- background: #401200;
- color: #FFF;
}
#footer a
@@ -514,13 +511,24 @@
#footer ul
{
- vertical-align: top;
+ margin: 0em;
}
- #footer ul, #footer ul > li
- {
- padding: 0;
- margin: 0
+ #external-links {
+ padding: 0em;
+ padding-top: 0.3em;
+ padding-bottom: 0.3em;
+ background: #401200;
+ color: #FFF;
+ text-align: center;
+ }
+
+ #external-links li {
+ display: inline;
+ }
+
+ #external-links li a {
+ padding-left: 1em;
}
#licenses, #conservancy {
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 15/16] Add link to "page source" for all pages
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (13 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 14/16] Simplify and restructure the page footer Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 16/16] Add a CONTRIBUTING.md file as guidance for contributors Daniel P. Berrangé
2021-01-13 14:54 ` [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Paolo Bonzini
16 siblings, 0 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
The link takes the user directly to the source markdown file in gitlab.
This gives them guidance as to what file should be editted to make
changes to the content.
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
| 3 +++
assets/css/style.css | 6 +++++-
2 files changed, 8 insertions(+), 1 deletion(-)
--git a/_includes/footer.html b/_includes/footer.html
index 5adc569..eeff9a4 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,4 +1,7 @@
<div id="footer">
+ <div id="edit-page">
+ <a href="https://gitlab.com/qemu-project/qemu-web/-/blob/master/{{page.path}}">page source</a>
+ </div>
<div id="external-links">
<ul class="style">
<li><a href="http://qemu-advent-calendar.org">Advent calendar</a></li>
diff --git a/assets/css/style.css b/assets/css/style.css
index 369b57f..96b7737 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -531,7 +531,11 @@
padding-left: 1em;
}
- #licenses, #conservancy {
+ #edit-page {
+ text-align: right;
+ }
+
+ #licenses, #conservancy, #edit-page {
padding: 0em;
padding-left: 1em;
padding-right: 1em;
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* [qemu-web PATCH v2 16/16] Add a CONTRIBUTING.md file as guidance for contributors
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (14 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 15/16] Add link to "page source" for all pages Daniel P. Berrangé
@ 2020-10-27 13:20 ` Daniel P. Berrangé
2021-01-13 14:54 ` [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Paolo Bonzini
16 siblings, 0 replies; 25+ messages in thread
From: Daniel P. Berrangé @ 2020-10-27 13:20 UTC (permalink / raw)
To: qemu-devel; +Cc: Paolo Bonzini, Thomas Huth, Daniel P. Berrangé
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
CONTRIBUTING.md | 32 ++++++++++++++++++++++++++++++++
_config.yml | 1 +
2 files changed, 33 insertions(+)
create mode 100644 CONTRIBUTING.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..b5209ac
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,32 @@
+# Contributing to qemu-web
+
+The QEMU project accepts code contributions to the website as patches sent to
+the the developer mailing list:
+
+https://lists.nongnu.org/mailman/listinfo/qemu-devel
+
+For further guidance on sending patches consult:
+
+https://wiki.qemu.org/Contribute/SubmitAPatch
+
+It is expected that contributors check the rendered website before submitting
+patches. This is possible by either running jekyll locally, or by using the
+GitLab CI and Pages infrastructure.
+
+Any branch that is pushed to a GitLab fork will result in a CI job being run
+visible at
+
+https://gitlab.com/yourusername/qemu-web/-/pipelines
+
+The rendered result can be then viewed at
+
+https://yourusername.gitlab.io/qemu-web
+
+Contributions submitted to the project must be in compliance with the
+Developer Certificate of Origin Version 1.1. This is documented at:
+
+https://developercertificate.org/
+
+To indicate compliance, each commit in a series must have a "Signed-off-by"
+tag with the submitter's name and email address. This can be added by passing
+the ``-s`` flag to ``git commit`` when creating the patches.
diff --git a/_config.yml b/_config.yml
index d0473c1..7d34779 100644
--- a/_config.yml
+++ b/_config.yml
@@ -40,3 +40,4 @@ exclude:
- Gemfile.lock
- vendor/
- README
+ - CONTRIBUTING.md
--
2.26.2
^ permalink raw reply related [flat|nested] 25+ messages in thread
* Re: [qemu-web PATCH v2 11/16] Bring contribution links out of the footer into the home page
2020-10-27 13:20 ` [qemu-web PATCH v2 11/16] Bring contribution links out of the footer into the home page Daniel P. Berrangé
@ 2020-10-27 15:02 ` Kashyap Chamarthy
0 siblings, 0 replies; 25+ messages in thread
From: Kashyap Chamarthy @ 2020-10-27 15:02 UTC (permalink / raw)
To: Daniel P. Berrangé; +Cc: Paolo Bonzini, Thomas Huth, qemu-devel
On Tue, Oct 27, 2020 at 01:20:10PM +0000, Daniel P. Berrangé wrote:
> The selection of contribution links are important information to present
> to visitors to the site. They are best placed in a prominent position on
> the home page rather than in the footer
>
> Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
Yeah, I personally didn't realize all the useful Contribute-related
links that were only one scroll away in the old page vs. having it front
and center in your new rendering:
https://berrange.gitlab.io/qemu-web/
Definitely useful.
FWIW:
Reviewed-by: Kashyap Chamarthy <kchamart@redhat.com>
> ---
> _includes/footer.html | 7 -------
> index.html | 8 ++++++++
> 2 files changed, 8 insertions(+), 7 deletions(-)
>
> diff --git a/_includes/footer.html b/_includes/footer.html
> index 411ff55..07f7866 100644
> --- a/_includes/footer.html
> +++ b/_includes/footer.html
> @@ -5,13 +5,6 @@
> <li><a href="{{ relative_root }}/download">Download</a></li>
> <li><a href="http://qemu-advent-calendar.org">QEMU advent calendar</a></li>
> </ul>
> - <ul class="style">
> - <li><a href="{{ relative_root }}/contribute">Contribute</a></li>
> - <li><a href="{{ relative_root }}/contribute/report-a-bug">Reporting a bug</a></li>
> - <li><a href="https://wiki.qemu.org/Documentation/GettingStartedDevelopers">New contributors</a></li>
> - <li><a href="https://wiki.qemu.org/Contribute/SubmitAPatch">Submitting a patch</a></li>
> - <li><a href="https://wiki.qemu.org/Contribute/FAQ">Contributor FAQ</a></li>
> - </ul>
> <ul class="style">
> <li><a href="{{ relative_root }}/documentation">Documentation</a></li>
> <li><a href="https://www.qemu.org/docs/master/">Main docs</a></li>
> diff --git a/index.html b/index.html
> index d057a87..be1d210 100644
> --- a/index.html
> +++ b/index.html
> @@ -27,6 +27,14 @@ bxslider: True
> <span><a href="{{ relative_root }}/download">Other releases</a></span>
> </li>
> {% endfor %}
> +
> + <li><strong>Contribute</strong>
> + <span><a href="{{ relative_root }}/contribute">Overview</a></span>
> + <span><a href="{{ relative_root }}/contribute/report-a-bug">Reporting a bug</a></span>
> + <span><a href="https://wiki.qemu.org/Documentation/GettingStartedDevelopers">New contributors</a></span>
> + <span><a href="https://wiki.qemu.org/Contribute/SubmitAPatch">Submitting a patch</a></span>
> + <span><a href="https://wiki.qemu.org/Contribute/FAQ">Contributor FAQ</a></span>
> + </li>
> </ul>
> </div>
> </div>
> --
> 2.26.2
>
>
--
/kashyap
^ permalink raw reply [flat|nested] 25+ messages in thread
* Re: [qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider
2020-10-27 13:20 ` [qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider Daniel P. Berrangé
@ 2020-10-27 16:19 ` Kashyap Chamarthy
2020-10-27 18:45 ` Paolo Bonzini
1 sibling, 0 replies; 25+ messages in thread
From: Kashyap Chamarthy @ 2020-10-27 16:19 UTC (permalink / raw)
To: Daniel P. Berrangé; +Cc: Paolo Bonzini, Thomas Huth, qemu-devel
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é <berrange@redhat.com>
> ---
> _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 <kchamart@redhat.com>
>
> 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
^ permalink raw reply [flat|nested] 25+ messages in thread
* Re: [qemu-web PATCH v2 01/16] Convert files to UNIX line endings
2020-10-27 13:20 ` [qemu-web PATCH v2 01/16] Convert files to UNIX line endings Daniel P. Berrangé
@ 2020-10-27 17:40 ` Thomas Huth
0 siblings, 0 replies; 25+ messages in thread
From: Thomas Huth @ 2020-10-27 17:40 UTC (permalink / raw)
To: Daniel P. Berrangé, qemu-devel; +Cc: Paolo Bonzini
On 27/10/2020 14.20, Daniel P. Berrangé wrote:
> Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
> ---
> assets/css/style-desktop.css | 586 ++++++++---------
> assets/css/style-mobile.css | 750 ++++++++++-----------
> assets/css/style.css | 1184 +++++++++++++++++-----------------
> index.html | 178 ++---
> 4 files changed, 1349 insertions(+), 1349 deletions(-)
git am complains:
.git/rebase-apply/patch:62: trailing whitespace.
}
.git/rebase-apply/patch:68: trailing whitespace.
}
.git/rebase-apply/patch:375: trailing whitespace.
.git/rebase-apply/patch:409: trailing whitespace.
.git/rebase-apply/patch:414: trailing whitespace.
warning: squelched 57 whitespace errors
warning: 62 lines add whitespace errors.
... so in case you respin, please fix these trailing whitespaces, too.
Thomas
^ permalink raw reply [flat|nested] 25+ messages in thread
* Re: [qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider
2020-10-27 13:20 ` [qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider Daniel P. Berrangé
2020-10-27 16:19 ` Kashyap Chamarthy
@ 2020-10-27 18:45 ` Paolo Bonzini
1 sibling, 0 replies; 25+ messages in thread
From: Paolo Bonzini @ 2020-10-27 18:45 UTC (permalink / raw)
To: Daniel P. Berrangé, qemu-devel; +Cc: Thomas Huth
On 27/10/20 14:20, 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.
Looks good, but the left and right columns are a bit unbalanced.
Since you are at it, perhaps you could organize the part below the red
strip a bit like the Dolphin home page (https://dolphin-emu.org/):
----------------------------------------------------------
QEMU
Generic, open source emulator and virtualizer
----------------------------------------------------------
Latest release: CAROUSEL
.... . . .
Contribute Recent posts
..... ....
Advent calendar
Blog planet
KVM
Libguestfs
Libvirt
Xen
---------------------------------------------------------
Also, possibly include the excerpt of the first post ({{post.excerpt}}).
Thanks!
Paolo
> Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
> ---
> _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>
>
^ permalink raw reply [flat|nested] 25+ messages in thread
* Re: [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
` (15 preceding siblings ...)
2020-10-27 13:20 ` [qemu-web PATCH v2 16/16] Add a CONTRIBUTING.md file as guidance for contributors Daniel P. Berrangé
@ 2021-01-13 14:54 ` Paolo Bonzini
2021-01-13 14:57 ` Daniel P. Berrangé
16 siblings, 1 reply; 25+ messages in thread
From: Paolo Bonzini @ 2021-01-13 14:54 UTC (permalink / raw)
To: Daniel P. Berrangé; +Cc: Thomas Huth, qemu-devel
I am going to apply patches 1-3, so that I can play with doing the
final deployment via gitlab pipelines.
On Tue, Oct 27, 2020 at 2:20 PM Daniel P. Berrangé <berrange@redhat.com> wrote:
>
> This is a v2 of:
>
> https://lists.gnu.org/archive/html/qemu-devel/2020-10/msg07025.html
>
> This series started off as a desire to add an "Edit page" link to every
> page on the site. In doing this I felt that the footer would benefit
> from simplication so that it was not a massive wall of links,
> duplicating links elsewhere in the navigation or content pages. Then
> after response to v1, I realized that the home page actually needed
> alot more design work to better present information to contributors
> immediately.
>
> The key theme was to ensure that the home page of the website has all
> the important information available on screen without requiring the
> user to scroll down or otherwise search for it.
>
> I also add gitlab CI jobs so that users can push a branch to gitlab and
> then browse the rendered result.
>
> eg see this pipeline:
>
> https://gitlab.com/berrange/qemu-web/-/pipelines/208194087
>
> and the rendered result of this series:
>
> https://berrange.gitlab.io/qemu-web/
>
> Or browsable at
>
> https://gitlab.com/berrange/qemu-web/-/jobs/814392582/artifacts/browse/publ=
> ic/
>
> Or download ZIP at
>
> https://gitlab.com/berrange/qemu-web/-/jobs/814392582/artifacts/download
>
> notice how the resulting content needs to cope with being used from a
> variety of different paths. IOW, we cannot use absolute hyperlinks that
> assume the root is "/". Jekyll doesn't make this easy, so we use a hack
> with a custom template that sets a variable we can then reference.
>
> The logical next step for this would be to accept merge requests, so
> that once the user saves their edits in gitlab, they can directly submit
> a MR, instead of sending via email. I noticed we don't currently have a
> CONTRIBUTING.md file in qemu-web.git telling people how to submit. So
> this series includes such a file directing people to send patches via
> email for now.
>
> Daniel P. Berrang=C3=A9 (16):
> Convert files to UNIX line endings
> gitlab: introduce a CI job to publish the site content
> make all links be relative to the root
> Make page header nav narrower
> Introduce support for "bxslider" jquery add on
> Rework display of screenshots to use a carousel slider
> Compress the two front page headings into one
> Simplify copyright and integrate into footer
> Put a full SFC membership blurb in footer of every page
> Use two column layout to display screenshots and releases
> Bring contribution links out of the footer into the home page
> Add recent blog posts to the front page featured content
> Move wiki link from footer into the header navbar
> Simplify and restructure the page footer
> Add link to "page source" for all pages
> Add a CONTRIBUTING.md file as guidance for contributors
>
> .gitlab-ci.yml | 16 +
> CONTRIBUTING.md | 32 +
> _config.yml | 1 +
> _data/screenshots.yml | 14 +-
> _includes/assets.html | 32 +-
> _includes/copyright.html | 8 -
> _includes/footer.html | 33 +-
> _includes/nav.html | 13 +-
> _includes/relative_root.html | 12 +
> _includes/screenshot.html | 8 +-
> _includes/sidebar.html | 6 +-
> _layouts/archive.html | 4 +-
> _layouts/blog.html | 4 +-
> _layouts/home.html | 2 +-
> _layouts/page.html | 2 +-
> assets/css/jquery.bxslider.css | 179 ++++
> assets/css/style-desktop.css | 581 ++++++------
> assets/css/style-mobile.css | 720 +++++++-------
> assets/css/style.css | 1252 +++++++++++++------------
> assets/js/jquery.bxslider.js | 1607 ++++++++++++++++++++++++++++++++
> blog/index.html | 4 +-
> index.html | 195 ++--
> 22 files changed, 3312 insertions(+), 1413 deletions(-)
> create mode 100644 .gitlab-ci.yml
> create mode 100644 CONTRIBUTING.md
> delete mode 100644 _includes/copyright.html
> create mode 100644 _includes/relative_root.html
> create mode 100644 assets/css/jquery.bxslider.css
> create mode 100644 assets/js/jquery.bxslider.js
>
> --=20
> 2.26.2
>
>
^ permalink raw reply [flat|nested] 25+ messages in thread
* Re: [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information
2021-01-13 14:54 ` [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Paolo Bonzini
@ 2021-01-13 14:57 ` Daniel P. Berrangé
2021-01-19 12:03 ` Paolo Bonzini
0 siblings, 1 reply; 25+ messages in thread
From: Daniel P. Berrangé @ 2021-01-13 14:57 UTC (permalink / raw)
To: Paolo Bonzini; +Cc: Thomas Huth, qemu-devel
On Wed, Jan 13, 2021 at 03:54:51PM +0100, Paolo Bonzini wrote:
> I am going to apply patches 1-3, so that I can play with doing the
> final deployment via gitlab pipelines.
Probably worth taking the 16th patch too, since the CONTRIBUTING
file described how to use the CI results.
>
> On Tue, Oct 27, 2020 at 2:20 PM Daniel P. Berrangé <berrange@redhat.com> wrote:
> >
> > This is a v2 of:
> >
> > https://lists.gnu.org/archive/html/qemu-devel/2020-10/msg07025.html
> >
> > This series started off as a desire to add an "Edit page" link to every
> > page on the site. In doing this I felt that the footer would benefit
> > from simplication so that it was not a massive wall of links,
> > duplicating links elsewhere in the navigation or content pages. Then
> > after response to v1, I realized that the home page actually needed
> > alot more design work to better present information to contributors
> > immediately.
> >
> > The key theme was to ensure that the home page of the website has all
> > the important information available on screen without requiring the
> > user to scroll down or otherwise search for it.
> >
> > I also add gitlab CI jobs so that users can push a branch to gitlab and
> > then browse the rendered result.
> >
> > eg see this pipeline:
> >
> > https://gitlab.com/berrange/qemu-web/-/pipelines/208194087
> >
> > and the rendered result of this series:
> >
> > https://berrange.gitlab.io/qemu-web/
> >
> > Or browsable at
> >
> > https://gitlab.com/berrange/qemu-web/-/jobs/814392582/artifacts/browse/publ=
> > ic/
> >
> > Or download ZIP at
> >
> > https://gitlab.com/berrange/qemu-web/-/jobs/814392582/artifacts/download
> >
> > notice how the resulting content needs to cope with being used from a
> > variety of different paths. IOW, we cannot use absolute hyperlinks that
> > assume the root is "/". Jekyll doesn't make this easy, so we use a hack
> > with a custom template that sets a variable we can then reference.
> >
> > The logical next step for this would be to accept merge requests, so
> > that once the user saves their edits in gitlab, they can directly submit
> > a MR, instead of sending via email. I noticed we don't currently have a
> > CONTRIBUTING.md file in qemu-web.git telling people how to submit. So
> > this series includes such a file directing people to send patches via
> > email for now.
> >
> > Daniel P. Berrang=C3=A9 (16):
> > Convert files to UNIX line endings
> > gitlab: introduce a CI job to publish the site content
> > make all links be relative to the root
> > Make page header nav narrower
> > Introduce support for "bxslider" jquery add on
> > Rework display of screenshots to use a carousel slider
> > Compress the two front page headings into one
> > Simplify copyright and integrate into footer
> > Put a full SFC membership blurb in footer of every page
> > Use two column layout to display screenshots and releases
> > Bring contribution links out of the footer into the home page
> > Add recent blog posts to the front page featured content
> > Move wiki link from footer into the header navbar
> > Simplify and restructure the page footer
> > Add link to "page source" for all pages
> > Add a CONTRIBUTING.md file as guidance for contributors
> >
> > .gitlab-ci.yml | 16 +
> > CONTRIBUTING.md | 32 +
> > _config.yml | 1 +
> > _data/screenshots.yml | 14 +-
> > _includes/assets.html | 32 +-
> > _includes/copyright.html | 8 -
> > _includes/footer.html | 33 +-
> > _includes/nav.html | 13 +-
> > _includes/relative_root.html | 12 +
> > _includes/screenshot.html | 8 +-
> > _includes/sidebar.html | 6 +-
> > _layouts/archive.html | 4 +-
> > _layouts/blog.html | 4 +-
> > _layouts/home.html | 2 +-
> > _layouts/page.html | 2 +-
> > assets/css/jquery.bxslider.css | 179 ++++
> > assets/css/style-desktop.css | 581 ++++++------
> > assets/css/style-mobile.css | 720 +++++++-------
> > assets/css/style.css | 1252 +++++++++++++------------
> > assets/js/jquery.bxslider.js | 1607 ++++++++++++++++++++++++++++++++
> > blog/index.html | 4 +-
> > index.html | 195 ++--
> > 22 files changed, 3312 insertions(+), 1413 deletions(-)
> > create mode 100644 .gitlab-ci.yml
> > create mode 100644 CONTRIBUTING.md
> > delete mode 100644 _includes/copyright.html
> > create mode 100644 _includes/relative_root.html
> > create mode 100644 assets/css/jquery.bxslider.css
> > create mode 100644 assets/js/jquery.bxslider.js
> >
> > --=20
> > 2.26.2
> >
> >
>
Regards,
Daniel
--
|: https://berrange.com -o- https://www.flickr.com/photos/dberrange :|
|: https://libvirt.org -o- https://fstop138.berrange.com :|
|: https://entangle-photo.org -o- https://www.instagram.com/dberrange :|
^ permalink raw reply [flat|nested] 25+ messages in thread
* Re: [qemu-web PATCH v2 04/16] Make page header nav narrower
2020-10-27 13:20 ` [qemu-web PATCH v2 04/16] Make page header nav narrower Daniel P. Berrangé
@ 2021-01-19 11:18 ` Thomas Huth
0 siblings, 0 replies; 25+ messages in thread
From: Thomas Huth @ 2021-01-19 11:18 UTC (permalink / raw)
To: Daniel P. Berrangé, qemu-devel; +Cc: Paolo Bonzini
On 27/10/2020 14.20, Daniel P. Berrangé wrote:
> When the browser window is narrow, but not yet switched into the mobile
> layout, the page header nav will line wrap. This breaks layout
> assumptions resulting in overlapping/obscured text.
>
> This deals with the probem by reducing padding between the links, and
> shortening "Documentation" to just "Docs".
>
> This avoids the line wrapping, as well as making room for new links in
> the future.
>
> Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
> ---
> _includes/nav.html | 2 +-
> assets/css/style-desktop.css | 3 ++-
> 2 files changed, 3 insertions(+), 2 deletions(-)
Reviewed-by: Thomas Huth <thuth@redhat.com>
... and pushed it already (I used this patch to test my access to the new
repo on gitlab.com instead the old one at qemu.org)
^ permalink raw reply [flat|nested] 25+ messages in thread
* Re: [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information
2021-01-13 14:57 ` Daniel P. Berrangé
@ 2021-01-19 12:03 ` Paolo Bonzini
0 siblings, 0 replies; 25+ messages in thread
From: Paolo Bonzini @ 2021-01-19 12:03 UTC (permalink / raw)
To: Daniel P. Berrangé; +Cc: Thomas Huth, qemu-devel
On 13/01/21 15:57, Daniel P. Berrangé wrote:
> On Wed, Jan 13, 2021 at 03:54:51PM +0100, Paolo Bonzini wrote:
>> I am going to apply patches 1-3, so that I can play with doing the
>> final deployment via gitlab pipelines.
>
> Probably worth taking the 16th patch too, since the CONTRIBUTING
> file described how to use the CI results.
Done, thanks!
Paolo
^ permalink raw reply [flat|nested] 25+ messages in thread
end of thread, other threads:[~2021-01-19 12:06 UTC | newest]
Thread overview: 25+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2020-10-27 13:19 [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 01/16] Convert files to UNIX line endings Daniel P. Berrangé
2020-10-27 17:40 ` Thomas Huth
2020-10-27 13:20 ` [qemu-web PATCH v2 02/16] gitlab: introduce a CI job to publish the site content Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 03/16] make all links be relative to the root Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 04/16] Make page header nav narrower Daniel P. Berrangé
2021-01-19 11:18 ` Thomas Huth
2020-10-27 13:20 ` [qemu-web PATCH v2 05/16] Introduce support for "bxslider" jquery add on Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider Daniel P. Berrangé
2020-10-27 16:19 ` Kashyap Chamarthy
2020-10-27 18:45 ` Paolo Bonzini
2020-10-27 13:20 ` [qemu-web PATCH v2 07/16] Compress the two front page headings into one Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 08/16] Simplify copyright and integrate into footer Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 09/16] Put a full SFC membership blurb in footer of every page Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 10/16] Use two column layout to display screenshots and releases Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 11/16] Bring contribution links out of the footer into the home page Daniel P. Berrangé
2020-10-27 15:02 ` Kashyap Chamarthy
2020-10-27 13:20 ` [qemu-web PATCH v2 12/16] Add recent blog posts to the front page featured content Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 13/16] Move wiki link from footer into the header navbar Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 14/16] Simplify and restructure the page footer Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 15/16] Add link to "page source" for all pages Daniel P. Berrangé
2020-10-27 13:20 ` [qemu-web PATCH v2 16/16] Add a CONTRIBUTING.md file as guidance for contributors Daniel P. Berrangé
2021-01-13 14:54 ` [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information Paolo Bonzini
2021-01-13 14:57 ` Daniel P. Berrangé
2021-01-19 12:03 ` Paolo Bonzini
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for NNTP newsgroup(s).