updated the site to include "source link" popovers, improved styling …

…in documentation area

.assemblerc.yml

@@ -68,24 +68,15 @@ plugins:
   - <%= site.templates %>/_plugins/holder-404-avoid.js
 
 
-
-# =============================================
-# WEBFONTS
-# =============================================
-
-webfonts:
-  - 'Open+Sans+Condensed:300,700:latin' # Headings
-  - 'Open+Sans:400,300,600,700:latin'   # Body text
-  - 'Lora:400,700,400italic,700italic'  # Blog
-
-
 # =============================================
 # SITE METADATA
 # =============================================
 
 
 # Less.js metadata
 current_version:   <%= less.version %>
+origin:            <%= less.master %>
+branch:            master
 
 # Site metadata
 brand:             lesscss.org
@@ -97,10 +88,10 @@ description: >
 
 # URLs
 homepage:          http://lesscss.org
-repo:              <%= pkg.repository.url %>
+repo:              <%= pkg.homepage %>
 issues:            <%= pkg.bugs.url %>?&state=open
 download:
-  source:          <%= pkg.homepages %>/archive/master.zip
+  source:          <%= pkg.homepage %>/archive/master.zip
   latest:          https://raw.github.com/less/less.js/master/dist/less-<%= less.version %>.min.js
 
 cdn:

Gruntfile.js

