kangax · kangax · Mar 1, 2014 · Feb 28, 2014 · Feb 28, 2014 · Mar 1, 2014
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/_site
diff --git a/_config.yml b/_config.yml
@@ -1,6 +1,8 @@
-markdown: rdiscount
-pygments: true
-permalink: ./:title
-name: Perfection Kills
-description: "Javascript rants and findings, by kangax"
-url: http://perfectionkills.com
+markdown:       rdiscount
+pygments:       true
+permalink:      ./:title
+name:           Perfection Kills
+description:    "Javascript rants and findings, by kangax"
+url:            http://perfectionkills.com
+
+exclude:        ["README"]
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,7 +6,7 @@
 
     <title>{{ site.name }}</title>
 
-    <link rel="stylesheet" href="./css/master.css">
+    <link rel="stylesheet" href="/css/master.css">
     <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}/feed.xml">
 
     <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -28,6 +28,6 @@
 
     {% include footer.html %}
 
-    <script src="./js/master.js"></script>
+    <script src="/js/master.js"></script>
   </body>
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -6,7 +6,7 @@
 
     <title>{{ page.title }} — {{ site.name }}</title>
 
-    <link rel="stylesheet" href="../css/master.css">
+    <link rel="stylesheet" href="/css/master.css">
     <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}/feed.xml">
 
     <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -66,7 +66,7 @@
 
     {% include footer.html %}
 
-    <script src="../js/master.js"></script>
+    <script src="/js/master.js"></script>
 
   </body>
 </html>
diff --git a/css/master.css b/css/master.css
@@ -6,12 +6,12 @@ body {
 }
 
 #outer-wrapper { border-top: 7px solid #ddd; }
-#wrapper { width: 860px; margin: 10px auto; padding: 10px; }
+#wrapper { width: 860px; margin: 10px auto; padding: 10px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box}
 
