Cards theme: single album preview to be more different from "classic"

templates/themes/cards/theme.hbs

@@ -1,85 +1,74 @@
-<div id="wrapper">
+
+<div id="container">
 
   <!--
     Gallery title
   -->
   <header>
-    <h1>{{gallery.title}}</h1>
+    <h1><a href="{{gallery.home.filename}}.html">{{gallery.title}}</a></h1>
   </header>
 
-  <div id="container">
+  <!--
-
+    Breadcrumbs of parent albums
-    <!--
+  -->
-      Main gallery panel
+  <nav class="breadcrumbs">
-    -->
+    {{#each breadcrumbs~}}
-    <section id="content">
+      <a class="breadcrumb-item" href="{{filename}}.html">{{title}}</a>&nbsp;/&nbsp;
-
+    {{~/each~}}
-      <!--
+    <a class="breadcrumb-item" href="{{album.filename}}.html">{{album.title}}</a>
-        Breadcrumbs of parent albums
+  </nav>
-      -->
-      <nav class="breadcrumbs">
-        {{#each breadcrumbs~}}
-          <a class="breadcrumb-item" href="{{filename}}.html">{{title}}</a>&nbsp;/&nbsp;
-        {{~/each~}}
-        <a class="breadcrumb-item" href="{{album.filename}}.html">{{album.title}}</a>
-      </nav>
-
-      <!--
-        Nested albums, if any
-      -->
-      <ul id="albums">
-        {{#each album.albums~}}
-        <li>
-          <a href="{{filename}}.html">
-            <ul class="grid clearfix">
-              {{~#slice previews count=2~}}
-                <li><img src="{{this.urls.thumb}}" /></li>
-              {{~/slice}}
-            </ul>
-            <h3>{{title}}</h3>
-            <div class="meta">
-              {{summary}}<br />
-              {{{date stats.fromDate}}} - {{{date stats.toDate}}}
-            </div>
-          </a>
-        </li>
-        {{~/each}}
-      </ul>
-
-      <!--
-        All photos and videos
-      -->
-      <ul id="media">
-        {{#each album.files}}
-          {{#if isVideo}}
-            <li data-html="#media{{id}}"
-                data-poster="{{urls.poster}}"
-                data-download-url="{{{download this}}}">
-              <a href="{{{download this}}}">
-                <img src="{{urls.thumb}}"
-                     width="{{@root.gallery.thumbSize}}"
-                     height="{{@root.gallery.thumbSize}}"
-                     alt="{{filename}}" />
-              </a>
-              <img class="video-overlay" src="public/play.png" />
-            </li>
-          {{else}}
-            <li data-src="{{urls.large}}"
-                data-sub-html="{{caption}}"
-                data-download-url="{{{download this}}}">
-              <a href="{{{download this}}}">
-                <img src="{{urls.thumb}}"
-                     width="{{@root.gallery.thumbSize}}"
-                     height="{{@root.gallery.thumbSize}}"
-                     alt="{{filename}}" />
-             </a>
-            </li>
-          {{/if}}
-        {{/each}}
-      </ul>
-
-    </section>
 
+  <!--
+    Nested albums, if any
+  -->
+  <div id="albums">
+    {{#each album.albums~}}
+      <a href="{{filename}}.html" style="background-image: url('{{previews.0.urls.large}}')">
+        <div class="info">
+          <h3>{{title}}</h3>
+          <div class="summary">{{summary}}</div>
+          <div class="date">{{{date stats.fromDate}}} - {{{date stats.toDate}}}</div>
+        </div>
+      </a>
+    {{~/each}}
   </div>
 
+  <!--
+    All photos and videos
+  -->
+  <ul id="media" class="clearfix">
+    {{#each album.files~}}
+      {{#if isVideo~}}
+        <li data-html="#media{{id}}"
+            data-poster="{{urls.poster}}"
+            data-download-url="{{{download this}}}">
+          <a href="{{{download this}}}">
+            <img src="{{urls.thumb}}"
+                 width="{{@root.gallery.thumbSize}}"
+                 height="{{@root.gallery.thumbSize}}"
+                 alt="{{filename}}"
+                 data-html="#media{{id}}"
+                 data-poster="{{urls.poster}}"
+                 data-download-url="{{{download this}}}"
+                 />
+          </a>
+          <img class="video-overlay" src="public/play.png" />
+        </li>
+      {{~else~}}
+        <li data-src="{{urls.large}}"
+            data-sub-html="{{caption}}"
+            data-download-url="{{{download this}}}">
+          <a href="{{urls.large}}"
+             data-sub-html="{{caption}}"
+             data-download-url="{{{download this}}}">
+            <img src="{{urls.thumb}}"
+                 width="{{@root.gallery.thumbSize}}"
+                 height="{{@root.gallery.thumbSize}}"
+                 alt="{{filename}}" />
+         </a>
+        </li>
+      {{~/if}}
+    {{~/each}}
+  </ul>
+
 </div>

templates/themes/cards/theme.less

@@ -3,16 +3,13 @@
 // Variables for user customisation
 // -----------------------------------
 
-@body-background: #f6f6f6;
+@body-background: #fff;
-@header-background: #444;
+@header-background: #fff;
-@header-foreground: #fff;
+@header-foreground: #444;
-@nav-background: #fafafa;
-@nav-highlight: #fff;
-@album-background: #fafafa;
 @text-color: #444;
 @text-light: #999;
 @borders: #ddd;
-@mobile-trigger: 900px;
+@mobile-trigger: 400px;
 
 // -----------------------------------
 // Generic styles
@@ -61,6 +58,14 @@ a {
   user-select: none;
 }
 
+// -----------------------------------
+// Structure
+// -----------------------------------
+
+#container {
+  padding: 2em;
+}
+
 // -----------------------------------
 // Header
 // -----------------------------------
@@ -69,27 +74,26 @@ header {
   background: @header-background;
   color: @header-foreground;
   font-size: 1.8em;
-  padding: 1em;
+  margin-bottom: 1.1em;
-}
-
-header .hamburger-label {
-  // color: #fff;
-  margin-right: 0.4em;
 }
 
 h1 {
-  // color: #fff;
   display: inline-block;
   font-weight: bold;
 }
 
+h1 a {
+  color: @header-foreground;
+}
+
 // -----------------------------------
 // Breadcrumbs navigation
 // -----------------------------------
 
 nav.breadcrumbs {
   border-bottom: 1px solid @borders;
-  margin: 2em;
+  font-size: 1.2em;
+  margin-bottom: 2em;
   padding: 0em 0em 0.8em 0.1em;
 }
 
@@ -107,53 +111,37 @@ nav.breadcrumbs a {
 // -----------------------------------
 
 #albums, #media {
-  margin: 2em;
+  margin: 0em;
 }
 
 #albums a {
-  background-color: @album-background;
-  display: inline-block;
-  padding: 0.7em;
-}
-
-#albums h3 {
-  color: @text-color;
-  margin: 0.7em;
-  margin-top: 1em;
-  font-size: 1em;
-  text-align: center;
-}
-
-#albums .meta {
-  color: @text-light;
-  font-size: 0.9em;
-  font-style: italic;
-  line-height: 1.2em;
-  margin: 0.5em 0;
-  text-align: center;
-  width: 100%;
-}
-
-#albums > li {
   display: inline-block;
   margin-right: 2em;
   margin-bottom: 3em;
-  border: 1px solid @borders;
+  position: relative;
+  overflow: hidden;
+  width: 300px;
+  height: 220px;
+  background-size: cover;
+  border-radius: 8px;
 }
 
-#albums .grid {
+#albums .info {
-  width: 200px;
+  position: absolute;
-}
+  padding: 1em;
-
+  background: rgba(0,0,0,0.3);
-#albums .grid li {
+  color: #fff;
-  float: left;
+  font-size: 0.9em;
-  padding: 0 0.2em 0.2em 0;
+  line-height: 1.2em;
-  width: 50%;
+  margin: 0;
-}
-
-#albums .grid img {
-  display: block;
   width: 100%;
+  font-weight: bold;
+  bottom: 0;
+}
+
+#albums h3 {
+  font-size: 1.3em;
+  margin-bottom: 0.2em;
 }
 
 // -----------------------------------
@@ -165,6 +153,16 @@ nav.breadcrumbs a {
   margin-right: 0.4em;
   margin-bottom: 0.2em;
   position: relative;
+  cursor: zoom-in;
+}
+
+#media a {
+  display: inline-block;
+}
+
+#media img {
+  border-radius: 8px;
+  display: block;
 }
 
 #media li .video-overlay {
@@ -176,3 +174,14 @@ nav.breadcrumbs a {
   top: 50%;
   width: 48px;
 }
+
+// -----------------------------------
+// Photo and video thumbnails
+// -----------------------------------
+
+@media only screen and (max-width: @mobile-trigger) {
+  #albums a {
+    width: 250px;
+    height: 190px;
+  }
+}