WIP: Add initial meme generator! #748
6 changed files with 29 additions and 9 deletions
|
@ -88,9 +88,10 @@ export default class EditableFontface extends Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const PRESETS = {
|
export const PRESETS = {
|
||||||
'Inferno': require('../FontFaces/Inferno'),
|
|
||||||
'Green Machine': require('../FontFaces/GreenMachine'),
|
'Green Machine': require('../FontFaces/GreenMachine'),
|
||||||
|
'Inferno': require('../FontFaces/Inferno'),
|
||||||
'Lazer': require('../FontFaces/Lazer'),
|
'Lazer': require('../FontFaces/Lazer'),
|
||||||
|
'Neon': require('../FontFaces/Neon'),
|
||||||
'Old Blue': require('../FontFaces/OldBlue'),
|
'Old Blue': require('../FontFaces/OldBlue'),
|
||||||
'Retro Rainbow': require('../FontFaces/RetroRainbow'),
|
'Retro Rainbow': require('../FontFaces/RetroRainbow'),
|
||||||
'The Special': require('../FontFaces/TheSpecial'),
|
'The Special': require('../FontFaces/TheSpecial'),
|
||||||
|
|
|
@ -1,5 +1,10 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
container: {},
|
container: {},
|
||||||
|
editorStyle: {
|
||||||
|
fontFamily: 'courier, Courier New',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: '2em',
|
||||||
|
},
|
||||||
text: {
|
text: {
|
||||||
color: '#00b700',
|
color: '#00b700',
|
||||||
fontFamily: 'courier, Courier New',
|
fontFamily: 'courier, Courier New',
|
||||||
|
|
|
@ -4,15 +4,12 @@ module.exports = {
|
||||||
fontFamily: 'helvetica, Helvetica Nue',
|
fontFamily: 'helvetica, Helvetica Nue',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
fontSize: '2em',
|
fontSize: '2em',
|
||||||
padding: '4rem 2rem 1rem 2rem',
|
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
fontFamily: 'helvetica, Helvetica Nue',
|
fontFamily: 'helvetica, Helvetica Nue',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
fontSize: '2em',
|
fontSize: '2em',
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
paddingBottom: '.25em',
|
|
||||||
padding: '4rem 2rem 1rem 2rem',
|
|
||||||
textShadow: '0px 0px 3px #c20000, 0px 0px 3px #e0f2ff, 0px 0px 5px #532761, 0px 0px 20px #670606, 0 0 10px rgba(0, 0, 0, .8), 0 0 10px #fefcc9, 5px -5px 15px #feec85, -10px -10px 20px #ffae34, 10px -20px 25px #ec760c, -10px -30px 30px #cd4606, 0 -40px 35px #973716, 5px -45px 40px #451b0e, 0 -2px 15px rgba(255, 200, 160, .5)',
|
textShadow: '0px 0px 3px #c20000, 0px 0px 3px #e0f2ff, 0px 0px 5px #532761, 0px 0px 20px #670606, 0 0 10px rgba(0, 0, 0, .8), 0 0 10px #fefcc9, 5px -5px 15px #feec85, -10px -10px 20px #ffae34, 10px -20px 25px #ec760c, -10px -30px 30px #cd4606, 0 -40px 35px #973716, 5px -45px 40px #451b0e, 0 -2px 15px rgba(255, 200, 160, .5)',
|
||||||
},
|
},
|
||||||
previewOverrides: {
|
previewOverrides: {
|
||||||
|
|
|
@ -4,7 +4,6 @@ module.exports = {
|
||||||
fontFamily: 'helvetica, Helvetica Nue',
|
fontFamily: 'helvetica, Helvetica Nue',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
fontSize: '2em',
|
fontSize: '2em',
|
||||||
padding: '.05rem',
|
|
||||||
textTransform: 'uppercase',
|
textTransform: 'uppercase',
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
},
|
},
|
||||||
|
@ -15,10 +14,7 @@ module.exports = {
|
||||||
backgroundClip: 'text',
|
backgroundClip: 'text',
|
||||||
fontSize: '2em',
|
fontSize: '2em',
|
||||||
color: 'transparent',
|
color: 'transparent',
|
||||||
paddingBottom: '.25em',
|
|
||||||
paddingTop: '.1em',
|
|
||||||
filter: 'drop-shadow(0 0 .05rem black)',
|
filter: 'drop-shadow(0 0 .05rem black)',
|
||||||
padding: '.05rem',
|
|
||||||
textTransform: 'uppercase',
|
textTransform: 'uppercase',
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
WebkitBackgroundClip: 'text',
|
WebkitBackgroundClip: 'text',
|
||||||
|
|
21
client/src/components/Creatify/FontFaces/Neon.js
Normal file
21
client/src/components/Creatify/FontFaces/Neon.js
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
module.exports = {
|
||||||
|
container: {},
|
||||||
|
editorStyle: {
|
||||||
|
fontFamily: 'Helvetica, Arial',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: '2em',
|
||||||
|
letterSpacing: '.1em',
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
color: '#fff',
|
||||||
|
fontFamily: 'Helvetica, Arial',
|
||||||
|
fontSize: '2rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
letterSpacing: '.1em',
|
||||||
|
textShadow: '0 0 0.05em #fff, 0 0 0.1em #fff, 0 0 0.2em #fff, 0 0 .2em #ff1de2, 0 0 .4em #ff26e3, 0 0 .5em #ff00de, 0 0 1em #ff61eb, 0 0 1.5em #ff7cee',
|
||||||
|
},
|
||||||
|
previewOverrides: {
|
||||||
|
fontSize: '1.8em',
|
||||||
|
padding: '0 1rem 0 1rem',
|
||||||
|
},
|
||||||
|
};
|
|
@ -50,7 +50,7 @@ export default class RichDraggable extends Component {
|
||||||
return (
|
return (
|
||||||
<Draggable {...props} bounds={bounds} offsetParent={body} cancel=".no-drag">
|
<Draggable {...props} bounds={bounds} offsetParent={body} cancel=".no-drag">
|
||||||
<div ref={me.contents} style={{ padding: '15px', position: 'absolute', border: '4px dashed #ddd', cursor: 'move' }} className="creatifyDecor">
|
<div ref={me.contents} style={{ padding: '15px', position: 'absolute', border: '4px dashed #ddd', cursor: 'move' }} className="creatifyDecor">
|
||||||
<div className="no-drag" style={{ overflow: 'hidden', position: 'relative', cursor: 'auto' }}>
|
<div className="no-drag" style={{ position: 'relative', cursor: 'auto' }}>
|
||||||
{props.children}
|
{props.children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue