client/css: generate transparency grid via pure CSS

client/build.js

@@ -227,7 +227,6 @@ function bundleConfig() {
 
 function bundleBinaryAssets() {
     fs.copyFileSync('./img/favicon.png', './public/img/favicon.png');
-    fs.copyFileSync('./img/transparency_grid.png', './public/img/transparency_grid.png');
     console.info('Copied images');
 
     fs.copyFileSync('./fonts/open_sans.woff2', './public/fonts/open_sans.woff2')

client/css/colors.styl

@@ -61,3 +61,4 @@ $safety-sketchy = #F3D75F
 $safety-unsafe = #F3985F
 $scrollbar-thumb-color = $main-color
 $scrollbar-bg-color = $input-enabled-background-color
+$transparency-grid-square-color = #F0F0F0

client/css/core-general.styl

@@ -287,9 +287,14 @@ a .access-key
     width: 20px
     height: 20px
     &.empty
-        background-image: url('../img/transparency_grid.png')
+        background-image:
+            linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
+            linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
+        background-position: 0 0, 0 10px, 10px -10px, -10px 0px
         background-repeat: repeat
-        background-size: initial
+        background-size: 20px 20px
     img
         opacity: 0
         width: 100%

client/css/post-content-control.styl

@@ -1,6 +1,14 @@
+@import colors
+
 .post-container
     .post-content.transparency-grid img
-        background: url('../img/transparency_grid.png')
+        background-image:
+            linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
+            linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
+        background-size: 20px 20px
+        background-position: 0 0, 0 10px, 10px -10px, -10px 0px
 
     text-align: center
     .post-content

client/css/post-list-view.styl

@@ -116,10 +116,11 @@
 
 
             .thumbnail
-                background-position: 50% 30%
                 width: 100%
                 height: 100%
                 outline-offset: -3px
+                &:not(.empty)
+                    background-position: 50% 30%
 
             .thumbnail-wrapper.no-tags
                 .thumbnail