- commit
- 8b67c11e5b6c7496966826ba09c907d6dd3d2c1e
- parent
- c981af7f43a2a8f1cf5ea2a0e08302ab5196624d
- Author
- leaf corcoran <leafot@gmail.com>
- Date
- 2013-08-01 04:40
put filler text in examples to make scrolling more apparent
Diffstat
| M | site/example.scss | 16 | ++++++++++++++++ |
| M | site/examples/1.html | 28 | ++++++++++++++++++++++++++-- |
| M | site/examples/2.html | 20 | +++++++++++++++++--- |
| M | site/examples/3.html | 17 | ++++++++++++++++- |
| M | site/examples/4.html | 55 | ++++++++++++++++++++++++++++++++++++++++++++----------- |
5 files changed, 119 insertions, 17 deletions
diff --git a/site/example.scss b/site/example.scss
@@ -43,6 +43,9 @@ h1 {
43 43 border: 1px solid red;
44 44 float: left;
45 45
-1 46 overflow: hidden;
-1 47 font-family: sans-serif;
-1 48
46 49 &.alt {
47 50 height: floor($viewport_height * (2/3));
48 51 }
@@ -51,8 +54,13 @@ h1 {
51 54 height: $viewport_height * 2;
52 55 }
53 56
-1 57 &.medium {
-1 58 height: $viewport_height * 1.5;
-1 59 }
-1 60
54 61 &.flat {
55 62 border: 0;
-1 63 height: auto;
56 64 }
57 65 }
58 66
@@ -76,6 +84,8 @@ h1 {
76 84 font-size: 16px;
77 85 margin: 10px;
78 86
-1 87 overflow: hidden;
-1 88
79 89 &.sticky {
80 90 border: 1px solid red;
81 91 }
@@ -92,6 +102,8 @@ h1 {
92 102 border: 1px solid blue;
93 103 height: $viewport_height * 2;
94 104
-1 105 overflow: hidden;
-1 106
95 107 &.short {
96 108 height: floor($viewport_height * (2/3));
97 109 }
@@ -111,3 +123,7 @@ h1 {
111 123 padding-top: 10px;
112 124 min-height: floor($viewport_height * (2/3));
113 125 }
-1 126
-1 127 .sub {
-1 128 color: #999;
-1 129 }
diff --git a/site/examples/1.html b/site/examples/1.html
@@ -2,11 +2,35 @@ 2 2 <h1>My Site</h1> 3 3 <div class="content" data-sticky_parent> 4 4 <div class="sidebar" data-sticky_column>5 -1 Welcome to my sidebar-1 5 This is a sticky column 6 6 </div> 7 7 8 8 <div class="main" data-sticky_column>9 -1 This is the main column.-1 9 This is the main column -1 10 <p class="sub"> -1 11 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id -1 12 leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam -1 13 dignissim, augue at consectetur pellentesque, metus ipsum interdum -1 14 sapien, quis ornare quam enim vel ipsum. -1 15 </p> -1 16 -1 17 <p class="sub"> -1 18 In congue nunc vitae magna -1 19 tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, -1 20 at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales -1 21 venenatis. Curabitur nec est condimentum, blandit tellus nec, semper -1 22 arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien -1 23 nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut -1 24 semper nisl. -1 25 </span> -1 26 -1 27 <p class="sub"> -1 28 Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed -1 29 tempus justo nibh sed massa. Integer vestibulum non ante ornare eleifend. In -1 30 vel mollis dolor. -1 31 </p> -1 32 -1 33 10 34 </div> 11 35 </div> 12 36 <div class="footer">
diff --git a/site/examples/2.html b/site/examples/2.html
@@ -4,16 +4,30 @@ 4 4 <div class="content double" data-sticky_parent> 5 5 6 6 <div class="sidebar alt" data-sticky_column>7 -1 Welcome to my sidebar-1 7 This is a sticky column 8 8 </div> 9 9 10 10 <div class="sidebar flat">11 -1 <div class="inner static">One</div>12 -1 <div class="inner" data-sticky_column>two</div>-1 11 <div class="inner static">Doesn't stick</div> -1 12 <div class="inner" data-sticky_column>Sticks</div> 13 13 </div> 14 14 15 15 <div class="main" data-sticky_column> 16 16 This is the main column -1 17 <p class="sub"> -1 18 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id -1 19 leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam -1 20 dignissim, augue at consectetur pellentesque, metus ipsum interdum -1 21 sapien, quis ornare quam enim vel ipsum. -1 22 </p> -1 23 -1 24 <p class="sub"> -1 25 In congue nunc vitae magna -1 26 tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, -1 27 at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales -1 28 venenatis. -1 29 </span> -1 30 17 31 </div> 18 32 </div> 19 33
diff --git a/site/examples/3.html b/site/examples/3.html
@@ -3,10 +3,25 @@ 3 3 <div class="content" data-sticky_parent> 4 4 <div class="sidebar tall" data-sticky_column> 5 5 Welcome to my sidebar -1 6 <p class="sub"> -1 7 In congue nunc vitae magna -1 8 tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, -1 9 at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales -1 10 venenatis. Curabitur nec est condimentum, blandit tellus nec, semper -1 11 arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien -1 12 nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut -1 13 semper nisl. -1 14 </span> 6 15 </div> 7 16 8 17 <div class="main short" data-sticky_column>9 -1 This is the main column.-1 18 This is the main column -1 19 <p class="sub"> -1 20 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id -1 21 leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam -1 22 dignissim, augue at consectetur pellentesque, metus ipsum interdum -1 23 sapien, quis ornare quam enim vel ipsum. -1 24 </p> 10 25 </div> 11 26 </div> 12 27 <div class="footer">
diff --git a/site/examples/4.html b/site/examples/4.html
@@ -1,21 +1,54 @@ 1 1 2 2 <h1>My Other Site</h1> 3 3 <div class="content" data-sticky_parent>4 -1 <div class="sidebar tall" data-sticky_column>5 -1 <ul>6 -1 <li>This sidebar is quite long</li>7 -1 <li>This sidebar is quite long</li>8 -1 <li>This sidebar is quite long</li>9 -1 <li>This sidebar is quite long</li>10 -1 <li>This sidebar is quite long</li>11 -1 <li>This sidebar is quite long</li>12 -1 <li>This sidebar is quite long</li>13 -1 <li>This sidebar is quite long</li>-1 4 <div class="sidebar medium" data-sticky_column> -1 5 Very tall sidebar -1 6 <ul class="sub"> -1 7 <li>backorder</li> -1 8 <li>lozenge</li> -1 9 <li>shipper</li> -1 10 <li>roach</li> -1 11 <li>range</li> -1 12 <li>parke</li> -1 13 <li>reliever</li> -1 14 <li>incorrectness</li> -1 15 <li>schemed</li> -1 16 <li>philosophically</li> -1 17 <li>chopped</li> -1 18 <li>loggerhead</li> -1 19 <li>hosts</li> 14 20 </ul> 15 21 </div> 16 22 17 23 <div class="main tall" data-sticky_column>18 -1 This is the main column.-1 24 This is the main column -1 25 <p class="sub"> -1 26 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id -1 27 leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam -1 28 dignissim, augue at consectetur pellentesque, metus ipsum interdum -1 29 sapien, quis ornare quam enim vel ipsum. -1 30 </p> -1 31 <p class="sub"> -1 32 In congue nunc vitae magna -1 33 tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, -1 34 at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales -1 35 venenatis. Curabitur nec est condimentum, blandit tellus nec, semper -1 36 arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien -1 37 nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut -1 38 semper nisl. -1 39 </span> -1 40 -1 41 <p class="sub"> -1 42 Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed -1 43 tempus justo nibh sed massa. Integer vestibulum non ante ornare eleifend. In -1 44 vel mollis dolor. Curabitur sed est felis. Nam luctus dapibus leo, vitae porta -1 45 erat feugiat id. Nullam nulla diam, laoreet a nisl nec, porta sodales quam. -1 46 Aenean in sem vitae neque aliquam commodo vitae sit amet sem. Ut commodo -1 47 imperdiet lorem non lacinia. Suspendisse fringilla mi enim, at imperdiet sem -1 48 tincidunt et. Vivamus sit amet aliquam leo. Nullam cursus ante sed urna -1 49 bibendum blandit. Quisque fringilla metus et nisi vehicula, et ultricies ante -1 50 ultrices. -1 51 </p> 19 52 </div> 20 53 </div> 21 54 <div class="footer">