-.blog-title { margin: 0; padding-bottom: 0; margin-right: 8px; display: inline; }
+.blog-title { padding-bottom: 0; margin-right: 8px; display: inline; }
 .blog-title a { color: #333; text-decoration: none; }
 .blog-title a:hover, .blog-title a:focus { text-shadow: #FFC8C8 0 0 1px; }
-.blog-author { margin: 0; display: inline; vertical-align: baseline; font-style: italic; }
+.blog-author { display: inline; vertical-align: baseline; font-style: italic; }
 .blog-slogan { clear: both; margin-top: 0; font-size: 0.9em; text-transform: lowercase; font-variant: small-caps; color: #f06; margin-left: 2px; margin-bottom: 60px; }
 
 h2, h3, h4, h5 { position: relative; }

diff --git a/demos/in-place-select/css/master.css b/demos/in-place-select/css/master.css
@@ -51,7 +51,7 @@ pre {
   border: 1px solid #ddd;
   padding: 0.3em;
   color: #555;
-  
+
 }
 em {
   color: #f55;

diff --git a/demos/in-place-select/images/stars.png b/demos/in-place-select/images/stars.png
diff --git a/demos/in-place-select/index.html b/demos/in-place-select/index.html
@@ -4,21 +4,21 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
     <title>Proto.IPS :: In-place-select controls made easy</title>
-    
+
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <meta name="keywords" content="" />
     <meta name="description" content="" />
-    
+
     <script src="js/prototype.js" type="text/javascript"></script>
     <script src="js/ips.js" type="text/javascript"></script>
     <script src="js/master.js" type="text/javascript"></script>
-        
+
     <link rel="stylesheet" href="css/master.css" type="text/css" media="all" />
     <link rel="stylesheet" href="css/ips.css" type="text/css" media="all" />
   </head>
   <body>
     <h2>Proto.IPS :: Unobtrusive in-place-select widget</h2>
-    <div id="status"></div> 
+    <div id="status"></div>
     <div>
       <p>Proto.IPS is a nice little widget which can be used for in place selection.</p>
       <p>The idea is shamelessly stolen from gmail chat control (for setting user status) behavior.</p>
@@ -50,7 +50,7 @@ <h4>Config object (passed as a second parameter):</h4>
             </dd>
           <dt><code>afterUpdate(String value)</code></dt>
             <dd>
-              called <strong>after</strong> element is updated. 
+              called <strong>after</strong> element is updated.
               new value is passed as a first parameter
             </dd>
           <dt><code>afterCreate</code></dt>
@@ -66,16 +66,16 @@ <h4>Example</h4>
   new Proto.IPS(element, {
     options: [
       {text: 'Available', className: 'on'},
-      {text: 'Free for chat', className: 'on'}, 
+      {text: 'Free for chat', className: 'on'},
       {text: 'Away', className: 'half'},
       {text: 'Lunch', className: 'half'},
-      {text: 'Not available', className: 'off'}, 
+      {text: 'Not available', className: 'off'},
       {text: 'Occupied', className: 'off'}
     ]
   });
 </pre>
       <div>
-        All callbacks are bounded to the actual instance. 
+        All callbacks are bounded to the actual instance.
         Here's what you might want to access:
         <dl>
           <dt><code>this.element</code></dt>
@@ -87,7 +87,7 @@ <h4>Example</h4>
           <dt><code>this.input</code></dt>
             <dd>input field (<em>ips_input</em> className)</dd>
           <dt><code>this.wrapper</code></dt>
-            <dd>div which is wrapped around original element and is assigned an <em>ips_wrapper</em> className. 
+            <dd>div which is wrapped around original element and is assigned an <em>ips_wrapper</em> className.
               This element holds all of the control structures (options list, input field, original element and arrow trigger) </dd>
           <dt><code>this.options</code></dt>
             <dd>array of options (with last added being on top)</dd>

diff --git a/demos/in-place-select/js/ips.js b/demos/in-place-select/js/ips.js
@@ -9,33 +9,33 @@
 if (Object.isUndefined(Proto)) { var Proto = { } };
 
 Proto.IPS = Class.create({
-  
+
   initialize: function(container) {
-    
+
     var e = Prototype.emptyFunction;
-    
+
     this.config = Object.extend({
       beforeShow: e, afterShow: e, beforeUpdate: e,
       afterUpdate: e, afterCreate: e
     }, arguments[1] || { });
-    
+
     this.container = $(container);
     this.options = [];
     this.active = false;
-    
+
     this.build();
     this.buildList();
-    
+
     this.element.update(this.options[0].text);
-    
+
     this.config.afterCreate.call(this);
-    
+
     this.initMouseEvents();
     this.initKeyEvents();
   },
-  
+
   build: function() {
-    
+
     this.container.insert(
       this.wrapper = new Element('div', {className: 'ips_wrapper'})
         .insert(this.element = new Element('div', {
@@ -49,33 +49,33 @@ Proto.IPS = Class.create({
           className: 'ips_input hidden'
         }))
     )
-     
+
     /*
     <div class="ips_wrapper">
       <div class="ips_text"></div>
       <div class="ips_trigger">▼</div>
       <input type="text" class="ips_input" style="display:none"></input>
     </div>
-    
+
     */
   },
-  
+
   buildList: function() {
-    
+
     this.optionsEl = new Element('ul', {className: 'ips_options_list'});
-    
+
     this.config.options.each(function(option) {
       this.optionsEl.insert(new Element('li', {
         className: option.className || ''
       }).update(option.text));
       this.options.push(option);
     }.bind(this));
-    
+
     this.wrapper.insert(this.optionsEl.hide());
   },
-  
+
   initMouseEvents: function() {
-    
+
     this.wrapper
       .observe('mouseover', Element.addClassName.bind(this, this.wrapper, 'over'))
       .observe('mouseout', function() {
@@ -85,21 +85,21 @@ Proto.IPS = Class.create({
       .observe('click', function(e) {
         this[e.findElement('.ips_trigger') ? 'showOptions' : 'showInput']();
       }.bind(this))
-    
+
     this.trigger
       .observe('mouseover', Element.addClassName.bind(this, this.trigger, 'over'))
       .observe('mouseout', function() {
         if (this.active) return;
         this.trigger.removeClassName('over');
       }.bind(this))
-    
+
     document.observe('click', function(e) {
       if (this.active && !e.findElement('.ips_wrapper'))
         this.save($F(this.input));
     }.bind(this))
-    
+
     if (!this.optionsEl) return;
-    
+
     this.optionsEl
       .observe('click', function(e) {
         e.stop();
@@ -110,12 +110,12 @@ Proto.IPS = Class.create({
          this.optionsEl.select('li').invoke('removeClassName', 'over');
          e.target.addClassName('over');
       }.bind(this))
-    
+
     this.input
       .observe('focus', this.showInput.bind(this))
       .observe('blur', this.hide.bind(this))
   },
-  
+
   initKeyEvents: function() {
     var selected, next, prev;
     document.observe('keyup', function(e) {
@@ -125,7 +125,7 @@ Proto.IPS = Class.create({
         this.save($F(this.input));
       /*if (e.keyCode == Event.KEY_DOWN) {
         selected = this.optionsEl.down('.over');
-        
+
         this.optionsEl.select('li').invoke('removeClassName', 'over');
         if (var next = selected.next()) {
           next.addClassName('over');
@@ -136,24 +136,24 @@ Proto.IPS = Class.create({
       }*/
     }.bind(this))
   },
-  
+
   showInput: function() {
     if (!this.input.hasClassName('hidden')) return;
     this.input.setValue(this.element.innerHTML).removeClassName('hidden').activate();
     this.active = true;
   },
-  
+
   hide: function() {
     this.input.addClassName('hidden');
     this.optionsEl.hide();
     this.active = false;
     this.wrapper.removeClassName('over');
     this.trigger.removeClassName('over');
   },
-  
+
   save: function(value) {
     this.config.beforeUpdate.call(this, value);
-    var exists = this.options.any(function(option){ 
+    var exists = this.options.any(function(option){
       return option.text == value;
     })
     if (!exists && !value.blank()) {
@@ -165,25 +165,25 @@ Proto.IPS = Class.create({
     }
     this.hide();
   },
-  
+
   showOptions: function() {
-    
+
     if (!this.optionsEl) return;
-    
+
     if (this.optionsEl.visible()) {
       this.optionsEl.hide();
       this.active = false;
       return;
-    }  
-    
+    }
+
     this.config.beforeShow.call(this);
-    
+
     this.optionsEl.show();
     this.active = true;
-    
+
     this.config.afterShow.call(this);
   },
-  
+
   addOption: function(option) {
     this.options.push(option);
     this.optionsEl.insert({

diff --git a/demos/in-place-select/js/master.js b/demos/in-place-select/js/master.js
@@ -2,10 +2,10 @@ document.observe('dom:loaded', function() {
   new Proto.IPS('status', {
     options: [
       {text: 'Available', className: 'on'},
-      {text: 'Free for chat', className: 'on'}, 
+      {text: 'Free for chat', className: 'on'},
       {text: 'Gone fishing...', className: 'half'},
       {text: 'Away', className: 'half'},
-      {text: 'Not available', className: 'off'}, 
+      {text: 'Not available', className: 'off'},
       {text: 'Occupied', className: 'off'}
     ],
     afterCreate: function() {
@@ -18,9 +18,9 @@ document.observe('dom:loaded', function() {
       var origWidth = parseInt(this.input.getStyle('width')),
           calcWidth = this.input.getWidth(),
           dx = calcWidth - origWidth;
-      
+
       alert([this.input.getStyle('padding'), this.input.getStyle('paddingLeft')]);
-      
+
       // make sure padding/borders don't break input element's width
       this.input.setStyle({
         width: origWidth - dx - 2 + 'px'