Permalink
Browse files

colophon - tidy up idea-example

  • Loading branch information...
1 parent 5b4654d commit 060b631d30fcf348a9f6df6fb981ac996002c9cc @desandro desandro committed Feb 23, 2011
Showing with 45 additions and 28 deletions.
  1. +17 −8 _layouts/colophon.html
  2. +28 −20 colophon/index.mdown
View
@@ -83,7 +83,7 @@
h2 {
margin-top: 1.0em;
- border-top: 1px solid #444;
+ border-top: 1px solid hsla( 0, 0%, 100%, 0.2 );
padding-top: 0.5em;
}
@@ -100,17 +100,24 @@
/*** Idea Example ***/
#idea-examples {
- padding: 10px;
- border: 1px solid #444;
+ border: 1px solid hsla( 0, 0%, 100%, 0.2 );
+ }
+
+ #idea-examples .pane {
+ width: 50%;
overflow: hidden;
+ float: left;
}
+ #idea-examples .pane:first-child { border-right: 1px solid hsla( 0, 0%, 100%, 0.2 ); }
+
+ #idea-examples .pane:nth-child(2) { margin-left: -1px; }
+
#idea-examples figure {
- display: inline-block;
width: 210px;
height: 140px;
border: 2px solid white;
- margin: 100px 70px;
+ margin: 100px auto;
position: relative;
-webkit-transform: skewY(-30deg) scaleX(0.85);
-moz-transform: skewY(-30deg) scaleX(0.85);
@@ -172,8 +179,10 @@
}
#idea-examples nav {
- position: relative;
- z-index: 100;
+ display: block;
+ background: hsla( 0, 0%, 100%, 0.2 );
+ padding: 5px;
+ clear: both;
}
/* Zoom */
@@ -286,7 +295,7 @@
{{ content }}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
- <script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
+ <script>!window.jQuery && document.write(unescape('%3Cscript src="../js/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
<script>
$(function(){
var $ideaExamples = $('#idea-examples'),
View
@@ -7,6 +7,10 @@ title: BeerCamp 2011 Colophon
### Follow along &rarr; [2011.beercamp.com/colophon](http://2011.beercamp.com/colophon)
+### Source available on GitHub &rarr; [github.com/nclud/2011.beercamp.com](http://github.com/nclud/2011.beercamp.com)
+
+ git clone https://github.com/nclud/2011.beercamp.com.git
+
<button id="toggle-presentation">Toggle presentation mode</button>
# {{ page.title }}
@@ -29,25 +33,29 @@ title: BeerCamp 2011 Colophon
+ Most browsers won't support this. Fall back to faux-3d transforms using 2D scale transforms
<div id="idea-examples" class="view1">
- <figure class="zoom">
- <h3>Zoom</h3>
- <ul>
- <li class="section1">Section 1</li>
- <li class="section2">Section 2</li>
- <li class="section3">Section 3</li>
- </ul>
- <div class="frame"></div>
- </figure>
-
- <figure class="three-d">
- <h3>3D</h3>
- <ul>
- <li class="section1">Section 1</li>
- <li class="section2">Section 2</li>
- <li class="section3">Section 3</li>
- </ul>
- <div class="frame"></div>
- </figure>
+ <div class="pane">
+ <figure class="zoom">
+ <h3>Zoom</h3>
+ <ul>
+ <li class="section1">Section 1</li>
+ <li class="section2">Section 2</li>
+ <li class="section3">Section 3</li>
+ </ul>
+ <div class="frame"> </div>
+ </figure>
+ </div>
+
+ <div class="pane">
+ <figure class="three-d">
+ <h3>3D</h3>
+ <ul>
+ <li class="section1">Section 1</li>
+ <li class="section2">Section 2</li>
+ <li class="section3">Section 3</li>
+ </ul>
+ <div class="frame"> </div>
+ </figure>
+ </div>
<nav>
<button>Section 1</button>
<button>Section 2</button>
@@ -200,7 +208,7 @@ Beercamper.prototype.handleEvent = function( event ) {
{% endhighlight %}
-## handleEvent
+### handleEvent
+ Binding event _without_ jQuery
+ See [Ajaxian: An alternative way to addEventListener](http://ajaxian.com/archives/an-alternative-way-to-addeventlistener)

0 comments on commit 060b631

Please sign in to comment.