index.html

<!doctype html>
<meta charset="utf-8">
<html>
  <head>
    <meta charset="utf-8" />
    <title>Intro: CSS Mastery</title>
    <link href="http://fonts.googleapis.com/css?family=Paytone+One:regular" rel="stylesheet" type="text/css">

<link rel="stylesheet" media="all" href="intro/css/intro.css"/>
<style>
.soc * {
  margin: 0 auto;
  text-align: center;
}
.soc div {
  box-sizing:border-box;
  width: 270px;
  height: 270px;
  padding: 95px 10px 70px;
  border-radius: 50%;
  background-color: hsla(241, 50%, 70%, 0.6);
}
.soc div:nth-of-type(2){
  background-color: hsla(141, 50%, 70%, 0.6);
}
.soc div:nth-of-type(3){
  background-color: hsla(341, 50%, 70%, 0.6);
  margin-bottom: -40px;
}
.object header {position:absolute; top: 10px; width: 100%; text-align:center; background-color: rgba(255,255,255,0.9); left:0;}
.objectlink {position:absolute;top:0; right:0;color: white; background-color: #E2007A; padding: 3px 5px; border: none;}
.slide.object {padding:0;}
.object object {width: 100%; height: 100%;}

.low pre {font-size: 1.9rem;}

.column2 {
column-count: 2;
}
.column2 li {margin-left: 1.5em;}

.slide i {
  height: 100px;
  width: 100px;
}
.columns {font-family: monospace;}
p, ul {font-family: helvetica}

</style>
</head>
<body>
  <div id="info">
    <p>Estelle Weyl &middot <a href="http://standardista.com">Standardista.com</a> &middot; <a href="http://www.twitter.com/estellevw">@estellevw</a> &middot;Press <span class="key">&rarr;</span> key to advance. <a href="http://estelle.github.io/cssmastery/">estelle.github.io/cssmastery/</a>
    </p>
  </div>

  <div id="presentation">
     <div id="flakes">
  	 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  </div>
   <div id="presentation-counter"></div>


<!--  -->
<div class="slide">
  <header><h1>Table of Contents</h1></header>
  <section class="content">   <ol class="column2">
    <li><a href="intro">Introduction</a></li>
    <li><a href="selectors">Selectors</a></li>
    <li><a href="selectors/#slide73">Specificity</a></li>
    <li><a href="generated">Generated Content</a></li>
    <li><a href="media">Media Queries</a></li>
    <li>Best Practices</li>
    <li>Debugging</li>
    <li><a href="colors">Colors &amp; Appearance </a></li>
    <li><a href="flexbox">Flexbox</a></li>
    
    <li><a href="tables">Tables</a></li>

    <li><a href="grid">Grids</a></li>
    <li><a href="borders">Backgrounds &amp; Borders </a></li>
    <li><a href="gradients">Gradients</a></li>
    <li><a href="transforms">Transforms</a></li>
    <li><a href="animations">Transitions &amp; Animation</a></li>
  <li><a href="other">Other Features</a></li>
</ol>
  </section>
</div>

  <div class="slide transparent intro">
     <div class="snowman"></div>
     <header>
      <h1>CSS in Depth V2</h1>
<a href="http://estelle.github.com/cssintro/">estelle.github.com/cssmastery/</a>
     </header>
    </div>


<div class="slide normal">
<header><h1>Me</h1></header>
<section class="content">
<h1 class="textmask">Estelle Weyl</h1>
<h2><a href="http://www.standardista.com">www.standardista.com</a></h2>
<h2><a href="http://www.twitter.com/estellevw">@estellevw</a></h2>
<h2><a href="http://www.twitter.com/standardista">@standardista</a></h2>
<div style="float:right"><img src="http://akamaicovers.oreilly.com/images/9780987467485/cat.gif" alt="HTML5 and CSS3 for the Real World"><img src="http://akamaicovers.oreilly.com/images/0636920012726/rc_cat.gif" alt="CSS: The Definitive Guide" style="margin: 0 20px;"/><img src="http://akamaicovers.oreilly.com/images/0636920021711/cat.gif" alt="MObile HTML5" style="margin: 0 20px;"/><img src="http://akamaicovers.oreilly.com/images/0636920025955/cat.gif" alt="Web Performance Daybook"/></div>
</section>
</div>


<div class="slide transparent">
     <div class="snowman"></div>
     <header><h1>CSS3 Features Displaying now?</h1></header>
     <section class="content">
     <ul class="imp">
     	<li>CSS3 Selectors</li>
     	<li>linear gradients</li>
     	<li>opacity </li>
        <li>RGBA colors</li>
     	<li>border-radius</li>
		<li>transforms</li>
		<li>transitions</li>
    <li>animations</li>
    <li>text-shadow</li>
    <li>fonts</li>
     </ul>
     <p class="notes">Opacity is from CSS2</p>
     </section>
</div>

<div class="slide intro">
  <header><h1>Cascading Style Sheets (CSS)</h1>
    <h2>Stylesheet language used to describe the presentation of a document written in HTML</h2></h1></header>
    <section class="content">
    </section>
</div>


<div class="slide">
  <header><h1>HTML</h1></header>
    <section class="content">
      <pre>&lt;div id=&quot;flakes&quot;&gt;
   &lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;
   &lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;
   &lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;
   &lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="snowman"&gt;&lt;/div&gt;</pre>
    </section>
</div>

<div class="slide">
  <header><h1>Separation of Concerns</h1></header>
    <section class="content soc">
      <div style="float: left;"><h1>Content</h1><h3>HTML</h3></div>
      <div style="float: right;"><h1 style="letter-spacing: -3px">Presentation</h1><h3>CSS</h3></div>
      <div style="clear: both;"><h1>Behavior</h1><h3>JavaScript</h3></div>
      <p>CSS tells the browser how HTML content is to be presented to the user</p>
    </section>
</div>

<div class="slide">
  <header><h1>Including CSS</h1></header>
    <section class="content"><p>External Style Sheet</p>
<pre>&lt;link href=“stylesheet” href=“path/file.css” /&gt;</pre>
<p>
Embedded Styles</p>
<pre>&lt;style>
   body {}
&lt;/style></pre>

<p>Inline Styles</p>
<pre>&lt;p style=“color: black”>Lorem ipsum&lt;/p></pre>
    </section>
</div>


<div class="slide">
  <header><h1>Why Use External Stylesheets:</h1></header>
    <section class="content">
      <ul>
        <li>Allows reusability</li>
        <li>Eases maintainability</li>
        <li>Changes are sitewide</li>
        <li>Changes are instantaneous</li>
        <li>Interchangeable presentation layer</li>
      </ul>
    </section>
</div>
<div class="slide object">
     <object data="https://www.csszengarden.com/999/"></object>
     <a href="http://www.csszengarden.com/999/" target="play" class="objectlink">Open in separate window</a>
</div>
<div class="slide object">
     <object data="intro/files/csszen.txt"></object>
     <a href="view-source:http://www.csszengarden.com/999/" target="play" class="objectlink">Open in separate window</a>
</div>
<div class="slide low">
  <header><h1>Linking to CSS</h1></header>
    <section class="content">
      <pre contenteditable>&lt;link rel="stylesheet" 
    media="screen" 
    href="/205/205.css"
    <strike>type="text/css"</strike> /&gt;</pre>
    </section>
</div>
<div class="slide object">
     <object data="https://www.csszengarden.com/205/"></object>
     <a href="http://www.csszengarden.com/205 /" target="play" class="objectlink">Open in separate window</a>
</div>
<div class="slide object">
     <object data="https://www.csszengarden.com/216/"></object>
     <a href="http://www.csszengarden.com/216/" target="play" class="objectlink">Open in separate window</a>
</div>

<div class="slide object">
     <object data="intro/files/simpleexample.html"></object>
     <a href="files/simpleexample.html" target="play" class="objectlink">Open in separate window</a>
</div>

<div class="slide low">
  <header><h1></h1></header>
    <section class="content"><pre contenteditable>selectorA {
   property1: value1;
   property2: value2;
}

selectorB {
   property1: value3;
   property2: value4;
}</pre>
    </section>
  </div>


<div class="slide low">
  <header><h1></h1></header>
    <section class="content"> <pre contenteditable>selector:pseudo-class::pseudo-element {
    -vendor-property: value;
}

selector[attribute],
selector ~ relation {
    property: -vendor-value;
    -vendor-property: -vendor-value;
    -vendor-property: weirdsyntax;
}</pre>
    </section>
</div>


  <div class="slide low">
  <header><h1></h1></header>
    <section class="content"><pre contenteditable>p {
   margin: 40px;
   color: magenta;
}

input[type="search"] {
   border-radius: 5px;
   background-image: url(image/search.jpg);
}</pre>
    </section>
  </div>


<div class="slide low">
  <header><h1></h1></header>
    <section class="content"><pre contenteditable>@at-rule {
    property: value;
 }

@at-rule {
    selector {
      property: value;
    }
    selector2 {
      property: value;
    }
 }</pre>
    </section>
</div>


<div class="slide">
  <header><h1>Tools for generating CSS?</h1></header>
    <section class="content">
    </section>
</div>


<div class="slide">
  <header><h1>Text Editors</h1></header>
    <section class="content">
<ul class="column2">
<li><a href="http://aptana.com/">Aptana Studio</a>*</li>
<li><a href="http://www.barebones.com/products/bbedit/‎">BBEdit</a></li>
<li><a href="http://brackets.io/">Brackets</a>*</li>
<li><a href="https://panic.com/coda/">Coda</a></li>
<li><a href="http://www.codelobster.com/">Codelobster</a> PHP</li>
<li><a href="http://macrabbit.com/espresso/">Espresso/CSSEdit</a></li>
<li><a href="http://notepad-plus-plus.org/">Notepad++</a>*</li>
<li><a href="http://www.sublimetext.com/3">Sublime Text</a></li>
<li><a href="http://macromates.com/">TextMate</a></li>
<li><a href="http://www.ultraedit.com/">UltraEdit</a></li>
</ul>
      <p>WYSIWYG</p>
        <ul class="column2">
          <li>Dreamweaver</li>
          <li>Aloha Editor</li>
          <li>Maqetta</li>
          <li>BlueGriffon</li></ul>
      <p>Don't use word processing applications!!</p>

    </section>
</div>


<div class="slide">
  <header><h1>Preprocessors</h1></header>
    <section class="content">
      <p>CSS preprocessors add functionality additions like variables, nesting, and mixins (during development).</p>
      <ul>
        <li>Sass</li>
        <li>Stylus</li>
        <li>LESS</li>
      </ul>
    </section>
</div>

<div class="slide">
  <header><h1>Postprocessors?</h1></header>
    <section class="content">
      
    </section>
</div>

<!-- Debuggers -->
<div class="slide normal">
 <header><h1>Debuggers</h1></header>
 <section class="content">
<ul>
  <li>Firefox ➫ Firebug ➫ Firefox Developer Tools</li>
  <li>Opera ➫ DragonFly</li>
    <li>IE and EDGE ➫ F-12</li>
    <li>Safari ➫ Web Inspector</li>
    <li>Chrome ➫ Developer Tools</li>
    <li>Mobile ➫ Weinre</li>
    <li>Mobile ➫ Remote debugging by IP</li>
    <li>Mobile ➫ Tethered debugging</li>
</ul>
 </section>
</div>


<div class="slide object">
     <object data="https://www.fontsquirrel.com/tools/webfont-generator"></object>
     <header><h1>CSS Writing Tool</h1></header>
     <a href="http://www.fontsquirrel.com/tools/webfont-generator" target="play" class="objectlink">Open in separate window</a>
</div>

<div class="slide object">
     <object data="https://codepen.io"></object>
     <header><h1>Codepen</h1></header>
     <a href="https://codepen.io" target="play" class="objectlink">Open in separate window</a>
</div>


<div class="slide dots">
  <header><h1>Table of Content</h1></header>
  <section>
   <ol class="column2">
    <li><a href="intro">Introduction</a></li>
    <li><a href="selectors">Selectors</a></li>
    <li><a href="selectors/#slide73">Specificity</a></li>
    <li><a href="generated">Generated Content</a></li>
    <li><a href="media">Media Queries</a></li>
    <li>Best Practices</li>
    <li>Debugging</li>
    <li><a href="colors">Colors &amp; Appearance </a></li>
    <li><a href="flexbox">Flexbox</a></li>
    
    <li><a href="tables">Tables</a></li>

    <li><a href="grid">Grids</a></li>
    <li><a href="borders">Backgrounds &amp; Borders </a></li>
    <li><a href="gradients">Gradients</a></li>
    <li><a href="transforms">Transforms</a></li>
    <li><a href="animations">Transitions &amp; Animation</a></li>
  <li><a href="other">Other Features</a></li>
</ol>
  </section>
</div>


   </div>

  </div>


<!-- ###################################################################

	    END

     ################################################################### -->
<script>


  (function() {
  var doc = document;
  var disableBuilds = true;

  var ctr = 0;
  var spaces = /\s+/, a1 = [''];

  var toArray = function(list) {
    return Array.prototype.slice.call(list || [], 0);
  };

  var byId = function(id) {
    if (typeof id == 'string') { return doc.getElementById(id); }
    return id;
  };

  var query = function(query, root) {
    if (!query) { return []; }
    if (typeof query != 'string') { return toArray(query); }
    if (typeof root == 'string') {
      root = byId(root);
      if(!root){ return []; }
    }

    root = root || document;
    var rootIsDoc = (root.nodeType == 9);
    var doc = rootIsDoc ? root : (root.ownerDocument || document);

    // rewrite the query to be ID rooted
    if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) {
      root.id = root.id || ('qUnique' + (ctr++));
      query = '#' + root.id + ' ' + query;
    }
    // don't choke on something like ".yada.yada >"
    if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; }

    return toArray(doc.querySelectorAll(query));
  };

  var strToArray = function(s) {
    if (typeof s == 'string' || s instanceof String) {
      if (s.indexOf(' ') < 0) {
        a1[0] = s;
        return a1;
      } else {
        return s.split(spaces);
      }
    }
    return s;
  };

  var addClass = function(node, classStr) {
    classStr = strToArray(classStr);
    var cls = ' ' + node.className + ' ';
    for (var i = 0, len = classStr.length, c; i < len; ++i) {
      c = classStr[i];
      if (c && cls.indexOf(' ' + c + ' ') < 0) {
        cls += c + ' ';
      }
    }
    node.className = cls.trim();
  };

  var removeClass = function(node, classStr) {
    var cls;
    if (classStr !== undefined) {
      classStr = strToArray(classStr);
      cls = ' ' + node.className + ' ';
      for (var i = 0, len = classStr.length; i < len; ++i) {
        cls = cls.replace(' ' + classStr[i] + ' ', ' ');
      }
      cls = cls.trim();
    } else {
      cls = '';
    }
    if (node.className != cls) {
      node.className = cls;
    }
  };

  var toggleClass = function(node, classStr) {
    var cls = ' ' + node.className + ' ';
    if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) {
      removeClass(node, classStr);
    } else {
      addClass(node, classStr);
    }
  };

  var ua = navigator.userAgent;
  var isFF = parseFloat(ua.split('Firefox/')[1]) || undefined;
  var isWK = parseFloat(ua.split('WebKit/')[1]) || undefined;
  var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined;

  var canTransition = (function() {
  var ver = parseFloat(ua.split('Version/')[1]) || undefined;
  // test to determine if this browser can handle CSS transitions.
  var cachedCanTransition =
    (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
    return function() { return cachedCanTransition; }
  })();

  //
  // Slide class
  //
  var Slide = function(node, idx) {
    this._node = node;
    if (idx >= 0) {
      this._count = idx + 1;
    }
    if (this._node) {
      addClass(this._node, 'slide distant-slide');
    }
    this._makeCounter();
    this._makeBuildList();
  };

  Slide.prototype = {
    _node: null,
    _count: 0,
    _buildList: [],
    _visited: false,
    _currentState: '',
    _states: [ 'distant-slide', 'far-past',
               'past', 'current', 'future',
               'far-future', 'distant-slide' ],
    setState: function(state) {
      if (typeof state != 'string') {
        state = this._states[state];
      }
      if (state == 'current' && !this._visited) {
        this._visited = true;
        this._makeBuildList();
      }
      removeClass(this._node, this._states);
      addClass(this._node, state);
      this._currentState = state;

      // delay first auto run. Really wish this were in CSS.
      /*
      this._runAutos();
      */
      var _t = this;
      setTimeout(function(){ _t._runAutos(); } , 400);
    },
    _makeCounter: function() {
      if(!this._count || !this._node) { return; }
      var c = doc.createElement('span');
      c.innerHTML = this._count;
      c.className = 'counter';
      this._node.appendChild(c);
    },
    _makeBuildList: function() {
      this._buildList = [];
      if (disableBuilds) { return; }
      if (this._node) {
        this._buildList = query('[data-build] > *', this._node);
      }
      this._buildList.forEach(function(el) {
        addClass(el, 'to-build');
      });
    },
    _runAutos: function() {
      if (this._currentState != 'current') {
        return;
      }
      // find the next auto, slice it out of the list, and run it
      var idx = -1;
      this._buildList.some(function(n, i) {
        if (n.hasAttribute('data-auto')) {
          idx = i;
          return true;
        }
        return false;
      });
      if (idx >= 0) {
        var elem = this._buildList.splice(idx, 1)[0];
        var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd');
        var _t = this;
        if (canTransition()) {
          var l = function(evt) {
            elem.parentNode.removeEventListener(transitionEnd, l, false);
            _t._runAutos();
          };
          elem.parentNode.addEventListener(transitionEnd, l, false);
          removeClass(elem, 'to-build');
        } else {
          setTimeout(function() {
            removeClass(elem, 'to-build');
            _t._runAutos();
          }, 400);
        }
      }
    },
    buildNext: function() {
      if (!this._buildList.length) {
        return false;
      }
      removeClass(this._buildList.shift(), 'to-build');
      return true;
    },
  };

  //
  // SlideShow class
  //
  var SlideShow = function(slides) {
    this._slides = (slides || []).map(function(el, idx) {
      return new Slide(el, idx);
    });

    var h = window.location.hash;
    try {
      this.current = parseInt(h.split('#slide')[1], 10);
    }catch (e) { /* squeltch */ }
    this.current = isNaN(this.current) ? 1 : this.current;
    var _t = this;
    doc.addEventListener('keydown',
        function(e) { _t.handleKeys(e); }, false);
    doc.addEventListener('mousewheel',
        function(e) { _t.handleWheel(e); }, false);
    doc.addEventListener('DOMMouseScroll',
        function(e) { _t.handleWheel(e); }, false);
    doc.addEventListener('touchstart',
        function(e) { _t.handleTouchStart(e); }, false);
    doc.addEventListener('touchend',
        function(e) { _t.handleTouchEnd(e); }, false);
    window.addEventListener('popstate',
        function(e) { _t.go(e.state); }, false);
    this._update();
  };

  SlideShow.prototype = {
    _slides: [],
    _update: function(dontPush) {
      document.querySelector('#presentation-counter').innerText = this.current;
      if (history.pushState) {
        if (!dontPush) {
          history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current);
        }
      } else {
        window.location.hash = 'slide' + this.current;
      }
      for (var x = this.current-1; x < this.current + 7; x++) {
        if (this._slides[x-4]) {
          this._slides[x-4].setState(Math.max(0, x-this.current));
        }
      }
    },

    current: 0,
    next: function() {
      if (!this._slides[this.current-1].buildNext()) {
        this.current = Math.min(this.current + 1, this._slides.length);
        this._update();
      }
    },
    prev: function() {
      this.current = Math.max(this.current-1, 1);
      this._update();
    },
    go: function(num) {
      if (!num) return;
      if (history.pushState && this.current != num) {
        history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current);
      }
      this.current = num;
      this._update(true);
    },

    _notesOn: false,
    showNotes: function() {
      var isOn = this._notesOn = !this._notesOn;
	  console.log(isOn);
      query('.notes').forEach(function(el) {
        el.style.display = (isOn) ? 'inline-block' : 'none';
	    console.log(isOn);
      });
    },
    switch3D: function() {
      toggleClass(document.body, 'three-d');
    },
    handleWheel: function(e) {
      var delta = 0;
      if (e.wheelDelta) {
        delta = e.wheelDelta/120;
        if (isOpera) {
          delta = -delta;
        }
      } else if (e.detail) {
        delta = -e.detail/3;
      }

      if (delta > 0 ) {
        this.prev();
        return;
      }
      if (delta < 0 ) {
        this.next();
        return;
      }
    },
	addNotes: function(){
		var ta = document.createElement('textarea');
		var currentSlide = document.querySelector('.current section');
		var key = 'snow' +  window.location.hash;
		ta.value = window.localStorage.getItem(key) || '';

		ta.addEventListener('keyup', function(){
			//console.log(key + ' ' + ta.value)
		    window.localStorage.setItem(key,ta.value);
		});
		currentSlide.appendChild(ta);
	},

    handleKeys: function(e) {

      if (/^(input|textarea)$/i.test(e.target.nodeName)) return;

      switch (e.keyCode) {
        case 37: // left arrow
          this.prev(); break;
        case 39: // right arrow
        case 32: // space
          this.next(); break;
        case 50: // 2
          this.showNotes(); break;
        case 51: // 3
          this.switch3D(); break;
        case 52: // 4
          this.switch3D(); break;
      }
    },
    _touchStartX: 0,
    handleTouchStart: function(e) {
      this._touchStartX = e.touches[0].pageX;
    },
    handleTouchEnd: function(e) {
      var delta = this._touchStartX - e.changedTouches[0].pageX;
      var SWIPE_SIZE = 150;
      if (delta > SWIPE_SIZE) {
        this.next();
      } else if (delta< -SWIPE_SIZE) {
         this.prev();
       }
    },
  };

  // Initialize
  var slideshow = new SlideShow(query('.slide'));
})();


  </script>

  </body>
</html>