diff options
| author | Shyam Sunder <sgsunder1@gmail.com> | 2020-10-12 16:07:49 -0400 |
|---|---|---|
| committer | Shyam Sunder <sgsunder1@gmail.com> | 2020-10-12 16:07:49 -0400 |
| commit | 59452711668b9f7a7aeea3c57301b22882987c2b (patch) | |
| tree | 8fda7ae61c69ce597029aca1ba8361d63b1f9b3b | |
| parent | a302b2c4a49bf5df082dc5fff799fa9ac8bdfa9f (diff) | |
client/css: generate transparency grid via pure CSS
| -rwxr-xr-x | client/build.js | 1 | ||||
| -rw-r--r-- | client/css/colors.styl | 1 | ||||
| -rw-r--r-- | client/css/core-general.styl | 9 | ||||
| -rw-r--r-- | client/css/post-content-control.styl | 10 | ||||
| -rw-r--r-- | client/css/post-list-view.styl | 3 | ||||
| -rw-r--r-- | client/img/transparency_grid.png | bin | 100 -> 0 bytes |
6 files changed, 19 insertions, 5 deletions
diff --git a/client/build.js b/client/build.js index f201a12..d38670d 100755 --- a/client/build.js +++ b/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') diff --git a/client/css/colors.styl b/client/css/colors.styl index a3a6fb4..cf7e7ca 100644 --- a/client/css/colors.styl +++ b/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 diff --git a/client/css/core-general.styl b/client/css/core-general.styl index 70ef293..11f0a6a 100644 --- a/client/css/core-general.styl +++ b/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% diff --git a/client/css/post-content-control.styl b/client/css/post-content-control.styl index ffa27f8..37538f8 100644 --- a/client/css/post-content-control.styl +++ b/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 diff --git a/client/css/post-list-view.styl b/client/css/post-list-view.styl index 3860dcf..0272ee1 100644 --- a/client/css/post-list-view.styl +++ b/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 diff --git a/client/img/transparency_grid.png b/client/img/transparency_grid.png Binary files differdeleted file mode 100644 index 7ae8113..0000000 --- a/client/img/transparency_grid.png +++ /dev/null |
