Update featured art, grid css fixes

content/art/_index.md

@@ -7,15 +7,15 @@ commissions: true
 aliases:
 - /gallery
 featured:
-- filename: bringontheketchup.webp
-  date: 2023-11-26
-  title: Bring on the ketchup!
-- filename: newsakura.webp
-  date: 2023-09-24
-  title: new sakura
-- filename: mel.webp
-  date: 2023-07-02
-  title: burger time
+- filename: raubahn.webp
+  date: 2024-01-26
+  title: Bull of Ala Mhigo
+- filename: electrical.webp
+  date: 2024-01-26
+  title: Electrical
+- filename: moonlight.webp
+  date: 2023-11-29
+  title: Moonlight
 years:
 - 2024
 - 2023

data/art-config.json

@@ -1,9 +1,9 @@
 {
     "commissions": true,
     "featured": [
-        "bringontheketchup",
-        "newsakura",
-        "mel"
+        "raubahn",
+        "electrical",
+        "moonlight"
     ],
     "new-banner": ""
 }

data/recent-changes.json

@@ -1,5 +1,6 @@
 {
     "changes": [
+        "2024-01-27: Added new artwork!",
         "2023-09-24: Added new Sakura artwork, changed profile pic.",
         "2023-09-21: Added some more art to the gallery!",
         "2023-07-02: Added recent Art Fight attacks, and Guest Art pages.",

themes/red/assets/css/site.css

@@ -34,7 +34,8 @@
     }
 
     .grid-sizer, .grid-item {
-        width: 32%;
+        /* Almost pixel perfect! */
+        width: calc(33.33% - 7.5px);
     }
 
     .page-pic {
@@ -55,11 +56,7 @@
 }
 
 .gutter-sizer {
-    width: 1%;
-}
-
-.grid-sizer, .grid-item {
-    margin-bottom: 1%;
+    width: 10px;
 }
 
 /* mobile devices */
@@ -467,6 +464,7 @@ pre {
     display: flex;
     flex-flow: row;
     gap: 10px;
+    margin-bottom: 10px;
 }
 
 .art-button {

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',
-        percentPosition: true,
+        //percentPosition: true,
         gutter: '.gutter-sizer'
     });
 });
@@ -11,7 +11,7 @@ imagesLoaded(document.querySelector('.second-grid'), function(instance) {
     new Masonry('.second-grid', {
         itemSelector: '.grid-item',
         columnWidth: '.grid-sizer',
-        percentPosition: true,
+        //percentPosition: true,
         gutter: '.gutter-sizer'
     });
 });