renamed framework-with-theme.css to framework.css

scss/framework/_structure-variables.scss

@@ -28,3 +28,5 @@ $barPaddingLandscape : 5px;
 // Lists
 $listItemBorder: 1px solid #ddd;
 
+// Panels
+$panelViewWidth: 17em;

scss/framework/structure/_base.scss

@@ -11,6 +11,7 @@ body {
   right: 0;
   bottom: 0;
   left: 0;
+  margin: 0;
   font: 14px/1.25 "Helvetica Neue", sans-serif;
 }
 
@@ -21,6 +22,17 @@ a {
 
 ul { margin: 0; padding: 0; }
 
+body > section {
+  position: relative;
+  z-index: 100;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}
+
 main {
 	position: fixed;
   top: 0;
@@ -44,9 +56,3 @@ main > * {
   padding: $contentPadding;
 }
 
-.hide {
-  display: none;
-}
-.show {
-  display: block;
-}

scss/framework/structure/_panel.scss

@@ -1,14 +1,28 @@
 
+
+/* the page content the panel should move around */
+.panel-page-container {
+  
+  left: 100px;
+}
+
+
+/* the container of panel content to show */
 .panel-content {
-  width: 17em;
+  width: $panelViewWidth;
   min-height: 100%;
-  max-height: none;
+  max-height: 100%;
   border-width: 0;
   position: absolute;
   top: 0;
   display: block;
 }
 
-.panel-content {
+.panel-reveal {
+  z-index: 0;
+  left: $panelViewWidth * -1;
+}
+
+.panel-reveal-open {
 
 }

scss/framework/theme/_panel.scss

@@ -0,0 +1,4 @@
+
+.panel-content {
+  background: #eee;
+}