@@ -15,6 +15,7 @@ module.exports = function(grunt) {
     // Project metadata
     pkg: grunt.file.readJSON('package.json'),
     site: grunt.file.readYAML('.assemblerc.yml'),
+    _less: grunt.file.readJSON('data/less.json'),
 
     jshint: {
       options: {
@@ -42,8 +43,9 @@ module.exports = function(grunt) {
         assets: '<%= site.dest %>/public',
 
         // Metadata
-        pkg: '<%= pkg %>',
-        site: '<%= site %>',
+        pkg: '<%= pkg %>',     // extend the context with `pkg`
+        site: '<%= site %>',   // extend the context with `site`
+        less: '<%= _less %>',  // extend the context with `less`
         data: ['<%= site.data %>/*.{json,yml}', 'content/**/*.json'],
 
         // Templates
@@ -72,16 +74,13 @@ module.exports = function(grunt) {
       site: {
         options: {
           permalinks: {preset: 'pretty'},
-          partials: ['content/**/*.md'],
+          partials: ['content/**/*.md']
         },
         src: '<%= site.pages %>/*.hbs',
         dest: '<%= site.dest %>/'
       },
       feed: {
-        options: {
-          ext: '.xml',
-          layout: 'none'
-        },
+        options: {ext: '.xml', layout: 'none'},
         src: '<%= site.snippets %>/feed.xml',
         dest: '<%= site.dest %>/'
       }
@@ -156,16 +155,25 @@ module.exports = function(grunt) {
 
     watch: {
       options: {livereload: true },
-      site: {
-        files: [
-          // '<%= site.helpers %>/*.js',
-          // '<%= site.plugins %>/*.js',
-          '<%= site.styles %>/**/*.less',
-          '<%= site.templates %>/**/*.hbs',
-          '<%= site.content %>/**/*.md',
-          '<%= site.data %>/*.{json,yml}'
-        ],
-        tasks: ['clean', 'copy', 'less:site', 'assemble:site']
+      styles: {
+        files: ['<%= site.styles %>/**/*.less'],
+        tasks: ['less:site']
+      },
+      content: {
+        files: ['<%= site.content %>/**/*.md'],
+        tasks: ['assemble:site']
+      },
+      templates: {
+        files: ['<%= site.templates %>/**/*.hbs'],
+        tasks: ['assemble:site']
+      },
+      data: {
+        files: ['<%= site.data %>/*.{json,yml}'],
+        tasks: ['assemble:site']
+      },
+      assets: {
+        files: ['<%= site.assets %>/**/*.*'],
+        tasks: ['clean', 'copy']
       }
     }
   });

assets/public/js/application.js

@@ -36,7 +36,44 @@
 
     $('.docs-container [href=#]').click(function (e) {
       e.preventDefault()
-    })
+    });
+
+
+    $('.source-link').each(function () {
+      var id = $(this).data('content');
+      var content = $('<span>').append($('#' + id)).html();
+      $(this).attr('data-content', content);
+
+      // Keep popovers open when hovered
+      $(this).popover({
+        trigger: 'manual',
+        container: 'body',
+        placement: 'left',
+        template: '<div class="popover popover-source"> <div class="arrow"></div> <div class="popover-inner"> <h3 class="popover-title"></h3> <div class="popover-content"> <p></p> </div> </div> </div>',
+        html: true,
+        delay: {show: 50, hide: 750}
+      }).on('mouseenter', function () {
+        var self = this;
+        $(this).popover('show');
+        $(this).addClass('active');
+        $(this).addClass('popover-source');
+
+        $('.popover').on('mouseleave', function () {
+          $(self).popover('hide');
+          $(self).removeClass('active');
+        });
+
+      }).on('mouseleave', function () {
+        var self = this;
+        setTimeout(function () {
+          if (!$('.popover:hover').length) {
+            $(self).popover('hide');
+            $(self).removeClass('active');
+          }
+        }, 100);
+      });
+    });
+
 
     // back to top
     setTimeout(function () {

package.json

@@ -54,11 +54,9 @@
     "grunt-prettify": "~0.3.4",
     "grunt-repos": "~0.1.2",
     "grunt-sync-pkg": "~0.1.2",
-    "handlebars-helper-compose": "~0.2.12",
+    "handlebars": "^2.0.0-alpha.4",
     "handlebars-helper-datetime": "~0.1.0",
     "handlebars-helper-feed": "^0.1.1",
-    "handlebars-helper-md": "~0.2.0",
-    "handlebars-helper-rel": "~0.1.1",
     "handlebars-helper-slugify": "~0.2.0",
     "highlight.js": "^8.0.0",
     "lodash": "~2.4.1",
@@ -72,12 +70,8 @@
     "verbalize": "^0.1.2"
   },
   "keywords": [
-    "handlebars-helper-compose",
     "handlebars-helper-datetime",
     "handlebars-helper-feed",
-    "handlebars-helper-md",
-    "handlebars-helper-nav",
-    "handlebars-helper-rel",
     "handlebars-helper-slugify",
     "less css",
     "less",

styles/bootstrap/glyphicons.less

@@ -10,11 +10,11 @@
 // Import the fonts
 @font-face {
   font-family: 'Glyphicons Halflings';
-  src: url('@{icon-font-path}@{icon-font-name}.eot');
-  src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
-       url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
-       url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
-       url('@{icon-font-path}@{icon-font-name}.svg#glyphicons_halflingsregular') format('svg');
+  src: url('@{icon-font-path}/@{icon-font-name}.eot');
+  src: url('@{icon-font-path}/@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
+       url('@{icon-font-path}/@{icon-font-name}.woff') format('woff'),
+       url('@{icon-font-path}/@{icon-font-name}.ttf') format('truetype'),
+       url('@{icon-font-path}/@{icon-font-name}.svg#glyphicons_halflingsregular') format('svg');
 }
 
 // Catchall baseclass

styles/bootstrap/popovers.less

@@ -9,7 +9,6 @@
   left: 0;
   z-index: @zindex-popover;
   display: none;
-  max-width: @popover-max-width;
   padding: 1px;
   text-align: left; // Reset given new insertion method
   background-color: @popover-bg;

styles/bootstrap/type.less

@@ -218,7 +218,7 @@ abbr.initialism {
 blockquote {
   padding: (@line-height-computed / 2) @line-height-computed;
   margin: 0 0 @line-height-computed;
-  border-left: 5px solid @blockquote-border-color;
+  border-left: 4px solid @blockquote-border-color;
   p {
     font-size: (@font-size-base * 1.25);
     font-weight: 300;

styles/components/anchors.less

@@ -17,7 +17,8 @@
 
 
 
-@anchor-width:              200px;
+// allow the container to constrain the width
+@anchor-width:              100%;
 @anchor-distance:           80px;
 @anchor-distance-small:     40px;
 

styles/components/code-overrides.less

@@ -1,11 +1,43 @@
-// Neutralize background color to allow our syntax highlighter theme to do the work.
+//
+// Code
+// ---------------------------------------------------
+
+
+
+// Neutralize background color to allow our syntax
+// highlighter theme to do the work.
 pre code {
+  padding: 0;
+  color: inherit;
   background: transparent;
+  background-color: transparent;
+  border: 0;
 }
+code,
 pre {
-  background-color: #f8f8f8;
-  margin: 20px 0 20px 5px;
-  border: 1px solid #eee;
+  font-family: "PT Mono", Menlo, "Courier New", monospace;
+  font-size: 95%;
+}
+
+// inline code
+code {
+  padding: 2px 4px;
+  font-size: 85%;
+  color: #d44950;
+  background-color: #f7f7f9;
+  border-radius: .2rem;
+}
+
+// code blocks
+pre {
+  background-color: #f4f4f4;
+  margin: 20px -65px 30px;
+  padding: 20px 65px;
+
+  border: 1px solid @gray-lighter;
   border-radius: 0;
-  .box-shadow(-5px 0 0 #e2e2e2);
+  display: block;
+  line-height: 1.4;
+  white-space: pre;
+  white-space: pre-wrap;
 }

styles/components/docs-content.less

@@ -2,25 +2,29 @@
 // Content
 // --------------------------------------------------
 
+
+// This is the main content of the docs, usually the center column.
 .docs-content {
   position: relative;
-  overflow: visible;
+  overflow: hidden; // hide the overhang on code/pre blocks
 
   background: #fff;
   background-color: #fff;
   padding: 1px @content-gutter 80px @content-gutter; // add 1px top padding to prevent collapsing
   margin: 0 -15px;
 
+  border: none;
+  border-radius: 0 0 4px 4px;
+
   // remove padding from fluid containers when
   // inside content blocks.
   .container-fluid {
     padding: 0;
   }
 }
 
-// Add a box-shadow on "book styled" pages
 .docs-content {
-  box-shadow: 0 3px 7px rgba(0,0,0,.2);
+  .box-shadow(0 2px 4px rgba(0,0,0,.2));
 }
 
 .docs-section + .docs-section {

styles/components/docs-section.less

@@ -11,6 +11,49 @@
   margin-bottom: 0;
 }
 
+
+/**
+ * Add a width to docs-headings inside section-content,
+ * so we easily get the .anchor when hovering over headings.
+ *
+ * **Example**:
+ *
+ * ```html
+ * <div class="docs-section">
+ *   <div class="section-content">
+ *     <h3 class="docs-heading"></h3>
+ *   </div>
+ * </div>
+ * ```
+ */
+
+.section-content .docs-heading {
+  max-width: 60%;
+}
+
+
+
+/**
+ * Remove the width on major headings, so we don't cause them to wrap.
+ * This class is probably unnecessary, but we'll do it for insurance.
+ *
+ * **Example**:
+ *
+ * ```html
+ * <div class="docs-section">
+ *   <div class="page-heading">
+ *     <h3 class="docs-heading"></h3>
+ *   </div>
+ * </div>
+ * ```
+ */
+
+.page-heading .docs-heading {
+  max-width: auto;
+}
+
+
+
 h1[id] {
   margin-top: 0;
   padding-top: 20px;
@@ -29,11 +72,18 @@ h1[id] {
 
   // Override normal paragraph styles inside blockquotes
   // this needs to be extra specific
-  blockquote > p {
-    font-size: 14px;
-    font-family: @font-family-sans-serif;
-    line-height: 1.5;
-    padding: 10px;
+  blockquote {
+    position: relative;
+    margin: 0 1rem 1rem;
+    font-style: italic;
+    color: #7a7a7a;
+    > p {
+      font-size: @font-size-large;
+      font-family: @font-family-sans-serif;
+      line-height: 1.5;
+      margin: 0;
+      padding: 10px;
+    }
   }
 
   // Adjust headings inside .docs-sections
@@ -52,5 +102,9 @@ h1[id] {
   padding-top: 40px;
 }
 
-
+// individual section of content, usually represented
+// by h2, h3 etc.
+.section-content {
+  position: relative; // we need to set position relative for popovers
+}