Improve mobile layout for gallery

themes/red/assets/css/site.css

@@ -34,7 +34,7 @@
     }
 
     .grid-sizer, .grid-item {
-        width: 400px;
+        width: 49%;
     }
 
     .page-pic {
@@ -43,6 +43,14 @@
     }
 }
 
+.gutter-sizer {
+    width: 1%;
+}
+
+.grid-sizer, .grid-item {
+    margin-bottom: 1%;
+}
+
 /* mobile devices */
 @media (max-width: 768px) {
     aside div {

themes/red/assets/js/gallery.js

@@ -2,7 +2,7 @@ imagesLoaded(document.querySelector('.grid'), function(instance) {
     new Masonry('.grid', {
         itemSelector: '.grid-item',
         columnWidth: '.grid-sizer',
-        fitWidth: true,
+        percentPosition: true,
-        gutter: 10,
+        gutter: '.gutter-sizer'
     });
 });

themes/red/layouts/_default/art-detail.html

@@ -68,7 +68,7 @@
             <tr>
                 <th>Mastodon URL</th>
                 <td>
-                    <a href="{{ . }}">{{ . }}</a>
+                    <a href="{{ . }}">Mastodon Post</a>
                 </td>
             </tr>
         {{ end }}
@@ -77,7 +77,7 @@
             <tr>
                 <th>Newgrounds URL</th>
                 <td>
-                    <a href="{{ . }}">{{ . }}</a>
+                    <a href="{{ . }}">Newgrounds Post</a>
                 </td>
             </tr>
         {{ end }}
@@ -87,7 +87,7 @@
             <tr>
                 <th>Pixiv URL</th>
                 <td>
-                    <a href="{{ . }}">{{ . }}</a>
+                    <a href="{{ . }}">Pixiv Post</a>
                 </td>
             </tr>
         {{ end }}

themes/red/layouts/_default/gallery.html

@@ -7,6 +7,7 @@
 
     <div class="grid">
     <div class="grid-sizer"></div>
+    <div class="gutter-sizer"></div>
 
     {{ range .Data.Pages.ByDate.Reverse }}
         {{ partial "render-art" . }}

themes/red/layouts/partials/art-gallery.html

@@ -2,6 +2,7 @@
 
 <div class="grid">
     <div class="grid-sizer"></div>
+    <div class="gutter-sizer"></div>
 
     {{ range $paginator.Pages }}
             {{ partial "render-art" . }}

themes/red/layouts/partials/render-art.html

@@ -44,7 +44,7 @@
                                 {{ end }}
                         {{ end }}
 
-                        <img width="{{ .Width }}" height="{{ .Height }}" alt="{{ $title }}" title="{{ $title }}" src="{{ .RelPermalink }}">
+                        <img style="width: 100%; height: auto;" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $title }}" title="{{ $title }}" src="{{ .RelPermalink }}">
                 {{ else }}
                         <p>Thumbnail not found!</p>
                 {{ end }}