Added static and live examples

stylesheets/example.css

@@ -0,0 +1,149 @@
+@charset "UTF-8";
+/* usual styles */
+/* LESS - http://lesscss.org style sheet */
+/* Palette color codes */
+/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */
+/* Feel free to copy&paste color codes to your application */
+/* MIXINS */
+/* As hex codes */
+/* Main Primary color */
+/* Main Secondary color (1) */
+/* Main Secondary color (2) */
+/* As RGBa codes */
+/* Main Primary color */
+/* Main Secondary color (1) */
+/* Main Secondary color (2) */
+/* Generated by Paletton.com ├é┬® 2002-2014 */
+/* http://paletton.com */
+/* line 1, ../sass/_viewport.scss */
+#interactive.viewport {
+  width: 640px;
+  height: 480px;
+}
+
+/* line 6, ../sass/_viewport.scss */
+#interactive.viewport canvas, video {
+  float: left;
+  width: 640px;
+  height: 480px;
+}
+/* line 10, ../sass/_viewport.scss */
+#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
+  margin-left: -640px;
+}
+
+/* line 16, ../sass/_viewport.scss */
+.controls .reader-group {
+  float: right;
+  border: none;
+}
+
+/* line 22, ../sass/_viewport.scss */
+#result_strip {
+  margin: 10px 0;
+  border-top: 1px solid #EEE;
+  border-bottom: 1px solid #EEE;
+  padding: 10px 0;
+}
+/* line 28, ../sass/_viewport.scss */
+#result_strip ul.thumbnails {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  width: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+/* line 37, ../sass/_viewport.scss */
+#result_strip ul.thumbnails > li {
+  display: inline-block;
+  vertical-align: middle;
+  width: 160px;
+}
+/* line 41, ../sass/_viewport.scss */
+#result_strip ul.thumbnails > li .thumbnail {
+  padding: 5px;
+  margin: 4px;
+  border: 1px dashed #CCC;
+}
+/* line 46, ../sass/_viewport.scss */
+#result_strip ul.thumbnails > li .thumbnail img {
+  max-width: 140px;
+}
+/* line 49, ../sass/_viewport.scss */
+#result_strip ul.thumbnails > li .thumbnail .caption {
+  white-space: normal;
+}
+/* line 51, ../sass/_viewport.scss */
+#result_strip ul.thumbnails > li .thumbnail .caption h4 {
+  text-align: center;
+  word-wrap: break-word;
+  height: 40px;
+  margin: 0px;
+}
+/* line 61, ../sass/_viewport.scss */
+#result_strip ul.thumbnails:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+@media (min-width: 604px) and (max-width: 1024px) {
+  /* tablet styles */
+}
+@media (max-width: 603px) {
+  /* line 2, ../sass/phone/_core.scss */
+  #container {
+    width: 300px;
+    margin: 10px auto;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  /* line 9, ../sass/phone/_core.scss */
+  #container form.voucher-form input.voucher-code {
+    width: 180px;
+  }
+}
+@media (max-width: 603px) {
+  /* line 5, ../sass/phone/_viewport.scss */
+  #interactive.viewport {
+    width: 300px;
+    height: 300px;
+    overflow: hidden;
+  }
+
+  /* line 11, ../sass/phone/_viewport.scss */
+  #interactive.viewport canvas, video {
+    margin-top: -50px;
+    width: 300px;
+    height: 400px;
+  }
+  /* line 15, ../sass/phone/_viewport.scss */
+  #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
+    margin-left: -300px;
+  }
+
+  /* line 20, ../sass/phone/_viewport.scss */
+  #result_strip {
+    margin-top: 5px;
+    padding-top: 5px;
+  }
+  /* line 24, ../sass/phone/_viewport.scss */
+  #result_strip ul.thumbnails > li {
+    width: 150px;
+  }
+  /* line 27, ../sass/phone/_viewport.scss */
+  #result_strip ul.thumbnails > li .thumbnail .imgWrapper {
+    width: 130px;
+    height: 130px;
+    overflow: hidden;
+  }
+  /* line 31, ../sass/phone/_viewport.scss */
+  #result_strip ul.thumbnails > li .thumbnail .imgWrapper img {
+    margin-top: -25px;
+    width: 130px;
+    height: 180px;
+  }
+}

stylesheets/styles.css

@@ -54,7 +54,7 @@ a:hover small {
 }
 
 .wrapper {
-  width:860px;
+  width:960px;
   margin:0 auto;
 }
 
@@ -192,7 +192,7 @@ header ul a strong {
 }
 
 section {
-  width:500px;
+  width:640px;
   float:right;
   padding-bottom:50px;
 }