layout: Don't use id `header` if it's not a global header

application/layouts/scripts/body.phtml

@@ -23,25 +23,25 @@ if ($this->layout()->inlineLayout) {
 }
 
 ?>
-<div id="announcements" class="container">
-    <?= $this->widget('announcements') ?>
+<div id="header">
+    <div id="announcements" class="container">
+        <?= $this->widget('announcements') ?>
+    </div>
 </div>
 <div id="content-wrapper">
     <?php if (! $this->layout()->isIframe): ?>
     <div id="sidebar">
-        <div id="header">
-            <div id="header-logo-container">
-                <?= $this->qlink(
-                    '',
-                    Auth::getInstance()->isAuthenticated() ? 'dashboard' : '',
-                    null,
-                    array(
-                        'aria-hidden'       => 'true',
-                        'data-base-target'  => '_main',
-                        'id'                => 'header-logo'
-                    )
-                ); ?>
-            </div>
+        <div id="header-logo-container">
+            <?= $this->qlink(
+                '',
+                Auth::getInstance()->isAuthenticated() ? 'dashboard' : '',
+                null,
+                array(
+                    'aria-hidden'       => 'true',
+                    'data-base-target'  => '_main',
+                    'id'                => 'header-logo'
+                )
+            ); ?>
         </div>
       <?= $this->render('parts/navigation.phtml'); ?>
     </div>
@@ -66,4 +66,3 @@ if ($this->layout()->inlineLayout) {
   ?></ul>
   <div id="application-state-summary" class="container" data-icinga-url="<?= $this->url('application-state/summary') ?>" data-last-update="-1" data-icinga-refresh="60"></div>
 </div>
-

public/css/icinga/layout-structure.less

@@ -27,7 +27,7 @@ body {
 }
 
 #sidebar {
-  width: 12em;
+  width: 16em;
   display: flex;
   flex-direction: column;
   position: relative;

public/css/icinga/layout.less

@@ -26,18 +26,13 @@
 
 #header,
 #login,
-#main > .container,
-#menu {
+#content-wrapper {
   font-size: @font-size;
   line-height: @line-height;
 }
 
-#header {
-  background-color: @icinga-blue;
-}
-
 #header-logo-container {
-  background: inherit;
+  background: @icinga-blue;
   height: 6em;
   padding: 1.25em;
   width: 16em;
@@ -254,7 +249,7 @@ html.no-js .controls > .tabs {
   }
 
   #sidebar {
-    width: 3em;
+    width: 4em;
   }
 
   #open-sidebar {

public/css/icinga/menu.less

@@ -331,6 +331,8 @@ ul:not(.nav-level-2) > .selected > a {
 // Accessibility skip links
 .skip-links {
   position: relative;
+  font-size: 1/.75em;
+
   ul {
     list-style-type: none;
     margin: 0;
@@ -439,6 +441,8 @@ input[type=text].search-input {
 
 // Toggle sidebar button
 #toggle-sidebar {
+  font-size: 1/.75em;
+
   // Reset button styles
   background: none;
   border: none;

public/css/themes/Winter.less

@@ -10,7 +10,7 @@
 @tr-hover-color: #c6cfe4;
 
 /* Snow, from http://codepen.io/NickyCDK/pen/AIonk */
-#header, #login {
+#login, #header-logo-container {
     background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png');
     -webkit-animation: snow 10s linear infinite;
     -moz-animation: snow 10s linear infinite;

public/css/themes/solarized-dark.less

@@ -56,7 +56,7 @@
 // Form colors
 @button-primary-color: lighten(@base02, 20);
 
-#header {
+#header-logo-container {
   background-color: @base02;
 }