Add back link and fix breadcrumb line wrap

theme/static/css/main.css

@@ -57,6 +57,9 @@ header h2 {
   margin: 0;
   margin-left: .5em;
   flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 header h2 a {

theme/static/css/media.css

@@ -26,8 +26,7 @@ main {
 
 .img-links {
   justify-content: start;
-  margin-left: -1.5rem;
-  margin-top: .5em;
+  margin: 0 0 .5em -1.5rem;
   position: relative;
   z-index: 1;
 }
@@ -59,7 +58,7 @@ main {
   flex-wrap: wrap;
   align-items: start;
   width: calc(100% + 1.5rem);
-  margin:0.5rem 0 0 -1.5rem;
+  margin: 0.5rem 0 0 -1.5rem;
   position: relative;
   z-index: 1;
 }
@@ -76,7 +75,8 @@ main {
   flex-shrink: 0;
 }
 
-.meta > div:nth-of-type(2) {
+.meta > div:nth-of-type(2),
+.img-links > li:first-of-type {
   flex: 1 0 auto;
 }
 
@@ -136,17 +136,14 @@ main {
     width: 100%;
   }
 
-  .meta {
+  .meta, .img-links {
     margin-left: -1rem;
     width: calc(100% + .5rem);
     justify-content: space-between;
   }
 
-  .img-links {
-    margin-left: -1em;
-  }
-
-  .meta > div:nth-of-type(2) {
+  .meta > div:nth-of-type(2),
+  .img-links > li:first-of-type {
     flex-grow: 0;
   }
 }

theme/templates/media.html

@@ -13,6 +13,18 @@
 {% block content %}
 <div class="img-container">
   <div>
+    <ul class="img-links">
+      <li>
+        <a href="../{{ album.url }}#{{ media.url }}" title="Go back to album">
+          <i aria-hidden="true" class="fa fa-reply"></i> <span>Back to album</span>
+        </a>
+      </li>
+      <li>
+        <a href="{{ media.big_url }}" title="Download original file">
+          <i aria-hidden="true" class="fa fa-download"></i> <span>Download</span>
+        </a>
+      </li>
+    </ul>
     <img src="{{ media.url }}" alt="{{ media.title }}">
     <dl class="meta">
     {% if media.exif.dateobj %}
@@ -51,9 +63,6 @@
       </div>
     {% endif %}
     </dl>
-    <ul class="img-links">
-      <li><a href="{{ media.big_url }}" title="Download original file"><i aria-hidden="true" class="fa fa-download"></i> <span>Download</span></a></li>
-    </ul>
   </div>
 </div>