From 52cf5f024dc0df80df1e77e63612b3cd32c3d4f0 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Thu, 12 Aug 2021 11:02:17 -0400
Subject: [PATCH] remove table

---
 index.html | 60 +++++++++++++++++++++++-------------------------------
 1 file changed, 26 insertions(+), 34 deletions(-)

diff --git a/index.html b/index.html
index ee9a665..9499a8f 100644
--- a/index.html
+++ b/index.html
@@ -16,24 +16,18 @@
             height: 400px;
             margin:20px auto 0 auto;
             text-align:center;
-        }
-        .Table
-        {
-            height:100%;
-            transform:rotateY(-70deg);
-            transform-style: preserve-3d;
             transition: transform 1s;
         }
-        .Table[show="cover"]{ transform:rotateY(-70deg); }
-        .Table[show="spine"]{ transform:rotateY(-10deg); }
-        .Table[show="back" ]{ transform:rotateY(-235deg); }
-        .Table[show="pages"]{ transform:rotateY(-180deg); }
-
+        .Shot[show="cover"]{ transform: perspective(1000px) rotateY(-70deg); }
+        .Shot[show="spine"]{ transform: perspective(1000px) rotateY(-10deg); }
+        .Shot[show="back" ]{ transform: perspective(1000px) rotateY(-235deg); }
+        .Shot[show="pages"]{ transform: perspective(1000px) rotateY(-180deg); }
 
         .Book
         {
             height:100%;
             transform-style: preserve-3d;
+            transform: translateZ(100px);
             position: relative;
             display:inline-block;
         }
@@ -112,8 +106,8 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
         }
         .Shadow::after
         {
-            transform: rotateX(90deg) translateY(-80px) translateZ(12px);
-            box-shadow: 0px 80px 60px black, 0px 80px 20px black;
+            transform: rotateX(90deg) translateY(-100px) translateZ(12px);
+            box-shadow: 0px 100px 60px black, 0px 100px 20px black;
             display: block;
             position: absolute;
             top: 100%;
@@ -125,26 +119,24 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
     </style>
 
     <div class="Shot">
-        <div class="Table" show="cover">
-            <div class="Book">
-                <img style="display:block; height:100%; width:auto;" src="http://placekitten.com/20/200"/>
-                <div class="Spine Shadow">
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Cover Front Shadow"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
-                    <div class="Spine__Glue" swing="closed"><div class="Panel Cover Back Shadow"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></div></div>
-                </div>
+        <div class="Book">
+            <img style="display:block; height:100%; width:auto;" src="http://placekitten.com/20/200"/>
+            <div class="Spine Shadow">
+                <div class="Spine__Glue" swing="closed"><div class="Panel Cover Front Shadow"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                <div class="Spine__Glue" swing="closed"><div class="Panel Cover Back Shadow"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></div></div>
             </div>
         </div>
     </div>
@@ -163,7 +155,7 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
 <script>
 let $ = query => Array.from(document.querySelectorAll(query));
 let pages = $("[swing]");
-let table = $(".Table")[0];
+let table = $(".Shot")[0];
 let bookOpen = index =>
 {
     pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );