- commit
- 5fca829c2c16a6df22ccacafa3f0fc2d0db004a0
- parent
- 9df302c09ee0f2951bb49b332961d097f4d2a0bc
- Author
- leaf corcoran <leafot@gmail.com>
- Date
- 2013-08-01 16:14
some tweaks and make site responsive for mobile
Diffstat
| M | site/example.coffee | 2 | ++ |
| M | site/example.scss | 33 | +++++++++++++++++++++++++++++++++ |
| M | site/index.html | 6 | +++--- |
| M | site/main.scss | 40 | ++++++++++++++++++++++++++++++++++++---- |
| M | site/site.moon | 2 | ++ |
| M | site/templates/index.html | 4 | ++-- |
6 files changed, 78 insertions, 9 deletions
diff --git a/site/example.coffee b/site/example.coffee
@@ -33,3 +33,5 @@ window.scroll_it_wobble = -> 33 33 .animate({ scrollTop: 0 }, max*3) 34 34 35 35 -1 36 $(window).on "resize", (e) => -1 37 $(document.body).trigger("sticky_kit:recalc")
diff --git a/site/example.scss b/site/example.scss
@@ -127,3 +127,36 @@ h1 {
127 127 .sub {
128 128 color: #999;
129 129 }
-1 130
-1 131
-1 132 @media all and (max-width: 500px) {
-1 133 .content {
-1 134 .sidebar {
-1 135 width: 100px;
-1 136 }
-1 137
-1 138 .item {
-1 139 width: 60px;
-1 140 }
-1 141
-1 142 .main {
-1 143 margin-left: 120px + 2;
-1 144 }
-1 145
-1 146 &.double {
-1 147 .main {
-1 148 margin-left: 230px + 4;
-1 149 }
-1 150 }
-1 151
-1 152 &.right {
-1 153 .main {
-1 154 margin-right: 120px;
-1 155 }
-1 156 }
-1 157
-1 158
-1 159
-1 160 }
-1 161 }
-1 162
diff --git a/site/index.html b/site/index.html
@@ -13,8 +13,8 @@ 13 13 14 14 $markdown{[[ 15 15 Sticky-kit provides an easy way to attach elements to the page when the user16 -1 scrolls such that the element is always visible. It is written in CoffeeScript17 -1 and the source can be found on [GitHub](https://github.com/leafo/sticky-kit).-1 16 scrolls such that the element is always visible. The source can be found on -1 17 [GitHub](https://github.com/leafo/sticky-kit). 18 18 ]]} 19 19 20 20 <div class="github_buttons"> @@ -89,7 +89,7 @@ call `stick_in_parent` on all columns. Sticky-kit will only stick items if they 89 89 don't take up the entire height of their parent. 90 90 ]]} 91 9192 -1 <div class="example_controls">-1 92 <div class="example_controls long_example"> 93 93 <button>Scroll it!</button> 94 94 $markdown{[[ 95 95 ```js
diff --git a/site/main.scss b/site/main.scss
@@ -1,5 +1,6 @@ 1 1 2 2 $site_width: 700px; -1 3 $narrow_site_width: 500px; 3 4 $font_size: 18px; 4 5 5 6 ::selection { @@ -218,14 +219,14 @@ li { 218 219 219 220 .example_controls { 220 221 button {221 -1 margin: 10px 10px 0 0;-1 222 margin: 13px 10px 0 0; 222 223 float: right; 223 224 } 224 225 } 225 226 226 227 iframe { 227 228 display: block;228 -1 width: 692px;-1 229 width: $site_width - 8px; 229 230 margin: 0 auto; 230 231 margin-bottom: 1px; 231 232 border: 1px solid silver; @@ -265,7 +266,7 @@ li { 265 266 // code 266 267 267 268 .highlight {268 -1 border: 1px dashed #DADADA;-1 269 border: 1px dashed #c7c7c7; 269 270 border-radius: 6px; 270 271 padding: 10px; 271 272 margin: 20px 0; @@ -323,7 +324,7 @@ li { 323 324 324 325 background: #EDECEB; 325 326326 -1 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 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.3); 327 328 border-radius: 4px 4px 0 0; 328 329 329 330 .window_inner { @@ -376,4 +377,35 @@ li { 376 377 } 377 378 } 378 379 -1 380 @media all and (max-width: 1015px) { -1 381 .forkme { -1 382 display: none; -1 383 } -1 384 } -1 385 -1 386 @media all and (max-width: 730px) { -1 387 .body, .footer .inner { -1 388 width: $narrow_site_width; -1 389 } -1 390 -1 391 .header h1 { -1 392 font-size: 52px; -1 393 padding-top: 100px; -1 394 } -1 395 -1 396 .nav .nav_social { -1 397 display: none; -1 398 } -1 399 -1 400 .example iframe { -1 401 width: $narrow_site_width - 8px; -1 402 } -1 403 -1 404 .long_example { -1 405 .highlight { -1 406 font-size: 15px; -1 407 } -1 408 } -1 409 -1 410 } 379 411
diff --git a/site/site.moon b/site/site.moon
@@ -14,6 +14,8 @@ site = sitegen.create_site => 14 14 @full_size = exec("du -bh www/src/jquery.sticky-kit.js | cut -f 1")\lower! 15 15 @compressed_size = exec("du -bh www/src/jquery.sticky-kit.min.js | cut -f 1")\lower! 16 16 -1 17 deploy_to "leaf@leafo.net", "www/sticky-kit" -1 18 17 19 scssphp = tools.system_command "pscss < %s > %s", "css" 18 20 coffeescript = tools.system_command "coffee -c -s < %s > %s", "js" 19 21
diff --git a/site/templates/index.html b/site/templates/index.html
@@ -30,7 +30,7 @@ 30 30 </div> 31 31 32 32 <div class="twitter_buttons">33 -1 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://leafo.net/sticky-kit/" data-text="sticky-kit v$version - A jQuery plugin for sticky elements" 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/share" class="twitter-share-button" data-url="http://leafo.net/sticky-kit/" data-text="Sticky-kit v$version - A jQuery plugin for sticky elements" data-count="horizontal" data-via="moonscript">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 34 34 <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> 35 35 </div> 36 36 @@ -55,7 +55,7 @@ $body 55 55 </div> 56 56 57 5758 -1 <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 <a href="https://github.com/leafo/sticky-kit" class="forkme"><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> 59 59 60 60 </body> 61 61 </html>