cap gallery image width, show media metadata

static/css/custom.css

@@ -3,6 +3,10 @@ img.album-img {
   max-height: 100%;
 }
 
+.imageContainer img {
+  max-width: 100%;
+}
+
 .TagsCover {
   top: 0px;
   min-height: 351px;
@@ -66,3 +70,10 @@ body {
 .NewCover {
   padding-top: 100px;
 }
+
+.Gallery-Content--title {
+  font-family: Proxima Nova Regular,Helvetica Neue,Helvetica,Arial,sans-serif;
+  color: #b4b9c2;
+  font-size: 12px;
+  line-height: 12px;
+}

static/css/styles.css

@@ -275,6 +275,17 @@ a {
   margin-right: 10px;
 }
 
+.Gallery-ContentWrapper .Gallery-Content--descr {
+  margin-bottom: 24px;
+  padding: 0 24px;
+  font-family: Proxima Nova Regular,Helvetica Neue,Helvetica,Arial,sans-serif;
+  font-size: 16px;
+  line-height: 150%;
+  color: hsla(0,0%,100%,.9);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
 .CommentsList-headline {
   background: repeat-x 0 100% url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Cpath fill='%23585D6A' d='M0 0h1v.5H0z'/%3E%3C/svg%3E");
   display: flex;
@@ -358,7 +369,7 @@ a {
   color: #b4b9c2;
 }
 
-Post-item-title {
+.Post-item-title {
   font-weight: 600;
   line-height: 1.14;
   font-size: 14px;

templates/gallery.pug

@@ -46,7 +46,17 @@ mixin media(m)
     else
       div(class='Gallery-Content--media')
         div(class='imageContainer')
-          img(src=util.proxyURL(m.url))
+          img(src=util.proxyURL(m.url) title=m.name+' ['+m.metadata.created_at+']')
+      div(class='Gallery-Content--descr')
+        div(class='Gallery-Content--title')
+          span #{m.metadata.title || m.name} 
+          span(class='delimiter') •
+          span  #{m.created_at}
+          if m.updated_at
+            span(class='delimiter') •
+            span  #{m.updated_at}
+        if m.metadata.description
+          span(class='Linkify') #{m.metadata.description}
             
 html
   head