Mosaic theme: class name for separators. Linebreak after the date on mobile

templates/themes/mosaic/theme.hbs

@@ -31,7 +31,8 @@
     <nav class="breadcrumbs">
       <div class="mask"></div>
       {{#each breadcrumbs~}}
-        <a class="breadcrumb-item" href="{{filename}}.html">{{title}}</a>&nbsp;/&nbsp;
+        <a class="breadcrumb-item" href="{{filename}}.html">{{title}}</a>
+        <span class="separator">&gt;</span>
       {{~/each~}}
       <a class="breadcrumb-item" href="{{album.filename}}.html">{{album.title}}</a>
     </nav>
@@ -50,7 +51,7 @@
           <a href="{{filename}}.html">
             <h3>{{title}}</h3>
             <div class="meta">
-              <time>{{{date stats.fromDate}}} - {{{date stats.toDate}}}</time>,
+              <time>{{{date stats.fromDate}}} - {{{date stats.toDate}}}</time><span class="separator">,</span>
               <span class="summary">{{summary}}</span>
             </div>
             <!-- <div class="mosaic" style="opacity: 0.8">

templates/themes/mosaic/theme.less

@@ -12,7 +12,7 @@
 @text-color: #444;
 @text-light: #999;
 @borders: #ddd;
-@mobile-trigger: 900px;
+@mobile-trigger: 450px;
 
 // -----------------------------------
 // Page structure
@@ -230,6 +230,12 @@ nav.breadcrumbs a {
   text-decoration: none;
 }
 
+nav.breadcrumbs .separator {
+  color: #fff;
+  display: inline-block;
+  margin: 0 0.5em;
+}
+
 // -----------------------------------
 // Nested albums
 // -----------------------------------
@@ -284,12 +290,13 @@ nav.breadcrumbs a {
   width: 50px;
 }
 
-// -----------------------------------
-// Navigation hovers
-// -----------------------------------
-
-#sidebar a:hover {
-  background-color: @nav-highlight;
+@media only screen and (max-width: @mobile-trigger) {
+  #albums .meta .separator {
+    display: none;
+  }
+  #albums .meta .summary {
+    display: block;
+  }
 }
 
 // -----------------------------------