mirror of
https://github.com/wassname/side-by-side.git
synced 2026-09-22 13:40:40 +08:00
Vit Brunner
edd50af4a9
The goals were to make the grid as spacious as possible, while not compromising many-column layouts and small screen sizes. Works for an arbitrary number of columns and adjusts horizontal spacing according to the number of columns and the viewport size.
32 lines
546 B
Sass
32 lines
546 B
Sass
body
|
|
font-family: "Titillium Web", sans-serif
|
|
|
|
.version
|
|
display: inline-block
|
|
letter-spacing: normal
|
|
word-spacing: normal
|
|
|
|
.section
|
|
color: #FFF
|
|
background-color: #999
|
|
padding: 0px 5px
|
|
border-radius: 5px
|
|
position: absolute
|
|
line-height: 20px
|
|
left: -10px
|
|
top: -5px
|
|
|
|
.version-inner
|
|
background-color: #F6F6F6
|
|
position: relative
|
|
padding: 10px 10px 5px 10px
|
|
|
|
$max_columns: 6
|
|
@for $i from 1 through $max_columns
|
|
.cols-#{$i}
|
|
.version
|
|
width: percentage(1 / $i)
|
|
|
|
.version-outer
|
|
padding: 5px percentage(1 / (5 * $i))
|