Fixed large content previews and improved mobile styles

Listing content previews no longer pre-wrap and instead simply break
correctly.
Updated titles to ensure they break on mobile devices.
Reduced spacing and font sizes on mobile to better adjust content to
screen size.

Fixes #739

resources/assets/sass/_header.scss

@@ -210,7 +210,7 @@ header .search-box {
 
 @include smaller-than($m) {
   .breadcrumbs .text-button, .action-buttons .text-button {
-    padding: $-s $-xs;
+    padding: $-xs $-xs;
   }
   .action-buttons .dropdown-container:last-child a {
     padding-left: $-xs;
@@ -218,6 +218,9 @@ header .search-box {
   .breadcrumbs .text-button {
     font-size: 0;
   }
+  .breadcrumbs .text-button svg {
+    font-size: $fs-m;
+  }
   .breadcrumbs a i {
     font-size: $fs-m;
     padding-right: 0;
@@ -225,6 +228,9 @@ header .search-box {
   .breadcrumbs span.sep {
     padding: 0 $-xxs;
   }
+  .toolbar .col-xs-1:first-child {
+    padding-right: 0;
+  }
 }
 
 .nav-tabs {

resources/assets/sass/_lists.scss

@@ -55,6 +55,12 @@
   }
 }
 
+@include smaller-than($s) {
+  .page-list h4 {
+    font-size: 1.333em;
+  }
+}
+
 .sidebar-page-nav {
   $nav-indent: $-s;
   list-style: none;

resources/assets/sass/_text.scss

@@ -61,6 +61,24 @@ h5, h6 {
   margin-bottom: 0.66em;
 }
 
+@include smaller-than($s) {
+  h1 {
+    font-size: 2.8275em;
+  }
+  h2 {
+    font-size: 2.333em;
+  }
+  h3 {
+    font-size: 1.666em;
+  }
+  h4 {
+    font-size: 1.333em;
+  }
+  h5 {
+    font-size: 1.161616em;
+  }
+}
+
 /*
  * Link styling
  */
@@ -374,8 +392,8 @@ li.checkbox-item, li.task-list-item {
 }
 
 .break-text {
-  white-space: pre-wrap;
   word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 /**

resources/views/books/show.blade.php

@@ -91,8 +91,8 @@
 
 @section('body')
 
-    <div class="container small">
+    <div class="container small nopad">
-        <h1>{{$book->name}}</h1>
+        <h1 class="break-text" v-pre>{{$book->name}}</h1>
         <div class="book-content" v-show="!searching">
             <p class="text-muted" v-pre>{!! nl2br(e($book->description)) !!}</p>
             @if(count($bookChildren) > 0)

resources/views/chapters/show.blade.php

@@ -96,8 +96,8 @@
 
 @section('body')
 
-    <div class="container small">
+    <div class="container small nopad">
-        <h1 v-pre>{{ $chapter->name }}</h1>
+        <h1 class="break-text" v-pre>{{ $chapter->name }}</h1>
         <div class="chapter-content" v-show="!searching">
             <p v-pre class="text-muted break-text">{!! nl2br(e($chapter->description)) !!}</p>
 

resources/views/pages/page-display.blade.php

@@ -1,6 +1,6 @@
 <div ng-non-bindable>
 
-    <h1 id="bkmrk-page-title">{{$page->name}}</h1>
+    <h1 class="break-text" v-pre id="bkmrk-page-title">{{$page->name}}</h1>
 
     <div style="clear:left;"></div>