Version 1.3.1

• Changed demo to align normal and MarkDown slides • Changed loadStyle function • Fixed invisible elements in auto-animate slides • Updated gulp file and dev dependencies • Added Terser
Martinomagnifico · Nov 5, 2023 · e4a230e · e4a230e
1 parent 55e9a5c
commit e4a230e
Show file tree

Hide file tree

Showing 23 changed files with 1,249 additions and 3,519 deletions.
diff --git a/demo/assets/css/demo.css b/demo/assets/css/demo.css
@@ -52,18 +52,14 @@ p code {
   font-size: 0.7em;
 }
 
-:root {
-  --r-code-font: "JetBrains Mono", monospace;
-}
-
 .reveal code.hljs {
   background: var(--code-full-bg);
   border-radius: 0.5em;
   padding: 0.5em;
   white-space: pre-wrap;
 }
 .reveal code.hljs td {
-  line-height: 1.5;
+  line-height: 1.4;
 }
 
 p.code, p code, small code, .small code, li code {
@@ -85,7 +81,8 @@ p.code, p code, small code, .small code, li code {
 }
 
 :root {
-  --r-heading-text-transform: none ;
+  --r-background-color: #051525;
+  --r-heading-text-transform: none;
   --r-heading1-size: 2.7em;
   --r-main-font-size: 36px;
   --r-block-margin: 1.8rem;
@@ -128,24 +125,30 @@ a.github-corner:hover {
   opacity: 1;
 }
 
+img {
+  border-radius: 5%;
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
+  width: 3.5em;
+  height: 3.5em;
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .row.fivegrid {
   display: grid;
-  width: 90%;
+  width: 82%;
   margin: auto;
-  margin-top: 0.25em;
+  margin: var(--r-block-margin) auto;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   grid-gap: 1em;
 }
-.row.fivegrid img {
-  border-radius: 5%;
-}
 
 .reveal img.demoimg {
   width: 3.5em;
   height: 3.5em;
   max-width: 100%;
   max-height: 100%;
-  margin: 0.2em;
+  margin: 0.4em;
   border-radius: 5%;
 }
 .reveal img.demoimg.smallcircle {
@@ -156,9 +159,15 @@ a.github-corner:hover {
 }
 
 .row.smallcircles {
-  grid-gap: 1em;
-  width: 70%;
+  grid-gap: 0.5em;
+  width: 75%;
 }
-.row.smallcircles img {
-  border-radius: 50%;
+
+.title {
+  font-size: 3em;
+  font-weight: bold;
+}
+
+.subtitle {
+  font-size: 1.5em;
 }
diff --git a/demo/demo-markdown.html b/demo/demo-markdown.html
@@ -12,12 +12,6 @@
     <link rel="stylesheet" href="dist/theme/black.css">
     <link rel="stylesheet" href="plugin/highlight/monokai.css">
     <link rel="stylesheet" href="assets/css/demo.css">
-    <style>
-      :root {
-      	--r-background-color: #051525;
-      }
-
-    </style>
   </head>
   <body>
     <div class="reveal"><a class="github-corner" href="https://github.com/martinomagnifico/reveal.js-appearance" target="blank" title="View source on GitHub">

diff --git a/demo/demo.html b/demo/demo.html
@@ -12,12 +12,6 @@
     <link rel="stylesheet" href="dist/theme/black.css">
     <link rel="stylesheet" href="plugin/highlight/monokai.css">
     <link rel="stylesheet" href="assets/css/demo.css">
-    <style>
-      :root {
-      	--r-background-color: #051525;
-      }
-
-    </style>
   </head>
   <body>
     <div class="reveal"><a class="github-corner" href="https://github.com/martinomagnifico/reveal.js-appearance" target="blank" title="View source on GitHub">
@@ -28,7 +22,7 @@
         <section>
           <h1 class="animate__flipInX animate__slow">Appearance</h1>
           <h3 class="animate__fadeInDown animate__faster" data-delay="75" data-container-delay="700" data-split="letters">for Reveal.js</h3>
-          <div class="row fivegrid smallcircles"><img class="animate__shrinkIn" data-src="assets/img/1.jpg" data-delay="800"><img class="animate__shrinkIn" data-src="assets/img/2.jpg" data-delay="220"><img class="animate__shrinkIn" data-src="assets/img/3.jpg" data-delay="200"><img class="animate__shrinkIn" data-src="assets/img/4.jpg" data-delay="180"><img class="animate__shrinkIn" data-src="assets/img/5.jpg" data-delay="160">
+          <div class="row fivegrid smallcircles"><img class="demoimg smallcircle animate__shrinkIn" data-src="assets/img/1.jpg" data-delay="800"><img class="demoimg smallcircle animate__shrinkIn" data-src="assets/img/2.jpg" data-delay="220"><img class="demoimg smallcircle animate__shrinkIn" data-src="assets/img/3.jpg" data-delay="200"><img class="demoimg smallcircle animate__shrinkIn" data-src="assets/img/4.jpg" data-delay="180"><img class="demoimg smallcircle animate__shrinkIn" data-src="assets/img/5.jpg" data-delay="160">
           </div>
         </section>
         <section>
@@ -59,7 +53,7 @@ <h3 class="animate__fadeInDown" data-delay="600">&nbsp;or… <span class="animat
           </section>
           <section>
             <h3>Let images appear</h3>
-            <div class="row fivegrid"><img class="animate__flipInX" data-src="assets/img/1.jpg"><img class="animate__flipInX" data-src="assets/img/2.jpg"><img class="animate__flipInX" data-src="assets/img/3.jpg"><img class="animate__flipInX" data-src="assets/img/4.jpg"><img class="animate__flipInX" data-src="assets/img/5.jpg">
+            <div class="row fivegrid"><img class="demoimg animate__flipInX" data-src="assets/img/1.jpg"><img class="demoimg animate__flipInX" data-src="assets/img/2.jpg"><img class="demoimg animate__flipInX" data-src="assets/img/3.jpg"><img class="demoimg animate__flipInX" data-src="assets/img/4.jpg"><img class="demoimg animate__flipInX" data-src="assets/img/5.jpg">
             </div>
           </section>
           <section>

diff --git a/demo/plugin/appearance/appearance.css b/demo/plugin/appearance/appearance.css
@@ -2,7 +2,7 @@
 /*****************************************************************
  *
  * Appearance for Reveal.js 
- * Version 1.3.0
+ * Version 1.3.1
  * 
  * @author: Martijn De Jongh (Martino), martijn.de.jongh@gmail.com
  * https://github.com/martinomagnifico
@@ -148,6 +148,16 @@
 }
 
 /* Animate.css overrides */
+section:not(.stack):not([data-appearance-can-start]) .animate__animated, section:not(.stack):not([data-appearance-can-start]) .animated {
+  opacity: 0;
+  animation: none;
+}
+
+section:not(.stack)[data-appearance-can-start] .animate__animated:not(.fragment), section:not(.stack)[data-appearance-can-start] .animated:not(.fragment) {
+  opacity: 1;
+}
+
+/* Animations inside fragments */
 section:not(.stack):not([data-appearance-can-start]) .animate__animated,
 section:not(.stack):not([data-appearance-can-start]) .animated,
 .fragment:not(.visible) .animate__animated,
@@ -165,25 +175,33 @@ section:not(.stack):not([data-appearance-can-start]) .animated,
   opacity: 1;
 }
 
-.fragment.animate__animated:not(.visible), .fragment.animated:not(.visible) {
-  transition: opacity 0.3s ease-in-out !important;
+/* Animations which are also fragments */
+.reveal .fragment.animate__animated:not(.visible), .reveal .fragment.animated:not(.visible) {
+  transition: all 0.2s ease;
   opacity: 0;
   animation: none;
   will-change: animation;
 }
-.fragment.animate__animated.visible.animate__animated, .fragment.animate__animated.visible.animated, .fragment.animated.visible.animate__animated, .fragment.animated.visible.animated {
+.reveal .fragment.animate__animated.visible:not(.animationended), .reveal .fragment.animated.visible:not(.animationended) {
   transition: none;
 }
+.reveal .fragment.animate__animated.visible.animationended, .reveal .fragment.animated.visible.animationended {
+  animation: none;
+  transition: all 0.2s ease;
+}
 
 i.animate__animated, i.animated, span.animate__animated, span.animated {
   display: inline-block;
 }
 
-.animate__animated.animationended,
-.animated.animationended {
+.animate__animated[data-auto-animate-target]:not([data-auto-animate-target=unmatched]) {
   animation: none;
 }
 
+[data-auto-animate=running] .animate__animated[data-auto-animate-target]:not([data-auto-animate-target=unmatched]) {
+  opacity: 1 !important;
+}
+
 .fast, .animate__fast {
   animation-duration: calc(var(--animate-duration) * 0.8);
 }