Add continue and back-to-home links

Add a link to the related workshop at the end of each talk and a link to the home page at the end of each workshop.

scss/blocks/step.scss

@@ -55,6 +55,19 @@
 	}
 }
 
+.step_continue {
+	@extend button;
+	@include transition(background, opacity);
+	margin-top: ($grid * 2);
+	opacity: 0;
+
+	.step.present & {
+		opacity: 1;
+		// Not using mixin here because of required delay
+		transition: background $transition-duration, opacity $transition-duration $transition-timing-function 2s;
+	}
+}
+
 .step_list {
 	li {
 		display: inline-block;

www/presentations/1-becoming-an-author/talk/index.html

@@ -112,6 +112,7 @@
 				<img class="anim-slide-left" src="contract-list.png" alt="title; granted rights; limitations of time, place, use; no responsibility for violation of third party rights">
 				<img class="anim-slide-right" src="you-may.png" alt="">
 			</p>
+			<a class="step_continue" href="../workshop">Continue with workshop</a>
 		</div>
 	</div>
 

www/presentations/1-becoming-an-author/workshop/index.html

@@ -71,8 +71,11 @@ <h1>
 		</div>
 
 		<div class="step" data-x="-60" data-y="-210" data-rotate="340" data-scale=".25">
-			<img src="carry.png" alt="">
-			<img class="anim-fade" style="vertical-align: top;" src="check.png" alt="Check!">
+			<p>
+				<img src="carry.png" alt="">
+				<img class="anim-fade" style="vertical-align: top;" src="check.png" alt="Check!">
+			</p>
+			<a class="step_continue" href="../../../">Back to home</a>
 		</div>
 	</div>
 

www/presentations/2-your-scientific-output/talk/index.html

@@ -95,6 +95,7 @@
 				<li class="anim-pop delay-5"><a href="https://twitter.com/"><img src="logo-twitter.png" alt="Twitter" width="125"></a></li>
 				<li class="anim-pop delay-6"><a href="https://www.youtube.com/"><img src="logo-youtube.png" alt="YouTube" width="160"></a></li>
 			</ul>
+			<a class="step_continue" href="../workshop">Continue with workshop</a>
 		</div>
 	</div>
 

www/presentations/2-your-scientific-output/workshop/index.html

@@ -73,13 +73,14 @@ <h1>
 			</p>
 		</div>
 
-		<div class="step" data-x="0" data-y="-880">
+		<div class="step" data-x="0" data-y="-835">
 			<p>
 				<img class="anim-pop" src="do-i-want-it.png" alt="Do I want it?">
 			</p>
 			<p>
 				<img class="anim-fade" src="open-peer-review.png" alt="Open Peer Review: Analysis">
 			</p>
+			<a class="step_continue" href="../../../">Back to home</a>
 		</div>
 	</div>
 

www/presentations/3-research-data-management/talk/index.html

@@ -63,6 +63,7 @@
 				<img src="backup.png" alt="Backup instead of data loss.">
 				<img class="anim-slide-right delay-4" src="backup-trash.png" alt="">
 			</p>
+			<a class="step_continue" href="../workshop">Continue with workshop</a>
 		</div>
 	</div>
 

www/presentations/3-research-data-management/workshop/index.html

@@ -68,7 +68,10 @@ <h1>
 		</div>
 
 		<div class="step" data-x="160" data-y="920" data-rotate="-10" data-scale=".5">
-			<img src="contracts.png" alt="Contracts might help to regulate responsibility and availability for/of data.">
+			<p>
+				<img src="contracts.png" alt="Contracts might help to regulate responsibility and availability for/of data.">
+			</p>
+			<a class="step_continue" href="../../../">Back to home</a>
 		</div>
 	</div>