Tweak aesthetics

Author: TheElectronWill

doc-tool/resources/_includes/sidebar.html

@@ -13,7 +13,7 @@
             {% for pkg in docs %}
                 <li class="index-entity entity-package section">
                     <a class="package-toggle" onclick="toggleSection(this);">
-                        <i class="fas fa-plus"></i>
+                        <i class="fas fa-angle-right"></i>
                     </a>
                     <a class="entity-name" href="{{ site.baseurl }}/api/{{ pkg.path | join: "/" }}/index.html">
                         {{ pkg.name }}

doc-tool/resources/_layouts/blog-page.html

@@ -3,7 +3,7 @@
 ---
 <main class="container">
     <header>
-        <h1 class="above-byline">{{ page.title }}</h1>
+        <h1>{{ page.title }}</h1>
         <div class="byline">
             <time class="date">
                 <i class="far fa-calendar-alt"></i>

doc-tool/resources/_layouts/doc-page.html

@@ -3,14 +3,13 @@
 ---
 <main class="container">
     <header>
-        <h1 class="above-byline">{{ page.title }}</h1>
+        <h1>{{ page.title }}</h1>
         <div class="byline">
             <a href="{{ site.projectUrl }}/edit/master/{{ site.root }}/{{ page.url }}">
-                <i class="fab fa-github"></i>
+                <i class="far fa-edit"></i>
                 Edit this page on GitHub
             </a>
         </div>
     </header>
-    <hr/>
     {{ content }}
 </main>

doc-tool/resources/css/sidebar.css

@@ -65,8 +65,8 @@
 .sidebar a {
   width: 100%;
   color: var(--contrast);
+  transition: color .2s ease-out;
 }
-
 .sidebar a:hover {
   color: var(--accent) !important;
 }

doc-tool/resources/css/toolbar.css

@@ -11,6 +11,7 @@ nav.navbar {
 }
 nav.navbar-dark * {
   color: white;
+  transition: color .2s ease-out;
 }
 
 nav.navbar-dark a:hover *, nav.navbar-dark a:focus * {

doc-tool/resources/js/sidebar.js

@@ -2,7 +2,7 @@
 function toggleSection(titleElement) {
   const title = $(titleElement);
   title.siblings("ul").toggle();
-  title.children("i.fas").toggleClass("fa-plus").toggleClass("fa-minus");
+  title.children("i.fas").toggleClass("fa-angle-right").toggleClass("fa-angle-down");
 }
 
 // Unfolds the sidebar section corresponding to the current page