made large responsive demo layout functional w/o JS (fixes #6)

Author: tylersticka

css/responsive.css

@@ -29,17 +29,35 @@
     background-image: none;
   }
 
-  .views-nav a.is-active {
+  .demo-active .views-nav a.is-active {
     background-image: url(../img/arrow-right.svg);
     color: #999;
   }
 
   .views-main .view {
-    display: none;
+    border-radius: 0;
+    border-top-width: 0;
     margin-left: 27%;
   }
 
-  .views-main .view.is-active {
+  .demo-active .views-main .view {
+    display: none;
+  }
+
+  .views-main .view:first-child,
+  .demo-active .views-main .view {
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+    border-top-width: 2px;
+  }
+
+  .views-main .view:last-child,
+  .demo-active .views-main .view {
+    border-bottom-left-radius: 0.5em;
+    border-bottom-right-radius: 0.5em;
+  }
+
+  .demo-active .views-main .view.is-active {
     display: block;
   }
 

responsive.html

@@ -142,6 +142,7 @@ <h2>Where to get it</h2>
     // are turned off. I would not recommend using this outside
     // the context of this demo... consider it a placeholder for
     // "your large layout logic here".
+    $viewContainer.addClass('demo-active');
     $('a[data-pushview]').on('click', function (event) {
       var href = $(this).attr('href')
         , $target = $(href)
@@ -158,6 +159,7 @@ <h2>Where to get it</h2>
   })
   // This is called when the plugin is _about_ to activate.
   .on('slideViewBeforeOn', function () {
+    $viewContainer.removeClass('demo-active');
     // Remove the event we bound to these elements in the
     // previous function so that SimpleSlideView can use
     // them without conflicts.