diff --git a/apps/demo/emails/newsletters/codepen-challengers.tsx b/apps/demo/emails/newsletters/codepen-challengers.tsx index d72e903041..af35271c89 100644 --- a/apps/demo/emails/newsletters/codepen-challengers.tsx +++ b/apps/demo/emails/newsletters/codepen-challengers.tsx @@ -11,8 +11,10 @@ import { Preview, Row, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` @@ -21,398 +23,263 @@ const baseUrl = process.env.VERCEL_URL export const CodepenChallengersEmail = () => ( - - #CodePenChallenge: Cubes -
- codepen -
- - - View this Challenge on CodePen - - - - This week: #CodePenChallenge:{' '} - Cubes - - -
- The Shape challenge continues! - - - Last week, we kicked things off with round shapes. We "rounded" up - the Pens from week one in our{' '} - #CodePenChallenge: Round collection. + + + #CodePenChallenge: Cubes +
+ codepen +
+ + + + View this Challenge on CodePen + - This week, we move on to cubes 🧊 + + This week: #CodePenChallenge:{' '} + Cubes + + +
+ The Shape challenge continues! + + + Last week, we kicked things off with round shapes. We "rounded" up + the Pens from week one in our{' '} + + #CodePenChallenge: Round + {' '} + collection. + - - Creating cubes in the browser is all about mastery of illusion. Take - control of perspective and shadows and you can make the magic of 3D - on a flat screen 🧙 - + This week, we move on to cubes 🧊 - - This week is a fun chance to work on your CSS shape-building skills, - or dig into a 3D JavaScript library like Three.js. - + + Creating cubes in the browser is all about mastery of illusion. + Take control of perspective and shadows and you can make the magic + of 3D on a flat screen 🧙 + - - This week's starter template features an ice cube emoji to help - inspire a "cool" idea for your Pen. As always, the template is just - as jumping off point. Feel free to incorporate the 🧊 in your - creation, add more elements, or freeze it out completely and start - over from scratch! - + + This week is a fun chance to work on your CSS shape-building + skills, or dig into a 3D JavaScript library like Three.js. + - - 💪 Your Challenge:{' '} - - create a Pen that includes cube shapes. - - + + This week's starter template features an ice cube emoji to help + inspire a "cool" idea for your Pen. As always, the template is + just as jumping off point. Feel free to incorporate the 🧊 in your + creation, add more elements, or freeze it out completely and start + over from scratch! + - codepen + + 💪 Your Challenge:{' '} + + create a Pen that includes cube shapes. + + -
codepen - - CodePen PRO combines a bunch of features that can help any - front-end designer or developer at any experience level. - - - +
+ codepen + + + CodePen PRO combines a bunch of features that can help any + front-end designer or developer at any experience level. + + + +
-
- - - To participate:{' '} - Create a Pen → and tag it{' '} - - codepenchallenge - {' '} - and - - {' '} - cpc-cubes - - . We'll be watching and gathering the Pens into a Collection, and - sharing on Twitter and{' '} - Instagram (Use the #CodePenChallenge tag - on Twitter and Instagram as well). - -
- - - IDEAS! - -
- 🌟 - - This week we move from 2 dimensions to three! Maybe you could - exercise your perspective in CSS - to create a 3D cube. Or, you can try out creating 3D shapes in - JavaScript, using WebGL or - building a Three.js scene. - -
- -
- 🌟 - - There's more to cubes than just six square sides. There are - variations on the cube that could be fun to play with this - week: cuboid shapes are - hexahedrons with faces that aren't always squares. And if you - want to really push the boundaries of shape, consider the 4 - dimensional tesseract! - -
- -
- 🌟 - - Here's a mind-bending idea that can combine the round shapes - from week one with this week's cube theme:{' '} - Spherical Cubes 😳 Solving - longstanding mathematical mysteries is probably outside the - scope of a CodePen challenge, but you could use front-end - tools to explore fitting spheres into cubes, or vice-versa. - -
- - - RESOURCES! - -
- 📖 - - Learn all about{' '} - How CSS Perspective Works and - how to build a 3D CSS cube from scratch in Amit Sheen's - in-depth tutorial for CSS-Tricks. Or, check out stunning - examples of WebGL cubes from Matthias Hurrle:{' '} - Just Ice and{' '} - Posing. - -
+ + To participate:{' '} + Create a Pen →{' '} + and tag it{' '} + + codepenchallenge + {' '} + and + + {' '} + cpc-cubes + + . We'll be watching and gathering the Pens into a Collection, and + sharing on{' '} + Twitter and{' '} + Instagram (Use + the #CodePenChallenge tag on Twitter and Instagram as well). + -
- 📖 - - Want to go beyond the square cube? Draw inspiration from - EntropyReversed's{' '} - Pulsating Tesseract, Josetxu's{' '} - Rainbow Cuboid Loader, or Ana - Tudor's{' '} - Pure CSS cuboid jellyfish. +
+ + + IDEAS! + +
+ 🌟 + + This week we move from 2 dimensions to three! Maybe you + could exercise your{' '} + + perspective + {' '} + in CSS to create a 3D cube. Or, you can try out creating 3D + shapes in JavaScript, using{' '} + WebGL or + building a{' '} + + Three.js scene + + . + +
+ +
+ 🌟 + + There's more to cubes than just six square sides. There are + variations on the cube that could be fun to play with this + week:{' '} + + cuboid shapes + {' '} + are hexahedrons with faces that aren't always squares. And + if you want to really push the boundaries of shape, consider + the 4 dimensional{' '} + + tesseract! + + +
+ +
+ 🌟 + + Here's a mind-bending idea that can combine the round shapes + from week one with this week's cube theme:{' '} + + Spherical Cubes + {' '} + 😳 Solving longstanding mathematical mysteries is probably + outside the scope of a CodePen challenge, but you could use + front-end tools to explore fitting spheres into cubes, or + vice-versa. + +
+ + + + RESOURCES! -
-
- 📖 - - Did that spherical cubes concept pique your interest? Explore - Ryan Mulligan's Cube Sphere, - Munir Safi's{' '} - - 3D Sphere to Cube Animation With Virtual Trackball - {' '} - and Ana Tudor's{' '} - Infinitely unpack prism for more - mindbending cube concepts that test the boundaries of how - shapes interact with each other. - -
- - -
+
+ 📖 + + Learn all about{' '} + + How CSS Perspective Works + {' '} + and how to build a 3D CSS cube from scratch in Amit Sheen's + in-depth tutorial for CSS-Tricks. Or, check out stunning + examples of WebGL cubes from Matthias Hurrle:{' '} + Just Ice{' '} + and{' '} + Posing. + +
+ +
+ 📖 + + Want to go beyond the square cube? Draw inspiration from + EntropyReversed's{' '} + + Pulsating Tesseract + + , Josetxu's{' '} + + Rainbow Cuboid Loader + + , or Ana Tudor's{' '} + + Pure CSS cuboid jellyfish + + . + +
+ +
+ 📖 + + Did that spherical cubes concept pique your interest? + Explore Ryan Mulligan's{' '} + + Cube Sphere + + , Munir Safi's{' '} + + 3D Sphere to Cube Animation With Virtual Trackball + {' '} + and Ana Tudor's{' '} + + Infinitely unpack prism + {' '} + for more mindbending cube concepts that test the boundaries + of how shapes interact with each other. + +
+ + +
-
- -
+
+ +
-
- - You can adjust your{' '} - email preferences any time, or{' '} - instantly opt out of emails of this - kind. Need help with anything? Hit up{' '} - support. - -
- - +
+ + You can adjust your{' '} + + email preferences + {' '} + any time, or{' '} + + instantly opt out + {' '} + of emails of this kind. Need help with anything? Hit up{' '} + + support + + . + +
+ + + ); export default CodepenChallengersEmail; - -const main = { - fontFamily: '"Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif', - backgroundColor: '#505050', - margin: '0', -}; - -const imgHeader = { - margin: 'auto', - maxWidth: '100%', -}; - -const imgCube = { - maxWidth: '100%', -}; - -const header = { - width: '100%', - backgroundColor: '#191919', - margin: '0 auto', - paddingBottom: '30px', - zIndex: '999', -}; - -const container = { - margin: '0 auto', - width: '648px', - maxWidth: '100%', - position: 'relative' as const, -}; - -const challengeLink = { - backgroundColor: '#505050', - textAlign: 'center' as const, - padding: '10px 0', - fontSize: '13px', - position: 'absolute' as const, - width: '648px', - maxWidth: '100%', - top: '-28px', - margin: '0 0 16px 0', -}; - -const link = { - color: '#fff', - cursor: 'pointer', -}; - -const blueLink = { - color: '#15c', - cursor: 'pointer', -}; - -const heading = { - background: '#f0d361', - padding: '30px', - color: '#191919', - fontWeight: '400', - marginBottom: '0', -}; - -const section = { - margin: '0', - background: '#fff', - padding: '0 24px', -}; - -const yellowSection = { - background: '#f5d247', - padding: '30px', - fontSize: '18px', - lineHeight: '1.5', -}; - -const text = { - fontSize: '16px', -}; - -const cubeText = { fontSize: '32px', margin: '4px 0 0 0' }; - -const yourChallenge = { - fontSize: '16px', - border: '6px solid #ebd473', - padding: '20px', - margin: '0 0 40px 0', -}; - -const sectionPro = { - marginTop: '40px', - marginBottom: '24px', - textAlign: 'center' as const, - background: '#0b112a', - color: '#fff', - padding: '35px 20px 30px 20px', - border: '6px solid #2138c6', -}; - -const imagePro = { margin: '0 auto 30px auto' }; - -const button = { - background: '#2138c6', - color: '#fff', - border: '0', - fontSize: '15px', - lineHeight: '18px', - cursor: 'pointer', - borderRadius: '4px', - padding: '12px', -}; - -const resourcesTitle = { - fontWeight: '900', - lineHeight: '1.1', - marginTop: '-40px', - fontSize: '18px', -}; - -const ideasTitle = { - fontWeight: '900', - lineHeight: '1.1', - fontSize: '18px', -}; - -const ideas = { - width: '50%', - paddingRight: '10px', -}; - -const resources = { - width: '50%', - paddingLeft: '10px', -}; - -const card = { - padding: '20px', - margin: '0 0 20px 0', - borderRadius: '10px', - fontSize: '36px', - textAlign: 'center' as const, -}; - -const yellowCard = { - ...card, - background: '#fff4c8', - border: '1px solid #f4d247', -}; - -const blueCard = { - ...card, - background: '#d9f6ff', - border: '1px solid #92bfd0', -}; - -const textCard = { - fontSize: '13px', - textAlign: 'left' as const, -}; - -const goToChallenge = { - margin: '40px 0 120px 0', - textAlign: 'center' as const, -}; - -const footerButton = { - fontSize: '26px', - color: '#15c', - background: '#222', - borderRadius: '4px', - fontWeight: 'bold', - cursor: 'pointer', - padding: '15px 30px', -}; - -const footer = { - background: '#fff', - color: '#505050', - padding: '0 24px', - marginBottom: '48px', -}; - -const footerText = { - fontSize: '13px', -}; - -const footerLink = { - textDecoration: 'underline', - color: '#505050', - cursor: 'pointer', -}; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index f0c56dcd52..76147ea168 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -84,6 +84,7 @@ export default { 'sans-serif', ], 'dropbox-sans': ['Open Sans', 'Helvetica Neue', 'Arial'], + codepen: '"Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif', }, }, } satisfies TailwindConfig;