Minor Changes & Addition of Fontawesome icons

Author: ZYROUGE

package.json

@@ -4,7 +4,7 @@
   "description": "A clean and minimalistic JSDoc theme",
   "main": "publish.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jsdoc -R ../jsdoc-skyceil-docs/example/readme.md -d ../jsdoc-skyceil-docs/example -t . --verbose ../jsdoc-skyceil-docs/example/thecode.js"
   },
   "repository": {
     "type": "git",

static/scripts/nav.js

@@ -41,10 +41,10 @@ const init = async () => {
 
             if (DBTheme === "dark" && bodyTheme !== "dark") {
                 body.setAttribute("data-theme", "dark");
-                themeBtn.innerHTML = "💡 Turn on the lights";
+                themeBtn.innerHTML = "<i class=\"fas fa-sun\"></i>";
             } else if (DBTheme === "light" && bodyTheme !== "light") {
                 body.setAttribute("data-theme", "light");
-                themeBtn.innerHTML = "🌙 Turn off the lights";
+                themeBtn.innerHTML = "<i class=\"fas fa-moon\"></i>";
             }
         }
 

static/styles/skyceil.css

@@ -15,6 +15,7 @@
 :root {
     --font: #4d4e53;
     --second-font: #aaa;
+    --theme-font: #aaa;
 
     --background: #fff;
 
@@ -37,6 +38,7 @@
 body[data-theme="dark"] {
     --font: #ccc;
     --second-font: #e1e1ff;
+    --theme-font: #4b4b4b;
 
     --background: #161616;
 
@@ -55,16 +57,13 @@ body[data-theme="dark"] {
 
 .theme {
     padding: 10px 15px;
-    background: #161616;
-    color: #fff;
+    color: var(--font);
     border: none;
     border-radius: 10px;
     outline: none;
-}
-
-body[data-theme="dark"] .theme {
-    background: #fff;
-    color: #161616;
+    background: transparent !important;
+    font-size: 1.5rem;
+    cursor: pointer;
 }
 
 html
@@ -204,8 +203,6 @@ nav li {
     top: 10px;
     right: 10px;
     z-index: 1;
-    background: rgb(245, 245, 245, 0.5);
-    border-radius: 5px;
     padding: 3px;
     transition: 0.5s;
 }
@@ -214,15 +211,11 @@ nav li {
     margin: 4px;
     padding: 3px;
     background: var(--font);
-    border-radius: 5px;
+    border-radius: 1px;
     opacity: 1;
     transition: 0.5s;
 }
 
-.burger.is-active {
-    border-radius: 20px;
-}
-
 .burger.is-active .burger-line-1 {
     transform: translateY(10px) rotate(45deg);
 }
@@ -350,7 +343,7 @@ tr > th:last-child { border-right: 1px solid var(--border); }
 }
 
 .type-signature {
-    color: var(--second-font);
+    color: var(--theme-font);
 }
 
 .name {
@@ -412,7 +405,7 @@ tr > th:last-child { border-right: 1px solid var(--border); }
 
 .prettyprint.linenums
 {
-  padding: 10px 10px 0 70px;
+  padding: 10px 10px 10px 70px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -509,21 +502,21 @@ hr {
     vertical-align: middle;
 }
 
-/* scrollbar */
+/* Scrollbar */
 ::-webkit-scrollbar {
-  width: 5px;
+    width: 5px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #f2f2f2; 
+    background: var(--font);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--alpha-dark); 
+    background: var(--alpha-dark); 
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--dark-lite); 
+    background: var(--dark-lite); 
 }
 
 body[data-theme="dark"] .small-icon {
@@ -609,6 +602,6 @@ nav .has-class-methods {
     }
 
     footer {
-        padding: 0;
+        padding: 10px;
     }
 }

tmpl/details.tmpl

@@ -20,6 +20,24 @@ if (data.defaultvalue && (data.defaultvaluetype === 'object' || data.defaultvalu
 
 <?js } ?>
 
+<?js if(
+    data.version ||
+    data.since ||
+    (data.inherited && data.inherits && !data.overrides) ||
+    data.overrides ||
+    (data.implementations && data.implementations.length) ||
+    (data.implements && data.implements.length) ||
+    (data.mixes && data.mixes.length) ||
+    data.deprecated ||
+    (data.author && author.length) ||
+    data.copyright ||
+    data.license ||
+    data.defaultvalue ||
+    (data.meta && self.outputSourceFiles) ||
+    (data.tutorials && tutorials.length) ||
+    (data.see && see.length) ||
+    (data.todo && todo.length)
+) {?>
 <dl class="details">
 
     <?js if (data.version) {?>
@@ -141,3 +159,4 @@ if (data.defaultvalue && (data.defaultvaluetype === 'object' || data.defaultvalu
     </dd>
     <?js } ?>
 </dl>
+<?js } ?>

tmpl/layout.tmpl

@@ -12,14 +12,15 @@
 
     <link type="text/css" rel="stylesheet" href="styles/skyceil.css">
     <link type="text/css" rel="stylesheet" href="styles/prettify.css">
+    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
 </head>
 
 <body>
 
 <nav class="navbar">
     <div class="utilities">
         <center>
-            <button class="theme" data-theme="light">🌙 Turn off the lights</button>
+            <button class="theme" data-theme="light"><i class="fas fa-moon"></i></button>
         </center>
     </div>
     <hr>
@@ -42,7 +43,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc <?js= env.version.number ?></a><?js if(env.conf.templates && env.conf.templates.default && env.conf.templates.default.includeDate !== false) { ?> on <?js= (new Date()) ?><?js } ?> using <a href="https://github.com/zyrouge/jsdoc-skyceil">Skyceil Theme</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc <?js= env.version.number ?></a><?js if(env.conf.templates && env.conf.templates.default && env.conf.templates.default.includeDate !== false) { ?> on <?js= (new Date()) ?><?js } ?> using <a href="https://github.com/devsnowflake/jsdoc-skyceil">Skyceil Theme</a>
 </footer>
 
 <script>prettyPrint();</script>