WIP: Add initial meme generator! #748

Merged
skhameneh merged 16 commits from featureTesting into master 2018-11-30 03:54:55 +01:00
6 changed files with 29 additions and 9 deletions
Showing only changes of commit 7b53cf48ec - Show all commits

View file

@ -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'),

View file

@ -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',

View file

@ -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: {

View file

@ -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',

View 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',
},
};

View file

@ -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>