- commit
- 5326bed4a09d829a7b78062f5b08b7d101176553
- parent
- 0dfce56df2bae272e2da97d412f81171019446f1
- Author
- leaf corcoran <leafot@gmail.com>
- Date
- 2013-08-01 08:03
design the homepage
Diffstat
| M | site/example.coffee | 1 | - |
| M | site/examples/4.html | 2 | +- |
| M | site/index.html | 74 | +++++++++++++++++++++++++++++++++++++++++++++++++++---------- |
| M | site/main.coffee | 10 | ++++++++++ |
| M | site/main.scss | 348 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- |
| M | site/site.moon | 1 | + |
| M | site/templates/index.html | 46 | +++++++++++++++++++++++++++++++++++++++++++++- |
| A | site/www/images/sticky_water.png | 0 |
8 files changed, 455 insertions, 27 deletions
diff --git a/site/example.coffee b/site/example.coffee
@@ -9,7 +9,6 @@ reset_scroll = -> 9 9 scroller.stop(true) 10 10 11 11 if $(window).scrollTop() != 012 -1 console.log "resetting"13 12 scroller.animate({ scrollTop: 0}, "fast") 14 13 15 14 scroller
diff --git a/site/examples/4.html b/site/examples/4.html
@@ -1,5 +1,5 @@ 1 12 -1 <h1>My Other Site</h1>-1 2 <h1>My Last Site</h1> 3 3 <div class="content" data-sticky_parent> 4 4 <div class="sidebar medium" data-sticky_column> 5 5 Very tall sidebar
diff --git a/site/index.html b/site/index.html
@@ -1,7 +1,31 @@ 1 12 -1 <div class="body">-1 2 <div class="nav"> -1 3 <div class="nav_social hidden"> -1 4 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://leafo.net/sticky-kit/" data-text="scssphp v$current_version - SCSS compiler for PHP" data-count="horizontal" data-via="moonscript">Tweet</a> -1 5 <a href="https://twitter.com/moonscript" class="twitter-follow-button" data-width="70px" data-show-count="false" data-show-screen-name="false">Follow @moonscript</a> -1 6 </div> -1 7 -1 8 <a href="#examples">Examples</a> -1 9 <a href="#reference">Reference</a> -1 10 <a href="" class="hidden">Download</a> -1 11 </div> -1 12 -1 13 -1 14 $markdown{[[ -1 15 Sticky-kit provides an easy way to attach elements to the page when the user -1 16 scrolls such that the element is always visible. It is written in CoffeeScript -1 17 and the source can be found on [GitHub](https://github.com/leafo/sticky-kit). -1 18 ]]} -1 19 -1 20 <div class="github_buttons"> -1 21 <iframe src="http://ghbtns.com/github-btn.html?user=leafo&repo=sticky-kit&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe> -1 22 <iframe src="http://ghbtns.com/github-btn.html?user=leafo&repo=sticky-kit&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe> -1 23 </div> 3 244 -1 <h1>Examples</h1>-1 25 <h1> -1 26 Examples -1 27 <a name="examples" class="anchor"></a> -1 28 </h1> 5 29 6 30 <h2>Basic Sticking</h2> 7 31 @@ -21,7 +45,13 @@ $("#sidebar").stick_in_parent() 21 45 ``` 22 46 ]]} 23 47 </div>24 -1 <iframe src="$root/examples/1.html" frameborder="0"></iframe>-1 48 -1 49 <div class="window_frame pink"> -1 50 <div class="window_title">Demo Browser</div> -1 51 <div class="window_inner"> -1 52 <iframe src="$root/examples/1.html" frameborder="0"></iframe> -1 53 </div> -1 54 </div> 25 55 </div> 26 56 27 57 @@ -42,7 +72,13 @@ $(".sticky_column").stick_in_parent() 42 72 ``` 43 73 ]]} 44 74 </div>45 -1 <iframe src="$root/examples/2.html" frameborder="0"></iframe>-1 75 -1 76 <div class="window_frame pink"> -1 77 <div class="window_title">Demo Browser</div> -1 78 <div class="window_inner"> -1 79 <iframe src="$root/examples/2.html" frameborder="0"></iframe> -1 80 </div> -1 81 </div> 46 82 </div> 47 83 48 84 @@ -61,8 +97,13 @@ $("#sidebar, #main_column").stick_in_parent() 61 97 ``` 62 98 ]]} 63 99 </div>64 -1 <iframe src="$root/examples/3.html" frameborder="0"></iframe>65 100 -1 101 <div class="window_frame pink"> -1 102 <div class="window_title">Demo Browser</div> -1 103 <div class="window_inner"> -1 104 <iframe src="$root/examples/3.html" frameborder="0"></iframe> -1 105 </div> -1 106 </div> 66 107 </div> 67 108 68 109 <h2>Scrollable Sticky Element</h2> @@ -82,14 +123,24 @@ $("#sidebar").stick_in_parent() 82 123 ``` 83 124 ]]} 84 125 </div>85 -1 <iframe src="$root/examples/4.html" frameborder="0"></iframe>-1 126 <div class="window_frame pink"> -1 127 <div class="window_title">Demo Browser</div> -1 128 <div class="window_inner"> -1 129 <iframe src="$root/examples/4.html" frameborder="0"></iframe> -1 130 </div> -1 131 </div> 86 132 </div> 87 133 88 134 -1 135 <h1> -1 136 Reference -1 137 <a name="reference" class="anchor"></a> -1 138 </h1> 89 13990 -1 <h1>Reference</h1>91 140 $markdown{[[ 92 141 -1 142 To install include `jquery.sticky-kit.js` after including jQuery. -1 143 93 144 Usage: 94 145 95 146 ```js @@ -101,13 +152,13 @@ $("#sticky_item").stick_in_parent(options) 101 152 `options` is an optional hash of options to configure how Sticky Kit works. The 102 153 following options are accepted: 103 154104 -1 * `parent` -- Controls which element will be the parent of the sticky item. The-1 155 * `parent` -- The element will be the parent of the sticky item. The 105 156 dimensions of the parent control when the sticky element bottoms out. Defaults 106 157 to the closest parent of the sticky element. Can be a selector. 107 158 * `inner_scrolling` -- Boolean to enable or disable the ability of the sticky 108 159 element to scroll independently of the scrollbar when it's taller than the 109 160 viewport. Defaults to `true` for enabled.110 -1 * `sticky_class` -- the name of the CSS class to apply to elements when they-1 161 * `sticky_class` -- The name of the CSS class to apply to elements when they 111 162 have become stuck. Defaults to `"is_stuck"`. 112 163 113 164 ### Events @@ -131,7 +182,7 @@ $("#sticky_item").stick_in_parent() 131 182 }) 132 183 .on("sticky_kit:unstick", function(e) { 133 184 console.log("has unstuck!", e.target);134 -1 })-1 185 }); 135 186 ``` 136 187 137 188 Sticky kit listens to one event on `document.body`. @@ -145,7 +196,7 @@ If you're changing the markup of your page on the fly by removing, adding or 145 196 resizing elements then you most likely need to tell Sticky Kit to recalculate 146 197 the sticky elements to guarantee they're positioned correctly. 147 198148 -1 You can cause a recalculation to happen by triggering an event on the `document.body`:-1 199 You can cause a recalculation to happen by triggering an event on `document.body`: 149 200 150 201 ```js 151 202 $(document.body).trigger("sticky_kit:recalc") @@ -169,4 +220,3 @@ Note: only floated columns work in IE7. 169 220 170 221 ]]} 171 222172 -1 </div>
diff --git a/site/main.coffee b/site/main.coffee
@@ -4,3 +4,13 @@ $ -> 4 4 $(e.currentTarget) 5 5 .closest(".example").find("iframe")[0].contentWindow.scroll_it() 6 6 -1 7 -1 8 $(".nav").stick_in_parent().on("sticky_kit:stick", (e) => -1 9 setTimeout => -1 10 $(e.target).addClass "show_hidden" -1 11 , 0 -1 12 ).on("sticky_kit:unstick", (e) => -1 13 setTimeout => -1 14 $(e.target).removeClass "show_hidden" -1 15 , 0 -1 16 )
diff --git a/site/main.scss b/site/main.scss
@@ -1,11 +1,51 @@ 1 1 2 2 $site_width: 700px; -1 3 $font_size: 18px; -1 4 -1 5 ::selection { -1 6 background: red; -1 7 color: white; -1 8 } -1 9 -1 10 @mixin unselectable { -1 11 -moz-user-select: none; -1 12 -webkit-user-select: none; -1 13 user-select: none; -1 14 } -1 15 -1 16 @mixin grad($top, $bottom) { -1 17 background-color: mix($top, $bottom); -1 18 background-image: linear-gradient(bottom, $bottom 0%, $top 100%); -1 19 background-image: -webkit-linear-gradient(bottom, $bottom 0%, $top 100%); -1 20 background-image: -moz-linear-gradient(bottom, $bottom 0%, $top 100%); -1 21 background-image: -o-linear-gradient(bottom, $bottom 0%, $top 100%); -1 22 background-image: -ms-linear-gradient(bottom, $bottom 0%, $top 100%); -1 23 } -1 24 -1 25 @mixin autograd($color, $amount: 10%) { -1 26 @include grad($color, darken($color, $amount)); -1 27 } -1 28 3 29 4 30 body {5 -1 font-family: sans-serif;6 -1 font-size: 16px;7 -1 margin: 20px;8 -1 margin-bottom: 400px;-1 31 font-family: Lato, sans-serif; -1 32 font-size: $font_size; -1 33 color: #222; -1 34 margin: 0; -1 35 } -1 36 -1 37 a { -1 38 color: #E73E1D; -1 39 &:hover { -1 40 color: lighten(#E73E1D, 10%); -1 41 } -1 42 -1 43 &.anchor { -1 44 visibility: hidden; -1 45 display: block; -1 46 position: relative; -1 47 top: -100px; -1 48 } 9 49 } 10 50 11 51 h1 { @@ -13,7 +53,7 @@ h1 { 13 53 } 14 54 15 55 p, ul {16 -1 line-height: 22px;-1 56 line-height: 26px; 17 57 margin: 20px 0; 18 58 19 59 code { @@ -29,27 +69,311 @@ li { 29 69 margin: 15px 0; 30 70 } 31 71 -1 72 .header { -1 73 margin: 20px 0; -1 74 padding-bottom: 20px; -1 75 border-bottom: 1px solid #dadada; -1 76 white-space: nowrap; -1 77 -1 78 h1 { -1 79 font-size: 100px; -1 80 margin: 0; -1 81 } -1 82 -1 83 h2 { -1 84 font-size: 18px; -1 85 font-weight: normal; -1 86 margin: 0; -1 87 color: #666; -1 88 } -1 89 -1 90 .downloader { -1 91 $color: #90C497; -1 92 -1 93 margin-top: 2px; -1 94 float: right; -1 95 text-align: center; -1 96 width: 220px; -1 97 -1 98 .download_label { -1 99 color: #999; -1 100 font-size: 14px; -1 101 margin-bottom: 10px; -1 102 } -1 103 -1 104 .download_outer { -1 105 @include autograd($color, 20%); -1 106 border-radius: 10px; -1 107 border: 1px solid desaturate(darken($color, 20%), 10%); -1 108 box-shadow: inset 0 -1px 0 $color, 0 0 0 4px white, 0 0 0 5px #dadada; -1 109 font-size: 0; -1 110 } -1 111 -1 112 a { -1 113 font-size: 16px; -1 114 color: white; -1 115 text-decoration: none; -1 116 text-shadow: 0 0 4px darken($color, 20%); -1 117 font-weight: bold; -1 118 } -1 119 -1 120 .size { -1 121 font-weight: normal; -1 122 } -1 123 -1 124 -1 125 .download_row { -1 126 display: block; -1 127 padding: 10px; -1 128 } -1 129 -1 130 .top_row { -1 131 background-color: rgba(255,255,255,0.1); -1 132 box-shadow: 0 1px 0 rgba(0,0,0,0.1); -1 133 } -1 134 } -1 135 -1 136 .twitter_buttons { -1 137 margin-top: 15px; -1 138 } -1 139 } -1 140 -1 141 -1 142 .nav { -1 143 $height: 50px; -1 144 -1 145 color: white; -1 146 height: $height; -1 147 line-height: $height; -1 148 background: #222; -1 149 padding: 0 10px; -1 150 z-index: 3; -1 151 -1 152 box-shadow: 0 0px 0 rgba(0,0,0, 0.1); -1 153 -1 154 -webkit-transition: box-shadow 0.25s ease-in-out; -1 155 -moz-transition: box-shadow 0.25s ease-in-out; -1 156 transition: box-shadow 0.25s ease-in-out; -1 157 -1 158 &.show_hidden { -1 159 box-shadow: 0 3px 0 rgba(0,0,0, 0.1); -1 160 -1 161 .hidden { -1 162 opacity: 1; -1 163 } -1 164 } -1 165 -1 166 .hidden { -1 167 opacity: 0; -1 168 -webkit-transition: opacity 0.25s ease-in-out; -1 169 -moz-transition: opacity 0.25s ease-in-out; -1 170 transition: opacity 0.25s ease-in-out; -1 171 } -1 172 -1 173 .nav_social { -1 174 float: right; -1 175 } -1 176 -1 177 a { -1 178 display: inline-block; -1 179 height: $height; -1 180 line-height: $height; -1 181 padding: 0 10px; -1 182 -1 183 color: white; -1 184 text-decoration: none; -1 185 margin-right: 20px; -1 186 -1 187 -webkit-transition: background 0.15s ease-in-out; -1 188 -moz-transition: background 0.15s ease-in-out; -1 189 transition: background 0.15s ease-in-out; -1 190 -1 191 &:hover { -1 192 background-color: #444; -1 193 } -1 194 } -1 195 } 32 196 33 197 .body { 34 198 width: $site_width; 35 199 margin-left: auto; 36 200 margin-right: auto;37 -1 }-1 201 position: relative; -1 202 z-index: 2; 38 20339 -1 iframe {40 -1 width: 100%;41 -1 border: 1px solid silver;42 -1 height: 200px;-1 204 &:before { -1 205 z-index: 1; -1 206 position: absolute; -1 207 width: 290px; -1 208 height: 655px; -1 209 left: -290px; -1 210 content: " "; -1 211 background: url("images/sticky_water.png") -1 212 } 43 213 } 44 214 45 215 46 216 .example {47 -1 margin: 20px 0;-1 217 margin: 40px 0; -1 218 48 219 .example_controls { 49 220 button {50 -1 margin: 0;-1 221 margin: 10px 10px 0 0; 51 222 float: right; 52 223 } 53 224 } -1 225 -1 226 iframe { -1 227 display: block; -1 228 width: 692px; -1 229 margin: 0 auto; -1 230 margin-bottom: 1px; -1 231 border: 1px solid silver; -1 232 height: 200px; -1 233 background: white; -1 234 } -1 235 -1 236 } -1 237 -1 238 .footer { -1 239 background: #eee; -1 240 border-top: 1px dashed #dadada; -1 241 overflow: hidden; -1 242 margin-top: 40px; -1 243 font-size: 14px; -1 244 color: #444; -1 245 box-shadow: inset 0 1px 0 white; -1 246 -1 247 .inner { -1 248 width: $site_width; -1 249 margin: 0 auto; -1 250 -1 251 div { -1 252 margin: 10px; -1 253 } -1 254 } -1 255 -1 256 a { -1 257 color: #222; -1 258 &:hover { -1 259 color: black; -1 260 } -1 261 } -1 262 } -1 263 -1 264 -1 265 // code -1 266 -1 267 .highlight { -1 268 border: 1px dashed #DADADA; -1 269 border-radius: 6px; -1 270 padding: 10px; -1 271 margin: 20px 0; -1 272 line-height: 26px; -1 273 -1 274 box-shadow: 0 0 0 1px #FFF, 0 0 7px #B3B3B3; -1 275 } -1 276 -1 277 /* builtins */ -1 278 .nb { -1 279 color: #707A34; -1 280 } -1 281 -1 282 /* strings */ -1 283 .s, .s1, .s2, .se { -1 284 color: #A16D43; -1 285 } -1 286 -1 287 /* proper names, self */ -1 288 .nc, .vc, .bp, .kc { -1 289 color: #30A0BD; -1 290 } -1 291 -1 292 /* function lit, braces, parens */ -1 293 .nf, .kt, .p { -1 294 color: #8E4681; 54 295 } 55 296 -1 297 /* operators */ -1 298 .o, .si { -1 299 color: #B50C0C; -1 300 } -1 301 -1 302 .nv { -1 303 color: #ff9898; -1 304 color: #893D8C; -1 305 } -1 306 -1 307 /* keywords */ -1 308 .k, .kd { -1 309 color: #0CB56C; -1 310 } -1 311 -1 312 .c1, .c2 { -1 313 color: #D74DBF; -1 314 } -1 315 -1 316 .m, .mi, .mf, .mh { -1 317 color: #4958C3; -1 318 } -1 319 -1 320 .window_frame { -1 321 overflow: hidden; -1 322 margin: 20px 0; -1 323 -1 324 background: #EDECEB; -1 325 -1 326 box-shadow: inset 0 0 0 1px #6D6A68, inset 2px 0 0 white, inset 0 0 0 2px #D2D0CE, 0 0 10px rgba(0,0,0, 0.5); -1 327 border-radius: 4px 4px 0 0; -1 328 -1 329 .window_inner { -1 330 padding: 2px; -1 331 } -1 332 -1 333 .window_title { -1 334 $border: #455D7C; -1 335 $top_highlight: #B2CCED; -1 336 $left_side_highlight: #9EBDE5; -1 337 $right_side_highlight: #7BA2D3; -1 338 $bottom_shadow: #4E76A8; -1 339 $text_outline: #4E77AB; -1 340 -1 341 border: 1px solid $border; -1 342 border-bottom: 0; -1 343 -1 344 border-radius: 4px 4px 0 0; -1 345 font-size: 14px; -1 346 font-weight: bold; -1 347 text-align: center; -1 348 height: 22px; -1 349 line-height: 22px; -1 350 background: #99BAE3; -1 351 @include grad(#99BAE3, #7AA1D1); -1 352 -1 353 box-shadow: inset 0 1px 0 0 $top_highlight, inset 1px 0 0 $left_side_highlight, inset -1px 0 0 $right_side_highlight, 0 2px 0 -1px $bottom_shadow; -1 354 color: white; -1 355 text-shadow: 1px 1px 0 $text_outline, 1px -1px $text_outline, -1px -1px $text_outline, -1px 1px $text_outline; -1 356 } -1 357 -1 358 &.pink { -1 359 .window_title { -1 360 $border: #94487A; -1 361 $top_highlight: #F3B3DD; -1 362 $left_side_highlight: #EDA1D3; -1 363 $right_side_highlight: #DE7EBD; -1 364 $bottom_shadow: #BA5096; -1 365 $text_outline: #BD5198; -1 366 -1 367 border: 1px solid $border; -1 368 border-bottom: 0; -1 369 -1 370 background: #EB99CF; -1 371 @include grad(#EB99CF, #DE7EBD); -1 372 -1 373 box-shadow: inset 0 1px 0 0 $top_highlight, inset 1px 0 0 $left_side_highlight, inset -1px 0 0 $right_side_highlight, 0 2px 0 -1px $bottom_shadow; -1 374 text-shadow: 1px 1px 0 $text_outline, 1px -1px $text_outline, -1px -1px $text_outline, -1px 1px $text_outline; -1 375 } -1 376 } -1 377 } -1 378 -1 379
diff --git a/site/site.moon b/site/site.moon
@@ -4,6 +4,7 @@ tools = require"sitegen.tools" 4 4 5 5 site = sitegen.create_site => 6 6 @title = "sticky-kit" -1 7 @version = "1.0.0" 7 8 8 9 scssphp = tools.system_command "pscss < %s > %s", "css" 9 10 coffeescript = tools.system_command "coffee -c -s < %s > %s", "js"
diff --git a/site/templates/index.html b/site/templates/index.html
@@ -2,15 +2,59 @@ 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8">5 -1 <title></title>-1 5 <title>$title</title> 6 6 7 7 <link rel="stylesheet" href="$root/main.css" /> -1 8 <link href='http://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'> 8 9 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 9 10 <script type="text/javascript" src="$root/main.js"></script> -1 11 <script type="text/javascript" src="$root/../../jquery.sticky-kit.js"></script> 10 12 </head> 11 13 <body> 12 14 -1 15 <div class="body"> -1 16 -1 17 <div class="header"> -1 18 <div class="downloader"> -1 19 <div class="download_label">Download v$version</div> -1 20 <div class="download_outer"> -1 21 <a href="" class="download_row top_row"> -1 22 <span>Compressed</span> -1 23 <span class="size">22kb</span> -1 24 </a> -1 25 <a href="" class="download_row"> -1 26 <span>Full Source</span> -1 27 <span class="size">22kb</span> -1 28 </a> -1 29 </div> -1 30 -1 31 <div class="twitter_buttons"> -1 32 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://leafo.net/sticky-kit/" data-text="scssphp v$current_version - SCSS compiler for PHP" data-count="horizontal" data-via="moonscript">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> -1 33 <a href="https://twitter.com/moonscript" class="twitter-follow-button" data-width="70px" data-show-count="false" data-show-screen-name="false">Follow @moonscript</a> -1 34 </div> -1 35 -1 36 </div> -1 37 <h1>Sticky-Kit</h1> -1 38 <h2>A jQuery plugin for making smart sticky elements</h2> -1 39 </div> -1 40 13 41 $body 14 42 -1 43 </div> -1 44 -1 45 <div class="footer"> -1 46 <div class="inner"> -1 47 <div> -1 48 created by <a href="http://leafo.net">leaf corcoran</a> · sticky-kit is licensed under WTFPL -1 49 </div> -1 50 <div> -1 51 generated by <a href="http://github.com/leafo/sitegen">sitegen</a> on $generate_date -1 52 </div> -1 53 </div> -1 54 </div> -1 55 -1 56 -1 57 <a href="https://github.com/leafo/sticky-kit"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a> -1 58 15 59 </body> 16 60 </html>