Merge pull request #137 from wpcomvip/AC-1542

Styles for header video
SparkPost · Jul 15, 2020 · b21df59 · b21df59
2 parents ae8eadb + 87f1db7
commit b21df59
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 0 deletions.
diff --git a/themes/jolteon/css/app.css b/themes/jolteon/css/app.css
diff --git a/themes/jolteon/css/app.min.css b/themes/jolteon/css/app.min.css
diff --git a/themes/jolteon/css/scss/06-components/_components.hero-slider.scss b/themes/jolteon/css/scss/06-components/_components.hero-slider.scss
@@ -251,4 +251,66 @@
 			color: $white-color;
 		}
 	}
+
+  &.hero--video {
+    flex-flow: column;
+    min-height: 500px;
+
+    .header-video-container {
+      margin-top: 80px;
+      padding: $padding-large-horizontal 0;
+      z-index: 5;
+
+      video {
+        background-color: $white;
+        border: 1px solid $white;
+        box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
+        height: auto;
+        margin: ($padding-large-horizontal * 4) auto 0;
+        max-width: 90%;
+        width: auto;
+
+        @include mq($from: phablet) {
+          max-width: 550px;
+        }
+
+        @include mq($from: tablet) {
+          max-width: 700px;
+        }
+
+        @include mq($from: desktop) {
+          max-width: 800px;
+        }
+      }
+
+      @include mq($from: tablet) {
+        margin-top: 0;
+      }
+
+      @include mq($from: desktop) {
+        margin-top: inherit;
+      }
+    }
+
+    .button-container {
+      z-index: 5;
+
+      .cta-button {
+        display: block;
+
+        @include mq($from: phablet) {
+          display: inline-block;
+        }
+      }
+    }
+
+    @include mq($from: tablet) {
+      height: auto;
+      max-height: 650px;
+    }
+
+    @include mq($from: desktop) {
+      max-height: 720px;
+    }
+  }
 }