Skip to content

Commit e4a230e

Browse files
MartinomagnificoMartinomagnifico
committed
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
1 parent 55e9a5c commit e4a230e

File tree

23 files changed

+1249
-3519
lines changed

23 files changed

+1249
-3519
lines changed

‎demo/assets/css/demo.css‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -52,18 +52,14 @@ p code {
5252
font-size: 0.7em;
5353
}
5454

55-
:root {
56-
--r-code-font: "JetBrains Mono", monospace;
57-
}
58-
5955
.reveal code.hljs {
6056
background: var(--code-full-bg);
6157
border-radius: 0.5em;
6258
padding: 0.5em;
6359
white-space: pre-wrap;
6460
}
6561
.reveal code.hljs td {
66-
line-height: 1.5;
62+
line-height: 1.4;
6763
}
6864

6965
p.code, p code, small code, .small code, li code {
@@ -85,7 +81,8 @@ p.code, p code, small code, .small code, li code {
8581
}
8682

8783
:root {
88-
--r-heading-text-transform: none ;
84+
--r-background-color: #051525;
85+
--r-heading-text-transform: none;
8986
--r-heading1-size: 2.7em;
9087
--r-main-font-size: 36px;
9188
--r-block-margin: 1.8rem;
@@ -128,24 +125,30 @@ a.github-corner:hover {
128125
opacity: 1;
129126
}
130127

128+
img {
129+
border-radius: 5%;
130+
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
131+
width: 3.5em;
132+
height: 3.5em;
133+
max-width: 100%;
134+
max-height: 100%;
135+
}
136+
131137
.row.fivegrid {
132138
display: grid;
133-
width: 90%;
139+
width: 82%;
134140
margin: auto;
135-
margin-top: 0.25em;
141+
margin: var(--r-block-margin) auto;
136142
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
137143
grid-gap: 1em;
138144
}
139-
.row.fivegrid img {
140-
border-radius: 5%;
141-
}
142145

143146
.reveal img.demoimg {
144147
width: 3.5em;
145148
height: 3.5em;
146149
max-width: 100%;
147150
max-height: 100%;
148-
margin: 0.2em;
151+
margin: 0.4em;
149152
border-radius: 5%;
150153
}
151154
.reveal img.demoimg.smallcircle {
@@ -156,9 +159,15 @@ a.github-corner:hover {
156159
}
157160

158161
.row.smallcircles {
159-
grid-gap: 1em;
160-
width: 70%;
162+
grid-gap: 0.5em;
163+
width: 75%;
161164
}
162-
.row.smallcircles img {
163-
border-radius: 50%;
165+
166+
.title {
167+
font-size: 3em;
168+
font-weight: bold;
169+
}
170+
171+
.subtitle {
172+
font-size: 1.5em;
164173
}

‎demo/demo-markdown.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,6 @@
1212
<link rel="stylesheet" href="dist/theme/black.css">
1313
<link rel="stylesheet" href="plugin/highlight/monokai.css">
1414
<link rel="stylesheet" href="assets/css/demo.css">
15-
<style>
16-
:root {
17-
--r-background-color: #051525;
18-
}
19-
20-
</style>
2115
</head>
2216
<body>
2317
<div class="reveal"><a class="github-corner" href="https://github.com/martinomagnifico/reveal.js-appearance" target="blank" title="View source on GitHub">

‎demo/demo.html‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,6 @@
1212
<link rel="stylesheet" href="dist/theme/black.css">
1313
<link rel="stylesheet" href="plugin/highlight/monokai.css">
1414
<link rel="stylesheet" href="assets/css/demo.css">
15-
<style>
16-
:root {
17-
--r-background-color: #051525;
18-
}
19-
20-
</style>
2115
</head>
2216
<body>
2317
<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 @@
2822
<section>
2923
<h1 class="animate__flipInX animate__slow">Appearance</h1>
3024
<h3 class="animate__fadeInDown animate__faster" data-delay="75" data-container-delay="700" data-split="letters">for Reveal.js</h3>
31-
<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">
25+
<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">
3226
</div>
3327
</section>
3428
<section>
@@ -59,7 +53,7 @@ <h3 class="animate__fadeInDown" data-delay="600">&nbsp;or… <span class="animat
5953
</section>
6054
<section>
6155
<h3>Let images appear</h3>
62-
<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">
56+
<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">
6357
</div>
6458
</section>
6559
<section>

‎demo/plugin/appearance/appearance.css‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
/*****************************************************************
33
*
44
* Appearance for Reveal.js
5-
* Version 1.3.0
5+
* Version 1.3.1
66
*
77
* @author: Martijn De Jongh (Martino), [email protected]
88
* https://github.com/martinomagnifico
@@ -148,6 +148,16 @@
148148
}
149149

150150
/* Animate.css overrides */
151+
section:not(.stack):not([data-appearance-can-start]) .animate__animated, section:not(.stack):not([data-appearance-can-start]) .animated {
152+
opacity: 0;
153+
animation: none;
154+
}
155+
156+
section:not(.stack)[data-appearance-can-start] .animate__animated:not(.fragment), section:not(.stack)[data-appearance-can-start] .animated:not(.fragment) {
157+
opacity: 1;
158+
}
159+
160+
/* Animations inside fragments */
151161
section:not(.stack):not([data-appearance-can-start]) .animate__animated,
152162
section:not(.stack):not([data-appearance-can-start]) .animated,
153163
.fragment:not(.visible) .animate__animated,
@@ -165,25 +175,33 @@ section:not(.stack):not([data-appearance-can-start]) .animated,
165175
opacity: 1;
166176
}
167177

168-
.fragment.animate__animated:not(.visible), .fragment.animated:not(.visible) {
169-
transition: opacity 0.3s ease-in-out !important;
178+
/* Animations which are also fragments */
179+
.reveal .fragment.animate__animated:not(.visible), .reveal .fragment.animated:not(.visible) {
180+
transition: all 0.2s ease;
170181
opacity: 0;
171182
animation: none;
172183
will-change: animation;
173184
}
174-
.fragment.animate__animated.visible.animate__animated, .fragment.animate__animated.visible.animated, .fragment.animated.visible.animate__animated, .fragment.animated.visible.animated {
185+
.reveal .fragment.animate__animated.visible:not(.animationended), .reveal .fragment.animated.visible:not(.animationended) {
175186
transition: none;
176187
}
188+
.reveal .fragment.animate__animated.visible.animationended, .reveal .fragment.animated.visible.animationended {
189+
animation: none;
190+
transition: all 0.2s ease;
191+
}
177192

178193
i.animate__animated, i.animated, span.animate__animated, span.animated {
179194
display: inline-block;
180195
}
181196

182-
.animate__animated.animationended,
183-
.animated.animationended {
197+
.animate__animated[data-auto-animate-target]:not([data-auto-animate-target=unmatched]) {
184198
animation: none;
185199
}
186200

201+
[data-auto-animate=running] .animate__animated[data-auto-animate-target]:not([data-auto-animate-target=unmatched]) {
202+
opacity: 1 !important;
203+
}
204+
187205
.fast, .animate__fast {
188206
animation-duration: calc(var(--animate-duration) * 0.8);
189207
}

0 commit comments

Comments
 (0)