Merge pull request jsonwebtoken#110 from jsonwebtoken/docs

Add introduction section

Author: beneliflo

Gruntfile.js

@@ -10,8 +10,7 @@ module.exports = function (grunt) {
         options: {
           livereload: true
         },
-        files: ['Gruntfile.js', 'js/**/*.js', 'stylus/**/*.styl', 'html/**/*.jade'],
-        // files: ['Gruntfile.js', 'js/**/*.js', 'stylus/**/*.styl', 'html/**/*.jade', 'html/index.html'],
+        files: ['Gruntfile.js', 'js/**/*.js', 'stylus/**/*.styl', 'views/**/*.jade'],
         tasks: ['build']
       }
     },
@@ -35,7 +34,8 @@ module.exports = function (grunt) {
     jade: {
       compile: {
         files: {
-          'index.html': 'html/index.jade'
+          'index.html': 'views/index.jade',
+          'introduction/index.html': 'views/introduction.jade'
         }
       }
     },

css/app.css

@@ -15,22 +15,9 @@ function parseHash() {
 }
 
 if (parseSearch().value || parseHash().id_token) {
-
-  $('body').removeClass('load');
-
-  scrollTo($('#debugger'));
+  scrollTo($('#debugger-io'));
 }
 
-// } else if (localStorage.getItem('visited')) {
-
-//   $('body').addClass('refreshed');
-
-// } else {
-
-//   $('body').addClass('introduction').removeClass('load');
-
-// }
-
 function safeLocalStorageSetItem(key, value) {
   try {
     localStorage.setItem(key, value);
@@ -40,6 +27,28 @@ function safeLocalStorageSetItem(key, value) {
 }
 safeLocalStorageSetItem("visited", "1");
 
+/*
+ * Go to url hash from intro section
+ */
+if (location.href.indexOf("#debugger") != -1) {
+  scrollTo($('#debugger-io'));
+}
+
+if (location.href.indexOf("#libraries") != -1) {
+  scrollTo($('#libraries-io'));
+}
+
+/*
+ * Show icon
+ */
+$(window).scroll(function() {
+  if ($(window).scrollTop() >= 130) {
+    $("nav.navbar").addClass("fixed")
+  } else {
+    $("nav.navbar").removeClass("fixed")
+  };
+});
+
 /*
  * Show menu mobile
  */
@@ -79,7 +88,7 @@ $('.accordion').accordion({
 /*
  * Scroll to section
  */
- $('a[href^="#"].scrollto').on('click', function(event) {
+$('a[href^="#"].scrollto').on('click', function(event) {
   var target = $( $(this).attr('href') );
 
   if( target.length ) {
@@ -99,11 +108,9 @@ $(window).on('scroll', function () {
     var bottom = top + $(this).outerHeight();
 
     if (cur_pos >= top && cur_pos <= bottom) {
-      $submenu.find('a').removeClass('active').closest('nav.menu').removeClass('active');
-      sections.removeClass('active');
+      $submenu.find('a.scrollto').removeClass('active').closest('nav.menu').removeClass('active');
 
-      $(this).addClass('active');
-      $submenu.find('a[href="#' + $(this).attr('id') + '"]').addClass('active').closest('nav.menu').addClass('active');
+      $submenu.find('a.scrollto[href="#' + $(this).attr('id') + '"]').addClass('active').closest('nav.menu').addClass('active');
     }
   });
 });
@@ -204,14 +211,6 @@ var $grid = $('.libraries-sv').isotope({
   }
 });
 
-$(window).scroll(function() {
-  if ($(window).scrollTop() > 150) {
-    $(".navbar").addClass("fixed")
-  } else {
-    $(".navbar").removeClass("fixed")
-  };
-});
-
 $('.filter select').on( 'change', function() {
   $grid.isotope({ filter: $(this).val() });
 });

html/index.jade

@@ -20,7 +20,8 @@
     "grunt-contrib-watch": "^0.6.1",
     "grunt-mocha-phantomjs": "0.7.0",
     "grunt-usemin": "^2.0.2",
-    "matchdep": "~0.3.0"
+    "matchdep": "~0.3.0",
+    "markdown": "^0.5.0"
   },
   "scripts": {
     "test": "grunt test --verbose",

index.html

@@ -263,7 +263,7 @@ body
       a
         color white
         font-size 30px
-        margin 20% 0
+        margin 10% 0
 
     .supported
       display block
@@ -289,7 +289,15 @@ body
   +breakpoint("tablet")
     padding 140px 0 60px
   +breakpoint("desktop")
-    padding 150px 0 40px
+    padding 150px 0 60px
+
+  h1
+    color white
+    margin 25px 0 0
+    +breakpoint("tablet")
+      font-size 34px
+    +breakpoint("desktop")
+      font-size 40px
 
   p
     color white
@@ -883,26 +891,32 @@ body
     max-width 875px
     margin 5px auto
 
-  .btn, a.btn
-    transition(background-color 0.2s ease)
-    text-transform uppercase
-    letter-spacing 2px
-    font-weight bold
-    border 1px solid #d0d2d3
-    line-height 30px
-    padding 15px 30px
-    font-size 15px
-    border-radius 3px
-    text-decoration none
-    display inline-block
-    margin-top 30px
-    &.btn-success
-      background-color #eb5424
+.btn, a.btn
+  transition(background-color 0.2s ease)
+  text-transform uppercase
+  letter-spacing 2px
+  font-weight bold
+  border 1px solid #d0d2d3
+  line-height 30px
+  padding 15px 30px
+  font-size 15px
+  border-radius 3px
+  text-decoration none
+  display inline-block
+  margin-top 30px
+  &.btn-success
+    background-color #eb5424
+    color white
+    border-color transparent
+    &:hover
+      background-color darken(#eb5424, 30%)
       color white
-      border-color transparent
-      &:hover
-        background-color darken(#eb5424, 30%)
-        color white
+
+.btn, a.btn
+  &.btn-lg
+    background-color #D63AFF
+    color white
+    border none
 
   .token
     margin-top 35px
@@ -914,6 +928,51 @@ body
     letter-spacing: 1px;
 
 
+// plain-text
+
+.plain-text
+  .container
+    max-width 630px
+
+  h2
+    margin-top 50px
+    font-size 25px
+
+  h3
+    font-size 20px
+
+  p
+    line-height 1.8
+    font-size 18px
+
+    code
+      background-color rgba(#D8D8D8,.35)
+      font-size 75%
+      border-radius 3px
+      padding 2px 4px
+
+  img
+    width 100%
+
+
+// go-tool
+
+.go-tool
+  text-align center
+  border-top 1px solid #DDD
+  p
+    font-size 15px
+    display inline-block
+    text-transform uppercase
+    +breakpoint("tablet")
+      margin-right 20px
+  .btn.btn-success
+    background-color #D63AFF
+    margin 0
+    &:hover
+      background-color darken(#D63AFF, 30%)
+
+
 // footer
 
 footer