added pages and keyboard navigation

css/dist/main.css

@@ -0,0 +1,29 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  background-color: #1A1A1A; }
+
+#header {
+  position: fixed;
+  display: none; }
+
+#main {
+  height: 207.26mm;
+  width: 455.04741mm;
+  margin: 0 auto; }
+  #main #page-left {
+    float: left;
+    background-position: right; }
+  #main #page-right {
+    float: right;
+    background-position: left; }
+  #main .page {
+    background-color: green;
+    width: 227.41mm;
+    height: 207.26mm;
+    background-repeat: no-repeat;
+    background-size: contain; }
+    #main .page .inner {
+      width: 100%;
+      height: 100%;
+      border: 1px solid blue; }

css/main.scss

@@ -0,0 +1,54 @@
+html,body{
+  margin:0; padding:0;
+  background-color: #1A1A1A;
+}
+
+$debug:true;
+$pw:227.41mm;
+$ph:207.26mm;
+$mt:1cm;
+$mb:1cm;
+$me:1cm;
+$mi:1cm;
+
+#header{
+  position: fixed;
+  display: none;
+}
+
+#main{
+  height:$ph;
+  width:2.001*$pw;
+  margin:0 auto;
+  #page-left{
+    float:left;
+    // padding:$mt $mi $mb $me;
+    // background-image: url("../../images/pages/01_anan.jpeg");
+    background-position: right;
+  }
+  #page-right{
+    float: right;
+    // padding:$mt $me $mb $mi;
+    // background-image: url("../../images/pages/02_TH.jpeg");
+    background-position: left;
+  }
+  .page{
+    @if $debug {
+      background-color: green;
+    }
+    width:$pw;
+    height:$ph;
+
+    background-repeat: no-repeat;
+    background-size: contain;
+
+    .inner{
+      // display:none;
+      width:100%; height:100%;
+      @if $debug {
+        border: 1px solid blue;
+      }
+    }
+  }
+
+}