Replaced Offsets with Push & Pulls
can't really use the original offsets for content placement. Changed to pushes and pulls instead. For small screens, the pushed and pulled content just revert back to normal columns.
This commit is contained in:
bfintal
parent
7ab682091d
commit
d24d572cec
147
stylesheets/skeleton.css
vendored
147
stylesheets/skeleton.css
vendored
@ -25,6 +25,8 @@
|
||||
.container .column,
|
||||
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
|
||||
.row { margin-bottom: 20px; }
|
||||
.container .pull,
|
||||
.container .push { position: relative; }
|
||||
|
||||
/* Nested Column Classes */
|
||||
.column.alpha, .columns.alpha { margin-left: 0; }
|
||||
@ -51,23 +53,39 @@
|
||||
|
||||
.container .one-third.column { width: 300px; }
|
||||
.container .two-thirds.column { width: 620px; }
|
||||
|
||||
/* Offsets */
|
||||
.container .offset-by-one { padding-left: 60px; }
|
||||
.container .offset-by-two { padding-left: 120px; }
|
||||
.container .offset-by-three { padding-left: 180px; }
|
||||
.container .offset-by-four { padding-left: 240px; }
|
||||
.container .offset-by-five { padding-left: 300px; }
|
||||
.container .offset-by-six { padding-left: 360px; }
|
||||
.container .offset-by-seven { padding-left: 420px; }
|
||||
.container .offset-by-eight { padding-left: 480px; }
|
||||
.container .offset-by-nine { padding-left: 540px; }
|
||||
.container .offset-by-ten { padding-left: 600px; }
|
||||
.container .offset-by-eleven { padding-left: 660px; }
|
||||
.container .offset-by-twelve { padding-left: 720px; }
|
||||
.container .offset-by-thirteen { padding-left: 780px; }
|
||||
.container .offset-by-fourteen { padding-left: 840px; }
|
||||
.container .offset-by-fifteen { padding-left: 900px; }
|
||||
|
||||
/* Pushes & Pulls */
|
||||
.container .pull.by-one { left: -50px }
|
||||
.container .pull.by-two { left: -110px; }
|
||||
.container .pull.by-three { left: -170px; }
|
||||
.container .pull.by-four { left: -230px; }
|
||||
.container .pull.by-five { left: -290px; }
|
||||
.container .pull.by-six { left: -350px; }
|
||||
.container .pull.by-seven { left: -410px; }
|
||||
.container .pull.by-eight { left: -470px; }
|
||||
.container .pull.by-nine { left: -530px; }
|
||||
.container .pull.by-ten { left: -590px; }
|
||||
.container .pull.by-eleven { left: -650px; }
|
||||
.container .pull.by-twelve { left: -710px; }
|
||||
.container .pull.by-thirteen { left: -770px; }
|
||||
.container .pull.by-fourteen { left: -830px; }
|
||||
.container .pull.by-fifteen { left: -890px; }
|
||||
|
||||
.container .push.by-one { left: 50px }
|
||||
.container .push.by-two { left: 110px; }
|
||||
.container .push.by-three { left: 170px; }
|
||||
.container .push.by-four { left: 230px; }
|
||||
.container .push.by-five { left: 290px; }
|
||||
.container .push.by-six { left: 350px; }
|
||||
.container .push.by-seven { left: 410px; }
|
||||
.container .push.by-eight { left: 470px; }
|
||||
.container .push.by-nine { left: 530px; }
|
||||
.container .push.by-ten { left: 590px; }
|
||||
.container .push.by-eleven { left: 650px; }
|
||||
.container .push.by-twelve { left: 710px; }
|
||||
.container .push.by-thirteen { left: 770px; }
|
||||
.container .push.by-fourteen { left: 830px; }
|
||||
.container .push.by-fifteen { left: 890px; }
|
||||
|
||||
|
||||
|
||||
@ -105,22 +123,38 @@
|
||||
.container .one-third.column { width: 236px; }
|
||||
.container .two-thirds.column { width: 492px; }
|
||||
|
||||
/* Offsets */
|
||||
.container .offset-by-one { padding-left: 48px; }
|
||||
.container .offset-by-two { padding-left: 96px; }
|
||||
.container .offset-by-three { padding-left: 144px; }
|
||||
.container .offset-by-four { padding-left: 192px; }
|
||||
.container .offset-by-five { padding-left: 240px; }
|
||||
.container .offset-by-six { padding-left: 288px; }
|
||||
.container .offset-by-seven { padding-left: 336px; }
|
||||
.container .offset-by-eight { padding-left: 384px; }
|
||||
.container .offset-by-nine { padding-left: 432px; }
|
||||
.container .offset-by-ten { padding-left: 480px; }
|
||||
.container .offset-by-eleven { padding-left: 528px; }
|
||||
.container .offset-by-twelve { padding-left: 576px; }
|
||||
.container .offset-by-thirteen { padding-left: 624px; }
|
||||
.container .offset-by-fourteen { padding-left: 672px; }
|
||||
.container .offset-by-fifteen { padding-left: 720px; }
|
||||
/* Pushes & Pulls */
|
||||
.container .pull.by-one { left: -38px }
|
||||
.container .pull.by-two { left: -86px; }
|
||||
.container .pull.by-three { left: -134px; }
|
||||
.container .pull.by-four { left: -182px; }
|
||||
.container .pull.by-five { left: -230px; }
|
||||
.container .pull.by-six { left: -278px; }
|
||||
.container .pull.by-seven { left: -326px; }
|
||||
.container .pull.by-eight { left: -374px; }
|
||||
.container .pull.by-nine { left: -422px; }
|
||||
.container .pull.by-ten { left: -470px; }
|
||||
.container .pull.by-eleven { left: -518px; }
|
||||
.container .pull.by-twelve { left: -566px; }
|
||||
.container .pull.by-thirteen { left: -614px; }
|
||||
.container .pull.by-fourteen { left: -662px; }
|
||||
.container .pull.by-fifteen { left: -710px; }
|
||||
|
||||
.container .push.by-one { left: 38px }
|
||||
.container .push.by-two { left: 86px; }
|
||||
.container .push.by-three { left: 134px; }
|
||||
.container .push.by-four { left: 182px; }
|
||||
.container .push.by-five { left: 230px; }
|
||||
.container .push.by-six { left: 278px; }
|
||||
.container .push.by-seven { left: 326px; }
|
||||
.container .push.by-eight { left: 374px; }
|
||||
.container .push.by-nine { left: 422px; }
|
||||
.container .push.by-ten { left: 470px; }
|
||||
.container .push.by-eleven { left: 518px; }
|
||||
.container .push.by-twelve { left: 566px; }
|
||||
.container .push.by-thirteen { left: 614px; }
|
||||
.container .push.by-fourteen { left: 662px; }
|
||||
.container .push.by-fifteen { left: 710px; }
|
||||
}
|
||||
|
||||
|
||||
@ -154,22 +188,37 @@
|
||||
.container .one-third.column,
|
||||
.container .two-thirds.column { width: 300px; }
|
||||
|
||||
/* Offsets */
|
||||
.container .offset-by-one,
|
||||
.container .offset-by-two,
|
||||
.container .offset-by-three,
|
||||
.container .offset-by-four,
|
||||
.container .offset-by-five,
|
||||
.container .offset-by-six,
|
||||
.container .offset-by-seven,
|
||||
.container .offset-by-eight,
|
||||
.container .offset-by-nine,
|
||||
.container .offset-by-ten,
|
||||
.container .offset-by-eleven,
|
||||
.container .offset-by-twelve,
|
||||
.container .offset-by-thirteen,
|
||||
.container .offset-by-fourteen,
|
||||
.container .offset-by-fifteen { padding-left: 0; }
|
||||
/* Pushes & Pulls */
|
||||
.container .pull.by-one,
|
||||
.container .pull.by-two,
|
||||
.container .pull.by-three,
|
||||
.container .pull.by-four,
|
||||
.container .pull.by-five,
|
||||
.container .pull.by-six,
|
||||
.container .pull.by-seven,
|
||||
.container .pull.by-eight,
|
||||
.container .pull.by-nine,
|
||||
.container .pull.by-ten,
|
||||
.container .pull.by-eleven,
|
||||
.container .pull.by-twelve,
|
||||
.container .pull.by-thirteen,
|
||||
.container .pull.by-fourteen,
|
||||
.container .pull.by-fifteen,
|
||||
.container .push.by-one,
|
||||
.container .push.by-two,
|
||||
.container .push.by-three,
|
||||
.container .push.by-four,
|
||||
.container .push.by-five,
|
||||
.container .push.by-six,
|
||||
.container .push.by-seven,
|
||||
.container .push.by-eight,
|
||||
.container .push.by-nine,
|
||||
.container .push.by-ten,
|
||||
.container .push.by-eleven,
|
||||
.container .push.by-twelve,
|
||||
.container .push.by-thirteen,
|
||||
.container .push.by-fourteen,
|
||||
.container .push.by-fifteen { left: 0; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user