auto-animate example in demo

2 files changed, 50 insertions, 24 deletions

diff --git a/css/layout.scss b/css/layout.scss
new file mode 100644
index 0000000..f3e49c1
--- /dev/null
+++ b/css/layout.scss
@@ -0,0 +1,49 @@
+/**
+ * Layout helpers.
+ */
+
+// Stretch an element vertically based on available space
+.reveal .stretch,
+.reveal .r-stretch {
+	max-width: none;
+	max-height: none;
+}
+
+.reveal pre.stretch code,
+.reveal pre.r-stretch code {
+	height: 100%;
+	max-height: 100%;
+	box-sizing: border-box;
+}
+
+// Stack multiple elements on top of each other
+.reveal .r-stack {
+	display: grid;
+}
+
+.reveal .r-stack > * {
+	grid-area: 1/1;
+	margin: auto;
+}
+
+// Horizontal and vertical stacks
+.reveal .r-vstack,
+.reveal .r-hstack {
+	display: flex;
+}
+
+.reveal .r-vstack {
+	flex-direction: column;
+}
+
+.reveal .r-hstack {
+	flex-direction: row;
+}
+
+.reveal .items-center {
+	align-items: center;
+}
+
+.reveal .justify-center {
+	justify-content: center;
+}
\ No newline at end of file
diff --git a/css/reveal.scss b/css/reveal.scss
index 8e7f343..acb9a13 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -6,6 +6,7 @@
  * Copyright (C) Hakim El Hattab, https://hakim.se
  */
 
+@import 'layout';
 
 /*********************************************
  * GLOBAL STYLES
@@ -213,30 +214,6 @@ html.reveal-full-page {
 	position: relative;
 }
 
-// Layout helper: Stretch an element vertically based on available space
-.reveal .stretch,
-.reveal .r-stretch {
-	max-width: none;
-	max-height: none;
-}
-
-.reveal pre.stretch code,
-.reveal pre.r-stretch code {
-	height: 100%;
-	max-height: 100%;
-	box-sizing: border-box;
-}
-
-// Layout helper: Stack multiple elements on top of each other
-.reveal .r-stack {
-	display: grid;
-}
-
-.reveal .r-stack > * {
-	grid-area: 1/1;
-	margin: auto;
-}
-
 
 /*********************************************
  * CONTROLS