Merge pull request #198 from chkworks/redesign/full-width-video-new

Redesign/full width video new

_includes/_top-navigation.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg bg-light-stride-website">
+<nav class="navbar navbar-expand-lg bg-light-stride-website fixed-top">
     <div class="container-xxl">
         <a class="navbar-brand" href="/">
             <img id="logo" height="37" width="124" src="/images/svg/stride-logo-light.svg" alt="Stride logo">

_includes/banner.html

@@ -1,7 +1,7 @@
 {% capture style %}
 background-image: url({{ image-url }}); background-position: 50% 50%; background-size: cover
 {% endcapture %}
-<div style="{{ style | strip }}">
+<div style="{{ style | strip }}" class="header-image">
     <div class="cover text-center py-5">{% if h1 == true %}
         <h1 class="text-light pt-4">{{ title }}</h1>{% else %}
         <p class="text-light pt-4 h1">{{ title }}</p>{% endif %}

_includes/sponsor-generic.html

@@ -1,35 +1,25 @@
 {% comment %} Create cards manually, or move them to json {% endcomment %}
-<div class="col-sm-6 col-xxl-4">
-    <div class="card text-center h-100">
-        <div class="bg-white d-flex" style="min-height: 200px">
-            <img class="card-img-top p-4" alt="logo" src="/images/sponsors/vvvv-logo.svg">
+<div class="col-sm-6 col-xxl-4 mb-2">
+    <div class="card text-center h-100 rounded">
+        <div class="bg-white d-flex justify-content-center align-middle" style="min-height: 200px">
+            <a target="_blank" rel="noopener" href="https://visualprogramming.net/" class="d-flex">
+                <img class="card-img-top p-4" alt="logo" src="/images/sponsors/vvvv-logo.svg" />
+            </a>
         </div>
-        <div class="card-body">
-            <p class="card-text" style="min-height: 80px">A visual live-programming environment that takes you from rapid prototyping to final production.</p>
-            <a target="_blank" rel="noopener" href="https://visualprogramming.net/" class="btn btn-outline-secondary stretched-link">Visit</a>
-            <p class="mt-4">
-                <span class="badge bg-stride me-1 mb-1">Sponsor</span>
-                <span class="badge bg-warning me-1 mb-1">Golden</span>
-                <span class="badge bg-primary me-1 mb-1">Technology</span>
-                <span class="badge bg-info me-1 mb-1">Visualisation</span>
-                <span class="badge bg-success me-1 mb-1">Partner</span>
-            </p>
+        <div class="card-body px-5 pb-5">
+            <p class="card-text">A visual live-programming environment that takes you from rapid prototyping to final production.</p>
         </div>
     </div>
 </div>
-<div class="col-sm-6 col-xxl-4">
-    <div class="card text-center h-100">
-        <div class="bg-white d-flex justify-content-center" style="min-height: 200px">
-            <img class="card-img-top p-2" alt="Happenstance Games logo" src="/images/sponsors/HappenLogo.webp" style="width: 200px">
+<div class="col-sm-6 col-xxl-4 mb-2">
+    <div class="card text-center h-100 rounded">
+        <div class="bg-white d-flex justify-content-center align-middle" style="min-height: 200px">
+            <a target="_blank" rel="noopener" href="https://store.steampowered.com/search/?publisher=Happenstance%20Games" class="d-flex">
+                <img class="card-img-top p-2" alt="Happenstance Games logo" src="/images/sponsors/HappenLogo.jpg" style="width: 200px" />
+            </a>
         </div>
-        <div class="card-body">
-            <p class="card-text" style="min-height: 80px">An indie game studio with a primary focus on virtual reality (VR) experiences.</p>
-            <a target="_blank" rel="noopener" href="http://www.happenstancegames.com/" class="btn btn-outline-secondary stretched-link">Visit</a>
-            <p class="mt-4">
-                <span class="badge bg-stride me-1 mb-1">Sponsor</span>
-                <span class="badge bg-warning me-1 mb-1">Platinum</span>
-                <span class="badge bg-info me-1 mb-1">VR</span>
-            </p>
+        <div class="card-body px-5 pb-5">
+            <p class="card-text">An indie game studio with a primary focus on virtual reality (VR) experiences.</p>
         </div>
     </div>
 </div>

_includes/video_home.html

@@ -0,0 +1,33 @@
+<div class="intro-section">
+  <div class="container-fluid p-0">
+    <div class="intro-video">
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/SlipyjcEb0g?controls=0&autoplay=1&mute=1&loop=1&playlist=SlipyjcEb0g" title="Stride YouTube demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
+    <div class="intro-content p-5 d-flex align-items-end">
+      <div class="container-xxl">
+        <div class="hero-video-text">
+          <h1 class="h1 mb-3 text-light mb-3 display-5 fw-bold">Stride Engine</h1>
+          <p class="text-light mb-2 lead fw-normal">Stride is a free, open-source, cross-platform game engine.
+          <p class="text-light mb-4 lead fw-normal">Use it to create 2D and 3D video games and interactive content <br /> for PC, mobile devices and Virtual Reality.</p>
+          <div class="row g-3">
+            <div class="col-auto">
+              <a href="/download/" class="btn btn-lg btn-stride">
+                <i class="fa-solid fa-download"></i> Download {{ site.download-version }}
+              </a>
+            </div>
+            <div class="col-auto">
+              <a href="{{ site.links.github-stride-url }}" class="btn btn-lg btn-outline-stride" target="_blank" rel="noopener">
+                <i class="fa-brands fa-github text-decoration-none"></i> Source Code (MIT)
+              </a>
+            </div>
+            <div class="col-auto">
+              <a href="{{ site.links.open-collective-url }}" class="btn btn-lg btn-info" target="_blank" rel="noopener">
+                {% include svg-icons.html type:'open-collective' size:22 %}&nbsp;Donate to our Collective
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

css/styles.scss

@@ -20,7 +20,11 @@ body {
     }
 }
 
-h1, h2 {
+.header-image {
+    margin-top: 62px;
+}
+
+h1, h2, h3, h4 {
     color: var(--bs-stride);
 }
 
@@ -73,6 +77,57 @@ a {
     cursor: pointer;
 }
 
+.container-xl {
+    max-width: 1140px !important;
+}
+
+.container-lg {
+    max-width: 960px !important;
+}
+
+.intro-section {
+    position: relative;
+
+    .intro-video {
+        position: relative;
+        overflow: hidden;
+        width: 100vw;
+        height: 90vh;
+
+        iframe {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100vw;
+            height: 100vh;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    @media (min-aspect-ratio: 16/9) {
+        .intro-video iframe {
+          /* height = 100 * (9 / 16) = 56.25 */
+          height: 56.25vw;
+        }
+    }
+
+    @media (max-aspect-ratio: 16/9) {
+        .intro-video iframe {
+          /* width = 100 / (9 / 16) = 177.777777 */
+          width: 177.78vh;
+        }
+    }
+
+    .intro-content {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        padding-bottom: 6rem !important;
+        box-shadow: inset 0 -600px 200px -120px rgba(20,10,10,0.4);
+    }
+}
+
 .postcontent {
     margin: 30px 0;
     box-shadow: var(--main-shadow);

features.html

@@ -4,7 +4,7 @@
 description: 'Stride supports an extensive list of features: Scene Editor, Physically Based Rendering, Particles, UI Editor, Prefabs, DX12 & Vulkan, C# Scripting, etc...'
 image: /images/backgrounds/features_banner.webp
 ---
-<div style="background-image: url(/images/backgrounds/features_banner.webp); background-position: 50% 40%; background-size: cover">
+<div style="background-image: url(/images/backgrounds/features_banner.webp); background-position: 50% 40%; background-size: cover" class="header-image">
     <div class="cover text-center py-5">
         <h1 class="text-light pt-4">Stride Features</h1>
         <div class=" pt-3">