Skip to content

Commit f6ce65f

Browse files
JoelMarceyJoelMarcey
committed
Screencast Toggler
1 parent 913f989 commit f6ce65f

File tree

7 files changed

+80
-17
lines changed

7 files changed

+80
-17
lines changed

‎_get_started/installation/linux.md

+26-10
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,16 @@ sh Anaconda3-5.2.0-Linux-x86_64.sh
5656
# and follow the prompts. The defaults are generally good.`
5757
```
5858

59-
<div id="screencast">
60-
<script src="https://asciinema.org/a/SRbIn2nFnsUiYtlIcUsDVXN4n.js" id="asciicast-SRbIn2nFnsUiYtlIcUsDVXN4n" data-speed="3" async></script>
59+
> You may have to open a new terminal or re-source your `~/.bashrc `to get access to the `conda` command.
60+
61+
<div>
62+
<a href="javascript:void(0);" class="btn btn-lg btn-green with-right-arrow show-screencast">Show Demo</a>
63+
<div class="screencast">
64+
<script src="https://asciinema.org/a/SRbIn2nFnsUiYtlIcUsDVXN4n.js" id="asciicast-SRbIn2nFnsUiYtlIcUsDVXN4n" data-speed="3" async></script>
65+
<a href="javascript:void(0);" class="btn btn-lg btn-green show-info with-left-arrow">Hide Demo</a>
66+
</div>
6167
</div>
6268

63-
> You may have to open a new terminal or re-source your `~/.bashrc `to get access to the `conda` command
64-
6569
#### pip
6670

6771
*Python 3*
@@ -94,8 +98,12 @@ To install PyTorch via Anaconda, and do not have a [CUDA-capable](https://develo
9498
conda install pytorch-cpu torchvision-cpu -c pytorch
9599
```
96100

97-
<div id="screencast">
98-
<script src="https://asciinema.org/a/wtojk0bqpUDIb3yIHUsZqD9Ha.js" id="asciicast-wtojk0bqpUDIb3yIHUsZqD9Ha" data-speed="3" async></script>
101+
<div>
102+
<a href="javascript:void(0);" class="btn btn-lg btn-green with-right-arrow show-screencast">Show Demo</a>
103+
<div class="screencast">
104+
<script src="https://asciinema.org/a/wtojk0bqpUDIb3yIHUsZqD9Ha.js" id="asciicast-wtojk0bqpUDIb3yIHUsZqD9Ha" data-speed="3" async></script>
105+
<a href="javascript:void(0);" class="btn btn-lg btn-green show-info with-left-arrow">Hide Demo</a>
106+
</div>
99107
</div>
100108

101109
#### CUDA 9.0
@@ -106,8 +114,12 @@ To install PyTorch via Anaconda, and you are using CUDA 9.0, use the following `
106114
conda install pytorch torchvision -c pytorch
107115
```
108116

109-
<div id="screencast">
110-
<script src="https://asciinema.org/a/HaCIxmYVEd8xGRAKsDu9hv9up.js" id="asciicast-HaCIxmYVEd8xGRAKsDu9hv9up" data-speed="5" async></script>
117+
<div>
118+
<a href="javascript:void(0);" class="btn btn-lg btn-green with-right-arrow show-screencast">Show Demo</a>
119+
<div class="screencast">
120+
<script src="https://asciinema.org/a/HaCIxmYVEd8xGRAKsDu9hv9up.js" id="asciicast-HaCIxmYVEd8xGRAKsDu9hv9up" data-speed="5" async></script>
121+
<a href="javascript:void(0);" class="btn btn-lg btn-green show-info with-left-arrow">Hide Demo</a>
122+
</div>
111123
</div>
112124

113125
#### CUDA 8.x
@@ -257,8 +269,12 @@ import torch
257269
torch.cuda.is_available();
258270
```
259271

260-
<div id="screencast">
261-
<script src="https://asciinema.org/a/15dyZZvvakqbfKgfh2LByMkXz.js" id="asciicast-15dyZZvvakqbfKgfh2LByMkXz" data-speed="2" async></script>
272+
<div>
273+
<a href="javascript:void(0);" class="btn btn-lg btn-green with-right-arrow show-screencast">Show Demo</a>
274+
<div class="screencast">
275+
<script src="https://asciinema.org/a/15dyZZvvakqbfKgfh2LByMkXz.js" id="asciicast-15dyZZvvakqbfKgfh2LByMkXz" data-speed="2" async></script>
276+
<a href="javascript:void(0);" class="btn btn-lg btn-green show-info with-left-arrow">Hide Demo</a>
277+
</div>
262278
</div>
263279

264280
## Building from source

‎_get_started/installation/mac.md

+18-6
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,12 @@ sh Anaconda3-5.2.0-MacOSX-x86_64.sh
2929
# and follow the prompts. The defaults are generally good.`
3030
```
3131

32-
<div id="screencast">
33-
<script src="https://asciinema.org/a/PS2oOMynjw5YR96WcgVLJDXqf.js" id="asciicast-PS2oOMynjw5YR96WcgVLJDXqf" data-speed="4" async></script>
32+
<div>
33+
<a href="javascript:void(0);" class="btn btn-lg btn-green with-right-arrow show-screencast">Show Demo</a>
34+
<div class="screencast">
35+
<script src="https://asciinema.org/a/PS2oOMynjw5YR96WcgVLJDXqf.js" id="asciicast-PS2oOMynjw5YR96WcgVLJDXqf" data-speed="4" async></script>
36+
<a href="javascript:void(0);" class="btn btn-lg btn-green show-info with-left-arrow">Hide Demo</a>
37+
</div>
3438
</div>
3539

3640
#### pip
@@ -59,8 +63,12 @@ To install PyTorch via Anaconda, use the following conda command:
5963
conda install pytorch torchvision -c pytorch
6064
```
6165

