Pimp the cube demo a bit.

I always wanted to do it this way. Today finally had some free time to hack it this weekend.
impress · Feb 27, 2021 · f68e5ff · f68e5ff
1 parent 4c9d2e3
commit f68e5ff
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 27 deletions.
diff --git a/examples/cube/css/cube.css b/examples/cube/css/cube.css
@@ -1,5 +1,29 @@
 @import url(fonts.css);
 
+/* Specific to this presentation */
+
+div.step p {
+    border: solid 2px black;
+    border-radius: 120px;
+    width: 170px;
+    height: 110px;
+    text-align: center;
+    padding-top: 65px;
+    background-color: black;
+    color: white;
+}
+
+div.step img {
+    border: solid 2px black;
+    border-radius: 120px;
+    width: 170px;
+    height: 170px;
+    text-align: center;
+    background-color: black;
+    color: white;
+}
+
+
 
 
 /*  Fallback message */
@@ -62,16 +86,6 @@ body {
     border: none;
     box-shadow: none;
 }
-/*
-    Make inactive steps a little bit transparent.
-*/
-.impress-enabled .step {
-    margin: 0;
-    opacity: 0.7;
-    transition:         opacity 1s;
-}
-
-.impress-enabled .step.active { opacity: 1 }
 
 h1, 
 h2, 
@@ -102,21 +116,18 @@ code {
 
 
 a {
-    color: inherit;
-    text-decoration: none;
-    padding: 0 0.1em;
-    background: rgba(200,200,200,0.2);
-    text-shadow: -1px 1px 2px rgba(100,100,100,0.9);
-    border-radius: 0.2em;
-    border-bottom: 1px solid rgba(100,100,100,0.2);
-    border-left:   1px solid rgba(100,100,100,0.2);
-
-    transition:         0.5s;
+    color: #ddd;
+    text-decoration: underline;
 }
 a:hover,
 a:focus {
     background: rgba(200,200,200,1);
     text-shadow: -1px 1px 2px rgba(100,100,100,0.5);
+    padding: 0 0.1em;
+    background: rgba(200,200,200,0.2);
+    border-radius: 0.2em;
+    border-bottom: 1px solid rgba(100,100,100,0.2);
+    border-left:   1px solid rgba(100,100,100,0.2);
 }
 
 blockquote {
@@ -146,4 +157,4 @@ strike {
 
 small {
     font-size: 0.4em;
-}
+}
diff --git a/examples/cube/img/Henrik_mustache.jpg b/examples/cube/img/Henrik_mustache.jpg
diff --git a/examples/cube/index.html b/examples/cube/index.html
@@ -19,32 +19,47 @@
 
     <div class="step" data-x="0" data-y="0" data-z="350"
          data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-4 step-3 step-2 step-5 overview">
-        <p>Slide one</p>
+        <p style="position: absolute; top: 240px; left: 240px;">Slides</p>
     </div>
 
     <div class="step" data-x="350" data-y="0" data-z="0" data-rotate-y="90"
          data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-4 step-3 step-6 step-1 overview">
-        <p>Slide two</p>
+        <p style="position: absolute; top: 50px; left: 50px;">In</p>
+        <p style="position: absolute; bottom: 50px; right: 50px;">3D</p>
     </div>
 
     <div class="step" data-x="0" data-y="350" data-z="0" data-rotate-x="-90" data-rotate-z="90"
          data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-2 step-5 step-6 step-1 overview">
-        <p>Slide three</p>
+        <p style="position: absolute; top: 50px; left: 50px;">Check</p>
+        <p style="position: absolute; top: 240px; left: 240px;"><a href="https://impress.js.org">impress.js</a></p>
+        <p style="position: absolute; bottom: 50px; right: 50px;">out</p>
     </div>
 
     <div class="step" data-x="0" data-y="-350" data-z="0" data-rotate-x="90" data-rotate-z="-90"
          data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-5 step-2 step-6 step-1 overview">
-        <p>Slide four</p>
+        <p style="position: absolute; top: 50px; left: 50px;">CSS</p>
+        <p style="position: absolute; top: 50px; right: 50px;">Positioning</p>
+        <p style="position: absolute; bottom: 50px; left: 50px;">is</p>
+        <p style="position: absolute; bottom: 50px; right: 50px;">amazing</p>
     </div>
 
     <div class="step" data-x="-350" data-y="0" data-z="0" data-rotate-y="-90" data-rotate-z="-180"
          data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-3 step-4 step-6 step-1 overview">
-        <p>Slide five</p>
+        <p style="position: absolute; top: 50px; left: 50px;">By</p>
+        <p style="position: absolute; top: 50px; right: 50px;">hingo</p>
+        <img src="img/Henrik_mustache.jpg" alt="Henrik Ingo portrait, with mustache" style="position: absolute; top: 275px; left: 275px;">
+        <p style="position: absolute; bottom: 50px; left: 50px;">bartaz</p>
+        <p style="position: absolute; bottom: 50px; right: 50px; padding-top: 30px; height: 140px;"><a href="https://github.com/impress/impress.js/graphs/contributors">+70 contributors</a></p>
     </div>
 
     <div class="step" data-x="0" data-y="0" data-z="-350" data-rotate-y="-180" data-rotate-z="-180"
          data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-3 step-4 step-2 step-5 overview">
-        <p>Slide six</p>
+        <p style="position: absolute; top: 50px; left: 50px;">Open</p>
+        <p style="position: absolute; top: 50px; right: 50px;">Source</p>
+        <p style="position: absolute; top: 240px; left: 50px;">&amp;</p>
+        <p style="position: absolute; top: 240px; right: 50px;">HTML</p>
+        <p style="position: absolute; bottom: 50px; left: 50px;">CSS</p>
+        <p style="position: absolute; bottom: 50px; right: 50px;">JavaScript</p>
     </div>
 
     <div id="overview" class="step" data-x="700" data-y="-100" data-z="1000" data-scale="1" style="pointer-events: none;">