From fe18e2ade1b40ce2d41171880fc025940b66a0e7 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Wed, 11 Aug 2021 17:13:04 -0400
Subject: [PATCH] Table convention

---
 index.html | 68 +++++++++++++++++++++++++-----------------------------
 1 file changed, 31 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index c2e102d..bbfd166 100644
--- a/index.html
+++ b/index.html
@@ -40,29 +40,45 @@ figure
 <main>
 
     <style>
-        .Book
+        .Table
         {
             transform: perspective(400px);
             transform-style: preserve-3d;
+            width:500px;
+            height: 400px;
+            margin:20px auto 0 auto;
+            text-align:center;
+        }
+        .Book
+        {
+            transform: rotateY(-75deg) translateY(50%) translateZ(60px);
+            transform-style: preserve-3d;
+            position: relative;
+            display:inline-block;
         }
         .Spine
         {
             display:flex;
             justify-content:space-between;
-            width:50px;
-            height:200px;
             margin:0 auto;
+            position:absolute;
+            top:0;
+            left:0;
+            width:100%;
+            height:100%;
         }
         .Spine__Glue
         {
             flex:0;
             width:1px;
             height:100%;
-            border:1px solid blue;
             position:relative;
-            transform:rotateY(0deg);
+            transform:rotateY(90deg);
             transform-style: preserve-3d;
+            transition: transform 0.4s;
         }
+        .Spine__Glue[swing='right']{transform: rotateY( 5deg   );}
+        .Spine__Glue[swing='left' ]{transform: rotateY( 175deg );}
         .Panel
         {
             height:100%;
@@ -110,43 +126,21 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
         {
             transform:rotateY(180deg) scaleX(-1);
         }
-
-
-
     </style>
 
-    <div class="Book">
-        <div class="Spine">
-            <div class="Spine__Glue"><div class="Panel Cover Front"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
-            <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
-            <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
-            <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
-            <div class="Spine__Glue"><div class="Panel Cover Back"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
+    <div class="Table">
+        <div class="Book">
+            <img style="display:block;" src="http://placekitten.com/50/200"/>
+            <div class="Spine">
+                <div class="Spine__Glue"><div class="Panel Cover Front"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
+                <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
+                <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
+                <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
+                <div class="Spine__Glue"><div class="Panel Cover Back"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
+            </div>
         </div>
     </div>
 
-
-    <div style="float:left; width:20px; height:200px; border:1px solid blue;">
-        <div style="float:left;">
-            <img style="height:100%; width:auto;" src="http://placekitten.com/120/200"/>
-        </div>
-    </div>
-    <div style="float:left; width:20px; height:200px; border:1px solid blue;">
-        <div style="float:left;">
-            <img style="height:100%; width:auto;" src="http://placekitten.com/120/200"/>
-        </div>
-    </div>
-    <div style="clear:left;"></div>
-    <figure>
-        <div class="Sheet"><img src="    http://placekitten.com/120/200" alt="cover front"/>
-                           <img src="http://via.placeholder.com/120x200" alt="cover back "/></div>
-        <div class="Sheet"><img src="    http://placekitten.com/120/200" alt="cover front"/>
-                           <img src="http://via.placeholder.com/120x200" alt="cover back "/></div>
-        <div class="Sheet"><img src="    http://placekitten.com/120/200" alt="cover front"/>
-                           <img src="http://via.placeholder.com/120x200" alt="cover back "/></div>
-        <div class="Sheet"><img src="    http://placekitten.com/120/200" alt="cover front"/>
-                           <img src="http://via.placeholder.com/120x200" alt="cover back "/></div>
-    </figure>
 </main>
 <script>