Major overhaul of content and design

I’ve added some sections on:

- The importance of understanding the box model (CSS)
- Knowing when to float, and when to position (CSS)
- Generating unique IDs without timestamps (JS)
- Preserving middle mouse click functionality (UX)

I also:

- Made the website work without JavaScript enabled
- Cleaned up the overall design and interaction
- Re-wrote some pointers here and there
- Added pretty graphics to explanations
- Added some resources to the list

includes/css/prettify.css

@@ -0,0 +1,97 @@
+.com { color: #767e7e; }
+.lit { color: #195f91; }
+.pun, .opn, .clo { color: #767e7e; }
+.fun { color: #dc322f; }
+.str, .atv { color: #268bd2; }
+.kwd, .tag { color: #195f91; }
+.typ, .atn, .dec, .var { color: #CB4B16; }
+.pln { color: #767e7e; }
+.prettyprint {
+  background-color: #fefbf3;
+  padding: 15px 15px 15px 30px;
+  border: 1px solid rgba(0,0,0,.2);
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
+     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
+          box-shadow: 0 1px 2px rgba(0,0,0,.1);
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin: 0 0 0 40px;
+}
+/* IE indents via margin-left */
+ol.linenums li {
+  padding: 0 5px;
+  color: rgba(0,0,0,.15);
+  line-height: 20px;
+  -webkit-border-radius: 2px;
+     -moz-border-radius: 2px;
+          border-radius: 2px;
+}
+/* Alternate shading for lines */
+li.L1, li.L3, li.L5, li.L7, li.L9 {  }
+
+/*
+$base03:    #002b36;
+$base02:    #073642;
+$base01:    #586e75;
+$base00:    #657b83;
+$base0:     #839496;
+$base1:     #767e7e;
+$base2:     #eee8d5;
+$base3:     #fdf6e3;
+$yellow:    #b58900;
+$orange:    #cb4b16;
+$red:       #dc322f;
+$magenta:   #d33682;
+$violet:    #6c71c4;
+$blue:      #268bd2;
+$cyan:      #2aa198;
+$green:     #859900;
+*/
+
+
+/*
+#1d1f21 Background
+#282a2e Current Line
+#373b41 Selection
+#c5c8c6 Foreground
+#969896 Comment
+#cc6666 Red
+#de935f Orange
+#f0c674 Yellow
+#b5bd68 Green
+#8abeb7 Aqua
+#81a2be Blue
+#b294bb Purple
+*/
+
+
+/* DARK THEME */
+/* ---------- */
+
+.prettyprint-dark {
+  background-color: #1d1f21;
+  border: 0;
+  padding: 10px;
+}
+.prettyprint-dark .linenums li {
+  color: #444;
+}
+.prettyprint-dark .linenums li:hover {
+  background-color: #282a2e;
+}
+/* tags in html */
+.prettyprint-dark .kwd,
+.prettyprint-dark .tag { color: #cc6666; }
+/* html attr */
+.prettyprint-dark .typ,
+.prettyprint-dark .atn,
+.prettyprint-dark .dec,
+.prettyprint-dark .var { color: #de935f; }
+/* html attr values */
+.prettyprint-dark .str,
+.prettyprint-dark .atv { color: #b5bd68; }
+
+
+.com { color: purple; }

includes/css/styles.css

@@ -0,0 +1,87 @@
+body {
+	padding: 20px 0 5em 0;
+}
+.container {
+	width: 800px;
+}
+h1, h2, h3, h4, h5 {
+	font-family: 'Ubuntu Condensed';
+	color: #23262d;
+	text-shadow: 0 1px 0 rgba(255,255,255,0.01);
+}
+
+.topbar .brand {
+	font-family: 'Ubuntu Condensed';
+}
+
+h2 {
+	font-family: 'Ubuntu';
+	margin: 0;
+	padding: 2em 0 0 0;
+	font-size: 3em;
+}
+
+h3 {
+	padding-bottom: 4px;
+	border-bottom: 2px solid #23262d;
+	font-size: 1.8em;
+	position: relative;
+}
+
+h4 {
+	text-transform: uppercase;
+	font-size: 1em;
+	margin: 1.2em 0;
+}
+
+p {
+	font-size: 1.1em;
+	margin: 1.3em 0;
+	line-height: 1.7em;
+}
+
+li {
+	font-size: 1.1em;
+	line-height: 2em;
+}
+
+p code {
+	background: rgba(255,248,68,0.15);
+	padding: 0 2px;
+}
+.nav {
+	float: right !important;
+}
+.syntaxhighlighter {
+	padding: 1em;
+}
+
+.entry {
+	padding-top: 6em;
+}
+
+
+/* === DEEP LINKING === */
+.deepLink {
+	position: absolute;
+	right: 3px;
+	top: 0;
+	width: 32px;
+	height: 32px;
+	background: url(../images/link_16.png) center center no-repeat;
+	opacity: 0;
+	filter:alpha(opacity=0);
+		-webkit-transition: opacity 0.3s linear;
+		-moz-transition: opacity 0.3s linear;
+		-o-transition: opacity 0.3s linear;
+		transition: opacity 0.3s linear;
+}
+.entry:hover .deepLink {
+	opacity: 1;
+	filter:alpha(opacity=100);
+}
+
+p.imageFeature {
+	text-align: center;
+	padding: 1em 0;
+}

includes/js/bootstrap-scrollspy.js

@@ -0,0 +1,107 @@
+/* =============================================================
+ * bootstrap-scrollspy.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#scrollspy
+ * =============================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================== */
+
+
+!function ( $ ) {
+
+  "use strict"
+
+  var $window = $(window)
+
+  function ScrollSpy( topbar, selector ) {
+    var processScroll = $.proxy(this.processScroll, this)
+    this.$topbar = $(topbar)
+    this.selector = selector || 'li > a'
+    this.refresh()
+    this.$topbar.delegate(this.selector, 'click', processScroll)
+    $window.scroll(processScroll)
+    this.processScroll()
+  }
+
+  ScrollSpy.prototype = {
+
+      refresh: function () {
+        this.targets = this.$topbar.find(this.selector).map(function () {
+          var href = $(this).attr('href')
+          return /^#\w/.test(href) && $(href).length ? href : null
+        })
+
+        this.offsets = $.map(this.targets, function (id) {
+          return $(id).offset().top
+        })
+      }
+
+    , processScroll: function () {
+        var scrollTop = $window.scrollTop() + 10
+          , offsets = this.offsets
+          , targets = this.targets
+          , activeTarget = this.activeTarget
+          , i
+
+        for (i = offsets.length; i--;) {
+          activeTarget != targets[i]
+            && scrollTop >= offsets[i]
+            && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
+            && this.activateButton( targets[i] )
+        }
+      }
+
+    , activateButton: function (target) {
+        this.activeTarget = target
+
+        this.$topbar
+          .find(this.selector).parent('.active')
+          .removeClass('active')
+
+        this.$topbar
+          .find(this.selector + '[href="' + target + '"]')
+          .parent('li')
+          .addClass('active')
+      }
+
+  }
+
+  /* SCROLLSPY PLUGIN DEFINITION
+   * =========================== */
+
+  $.fn.scrollSpy = function( options ) {
+    var scrollspy = this.data('scrollspy')
+
+    if (!scrollspy) {
+      return this.each(function () {
+        $(this).data('scrollspy', new ScrollSpy( this, options ))
+      })
+    }
+
+    if ( options === true ) {
+      return scrollspy
+    }
+
+    if ( typeof options == 'string' ) {
+      scrollspy[options]()
+    }
+
+    return this
+  }
+
+  $(document).ready(function () {
+    $('body').scrollSpy('[data-scrollspy] li > a')
+  })
+
+}( window.jQuery || window.ender );

includes/js/interact.js

@@ -0,0 +1,33 @@
+/*globals $, prettyPrint*/
+
+$(function() {
+
+	"use strict";
+
+	prettyPrint();
+
+	$(".topbar a").click(function(e) {
+		// clunky overrides of hash link functionality to enable animated scrolling
+		var href = $(this).attr("href");
+		var targetObj = (href === "#") ? 0 : $($(this).attr("href"));
+		$.scrollTo(targetObj,300);
+		if (typeof history.replaceState === "function") {
+			history.replaceState(null,null,href);
+		}
+		e.preventDefault();
+	});
+
+	$(".entry").each(function(i,item) {
+		$('<a class="deepLink" href="#' + $(item).attr("id") + '"></a>').prependTo($(item).find("h3").eq(0));
+	});
+
+	$(".deepLink").live("click", function(e) {
+		var href = $(this).attr("href");
+		$.scrollTo($(this).parent().parent(),300);
+		if (typeof history.replaceState === "function") {
+			history.replaceState(null,null,href);
+		}
+		e.preventDefault();
+	})
+
+});