Added rounded corners, shadow, and spacing to gallery images

2 files changed, 30 insertions, 3 deletions

diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
index 4b4f8aa..c53e2e3 100644
--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -5,9 +5,12 @@
 <div class="masonry-flex-container">
     {{ range $files }}
         <!-- TODO: Figure out why line height causes issues here -->
-        <div class="flex-item no-line-height">
-                <img src="{{ $url }}{{ .Name | urlize }}"
-                     class="fill-container-width" />
+        <div class="flex-item flex-item-spacing no-line-height rounded-corners z-depth-1">
+            <img src="{{ $url }}{{ .Name | urlize }}"
+                 class="fill-container-width rounded-corners" />
+            <div class="highlight-block rounded-corners">
+                <h3 class="white-text">{{ dateFormat "Mon Jan 06, 2006" .ModTime }}</h3>
+            </div>
         </div>
     {{ end }}
 </div>
diff --git a/static/css/main.css b/static/css/main.css
index 91d8d3c..79ae32d 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -252,6 +252,17 @@ html, body {
     text-align: center;
 }
 
+.rounded-corners {
+    -webkit-border-radius: 10px;
+    border-radius: 10px; 
+}
+
+/* From materialize */
+.z-depth-1 {
+    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
 .grayscale {
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
@@ -599,11 +610,18 @@ ul.pagination {
     display: inline-block;
 }
 
+.flex-item-spacing {
+    margin: 10px;
+}
+
 /* Materialize small */
 @media only screen and (max-width: 600px) {
     .flex-item {
         width: 100%;
     }
+    .flex-item-spacing {
+        width: calc(100% - 20px);
+    }
 }
 
 /* Materialize medium */
@@ -611,6 +629,9 @@ ul.pagination {
     .flex-item {
         width: 50%;
     }
+    .flex-item-spacing {
+        width: calc(50% - 20px);
+    }
 }
 
 /* Materialize large */
@@ -618,5 +639,8 @@ ul.pagination {
     .flex-item {
         width: 33.33%;
     }
+    .flex-item-spacing {
+        width: calc(33.33% - 20px);
+    }
 }