toolbar.css

body {
  margin-top: 50px;
}

nav.navbar {
  height: 50px;
  line-height: 1;
  font-size: 24px;
  font-family: var(--font-family-toolbar-details);
  background-color: var(--toolbar);
  box-shadow: 0 0 6px;
}
nav.navbar-dark * {
  color: var(--toolbar-entry);
  transition: color .2s ease-out;
}

nav.navbar-dark a:hover *, nav.navbar-dark a:focus * {
  color: var(--toolbar-active);
}
nav.navbar a:hover {
  text-decoration: none;
}
nav.navbar a {
  cursor: pointer;
}

.navbar-brand {
  margin-right: auto;
  margin-left: auto;
  font-size: inherit;
  display: flex;
  align-items: center;
}

.navbar-brand .project-logo {
  display: none;
  height: 40px;
  margin-right: 7px;
}

.navbar-brand .project-details * {
  margin: 0;
  line-height: inherit;
}
.navbar-brand .project-details h1 {
  font-size: 1em;
  font-family: var(--font-family-toolbar-main);
  font-weight: var(--font-weight-toolbar-main);
}
.navbar-brand .project-details h2 {
  font-size: 0.5em;
  margin-top: 2px;
  font-weight: var(--font-weight-toolbar-details);
}

#search-api-input {
  color: initial;
  width: 10em;
}
#searchbar {
  display: none;
}
#searchbar.shown {
  display: initial;
  margin-left: auto;
  margin-right: auto;
}
#searchbar.shown + .navbar-brand {
  display: none;
}

#search-icon {
  margin-left: .5em;
}

@media (min-width: 420px) {
  .navbar-brand .project-logo {
    display: inline;
  }
}

@media (min-width: 768px) {
  #search-icon, #searchbar.shown {
    margin-left: 1em;
    margin-right: initial;
  }
  #searchbar.shown + .navbar-brand {
    display: flex;
  }
}

@media (min-width: 1200px) {
  #searchbar.shown {
    position: absolute;
    margin-left: 4em;
  }
}