hashirama/reanimate
Watch
1
0
Fork
You've already forked reanimate
 0
mirror of https://github.com/reanimate/reanimate.git synced 2026-09-09 15:12:21 +00:00
Code Issues Projects Releases Wiki Activity

Make video sizes responsive.

Browse source 
Former-commit-id: 88534639c2b375d648b46ad7ac8690ddad8b4721
This commit is contained in:
David Himmelstrup 2020-06-15 14:37:28 +08:00
commit 3bc6cb0ab5
3 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/index.md
View file

@ -25,7 +25,7 @@ Running the above code should open a browser window containing this animation:
</code></pre>
</details>
<br/>
<video width="640" height="360" muted autoplay loop>
<video style="width:100%" muted autoplay loop>
<source src="https://i.imgur.com/bvLqalX.mp4">
</video>

6
docs/introduction.md
View file

@ -24,7 +24,7 @@ We'll start with a minimal animation that prints "Hello world" on top of a cyan
<summary>Toggle source code.</summary>
<pre><code class="haskell">{!examples/intro_hello.hs!}</code></pre>
</details>
<video width="640" height="360" muted autoplay loop>
<video style="width:100%" muted autoplay loop>
<source src="https://i.imgur.com/dJIl8dy.mp4">
</video><pre><code class="haskell">{!examples/intro_hello.hs!}</code></pre>
@ -60,7 +60,7 @@ To make animations agnostic to resolution, **reanimate** uses its own coordinate
<summary>Toggle source code.</summary>
<pre><code class="haskell">{!examples/intro_canvas.hs!}</code></pre>
</details>
<video width="640" height="360" muted autoplay loop>
<video style="width:100%" muted autoplay loop>
<source src="https://i.imgur.com/E2hrppM.mp4">
</video><br/>
@ -100,6 +100,6 @@ SVG text nodes can be undesirable for two reasons: (a) How they are rendered dep
<summary>Toggle source code.</summary>
<pre><code class="haskell">{!examples/intro_canvas_square.hs!}</code></pre>
</details>
<video width="360" height="360" muted autoplay loop>
<video style="width:100%; max-width: 320px" muted autoplay loop>
<source src="https://i.imgur.com/XaKIn8W.mp4">
</video>

8
docs/voice.md
View file

@ -43,7 +43,7 @@ The video below illustrates how accurate the automatically generated timing info
<summary>Toggle source code.</summary>
<pre><code class="haskell">{!examples/voice_transcript.hs!}</code></pre>
</details>
<video width="640" height="360" controls>
<video style="width:100%" controls>
<source src="https://i.imgur.com/9Fxqgkz.mp4">
</video><br/>
@ -59,7 +59,7 @@ Faking data is done automatically by `loadTranscript` if no audio file can be fo
<summary>Toggle source code.</summary>
<pre><code class="haskell">{!examples/voice_fake.hs!}</code></pre>
</details>
<video width="640" height="360" controls>
<video style="width:100%" controls>
<source src="https://i.imgur.com/5o0gQ0F.mp4">
</video><br/>
@ -86,7 +86,7 @@ Looking at the `TWord` data structure, the key fields are `wordStart`, `wordEnd`
<summary>Toggle source code.</summary>
<pre><code class="haskell">{!examples/voice_triggers.hs!}</code></pre>
</details>
<video width="640" height="360" controls>
<video style="width:100%" controls>
<source src="https://i.imgur.com/efPy460.mp4">
</video><br/>
@ -124,6 +124,6 @@ flash flash flash
<summary>Toggle source code.</summary>
<pre><code class="haskell">{!examples/voice_advanced.hs!}</code></pre>
</details>
<video width="640" height="360" controls>
<video style="width:100%" controls>
<source src="https://i.imgur.com/5YIaSmB.mp4">
</video><br/>