1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-12 08:05:18 +01:00
blog/_src/assets/styl/grid.styl

79 lines
1.1 KiB
Stylus

//
// kremalicious3
// --------------
// Grid
//
// Prevents padding to be added
*
box-sizing: border-box
// 320px and up
.container
padding: 0 7%
width: 100%
.row
margin-top: $line-height-computed
margin-bottom: $line-height-computed
.col1,
.col2,
.col3,
.col4,
.col5,
.col6
width: 100%
margin-left: 0
// ensures empty columns won't collapse
min-height: 1px
// clear
.container,
.row
@extend .clearfix
@media $breakpoint2
.container
padding: 0 15%
.row
max-width: 35em
margin: ($line-height-computed*2) auto
padding-left: 0
padding-right: 0
.col1,
.col2,
.col3,
.col4,
.col5,
.col6
float: left
margin-left: 4%
.col1:first-child,
.col2:first-child,
.col3:first-child,
.col4:first-child,
.col5:first-child,
.col6,
.col3:nth-child(2n+3),
.col2:nth-child(3n+4),
.col1:nth-child(6n+7)
margin-left: 0
clear: both
.col1
width: 13%
.col2
width: 30.6%
.col3
width: 48%
.col4
width: 65%
.col5
width: 82%
.col6
width: 100%