Convert to Rootz

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+public

README.md

@@ -5,7 +5,13 @@ An interactive jQuery guide created for [Thinkful](http://www.thinkful.com).
 This guide lives at [Thinkful.com/learn/intro-to-jquery](http://www.thinkful.com/learn/intro-to-jquery).
 
 ## Contributing
-Suggestions and pull requests welcome!
+- install [node.js](http://nodejs.org)
+- `$ npm install roots -g`
+- `$ git clone https://github.com/carlsednaoui/intro-to-jquery.git && cd intro-to-jquery`
+- `$ roots watch`
+- make contributions
+- ???
+- get money
 
 ## Preview
 ![](http://i.imgur.com/J7UPAd2.png)

app.coffee

@@ -0,0 +1,4 @@
+# roots v2.1.0-beta4
+
+ignore_files: ['_*', 'readme*', '.gitignore', '.DS_Store', 'layout.jade']
+ignore_folders: ['.git']

main.css → assets/css/main.css

@@ -1,61 +1,3 @@
-******************************
--> CSS reset
-*******************************/
-
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-body {
-    line-height: 1;
-}
-ol, ul {
-    list-style: none;
-}
-blockquote, q {
-    quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
-    content: none;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-
-/*******************************
--> Main styles
-*******************************/
-
 body {
     margin: 50px auto;
     width: 850px;
@@ -67,6 +9,14 @@ body {
     -webkit-font-smoothing: antialiased;
 }
 
+header {
+    text-align: center;
+}
+
+header img {
+  padding: 15px 0;
+}
+
 h1 {
     color: #2C3E50;
     font-size: 2em;
@@ -141,7 +91,7 @@ h3 {
     font-size: .9em
 }
 
-.screenshot {
+.section img[alt=screenshot] {
     max-width: 100%;
     border-radius: 3px;
     -webkit-border-radius: 3px;
@@ -157,16 +107,20 @@ h3 {
     float: left;
 }
 
+#stop-green-top {
+  padding-bottom: 55px
+}
+
 #my-div {
     display: inline-block;
     float: left;   
 }
 
-.code-review {
+.section p code, .section li code {
     color: #EA6153;
 }
 
-.code-review:after {
+.section p code:after, .section li code:after {
     content: " ";
 }
 
@@ -180,7 +134,8 @@ p a, ul a{
     text-decoration: none;
 }
 
-.protip {
+/* pro tips */
+blockquote {
     color: #3D566E;
     font-style: italic;
 }
@@ -195,11 +150,12 @@ p a, ul a{
     margin-left: -100px;
 }
 
-div pre code {
+pre code {
     padding-left: 15px;
     border-radius: 3px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
+    font-family: monospace;
 }
 
 
@@ -210,6 +166,10 @@ div pre code {
     margin-left: -55px;
 }
 
+#main-example-container {
+  width: 960px;
+}
+
 #main-example-add-sound {
     background-color: #27AE60;
     font-family: sans-serif;
@@ -231,34 +191,8 @@ div pre code {
     height: 40px;
 }
 
-/* Ruy in CSS */
-/*#ruy-css {
-    height: 500px;
-    width: 500px;
-    background: url('images/ruy_stand_still.png') no-repeat;
-}
-
-#ruy-css:hover {
-    background: url('images/ruy_animated.gif') no-repeat;
+.github_fork {
+    position: absolute;
+    top: 0;
+    right: 0; 
 }
-
-#ruy-css:active {
-    background: url('images/ryu_hadoken_pose.png') no-repeat;
-}
-
-#ruy-css:active img {
-    visibility: visible;
-    -webkit-animation: moveLeft 1s linear;
-}
-
-#ruy-css img {
-    margin-top: 65px;
-    margin-left: 390px;
-    visibility: hidden;
-}
-
-
-@-webkit-keyframes moveLeft {
-    0%   {margin-left:390px;}
-    100%  {margin-left:1000px;}
-}

assets/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

assets/js/main.coffee

@@ -0,0 +1,51 @@
+$ ->
+
+  # Green box positioning logic
+  $(window).on 'scroll', ->
+    y_scroll_pos = window.pageYOffset
+    greenBox = $('#green-box-container').position().top
+    greenBoxTop = $('#stop-green-top').position().top + 100
+    greenBoxBottom = $('#stop-green-bottom').position().top - 220
+
+    if y_scroll_pos > greenBox
+      $('#green-box-container').css(position: 'fixed', top: '10px')
+
+    if y_scroll_pos < greenBoxTop
+      $('#green-box-container').css(position: 'inherit')
+
+    if y_scroll_pos > greenBoxBottom
+        $('#green-box-container').css(position: 'absolute')
+
+  # Code along positioning logic
+  $(window).on 'scroll', ->
+    y_scroll_pos = window.pageYOffset
+    divContainer = $('#my-div-container').position().top
+    divContainerTop = $('#stop-div-container-top').position().top + 100
+    divContainerBottom = $('#stop-div-container-bottom').position().top - 220
+
+    if y_scroll_pos > divContainer then $('#my-div-container').css(position: 'fixed', top: '10px')
+    if y_scroll_pos < divContainerTop then $('#my-div-container').css(position: 'inherit')
+    if y_scroll_pos > divContainerBottom then $('#my-div-container').css(position: 'absolute')
+
+  # jQuery project demo
+  playHadouken = false
+
+  $('#main-example').hover ->
+    this.src = 'img/ryu_animated.gif'
+  , ->
+    this.src = 'img/ryu_stand_still.png'
+
+  $('#main-example').on 'mousedown', ->
+    this.src = 'img/ryu_hadoken_pose.png'
+    $('.moving-hadouken').remove()
+    $('#main-example-container').append('<img class="moving-hadouken" src="img/hadouken.gif" >')
+    if playHadouken then $('#hadouken-sound')[0].play()
+    $('.moving-hadouken').animate({ marginLeft: 200 }, 1000, 'swing', (-> this.remove()))
+
+  $('#main-example').on 'mouseup', ->
+    this.src = 'img/ryu_animated.gif'
+
+  $('#main-example-add-sound').on 'click', -> 
+    playHadouken = !playHadouken
+    if playHadouken then $(@).html('Sound added, click on Ryu')
+    if not playHadouken then $(@).html('Sound removed, click to add it back')