提交 7c956d42 编写于 作者: D Daniel P. Berrange

docs: make website responsive for mobile devices

The website does not look good in a mobile device as the text is
far too small and the layout assumes a wide screen.

Make the style dynamically adapt based on viewport size, so a
mobile device gets a layout more suited to its dimensions,
also changing "Learn" to "Docs"
Signed-off-by: NDaniel P. Berrange <berrange@redhat.com>
上级 10e277a4
......@@ -52,6 +52,7 @@ devhelphtml = \
css = \
generic.css \
libvirt.css \
mobile.css \
main.css
fonts = \
......
@import url(fonts/stylesheet.css);
@import url(generic.css);
@import url(libvirt.css);
@import url(mobile.css);
@media (max-width: 1000px) {
#home {
width: 100%;
display: block;
margin: 0px;
background: white url(logos/logo-banner-dark-256.png) no-repeat center center;
height: 94px;
}
#home a {
width: 100%;
}
#search {
width: 100%;
display: block;
margin: 0px;
background: white;
padding: 0px;
}
#search form {
padding: 5px;
}
body.index h1 {
display: none;
}
#jumplinks {
padding: 0px;
display: block;
width: 100%;
text-align: center;
margin: 0px;
height: 1.3em;
font-size: 1em;
border-top: 3px solid rgb(60, 133, 124);
border-bottom: 3px solid rgb(60, 133, 124);
}
#jumplinks ul {
display: block;
padding: 0px;
margin: 0px;
}
#jumplinks li {
margin: 0px;
padding-left: 0.5em;
padding-right: 0.5em;
}
#nav {
border: 0px;
}
#search.navhide {
display: none !IMPORTANT;
}
#home.navhide {
position: fixed;
top: 0px;
z-index: 9001;
width: 6em;
display: block;
margin: 0px;
background: inherit;
height: 1.3em;
border-top: 3px solid rgb(60, 133, 124);
border-bottom: 3px solid rgb(60, 133, 124);
font-size: 1em;
text-indent: 0px;
font-weight: bold;
padding-left: 1em;
}
#home.navhide a {
color: white;
text-decoration: none;
}
#home.navhide a:hover {
color: rgb(255, 230, 0);
}
#jumplinks.navhide {
position: fixed;
text-align: right;
top: 0px;
z-index: 9000;
background: rgb(0, 95, 97);
}
#jumplinks.navhide ul {
z-index: 9001;
}
#body {
margin-top: 180px;
}
div.panel {
width: 80%;
float: none;
margin-bottom: 2em;
}
}
......@@ -88,6 +88,7 @@
</xsl:comment>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="{$href_base}main.css"/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
......@@ -97,6 +98,39 @@
<title>libvirt: <xsl:value-of select="html:html/html:body/html:h1"/></title>
<meta name="description" content="libvirt, virtualization, virtualization API"/>
<xsl:apply-templates select="/html:html/html:head/*" mode="content"/>
<script type="text/javascript">
<xsl:comment>
<![CDATA[
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 94
home = document.getElementById("home");
links = document.getElementById("jumplinks");
search = document.getElementById("search");
body = document.getElementById("body");
if (distanceY > shrinkOn) {
if (home.className != "navhide") {
body.className = "navhide"
home.className = "navhide"
links.className = "navhide"
search.className = "navhide"
}
} else {
if (home.className == "navhide") {
body.className = ""
home.className = ""
links.className = ""
search.className = ""
}
}
});
}
window.onload = init();
]]>
</xsl:comment>
</script>
</head>
<body>
<xsl:if test="html:html/html:body/@class">
......@@ -117,7 +151,7 @@
<ul>
<li><a href="{$href_base}downloads.html">Download</a></li>
<li><a href="{$href_base}contribute.html">Contribute</a></li>
<li><a href="{$href_base}docs.html">Learn</a></li>
<li><a href="{$href_base}docs.html">Docs</a></li>
</ul>
</div>
<div id="search">
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册