ESY-6582 Tab can include src

SwedbankPay · Mar 5, 2025 · 3385a6f · 3385a6f
1 parent ec0f1b9
commit 3385a6f
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 26 deletions.
diff --git a/_layouts/front-page.html b/_layouts/front-page.html
@@ -15,9 +15,7 @@
             <h3>{{ front_page_hero1 }}
                 <span class="d-block">
                     <span class="front-page-hero-jumbo">{{ front_page_hero2 }}</span>
-                    <span class="front-page-hero-name"> {</span>
                     <span class="front-page-hero-lean">{{ front_page_title }}</span>
-                    <span class="front-page-hero-name">}</span>
                 </span>
             </h3>
             <p>{{ front_page_ingress }}</p>

diff --git a/_sass/front-page.scss b/_sass/front-page.scss
@@ -57,11 +57,12 @@ $front-page-max-width: $breakpoint-lg;
 
     #github {
         top: 2.5rem;
+
         path {
             fill: $black;
         }
     }
-    
+
     .front-page-top {
         position: relative;
         margin: 0 4rem;
@@ -82,43 +83,49 @@ $front-page-max-width: $breakpoint-lg;
                 margin-bottom: 2rem;
                 font-size: 2.5rem;
                 line-height: 3.5rem;
-                
+
 
             }
 
             p {
                 color: $brown;
                 font-size: 1.125rem;
             }
-            
+
             a {
                 color: #43d0dd;
             }
 
-            .front-page-hero-name {
-                font-family: $font_mono;
-                font-weight: bold;
-                font-size: 2.5rem;
-                color: $yellow;
-                margin-bottom: 1rem;
-
-
-                span {
-                    color: $white;
-                }
+            .front-page-hero-jumbo {
+                color: $brown;
+                font-family: $font_headline;
+                margin-bottom: 2rem;
+                font-size: 3.5rem;
             }
 
-            .front-page-hero-jumbo {
-                    color: $brown;
-                    font-family: $font_headline;
-                    margin-bottom: 2rem;
-                    font-size: 3.5rem;
-                }
-
             .front-page-hero-lean {
                 font-family: $font_mono;
+                white-space: nowrap;
+
+                &::before {
+                    content: ' { ';
+                    font-family: $font_mono;
+                    font-weight: bold;
+                    font-size: 2.5rem;
+                    color: $yellow;
+                    margin-bottom: 1rem;
+                }
+
+                &::after {
+                    content: ' } ';
+                    font-family: $font_mono;
+                    font-weight: bold;
+                    font-size: 2.5rem;
+                    color: $yellow;
+                    margin-bottom: 1rem;
+                }
             }
-            
+
 
         }
 
@@ -139,13 +146,14 @@ $front-page-max-width: $breakpoint-lg;
         }
 
         @media screen and (min-width: $breakpoint-xxl) {
-            
+
             .front-page-intro-cards {
                 left: 0;
                 width: 100%;
             }
         }
     }
+
     .front-page-container {
         max-width: $front-page-max-width;
         margin: $front-page-padding;
@@ -243,4 +251,4 @@ $front-page-max-width: $breakpoint-lg;
 
         }
     }
-}
+}
diff --git a/_sass/swedbank-pay-design-guide-theme.scss b/_sass/swedbank-pay-design-guide-theme.scss
@@ -480,4 +480,22 @@ body {
         display: block;
         position: absolute;
     }
+}
+
+.video-container {
+    width: 100%;
+    max-width: 330px;
+    padding: 0.5rem;
+
+    @media screen and (max-width: $breakpoint-lg) {
+        display: none !important;
+    }
+}
+
+.video-container video {
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    aspect-ratio: 872 / 1080;
+    object-fit: cover;
 }