mirror of
https://gitlab.com/libvirt/libvirt.git
synced 2025-01-22 04:25:18 +00:00
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: Daniel P. Berrange <berrange@redhat.com>
This commit is contained in:
Daniel P. Berrange
parent
10e277a432
commit
7c956d42a2
@ -52,6 +52,7 @@ devhelphtml = \
|
|||||||
css = \
|
css = \
|
||||||
generic.css \
|
generic.css \
|
||||||
libvirt.css \
|
libvirt.css \
|
||||||
|
mobile.css \
|
||||||
main.css
|
main.css
|
||||||
|
|
||||||
fonts = \
|
fonts = \
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
@import url(fonts/stylesheet.css);
|
@import url(fonts/stylesheet.css);
|
||||||
@import url(generic.css);
|
@import url(generic.css);
|
||||||
@import url(libvirt.css);
|
@import url(libvirt.css);
|
||||||
|
@import url(mobile.css);
|
||||||
|
|||||||
94
docs/mobile.css
Normal file
94
docs/mobile.css
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
@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>
|
</xsl:comment>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<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="stylesheet" type="text/css" href="{$href_base}main.css"/>
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.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>
|
<title>libvirt: <xsl:value-of select="html:html/html:body/html:h1"/></title>
|
||||||
<meta name="description" content="libvirt, virtualization, virtualization API"/>
|
<meta name="description" content="libvirt, virtualization, virtualization API"/>
|
||||||
<xsl:apply-templates select="/html:html/html:head/*" mode="content"/>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<xsl:if test="html:html/html:body/@class">
|
<xsl:if test="html:html/html:body/@class">
|
||||||
@ -117,7 +151,7 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li><a href="{$href_base}downloads.html">Download</a></li>
|
<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}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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="search">
|
<div id="search">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user