Rework the toolbar

Author: TheElectronWill

doc-tool/resources/_includes/toolbar.html

@@ -1,14 +1,25 @@
-<div id="toolbar">
-    <a id="home-button" href="{{ site.baseurl }}/index.html">
-        {% include "scala-logo.svg" %}
-    </a>
-    <div id="project-details">
-        <h1 id="project-name"><a href="{{ site.baseurl }}/docs/">{{ site.project }} Documentation</a></h1>
-        <h2 id="project-version">{{ site.version }}</h2>
+<nav class="navbar navbar-expand navbar-dark fixed-top bg-primary">
+    <i class="fas fa-bars"></i>
+    <i class="fas fa-search" id="search-icon"></i>
+    <!--<form class="form-inline" action="{{ site.baseurl }}/api/search.html" method="get">
+        <input type="text" class="form-control" placeholder="Search" aria-label="Search">
+    </form>-->
+    <div class="navbar-brand">
+        {% if site.logo %}
+        <a href="{{ site.baseurl }}/index.html">
+            <img class="project-logo" src="{{ site.baseurl }}/images/{{ site.logo }}">
+        </a>
+        {% endif %}
+        <a href="{{ site.baseurl }}/docs/index.html">
+            <div class="project-details">
+                <h1>{{ site.project }} Documentation</h1>
+                <h2>{{ site.version }}</h2>
+            </div>
+        </a>
     </div>
 
     {% if site.projectUrl %}
-    <a title="Project repository" id="github-link" href="{{ site.projectUrl }}">
+    <a id="github-link" title="Project repository" href="{{ site.projectUrl }}">
         {% if site.projectUrl contains "github" %}
         <i class="fab fa-github" aria-hidden="true"></i>
         {% elsif site.projectUrl contains "gitlab" %}
@@ -18,5 +29,4 @@ <h2 id="project-version">{{ site.version }}</h2>
         {% endif %}
     </a>
     {% endif %}
-</div>
-<div id="toolbar-spacing"></div>
+</nav>

doc-tool/resources/css/toolbar.css

@@ -1,78 +1,64 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700);
 
-div#toolbar {
-  height: 75px;
-  width: 100%;
-  background-color: #414551;
-  position: fixed;
-  top: 0; left: 0;
-  z-index: 2;
+body {
+  margin-top: 50px;
 }
 
-div#toolbar-spacing {
-  width: 100%;
-  height: 75px;
+nav.navbar {
+  height: 50px;
+  line-height: 1;
+  font-size: 24px;
 }
-
-div#toolbar > a#home-button svg g#logo-foreground {
-    fill: rgba(202, 68, 94, 1);
+nav.navbar-dark * {
+  color: white;
 }
 
-div#toolbar > a#home-button svg g#logo-background {
-    fill: rgba(202, 68, 94, 0.45);
+nav.navbar-dark a:hover *, nav.navbar-dark a:focus * {
+  color: var(--contrast);
 }
-
-div#toolbar > a#home-button {
-    margin: 9px 0 0 38px;
-    user-select: none;
-    float: left;
+nav.navbar a:hover {
+  text-decoration: none;
 }
 
-div#toolbar > div#project-details {
-    float: left;
-    color: #fff;
-    font-family: "Source Sans Pro", sans-serif;
-    margin: 18px 0 0 40px;
-    padding-left: 10px;
+.navbar-brand {
+  margin-right: auto;
+  margin-left: auto;
+  font-size: inherit;
+  display: flex;
+  align-items: center;
+  font-family: "Source Sans Pro", sans-serif;
 }
 
-div#toolbar > div#project-details:before {
-    display: block;
-    content: '';
-    position: absolute;
-    top: 22px;
-    left: 95px;
-    width: 1px;
-    bottom: 20px;
-    background-color: #767e94;
+.navbar-brand .project-logo {
+  display: none;
+  height: 40px;
+  margin-right: 7px;
 }
 
-div#toolbar > div#project-details > h1#project-name {
-    font-size: 20px;
-    font-weight: 300;
-    margin-bottom: 3px;
+.navbar-brand .project-details * {
+  margin: 0;
+  line-height: inherit;
 }
-
-div#toolbar > div#project-details > h1#project-name > a {
-    color: #fff;
+.navbar-brand .project-details h1 {
+  font-size: 1.1em;
+}
+.navbar-brand .project-details h2 {
+  font-size: 0.5em;
+  color: grey;
 }
 
-div#toolbar > div#project-details > h1#project-name > a:hover,
-div#toolbar > div#project-details > h1#project-name > a:focus {
-    text-decoration: none;
-    color: rgba(255, 255, 255, 0.8);
+#search-icon {
+  margin-left: .5em;
 }
 
-div#toolbar > div#project-details > h2#project-version {
-    font-size: 12px;
-    font-weight: 200;
-    margin-left: 1px;
+@media (min-width: 410px) {
+  .navbar-brand .project-logo {
+    display: inline;
+  }
 }
 
-div#toolbar > a#github-link {
-    color: #fff;
-    position: absolute;
-    top: 7px;
-    right: 15px;
-    font-size: 40px;
+@media (min-width: 768px) {
+  #search-icon {
+    margin-left: 1em;
+  }
 }