@@ -39,6 +39,7 @@ const Container = styled.div`
3939 display: flex;
4040 flex-direction: row;
4141 height: 255px;
42+ flex: 1;
4243
4344 ${ media . tablet `
4445 margin-top: 1rem;
@@ -67,17 +68,32 @@ const Pane = styled(MaxWidth)`
6768const Flex = styled . div `
6869 display: flex;
6970 flex-direction: row;
71+ flex-wrap: wrap;
7072
7173 ${ media . phone `
7274 flex-direction: column;
7375 ` }
7476` ;
7577
78+ const Intro = styled ( Column ) `
79+ flex: 1;
80+
81+ ${ media . phone `
82+ order: -1;
83+ ` }
84+ ` ;
85+
7686const Icons = styled . div `
7787 display: flex;
7888 justify-content: space-around;
7989 margin-top: 1rem;
8090 margin-bottom: 4rem;
91+ flex: 1;
92+ min-width: 100%;
93+
94+ ${ media . phone `
95+ margin: 2rem 0;
96+ ` }
8197` ;
8298
8399const IconContainer = styled . div `
@@ -208,67 +224,66 @@ export default class Frameworks extends React.Component {
208224
209225 return (
210226 < Pane width = { 1280 } >
211- < Icons >
212- { templates . map ( ( { Icon } , i ) => (
213- < IconContainer
214- key = { i }
215- selected = { templates [ i ] === template }
216- template = { templates [ i ] }
217- onClick = { ( ) => {
218- this . setTemplate ( templates [ i ] ) ;
219- } }
220- >
221- < Icon width = { 80 } height = { 80 } />
222- </ IconContainer >
223- ) ) }
224- </ Icons >
225-
226227 < Flex >
227- < Column style = { { marginRight : '2rem' } } flex = { 4 } >
228+ < Icons >
229+ { templates . map ( ( { Icon } , i ) => (
230+ < IconContainer
231+ key = { i }
232+ selected = { templates [ i ] === template }
233+ template = { templates [ i ] }
234+ onClick = { ( ) => {
235+ this . setTemplate ( templates [ i ] ) ;
236+ } }
237+ >
238+ < Icon width = { 80 } height = { 80 } />
239+ </ IconContainer >
240+ ) ) }
241+ </ Icons >
242+
243+ < Intro style = { { marginRight : '2rem' } } >
228244 < Heading3 > Tailored for web applications</ Heading3 >
229245 < p >
230246 We know how overwhelming JavaScript development can be. With
231247 CodeSandbox we specifically focus on web application development
232248 to make the experience as smooth as possible. Just open your
233249 browser and start coding.
234250 </ p >
235- </ Column >
236- < Column flex = { 4 } >
237- < Container color = { template . color } >
238- < RollingText
239- style = { {
240- display : 'flex' ,
241- height : '100%' ,
242- alignItems : 'center' ,
243- } }
244- updateCheck = { template }
245- >
246- < TemplateName color = { template . color } >
247- < template . Icon width = { 96 } height = { 96 } />
248- < h4 > { template . niceName } </ h4 >
249- </ TemplateName >
250- </ RollingText >
251- < Padding style = { { width : '100%' } } top = { 1 } >
252- < HeaderTitle > Supported Loaders</ HeaderTitle >
253- < TemplateIcons color = { template . color } >
254- { TEMPLATE_SUPPORT [ template . name ] . loaders . map ( ( data , i ) => (
255- < FileType
256- key = { template . name + data . title }
257- iconSrc = { data . svg }
258- title = { data . title }
259- extension = { data . extension }
260- i = { i }
261- />
262- ) ) }
263- </ TemplateIcons >
264-
265- < HeaderTitle > CSS Scoping Support</ HeaderTitle >
266- < CSSTypes >
267- { TEMPLATE_SUPPORT [ template . name ] . css . join ( ', ' ) }
268- </ CSSTypes >
269- </ Padding >
270- </ Container >
271- </ Column >
251+ </ Intro >
252+
253+ < Container color = { template . color } >
254+ < RollingText
255+ style = { {
256+ display : 'flex' ,
257+ height : '100%' ,
258+ alignItems : 'center' ,
259+ } }
260+ updateCheck = { template }
261+ >
262+ < TemplateName color = { template . color } >
263+ < template . Icon width = { 96 } height = { 96 } />
264+ < h4 > { template . niceName } </ h4 >
265+ </ TemplateName >
266+ </ RollingText >
267+ < Padding style = { { width : '100%' } } top = { 1 } >
268+ < HeaderTitle > Supported Loaders</ HeaderTitle >
269+ < TemplateIcons color = { template . color } >
270+ { TEMPLATE_SUPPORT [ template . name ] . loaders . map ( ( data , i ) => (
271+ < FileType
272+ key = { template . name + data . title }
273+ iconSrc = { data . svg }
274+ title = { data . title }
275+ extension = { data . extension }
276+ i = { i }
277+ />
278+ ) ) }
279+ </ TemplateIcons >
280+
281+ < HeaderTitle > CSS Scoping Support</ HeaderTitle >
282+ < CSSTypes >
283+ { TEMPLATE_SUPPORT [ template . name ] . css . join ( ', ' ) }
284+ </ CSSTypes >
285+ </ Padding >
286+ </ Container >
272287 </ Flex >
273288
274289 < Centered horizontal >
0 commit comments