f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-26 00:52:48 +00:00
Code Wiki Activity

Add Blended Watercolor Background Image

Browse Source 
Add a snippet to create a nice watercolor background for use behind other images.  Includes injection syntax which includes absolute position, hue-rotate, mix-blend-mode, and opacity.

Chooses an image randomly from an Imgur album.  All images created by me (and open to creating more/making adjustments).

v3 only.

Could be improved by cycling through images rather than choosing randomly.
This commit is contained in:
Gazook89
2021-08-10 20:56:28 -05:00
parent 21058331cf
commit 51116efba7
2 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/homebrew/editor/snippetbar/snippets/snippets.js
View File

@@ -7,6 +7,7 @@ const ClassFeatureGen = require('./classfeature.gen.js');
const CoverPageGen = require('./coverpage.gen.js');
const TableOfContentsGen = require('./tableOfContents.gen.js');
const dedent = require('dedent-tabs').default;
const watercolorGen = require('./watercolor.gen.js');
module.exports = [
@@ -131,8 +132,12 @@ module.exports = [
{
name : 'Class Table Decoration',
icon : 'fas fa-award',
gen : dedent`\n
![ClassTable Decoration](https://i.imgur.com/xYVVT7e.png) {position:absolute,top:0px,right:0px,width:380px}`
gen : `\n![ClassTable Decoration](https://i.imgur.com/xYVVT7e.png) {position:absolute,top:0px,right:0px,width:380px}`
},
{
name : 'Watercolor Splatter',
icon : 'fas fa-fill-drip',
gen : watercolorGen,
},
]
},

20
client/homebrew/editor/snippetbar/snippets/watercolor.gen.js Normal file
View File

@@ -0,0 +1,20 @@
const _ = require('lodash');
const watercolorBG = [
'https://i.imgur.com/UPUX4zG.png',
'https://i.imgur.com/Q6Uquv9.png',
'https://i.imgur.com/UOtaJpJ.png',
'https://i.imgur.com/Wy2DVk3.png',
'https://i.imgur.com/IempVlg.png',
'https://i.imgur.com/iJ1ddgd.png',
'https://i.imgur.com/qg4an04.png',
'https://i.imgur.com/ogGTcCh.png',
'https://i.imgur.com/itBD19A.png',
'https://i.imgur.com/tbbycAt.png',
'https://i.imgur.com/1SVWpGR.png',
'https://i.imgur.com/wC1zkuJ.png'
];
module.exports = ()=>{
return `\n![watercolor bg](${_.sample(watercolorBG)}) {watercolor,position:absolute,top:0px,left:0px,width:240px,filter:hue-rotate(0deg),mix-blend-mode:multiply,opacity:80%}\n`
};