Commit aecb05ec authored by Bryan Tong's avatar Bryan Tong

Merge branch 'JustFowl/kado-web-KadoWebWIP' into 'master'

Just fowl/kado web kado web wip

See merge request !50
parents cbcb1b1a c57471e9
#sidebarWrapper {
width: 250px;
position: absolute;
padding: 0 2px 5px 15px;
background-color: #f1edf3;
border-right: 1px solid #b2b2b2;
border-bottom: 1px solid #b2b2b2;
transition: all 0.2s;
}
#sidebar {
padding: 0 2px 5px 15px;
height: 100vh;
z-index: 999;
min-height: 100vh;
}
#wrapper.active #sidebarWrapper { margin-left: -270px; }
#sidebarToggle {
position: absolute;
left: 0;
padding: 20px 0 0 10px;
z-index: 1001;
}
@media screen and (max-height: 450px) {
#sidebar {padding-top: 15px;}
#sidebar a {font-size: 18px;}
}
......@@ -19,24 +19,18 @@ table, th, td {
padding: 5px 20px;
}
.topbar .logo { float: left; color: #734efa; font-size: 2.6em; width: 50px; }
.topbar .brand-wrap { margin-left: 10px; }
.topbar a.brand, .topbar a.brand:visited { font-size: 2em; color: #734efa; }
.topbar a.brand>span { color: #333; }
.topbar a.brand:hover { color: blue; text-decoration: none; }
.topbar .slogan { font-size: 0.8em; color: #777; padding-left: 54px; }
.topbar-right { float: right; line-height: 50px; }
.topbar-right a { font-size: 1.2em; display: inline-block; margin-right: 10px }
#sidebar {
float: left;
width: 250px;
padding: 0 2px 5px 15px;
/* background-color: #f1f3f4; */
background-color: #f1edf3;
border-right: 1px solid #b2b2b2;
border-bottom: 1px solid #b2b2b2;
}
.list-simple { list-style-type: none; }
.form-inline { display: inline; }
#main { margin-left: 295px; padding-top: 2px; }
#main { padding: 5px; margin-left: 270px; }
#wrapper.active #main { margin-left: 0; }
.wrap { min-height: 100vh; margin-bottom: 10px;}
.wrap, #main p { max-width: 900px; }
code {
background: #ddeaff;
......@@ -64,97 +58,3 @@ blockquote>p { max-width: 100% !important;}
#copyright>.license { padding-bottom: 5px; }
#copyright>.conduct, #copyright>.license { font-size: 0.8em; }
#copyright>.license { color: #999; }
.wrapper {
}
.k-sidebar {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
width: 250px;
position: absolute;
padding: 0 2px 5px 15px;
height: 100vh;
z-index: 999;
background: #F1EDF3;
color: #7B79F9;
min-width: 250px;
max-width: 250px;
min-height: 100vh;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
/*p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color:#7B79F9;
}*/
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
#sidebar .sidebar-header {
padding: 20px;
background: #F1EDF3;
}
#sidebar ul.components {
padding: 20px 0;
}
#sidebar ul p {
color: #7B79F9;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7B79F9;
background: #fff;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #7B79F9;
background: #F1EDF3;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #F1EDF3;
}
\ No newline at end of file
$(document).ready(function () {
$('#sidebar').mCustomScrollbar({ theme: 'dark' });
$('#sidebarToggle').on('click', function () {
$('#wrapper').toggleClass('active');
});
});
{{>header}}
{{>sidebar}}
<div id="main" class="wrap">
{{{content}}}
</div>
......
<div id="copyright">
<div class="copyright">&copy; 2013-2020 Bryan Tong, NULLIVEX LLC. All rights reserved.</div>
<div class="support">Powered by <a href="https://kado.org">Kado v4.2.1</a> Try it on your project today!</div>
<div class="conduct">Kado is openly developed and open source. To contribute view our <a href="/info/contributing/">Code of Conduct</a>. Then send a merge request on <a href="https://git.nullivex.com/kado/kado">Gitlab</a>.</div>
<div class="license">This software is licensed under the Lesser GNU Public License Version 3 or above. Please see <a href="/license/">LICENSE</a> for more details and a full copy of the license.</div>
</div>
</div>
<div id="copyright">
<div class="copyright">&copy; 2013-2020 Bryan Tong, NULLIVEX LLC. All rights reserved.</div>
<div class="support">Powered by <a href="https://kado.org">Kado v4.2.1</a> Try it on your project today!</div>
<div class="conduct">Kado is openly developed and open source. To contribute view our <a href="/info/contributing/">Code of Conduct</a>. Then send a merge request on <a href="https://git.nullivex.com/kado/kado">Gitlab</a>.</div>
<div class="license">This software is licensed under the Lesser GNU Public License Version 3 or above. Please see <a href="/license/">LICENSE</a> for more details and a full copy of the license.</div>
</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<script src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="/js/sidebar.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-51999698-15"></script>
<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-51999698-15');</script>
</body>
......
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/styles/darkula.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="style2.css"> -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="UTF-8">
<meta name="description" content="Kado is a collection of JavaScript libraries written against Node.js">
......@@ -24,8 +8,10 @@
<meta name="author" content="Kado">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/styles/darkula.css">
<link type="text/css" rel="stylesheet" href="/css/style.css">
{{#_pageTitle}}
<link type="text/css" rel="stylesheet" href="/css/sidebar.css">
{{#_pageTitle}}
<title>{{_pageTitle}} - {{_appTitle}}</title>
{{/_pageTitle}}
{{^_pageTitle}}
......@@ -39,10 +25,12 @@
<a href="https://www.npmjs.com/package/kado">NPM</a>
<a href="https://twitter.com/KadoJS_">Twitter</a>
</div>
<div id="sidebarToggle"><a href="javascript:void(0)"><span class="fa fa-bars"></span></a></div>
<div class="brand-wrap">
<div class="logo">{}</div>
<a href="/" class="brand"><span>K</span>ado</a>
<div class="slogan">High Quality JavaScript Libraries</div>
</div>
</div>
<div id="wrap">
<div id="wrapper">
{{>sidebar}}
......@@ -86,82 +86,34 @@
</div>
</nav>
</div>
</div> -->
<div id="sidebar">
<ul class="list-simple">
<li><a href="/">Home</a></li>
<li><a href="/download/">Download</a></li>
<li><a href="/info/changelog/">Changelog</a></li>
<li><a href="/info/about-us/">About Us</a></li>
<li><a href="/info/why-kado/">Why Kado</a></li>
<li><a href="/guide/introduction/">Introduction</a></li>
<li><a href="/guide/quick-start">Quick Start</a></li>
</ul>
<h2>Documentation</h2>
<div>
<label for="versionSelect">Version:</label>
<form action="/setDocVersion" method="get" class="form-inline" id="versionForm">
<select name="version" id="versionSelect">
{{#docVersionSelectList}}
<option value="{{version}}" {{#selected}}selected="selected"{{/selected}}>{{version}}</option>
{{/docVersionSelectList}}
</select>
</form>
<script>
const selector = document.getElementById('versionSelect')
const form = document.getElementById('versionForm')
selector.addEventListener('change', () => { form.submit() })
</script>
</div>
{{>api}}
</div> -->
<script>
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
// open or close navbar
$('#sidebar').toggleClass('active');
// close dropdowns
$('.collapse.in').toggleClass('in');
// and also adjust aria-expanded attributes we use for the open/closed arrows
// in our CSS
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</div>-->
<div id="sidebarWrapper">
<div id="sidebar">
<ul class="list-simple">
<li><a href="/">Home</a></li>
<li><a href="/download/">Download</a></li>
<li><a href="/info/changelog/">Changelog</a></li>
<li><a href="/info/about-us/">About Us</a></li>
<li><a href="/info/why-kado/">Why Kado</a></li>
<li><a href="/guide/introduction/">Introduction</a></li>
<li><a href="/guide/quick-start">Quick Start</a></li>
</ul>
<h2>Documentation</h2>
<div>
<label for="versionSelect">Version:</label>
<form action="/setDocVersion" method="get" class="form-inline" id="versionForm">
<select name="version" id="versionSelect">
{{#docVersionSelectList}}
<option value="{{version}}" {{#selected}}selected="selected"{{/selected}}>{{version}}</option>
{{/docVersionSelectList}}
</select>
</form>
<script>
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
// open or close navbar
$('#sidebar').toggleClass('active');
// close dropdowns
$('.collapse.in').toggleClass('in');
// and also adjust aria-expanded attributes we use for the open/closed arrows
// in our CSS
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
const selector = document.getElementById('versionSelect')
const form = document.getElementById('versionForm')
selector.addEventListener('change', () => { form.submit() })
</script>
</div>
{{>api}}
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment