Merge pull request #33 from codeplaysoftware/add-syclops-video

Add SYCLOPS video.

Author: scottstraughan

_includes/headers/expanded.html

@@ -1,10 +1,24 @@
 <section id="header">
     <div class="wrapper">
         {%- include _includes/nav-bar.html -%}
-        <div class="middle">
-            <h1>Advancing AI/data mining for extremely large and diverse data for Europe and beyond, by
-                democratizing its acceleration through open standards and a healthy, competitive,
-                and innovating ecosystem.</h1>
+        <div class="split">
+            <div class="middle">
+                <h1>Advancing AI/data mining for extremely large and diverse data for Europe and beyond, by
+                    democratizing its acceleration through open standards and a healthy, competitive,
+                    and innovating ecosystem.</h1>
+            </div>
+            <div class="middle">
+                <div class="video">
+                    <a class="youtube"
+                       href="https://www.youtube.com/watch?v=-UZDfad-4eI"
+                       target="_blank"
+                       rel="noopener">Watch on YouTube.com</a>
+
+                    <video controls muted autoplay>
+                        <source src="https://d25jew5a8evv5b.cloudfront.net/intro.mp4" type="video/mp4">
+                    </video>
+                </div>
+            </div>
         </div>
     </div>
 </section>

_layouts/page.html

@@ -50,6 +50,7 @@
     <meta content="
                 default-src
                     https://developer.codeplay.com
+                    https://d25jew5a8evv5b.cloudfront.net
                     'self';
                 object-src
                     'self';

static/css/styled.scss

@@ -641,8 +641,57 @@ body {
             }
         }
 
+        .split {
+            display: flex;
+            flex-direction: column-reverse;
+            padding: 1rem 1rem 2rem 0;
+            gap: 2rem;
+
+            .video {
+                width: 100%;
+                position: relative;
+
+                video {
+                    width: 100%;
+                    position: relative;
+                    z-index: 0;
+                    top: 0;
+                }
+
+                .youtube {
+                    background-color: var(--hint-color-alt);
+                    color: white;
+                    padding: .5rem;
+                    font-size: 12px;
+                    position: absolute;
+                    z-index: 1;
+                    right: -.5rem;
+                    top: 2rem;
+                    opacity: .8;
+                    transition: .3s all;
+
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+            }
+
+            @media screen and (min-width: 1200px) {
+                flex-direction: row;
+                gap: 6rem;
+
+                .video {
+                    width: 572px;
+                    height: 356px;
+
+                    video {
+                        height: 356px;
+                    }
+                }
+            }
+        }
+
         .middle {
-            min-height: 430px;
             display: flex;
             align-items: center;
 
@@ -651,10 +700,6 @@ body {
                 font-weight: normal;
                 padding: 0;
                 margin: 0;
-
-                @media screen and (min-width: 1040px) {
-                    width: 60%;
-                }
             }
         }
     }