1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-13 16:45:14 +01:00
blog/_src/_assets/styl/grid.styl

79 lines
1.3 KiB
Stylus
Raw Normal View History

2014-07-12 02:00:18 +02:00
//
// kremalicious3
// --------------
// Grid
//
// Prevents padding to be added
*
2014-07-12 21:22:47 +02:00
box-sizing: border-box
2014-07-12 02:00:18 +02:00
.container
2015-08-09 21:50:06 +02:00
padding-left: 7%
padding-right: 7%
2014-07-12 21:22:47 +02:00
width: 100%
2014-07-12 02:00:18 +02:00
2015-08-09 21:50:06 +02:00
@media $breakpoint2
padding-left: 15%
padding-right: 15%
2014-07-12 02:00:18 +02:00
2015-08-09 21:50:06 +02:00
.grid
margin: auto
padding: 0
display: flex
flex-wrap: wrap
2014-07-12 02:00:18 +02:00
2015-08-09 21:50:06 +02:00
@media $breakpoint2
max-width: 35em
2014-07-12 02:00:18 +02:00
2015-08-09 21:50:06 +02:00
> .col1,
> .col2,
> .col3,
> .col4,
> .col5,
> .col6
flex: 1
flex: 0 0 100%
padding: 1em 0 0 1em
2014-07-12 02:00:18 +02:00
2015-08-09 21:50:06 +02:00
> .col6
2014-07-12 21:22:47 +02:00
padding-left: 0
2014-07-12 02:00:18 +02:00
2015-08-09 21:50:06 +02:00
> .col1-xs,
> .col2-xs,
> .col3-xs,
> .col4-xs,
> .col5-xs,
> .col6-xs
flex: 1
padding: 1em 0 0 1em
2014-07-12 02:00:18 +02:00
2015-08-09 21:50:06 +02:00
> .col1-xs
flex: 0 0 16.666666667%
> .col2-xs
flex: 0 0 33.333333333%
> .col3-xs
flex: 0 0 50%
> .col4-xs
flex: 0 0 66.666666666%
> .col5-xs
flex: 0 0 83.333333333%
> .col6-xs
flex: 0 0 100%
padding-left: 0
2014-07-12 02:00:18 +02:00
2015-08-09 21:50:06 +02:00
@media $breakpoint2
> .col1
flex: 0 0 16.5%
> .col2
flex: 0 0 33%
> .col3
flex: 0 0 50%
> .col4
flex: 0 0 66%
> .col5
flex: 0 0 82.5%
> .col6
flex: 0 0 100%