Improve title position with summary open in header

1 files changed, 50 insertions, 38 deletions

diff --git a/assets/stylesheets/book/header.less b/assets/stylesheets/book/header.less
index d859b34..ce20716 100644
--- a/assets/stylesheets/book/header.less
+++ b/assets/stylesheets/book/header.less
@@ -1,48 +1,60 @@
-.book .book-header {
-    position: fixed;
-    top: 0px;
-    right: 0px;
-    left: 0px;
-    z-index: 2;
+.book {
+    .book-header {
+        position: fixed;
+        top: 0px;
+        right: 0px;
+        left: 0px;
+        z-index: 2;
 
-    height: 40px;
+        height: 40px;
 
-    font-size: 0.85em;
+        font-size: 0.85em;
+
+        background: #242628;
+        color: #e2edf2;
+
+        .btn {
+            display: block;
+            height: 40px;
+            padding: 0px 15px;
+            border-bottom: none;
+            color: #7d878a;
+            text-transform: uppercase;
+            line-height: 40px;
+
+            &:hover {
+                color: #e2edf2;
+                text-decoration: none;
+                position: relative;
+                background: #303436;
+                box-shadow: 0 -2px 2px rgba(0,0,0,0.2) inset;
+            }
+        }
 
-    background: #242628;
-    color: #e2edf2;
+        h1 {
+            margin: 0px;
+            font-size: 20px;
+            text-align: center;
+            line-height: 40px;
 
-    .btn {
-        display: block;
-        height: 40px;
-        padding: 0px 15px;
-        border-bottom: none;
-        color: #7d878a;
-        text-transform: uppercase;
-        line-height: 40px;
-
-        &:hover {
-            color: #e2edf2;
-            text-decoration: none;
-            position: relative;
-            background: #303436;
-            box-shadow: 0 -2px 2px rgba(0,0,0,0.2) inset;
-        }
-    }
+            padding-left: 400px;
+            padding-right: 400px;
+            .transition(margin-left 0.5s ease);
 
-    h1 {
-        margin: 0px;
-        font-size: 20px;
-        text-align: center;
-        line-height: 40px;
+            a, a:hover {
+                color: inherit;
+                text-decoration: none;
+            }
 
-        a, a:hover {
-            color: inherit;
-            text-decoration: none;
+            @media (max-width: 600px) {
+                display: none;
+            }
         }
+    }
 
-        @media (max-width: 600px) {
-            display: none;
+    &.with-summary {
+        .book-header h1 {
+            margin-left: 250px;
         }
     }
-}
\ No newline at end of file
+}