62-
<div id="screencast">
63-
<script src="https://asciinema.org/a/iLaHS145GyJtwyJ3MswYaSOSC.js" id="asciicast-iLaHS145GyJtwyJ3MswYaSOSC" data-speed="2" async></script>
66+
<div>
67+
<a href="javascript:void(0);" class="btn btn-lg btn-green with-right-arrow show-screencast">Show Demo</a>
68+
<div class="screencast">
69+
<script src="https://asciinema.org/a/iLaHS145GyJtwyJ3MswYaSOSC.js" id="asciicast-iLaHS145GyJtwyJ3MswYaSOSC" data-speed="2" async></script>
70+
<a href="javascript:void(0);" class="btn btn-lg btn-green show-info with-left-arrow">Hide Demo</a>
71+
</div>
6472
</div>
6573

6674
### pip
@@ -105,8 +113,12 @@ import torch
105113
torch.cuda.is_available();
106114
```
107115

108-
<div id="screencast">
109-
<script src="https://asciinema.org/a/byF9rotzbaW0jzFnwWfAeW4ak.js" id="asciicast-byF9rotzbaW0jzFnwWfAeW4ak" data-speed="2" async></script>
116+
<div>
117+
<a href="javascript:void(0);" class="btn btn-lg btn-green with-right-arrow show-screencast">Show Demo</a>
118+
<div class="screencast">
119+
<script src="https://asciinema.org/a/byF9rotzbaW0jzFnwWfAeW4ak.js" id="asciicast-byF9rotzbaW0jzFnwWfAeW4ak" data-speed="2" async></script>
120+
<a href="javascript:void(0);" class="btn btn-lg btn-green show-info with-left-arrow">Hide Demo</a>
121+
</div>
110122
</div>
111123

112124
## Building from source

‎_sass/_variables.scss

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ $command_block_black: #4a4a4a;
1717
$smoky_grey: #bfbfc1;
1818
$medium_smoky_grey: #a5a5a5;
1919
$code_link_color: #4974D1;
20+
$green: #00ff00;
2021

2122
$desktop_header_height: 90px;
2223
$mobile_header_height: 68px;

‎_sass/base_styles.scss

+17
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ a.btn {
4343
background-color: $white;
4444
}
4545

46+
&.btn-green {
47+
background-color: $green;
48+
}
49+
4650
@include animated_border_hover_state;
4751
}
4852

@@ -86,6 +90,19 @@ a, .btn {
8690
padding-right: rem(32px);
8791
}
8892
}
93+
&.with-left-arrow {
94+
padding-left: rem(32px);
95+
position: relative;
96+
background-image: url($baseurl + "/assets/images/chevron-left-grey.svg");
97+
background-size: 6px 13px;
98+
background-position: top 10px left 11px;
99+
background-repeat: no-repeat;
100+
@include desktop {
101+
background-size: 8px 14px;
102+
background-position: top 16px left 12px;
103+
padding-left: rem(32px);
104+
}
105+
}
89106
}
90107

91108
.main-background {

‎_sass/get-started.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -155,10 +155,11 @@
155155
display: block;
156156
}
157157

158-
#screencast {
158+
.screencast {
159159
iframe {
160160
width: 100% !important;
161161
}
162+
display: none;
162163
}
163164

164165
.get-started {

‎assets/show-screencast.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
$('a.show-screencast').one('click', func);
2+
3+
function func(e) {
4+
e.preventDefault();
5+
$(this).next('div.screencast').show();
6+
// Hide the show button
7+
$(this).hide();
8+
}
9+
10+
$('div.screencast a:contains(Hide)').click(function (e) {
11+
e.preventDefault();
12+
// Make the show button visible again
13+
$(this).parent().hide()
14+
.prev().one('click', func).show();
15+
});

‎get-started.html

+1
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,4 @@ <h1>Get<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Started</h1>
9999
}
100100
</script>
101101
<script src="{{ site.baseurl }}/assets/quick-start-module.js"></script>
102+
<script src="{{ site.baseurl }}/assets/show-screencast.js"></script>

0 commit comments

Comments
 (0)