roobie
Version:
A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.
272 lines (241 loc) • 8.35 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roobie - A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
<link rel="stylesheet" href="includes/roobie.bundle.css">
<script src="includes/roobie.bundle.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-edit-on-github"></script>
<style>
.card h2 {
margin: var(--mrg1) 0 ;
}
ul.ul,
ul.ul-cnt {
padding-left: 0;
min-width: 300px;
}
ul.path {
padding-left: 0;
}
.nav-row {
margin-bottom: var(--mrg2);
}
.nav-col {
height: 700px;
margin-right: var(--mrg2);
}
[tooltip] {
padding: var(--pad2);
}
.app-sub-sidebar li::before {
content: '' ;
}
.search input {
border-radius: var(--br3);
}
.sidebar-nav {
display: none;
}
.sidebar-nav p span {
cursor: pointer;
}
.sidebar-nav p::before {
content: '\203A';
float: left;
transform: rotate(90deg);
font-size: var(--fnts5) ;
margin-right: 5px;
}
.rotate-section::before {
transform: rotate(0deg) ;
}
.docsify-copy-code-button {
opacity: 1 ;
border-radius: var(--br2) ;
padding: var(--pad1) ;
top: 5px ;
right: 5px ;
background-color: var(--bg1) ;
color: var(--t3) ;
border: var(--bdr1) ;
font-weight: var(--fntw2);
}
.docsify-copy-code-button:hover,
#main>div:first-child a:hover {
background-color: var(--bg2) ;
}
#main>div:first-child {
position: absolute;
top: 0;
right: 0;
}
.markdown-section {
padding-top: var(--pad2);
}
#main>div:first-child a {
border: var(--bdr1);
text-decoration: none ;
padding: var(--pad2);
border-radius: var(--br2);
background-color: var(--bg1) ;
color: var(--t3);
font-weight: var(--fntw2);
}
.doc-heading {
border: .5px solid transparent;
border-radius: var(--br2);
padding: var(--pad2);
}
.doc-heading:hover {
border: var(--bdr1);
}
pre,
code,
aside,
aside input,
aside a,
.sidebar-toggle {
background-color: var(--bg2) ;
color: var(--t5) ;
}
.sidebar-toggle {
width: auto ;
}
li,
em,
strong,
h2,
h2 span,
h3,
h3 span,
h4,
h4 span,
h5,
h5 span,
h6,
h6 span,
svg,
.pagination-item-title,
.pagination-item-subtitle {
color: var(--t5) ;
}
a,
div {
color: var(--t3) ;
}
h1 span,
h1 {
color: var(--t4) ;
}
.cover-main span,
.cover-main p,
.cover-main li,
.cover-main p a {
color: var(--black) ;
}
.github-corner svg {
fill: var(--bg2);
}
</style>
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: 'Roobie',
coverpage: false,
loadSidebar: true,
alias: {
'/.*/_sidebar.md': '/_sidebar.md'
},
repo: 'https://github.com/kgrewee/roobie',
subMaxLevel: 3,
auto2top: true,
search: {
placeholder: 'Search docs',
noData: 'No Results'
},
copyCode: {
buttonText: 'Copy',
errorText: 'Error',
successText: 'Copied'
},
plugins: [
EditOnGithubPlugin.create(
'https://github.com/kgrewee/roobie/tree/main/docs/',
null,
function(file) {
return 'View on GitHub'
}
)
],
pagination: {
previousText: 'Previous',
nextText: 'Next',
crossChapter: true,
crossChapterText: true,
}
}
</script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
<script>
ready(() => {
// Add subtitle
let subtitle = document.createElement('div');
subtitle.innerHTML = "";
subtitle.classList.add("fnts2");
subtitle.classList.add("mrgv");
document.getElementsByClassName('app-name')[0].appendChild(subtitle);
});
function toggleNextSibling(el) {
el.parentElement.nextSibling.classList.toggle("hide");
el.parentElement.classList.toggle("rotate-section");
sessionStorage.setItem(el.innerHTML, el.parentElement.nextSibling.classList.contains("hide"));
}
function setHeadings() {
let headings = document.getElementsByClassName('doc-heading');
console.log(headings.length);
let i = 0;
for (let el of headings) {
let collapse = sessionStorage.getItem(el.innerHTML);
if (collapse == null) {
if (i == 0) {
console.log("Expand " + el.innerHTML);
el.parentElement.classList.remove("rotate-section");
el.parentElement.nextSibling.classList.remove("hide");
sessionStorage.setItem(el.innerHTML, false);
} else {
console.log("Collapse " + el.innerHTML);
el.parentElement.classList.add("rotate-section");
el.parentElement.nextSibling.classList.add("hide");
sessionStorage.setItem(el.innerHTML, true);
}
} else {
if (collapse == 'true') {
console.log("Collapse " + el.innerHTML);
el.parentElement.classList.add("rotate-section");
el.parentElement.nextSibling.classList.add("hide");
sessionStorage.setItem(el.innerHTML, true);
} else {
console.log("Expand " + el.innerHTML);
el.parentElement.classList.remove("rotate-section");
el.parentElement.nextSibling.classList.remove("hide");
sessionStorage.setItem(el.innerHTML, false);
}
}
i++;
}
document.querySelectorAll('.sidebar-nav')[0].style.display = 'inline';
}
</script>
</body>
</html>