From d283f7e661e14d6ae1881fe803e5b4f1ed0689ff Mon Sep 17 00:00:00 2001 From: David Thompson Date: Mon, 24 Jun 2024 13:49:08 -0400 Subject: Add 2024 Guix social talk. --- .../reveal.js/examples/layout-helpers.html | 160 +++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 2024-06-18-guix-social/reveal.js/examples/layout-helpers.html (limited to '2024-06-18-guix-social/reveal.js/examples/layout-helpers.html') diff --git a/2024-06-18-guix-social/reveal.js/examples/layout-helpers.html b/2024-06-18-guix-social/reveal.js/examples/layout-helpers.html new file mode 100644 index 0000000..a129811 --- /dev/null +++ b/2024-06-18-guix-social/reveal.js/examples/layout-helpers.html @@ -0,0 +1,160 @@ + + + + + + + reveal.js - Layout Helpers + + + + + + + + + + +
+ +
+ +
+

Layout Helper Examples

+ +
+ +
+

Fit Text

+

Resizes text to be as large as possible within its container.

+ 

+					  
FIT

+
+
+ +
+

FIT

+
+ +
+

HELLO WORLD

+

BOTH THESE TITLES USE FIT-TEXT

+
+ +
+

Stretch

+

Makes an element as tall as possible while remaining within the slide bounds.

+ 

+					  
Stretch Example

+					  
+					  
Image byline

+
+
+ +
+

Stretch Example

+ +

Image byline

+
+ +
+

Stack

+

Stacks multiple elements on top of each other, for use with fragments.

+ 

+					  

+					    <img class="fragment" width="450" height="300" src="...">
+					    <img class="fragment" width="300" height="450" src="...">
+					    <img class="fragment" width="400" height="400" src="...">
+					  

+
+
+ +
+

Stack Example

+
+

One

+

Two

+

Three

+

Four

+
+
+ + + +
+
+ +
+

Stack Example

+

fade-in-then-out fragments

+
+ + + +
+
+ +
+

HStack

+

Stacks multiple elements horizontally.

+ 

+					  

+					    <img width="450" height="300" src="...">
+					    <img width="300" height="450" src="...">
+					    <img width="400" height="400" src="...">
+					  

+
+
+ +
+

HStack Example

+
+

One

+

Two

+

Three

+
+
+ +
+

VStack

+

Stacks multiple elements vertically.

+ 

+					  

+					    <img width="450" height="300" src="...">
+					    <img width="300" height="450" src="...">
+					    <img width="400" height="400" src="...">
+					  

+
+
+ +
+

VStack Example

+
+

One

+

Two

+

Three

+
+
+ +
+ +
+ + + + + + + -- cgit v1.2.3