compact header

public/css/main.css

@@ -88,79 +88,59 @@ hr.textonly {
 
 .row.titlebar {
     position: relative;
-    display: table;
-    padding: 0;
-    height: 66px;
+    min-height: 32px;
 }
 
-.titlebar .inner {
+.titlebar .logo {
     position: relative;
-    display: table-cell;
-    min-width: 220px;
-    height: 66px;
     text-decoration: none;
+    height: 32px;
+    float: left;
     border: none;
     outline: none;
-    padding: 15px 0 15px 15px;
-    margin: 0;
 }
 
-.titlebar img {
-    display: inline-block;
-    float: left;
-    margin-right: 15px;
+.titlebar .logo img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-width: 32px;
+    min-height: 32px;
+    margin-right: 10px;
     border: none;
 }
 
-.titlebar .title {
-    display: inline-block;
-    float: left;
-    margin: 14px 0;
-    padding: 0;
-    max-width: 135px;
-    overflow: hidden;
-}
-
-.titlebar .title h1,
-.titlebar .title h2 {
-    display: block;
+.titlebar .logo h1 {
+    position: relative;
     margin: 0;
     padding: 0;
+    padding-left: 42px;
     color: white;
+    display: inline-block;
     text-align: left;
-    line-height: 1;
-}
-
-.titlebar .title h1 {
-    font-size: 27px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 28px;
     font-weight: 600;
     font-style: italic;
 }
 
-.titlebar .title h1 span {
+.titlebar .logo h1 span {
     color: #ec3737;
 }
 
-.titlebar .title h2 {
-    font-size: 11px;
-    text-transform: uppercase;
-}
-
 .titlebar .menu {
     position: relative;
-    display: table-cell;
-    width: 100%;
-    padding: 15px;
-    margin: 8px 0;
+    float: right;
+    margin: 0;
     vertical-align: middle;
-    text-align: right;
 }
 
-.titlebar a {
+.titlebar .menu a {
     display: inline-block;
-    height: 25px;
-    line-height: 25px;
-    padding-left: 5px;
+    padding: 5px;
+    padding-right: 0;
+    line-height: 22px;
     color: #aaa;
     text-decoration: none;
 }

public/css/mobile.css

@@ -5,40 +5,25 @@
 		padding: 5px;
 	}
 
-	.wrapper > .row.titlebar {
-    	height: auto;
-    	padding: 5px 10px;
-	}
-
-	.titlebar a.inner {
-		position: relative;
+	.titlebar .logo {
 		float: none;
-		top: 0;
-		left: 0;
-		margin-left: auto;
-		margin-right: auto;
+        text-align: center;
+        min-width: 100%;
 	}
 
 	.titlebar .menu {
 		float: none;
+        text-align: center;
 		max-width: unset;
+        margin-top: 10px;
 		margin-bottom: 0;
 	}
 
-	.titlebar ul {
-		height: auto;
-    	line-height: 20px;
-		margin: 0;
-		text-align: center;
-	}
-
-	.titlebar ul li {
-		display: inline;
-		float: none;
-		padding: 0 4px;
-		margin: 0;
-		font-size: 13px;
-	}
+    .titlebar .menu a {
+        padding-right: 5px;
+        padding-left: 0;
+        line-height: 1;
+    }
 
 	.cell {
 		width: auto;
@@ -88,4 +73,4 @@
 		height: auto;
 	}
 
-}
+}

resources/views/partial/header.blade.php

@@ -1,11 +1,7 @@
 <div class="wrapper">
     <div class="row titlebar">
-        <div class="inner">
-            <img src="/img/logo.gif" alt="Knockout Lite"/>
-            <div class="title">
-                <h1>knockout<span>!</span></h1>
-                <h2>100% less Javascript</h2>
-            </div>
+        <div class="logo">
+            <h1><img src="/img/logo.gif" alt=""/>knockout<span>!</span></h1>
         </div>
         <div class="menu">
             <a href="{{ route('index') }}">Home</a>