website optimizes mobile view

This commit is contained in:
Sebastian Hildebrandt 2019-01-29 20:50:05 +01:00
parent 44949a0e01
commit b3a7c0cd42
22 changed files with 91 additions and 25 deletions

View File

@ -26,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -22,7 +22,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -22,7 +22,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -26,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -26,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -26,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -26,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -26,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -26,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -21,7 +21,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -15,6 +15,16 @@
<title>systeminformation</title>
<script>
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
// We listen to the resize event
// window.addEventListener('resize', () => {
// // We execute the same script as before
// let vh = window.innerHeight * 0.01;
// document.documentElement.style.setProperty('--vh', `${vh}px`);
// });
function init() {
typed();
document.querySelector('.down').addEventListener('click', function () {
@ -194,7 +204,7 @@
<hr>
</div>
</div>
<div class="row">
<div class="row" id="docs">
<div class="col-12 sectionheader index">
<div class="title">Documentation</div>
<div class="subtitle">Detailed documentation and reference for Version 4.x.x</div>

View File

@ -22,7 +22,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -26,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -26,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -26,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -26,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -12,6 +12,10 @@
<link rel="stylesheet" href="styles.css">
<script src="main.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<title>systeminformation</title>
</head>
@ -22,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>
@ -46,13 +51,13 @@
<p>So basically, if you e.g. need a values for network stats every second, your code should look like this:</p>
<pre>const si = require('systeminformation');
<pre><code class="js">const si = require('systeminformation');
setInterval(function() {
si.networkStats().then(data => {
console.log(data);
})
}, 1000)</pre>
}, 1000)</code></pre>
<p>Beginning with the second call, you get network transfer values per second.</p>
</div>
@ -101,4 +106,4 @@ setInterval(function() {
</script>
</body>
</html>
</html>

View File

@ -17,7 +17,8 @@ h1, h2, h3, h4 {
background: no-repeat center center scroll;
background-size: cover;
-o-background-size: cover;
height: calc(100vh);
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
opacity: 0.95;
display: -webkit-box;
display: -ms-flexbox;
@ -259,6 +260,26 @@ h1, h2, h3, h4 {
text-decoration: none;
}
.nav .github {
display: none;
}
@media only screen and (min-width: 768px) {
.nav .github {
display: inline-block;
}
}
.nav .todocs {
display: inline-block;
}
@media only screen and (min-width: 768px) {
.nav .todocs {
display: none;
}
}
.features {
text-align: center;
padding: 15px 20px;

File diff suppressed because one or more lines are too long

View File

@ -16,7 +16,8 @@ h1, h2, h3, h4 {
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: calc(100vh);
height: 100vh; //calc(100vh);
height: calc(var(--vh, 1vh) * 100);
opacity: 0.95;
display: flex;
justify-content: center;
@ -175,6 +176,18 @@ h1, h2, h3, h4 {
}
}
}
.github {
display: none;
@media only screen and (min-width: 768px) {
display: inline-block;
}
}
.todocs {
display: inline-block;
@media only screen and (min-width: 768px) {
display: none;
}
}
}
.features {
text-align: center;

View File

@ -26,7 +26,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>

View File

@ -22,7 +22,8 @@
<a href="."><img class="logo float-left" src="assets/logo.png">
<div class="title float-left">systeminformation</div>
</a>
<div class="text float-right"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right github"><a href="https://github.com/sebhildebrandt/systeminformation">View on Github <i class="fab fa-github"></i></a></div>
<div class="text float-right todocs"><a href="./#docs">Docs Overview</a></div>
</div>
</nav>