Update front page

Author: topframe

_layouts/frontpage.html

@@ -28,21 +28,30 @@
   </div>
 </div>
 
-{% if page.asciinema %}
-<div class="asciinema show-for-medium">
-  <div class="row">
-    <div class="small-12 columns">
-      <script type="text/javascript" src="https://asciinema.org/a/{{ page.asciinema }}.js" id="asciicast-{{ page.asciinema }}" async></script>
-    </div>
-  </div>
-</div>
-{% endif %}
-
 {% unless site.guides == empty %}
 <div class="row t30">
   <div class="columns">
+      {% if page.asciinema %}
+      <div class="asciinema hide-for-large">
+        <div class="row">
+          <div class="small-12 columns">
+            <a href="https://asciinema.org/a/{{ page.asciinema }}"><img src="https://asciinema.org/a/{{ page.asciinema }}.png" width="836"/></a>
+          </div>
+        </div>
+      </div>
+      {% endif %}
     <div class="panel white">
       <div class="row">
+        {% if page.asciinema %}
+        <div class="asciinema show-for-large">
+          <div class="row">
+            <div class="small-12 columns">
+              <script type="text/javascript" src="https://asciinema.org/a/{{ page.asciinema }}.js" id="asciicast-{{ page.asciinema }}" async></script>
+            </div>
+          </div>
+        </div>
+        {% endif %}
+          
         {% assign guides = site.guides %}
         {% for guide in guides limit:2 %}
         <div class="medium-6 columns">

_sass/_layout.scss

@@ -715,6 +715,7 @@ body.video {
 
 .asciinema {
   text-align: center;
+  padding: 0 10px 20px;
   .asciicast {
     margin: 0 !important;
   }
@@ -724,8 +725,9 @@ body.video {
 //---------------------------
 
 body.frontpage .asciinema {
+  padding: 0 0 10px;
+  margin: 0 auto;
   @include breakpoint(large) {
-    padding: 40px 0 10px;
-    background-color: $grey-3;
+    padding: 50px 10px;
   }
 }