diff --git a/libs/filamentjs/docs/build.py b/libs/filamentjs/docs/build.py
index ded8dd479e..0d5482b6df 100755
--- a/libs/filamentjs/docs/build.py
+++ b/libs/filamentjs/docs/build.py
@@ -154,12 +154,12 @@ def weave(name):
with open(f'tutorial_{name}.md', 'r') as fin:
markdown = fin.read()
if ENABLE_EMBEDDED_DEMO:
- style = 'style="width:100%;height:200px;border:none"'
if name == 'triangle':
markdown = PREAMBLE + markdown
- iframe = f"\n\n"
- markdown = iframe + markdown
+ markdown = '
' + \
+ f'
' + \
+ f'
🔗' + \
+ '
\n' + markdown
rendered = mistletoe.markdown(markdown, PygmentsRenderer)
template = open('tutorial_template.html').read()
rendered = template.replace('$BODY', rendered)
diff --git a/libs/filamentjs/docs/main.css b/libs/filamentjs/docs/main.css
index 36a2f373cc..cae2d52427 100644
--- a/libs/filamentjs/docs/main.css
+++ b/libs/filamentjs/docs/main.css
@@ -23,12 +23,6 @@ code, div.highlight pre {
color: rgb(0, 137, 235);
}
-iframe {
- border: none;
- width: 100%;
- height: 100%;
-}
-
a {
text-decoration: none;
color: black;
@@ -105,4 +99,23 @@ nav li {
nav {
text-align: right;
}
-}
\ No newline at end of file
+}
+
+div.demo_frame {
+ width: 100%;
+ height: 200px;
+ border: none;
+}
+
+iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+}
+
+div.demo_frame > a {
+ position: relative;
+ float: right;
+ right: 10px;
+ bottom: 35px;
+}
diff --git a/libs/filamentjs/docs/tutorial_redball.md b/libs/filamentjs/docs/tutorial_redball.md
index 934117c2d0..5a8f2b1570 100644
--- a/libs/filamentjs/docs/tutorial_redball.md
+++ b/libs/filamentjs/docs/tutorial_redball.md
@@ -1,3 +1,4 @@
+
This tutorial will describe how to create the redball demo, introducing you to materials and
textures.