From e5c1adf5e4106fdd21d4d9eba93739a591395515 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Thu, 12 Aug 2021 17:58:06 -0400
Subject: [PATCH] fixes in place

---
 index.html   | 142 ++++++++++++++++++++++++---------------------------
 problem.html |   3 --
 2 files changed, 68 insertions(+), 77 deletions(-)

diff --git a/index.html b/index.html
index 19d2f22..d0199e2 100644
--- a/index.html
+++ b/index.html
@@ -42,59 +42,67 @@
             width:100%;
             height:100%;
         }
-        .Spine__Glue
-        {
-            flex:0;
-            width:0;
-            height:100%;
-            position:relative;
-            transform:rotateY(-90deg);
-            transform-style: preserve-3d;
-            transition: transform 0.8s;
-        }
-        .Spine__Glue[swing='right']{transform: translateX(-3px) rotateY( -20deg );}
-        .Spine__Glue[swing='left' ]{transform: translateX( 3px) rotateY( -160deg );}
-        .Panel
-        {
-            height:100%;
-            top:0%;
-            float:left;
-            position:relative;
-        }
-        .Spine__Glue[swing='right'] .Panel {box-shadow:3px 0px 2px rgb(0 0 0 / 24%)}
-        .Spine__Glue[swing='left' ] .Panel {box-shadow:3px 0px 2px rgb(0 0 0 / 24%)}
 
-        .Panel.Page
+        .Page
         {
-            height:98%;
-            top:1%;
-            transform:translateX(1px);
-            transform-style:preserve-3d;
+            display: inline-block;
+            position: relative;
+            transition: transform 1s;
+            transform-style: preserve-3d;
         }
-        .Panel img
-        {
-            display:block;
-            position:relative;
-            z-index:1;
-            height:100%;
-            width:auto;
-            backface-visibility: visible;
-            transform: rotateY(180deg);
-        }
-        .Panel img:last-child
+        .Page[swing="closed"]{ transform: translateX(0px)  rotateY(-90deg); }
+        .Page[swing="right" ]{ transform: translateX(-3px) rotateY(-20deg); }
+        .Page[swing="left"  ]{ transform: translateX(3px)  rotateY(-160deg); }
+        .Page .Front, .Page .Back
         {
+            float:left;
             position:absolute;
             top:0;
             left:0;
+            height:100%;
+            box-shadow: 0px -1px 1px rgb(0 0 0 / 30%);
             backface-visibility: hidden;
+            transform-style: preserve-3d;
+            transform: rotateY(180deg);
+        }
+        .Page .Back
+        {
             transform: rotateY(0deg);
         }
-        .Panel.Flip
+        .Page img
         {
-            transform-style:preserve-3d;
-            transform:rotateY(180deg);
+            height:100%;
+            width:auto;
         }
-        .Shadow-Sheet-Before::before, .Shadow-Sheet-After::after
+
+        .Page--Fill
+        {
+            display: block;
+            position:absolute;
+            top:0;
+            left:0;
+            width:100%;
+            height:100%;
+        }
+        .Page--Shrink
+        {
+            height:98%;
+            top:1%;
+        }
+        .Shadow--Drop::before
+        {
+            transform: rotateX(90deg);
+            backface-visibility: visible;
+            position: absolute;
+            top: 100%;
+            content: " ";
+            display: block;
+            width: 100%;
+            height: 50px;
+            background: #000;
+        }
+
+        .Shadow--Sheet::after
         {
             content:" ";
 
@@ -111,24 +119,14 @@
             height:100%;
 
             backface-visibility: hidden;
+            transform:scaleX(-1);
         }
-        .Shadow-Sheet-Before::before
+        .Shadow--Sheet--Flip::after
         {
-            transform:rotateY(180deg) scaleX(-1);
+            transform:scaleX(1);
         }
-        .Shadow-Drop-After::after, .Shadow-Drop-Before::before
-        {
-            transform: rotateX(90deg) translateY(-100px) translateZ(12px);
-            box-shadow: 0px 100px 60px black, 0px 100px 20px black;
-            display: block;
-            position: absolute;
-            top: 100%;
-            content: " ";
-            width: 100%;
-            height: 29px;
-            border-radius: 39px;
-        }
-        .Shadow-Radiosity-Before::before, .Shadow-Radiosity-After::after
+
+        .Shadow--Radiosity::after
         {
             content: " ";
             background-size: 100% 100%;
@@ -146,25 +144,21 @@
 
     <div class="Shot" show="cover">
         <div class="Book">
-            
-            <div class="Spine Shadow-Radiosity-Before Shadow-Drop-After">
-                <div class="Spine__Glue" swing="closed"><div class="Panel Shadow-Radiosity-Before Shadow-Drop-After"><img src="book-panel-front.jpg"/><img src="book-panel-front.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
-                <div class="Spine__Glue" swing="closed"><div class="Panel Flip Shadow-Radiosity-Before Shadow-Drop-After"><img src="book-panel-back.jpg"/><img src="book-panel-back.jpg"/></div></div>
+            <img style="display:block; height:100%; width:auto; visibility: hidden;" src="book-panel-spine.jpg"/>
+            <div class="Page Page--Fill"> <div class="Front Shadow--Radiosity Shadow--Drop"><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
+            <div class="Spine">
+                <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity Shadow--Drop"><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
+                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
+                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
+                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
+                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
+                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
+                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
+                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
+                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
+                <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity Shadow--Drop"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
             </div>
-            <img style="display:block; height:100%; width:auto; transform:scaleX(-1);" src="book-panel-spine.jpg"/>
+            
         </div>
     </div>
 
diff --git a/problem.html b/problem.html
index 6b894de..b05e1ff 100644
--- a/problem.html
+++ b/problem.html
@@ -99,9 +99,6 @@
             </div>
         </div>
     </div>
-
-    <div>
-    </div>
 </main>
 <script>
     let $ = query => Array.from(document.querySelectorAll(query));