From a0d90eedca5f06c0dd8f60ba90bd8a04c0ae80c2 Mon Sep 17 00:00:00 2001
From: "Gustavo \"Guz\" L de Mello" <contact@guz.one>
Date: Wed, 22 Oct 2025 16:18:18 -0300
Subject: [PATCH] feat(ipub): change all section images to ipub-images

---
 .../example/OEBPS/sections/section0001.xhtml  | 61 ++++++-------------
 .epub/example/OEBPS/styles/stylesheet.css     | 41 -------------
 2 files changed, 18 insertions(+), 84 deletions(-)

diff --git a/.epub/example/OEBPS/sections/section0001.xhtml b/.epub/example/OEBPS/sections/section0001.xhtml
index 73bcebc..8a0f314 100644
--- a/.epub/example/OEBPS/sections/section0001.xhtml
+++ b/.epub/example/OEBPS/sections/section0001.xhtml
@@ -25,59 +25,34 @@
             rel="external nofollow noopener noreferrer" target="_blank" />
           </ipub-interaction>
         </ipub-image>
-        <section data-ipub-element="page" id="page02">
-          <span data-ipub-element="image">
-            <img src="../images/image0002.png" />
-          </span>
-          <!-- 
-          This in the UI would be an "Area Interaction". The editor would first place
-          the first top-left point, and then the bottom-right one, to select an area/size
-          of the interaction.
-
-          The element wound not have a "action" per say, but would have a "on screen" trigger,
-          which in itself would have the action "play sound".
-        -->
-          <audio data-ipub-element="interaction" data-ipub-trigger="on-screen" controls="true"
-          volume="0" style="--ipub-x: 20%; --ipub-y: 25%; --ipub-width: 50%; --ipub-height: 50%;"
-          id="int-audio0001">
-            <source src="../audios/audio0001.wav.disable" />
-          </audio>
-        </section>
+        <ipub-image>
+          <img src="../images/image0002.png" />
+        </ipub-image>
         <ipub-background id="background0002">
           <picture>
             <img src="../images/background0002.jpg" />
           </picture>
         </ipub-background>
-        <section data-ipub-element="page" id="page03">
-          <span data-ipub-element="image">
-            <img src="../images/image0003.png" />
-          </span>
-        </section>
-        <section data-ipub-element="page" id="page04">
-          <span data-ipub-element="image">
-            <img src="../images/image0004.png" />
-          </span>
-        </section>
+        <ipub-image>
+          <img src="../images/image0003.png" />
+        </ipub-image>
+        <ipub-image>
+          <img src="../images/image0004.png" />
+        </ipub-image>
         <ipub-background id="background0003">
           <picture>
             <img src="../images/background0003.jpg" />
           </picture>
         </ipub-background>
-        <section data-ipub-element="page" id="page02">
-          <span data-ipub-element="image">
-            <img src="../images/image0002.png" />
-          </span>
-        </section>
-        <section data-ipub-element="page" id="page04">
-          <span data-ipub-element="image">
-            <img src="../images/image0003.png" />
-          </span>
-        </section>
-        <section data-ipub-element="page" id="page04">
-          <span data-ipub-element="image">
-            <img src="../images/image0004.png" />
-          </span>
-        </section>
+        <ipub-image>
+          <img src="../images/image0002.png" />
+        </ipub-image>
+        <ipub-image>
+          <img src="../images/image0003.png" />
+        </ipub-image>
+        <ipub-image>
+          <img src="../images/image0004.png" />
+        </ipub-image>
       </main>
     </ipub-content>
   </body>
diff --git a/.epub/example/OEBPS/styles/stylesheet.css b/.epub/example/OEBPS/styles/stylesheet.css
index 6c758bd..0e42da0 100644
--- a/.epub/example/OEBPS/styles/stylesheet.css
+++ b/.epub/example/OEBPS/styles/stylesheet.css
@@ -146,44 +146,3 @@ ipub-interaction {
     --ipub-radius: 100%;
   }
 }
-
-[data-ipub-element="image"] {
-  width: var(--ipub-width, unset);
-  height: var(--ipub-height, unset);
-  background-image: var(--ipub-image, unset);
-  background-repeat: no-repeat;
-  background-size: cover;
-  display: block;
-
-  img {
-    max-width: 100%;
-    max-height: 100%;
-  }
-}
-
-[data-ipub-element="interaction"] {
-  position: absolute;
-  left: var(--ipub-x, 0%);
-  top: var(--ipub-y, 0%);
-  border-radius: var(--ipub-radius, unset);
-  width: var(--ipub-width, unset);
-  height: var(--ipub-height, unset);
-  transform: translate(
-    var(--ipub-origin-offset-x, 0%),
-    var(--ipub-origin-offset-y, 0%)
-  );
-  aspect-ratio: var(--ipub-ratio, unset);
-  /* 
-  * The opacity would be, by default, zero. Here it is 0.3 for easier debugging and
-  * showing of the example ebook 
-  */
-  background-color: red;
-  opacity: 0.3;
-}
-
-a[data-ipub-element="interaction"] {
-  /* The text inside the interaction anchor are for accessibility purposes */
-  font-size: 0px;
-}
-
-}