Style header and navigation

app/views/layouts/styleguide/styleguide.layout.html.erb

@@ -21,13 +21,46 @@
         background-color: white;
       }
 
+      .styleguide-nav--menu-items {
+        margin: 0;
+        background: var(--primary-color);
+        flex-wrap: wrap;
+      }
+
+      .styleguide-nav li {
+        padding: 0.5rem 1rem;
+        flex: 1;
+        text-align: center;
+      }
+
+      .styleguide-nav li:hover {
+        background: var(--header-item-bg-hover-color);
+      }
+
+      .styleguide-nav a {
+        color: var(--header-item-font-color);
+      }
+
+      .styleguide-nav a:hover {
+        color: var(--header-item-font-hover-color);
+        text-decoration: none;
+      }
+
       .lsg-headline {
         margin-top: 3rem
       }
 
+      .lsg-headline:first-child {
+        margin: 0;
+      }
+
+      .lsg-sub-headline {
+        margin-top: 2rem;
+      }
+
       .lsg-code-block {
-        margin: 1rem 0 2rem 0;
+        margin: 1rem 0;
-        border: 1px solid #e2e2e2;
+        border: 1px solid var(--toolbar-item--border-color);
       }
 
       .lsg-code {
@@ -38,11 +71,13 @@
       }
 
       .styleguide-banner {
-        height: 280px;
         padding: 200px 0 0;
         background: url('/assets/styleguide/logo_openproject.png');
         background-position: top center;
         background-repeat: no-repeat;
+        background-size: contain;
+        max-width: 700px;
+        margin: 1rem auto 3rem auto;
       }
 
       .styleguide-banner--text {