@asd20/ui 3.2.642 → 3.2.644

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.642",
+  "version": "3.2.644",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20ImageHeader/index.vue

@@ -17,7 +17,9 @@
     <div class="asd20-page-header__main">
       <div
         class="asd20-page-header__content"
-        :class="imageUrl ? 'add-fade new-header' : headerImageUrl ? 'new-header' : ''"
+        :class="
+          imageUrl ? 'add-fade new-header' : headerImageUrl ? 'new-header' : ''
+        "
         :style="styles"
       >
         <div class="asd20-page-header__tools">
@@ -85,9 +87,9 @@
         </div>
       </div>
 
-      <!-- <div v-if="imageUrl && !$slots.aside" class="asd20-page-header__image">
+      <div v-if="imageUrl && !$slots.aside" class="asd20-page-header__image">
         <img :src="imageUrl" :alt="imageCaption" />
-      </div> -->
+      </div>
     </div>
 
     <aside class="asd20-page-header__aside" v-if="$slots.aside">
@@ -360,10 +362,7 @@ export default {
       max-width: 100%;
     }
   }
-  .new-header {
-    background: var(--website-header__background-color) var(--imageBackground)
-      left center / cover no-repeat;
-  }
+
   .add-fade {
     &::before {
       content: '';
@@ -482,6 +481,10 @@ export default {
       position: relative;
       min-height: 300px;
     }
+    .new-header {
+      background: var(--website-header__background-color) var(--imageBackground)
+        center / cover no-repeat;
+    }
     &__content {
       position: relative;
       padding: space(1) space(2) space(1) space(2);
@@ -506,14 +509,15 @@ export default {
     }
 
     &__image {
-      img {
-        width: 100%;
-        height: 100%;
-        max-height: inherit;
-        object-fit: cover;
-        border-top: none;
-        min-height: 500px;
-      }
+      // img {
+      //   width: 100%;
+      //   height: 100%;
+      //   max-height: inherit;
+      //   object-fit: cover;
+      //   border-top: none;
+      //   min-height: 500px;
+      // }
+      display: none;
     }
     h1 {
       @include asd20-font(

package/src/components/organisms/Asd20VideoHeader/index.vue

@@ -215,11 +215,12 @@ export default {
       bottom: auto;
       left: 0;
       width: 100%;
-      height: 40%;
+      height: 50%;
       background: linear-gradient(
         170deg,
-        rgba(6, 11, 31, 0.7) 10%,
-        transparent 60%
+        rgba(6, 11, 31, 0.6) 10%,
+        rgba(6, 11, 31, 0) 50%,
+        transparent 100%
       );
     }
 

package/src/components/templates/Asd20DetailAlternateTemplate/index.vue

@@ -282,10 +282,10 @@ export default {
         padding: space(2) space(2) 0 0;
         background: none;
       }
-    }
-
-    .primary-messaging-section {
-      max-width: 50vw;
+      .primary-messaging-section {
+        display: block;
+        max-width: 50vw;
+      }
     }
   }
 }

package/src/components/templates/Asd20DetailImageTemplate/index.vue

@@ -255,10 +255,12 @@ export default {
         padding: space(2) space(2) 0 0;
         background: none;
       }
+      .primary-messaging-section {
+        display: block;
+        max-width: 50vw;
+      }
     }
-    .primary-messaging-section {
-      max-width: 50vw;
-    }
+
   }
 }
 </style>

package/src/components/templates/Asd20DetailTemplate/index.vue

@@ -242,10 +242,12 @@ export default {
         padding: space(2) space(2) 0 0;
         background: none;
       }
+      .primary-messaging-section {
+        display: block;
+        max-width: 50vw;
+      }
     }
-    .primary-messaging-section {
-      max-width: 50vw;
-    }
+
   }
 }
 </style>

package/src/components/templates/Asd20WayfindingImageTemplate/index.vue

@@ -330,6 +330,7 @@ export default {
       }
     }
     .asd20-page-content:not(.intro-message) .primary-messaging-section {
+      display: flex;
       padding: space(1) space(1) space(1) space(2);
       .asd20-messaging {
         margin-bottom: space(2) !important;