Add hk promo

Author: apkd

src/_layouts/post.html

@@ -45,6 +45,15 @@ <h1 class="post-title" data-pagefind-meta="title">{{ page.title | markdownify }}
 
         {% if page.image %}
         <div class="featured-image-container mb-4">
+            <div class="wishlist-promo">
+                <div class="wishlist-promo-glass">
+                    <iframe src="https://store.steampowered.com/widget/3107870/" frameborder="0"></iframe>
+                </div>
+
+                <img class="wishlist-promo-overlay wishlist-promo-overlay-left d-none d-md-block" src="/assets/img/posts/overlay-left.png" alt="">
+                <img class="wishlist-promo-overlay wishlist-promo-overlay-right d-none d-xs-block" src="/assets/img/posts/overlay-right.png" alt="">
+                <img class="wishlist-promo-overlay wishlist-promo-overlay-right d-xs-none d-sm-block" src="/assets/img/posts/overlay-right-mobile.png" alt="">
+            </div>
             <img width="2048" height="400" class="featured-image" fetchpriority="high" src="{% if page.image contains ' ://' %} {{ page.image | replace_first: 'assets/img/social/', 'assets/img/cover/'  }}{% else %}{{site.baseurl }}/{{ page.image | replace_first: 'assets/img/social/', 'assets/img/cover/'  }}{% endif %}" alt="{{ page.title }}">
             {% comment %}
             {% if page.thumbtext %}

src/static/bundle.scss

@@ -6,4 +6,5 @@
 @use "./scss/pagefind" as *;
 @use "./scss/theme" as *;
 @use "./scss/rouge" as *;
+@use "./scss/wishlistpromo" as *;
 @use "./scss/gist" as *;

src/static/img/posts/overlay-left.png

@@ -172,15 +172,16 @@ img {
 
 .featured-image {
   width: 100%;
-  height: auto;
   display: block;
   margin-bottom: 2rem;
   margin-left: 0;
   margin-right: 0;
   box-shadow: rgba(0, 0, 0, 0.7) 0 -2px 4px 1;
-  @media (max-width: 767.98px) {
-    height: 192px;
-  }
+  //height: auto;
+  //@media (max-width: 767.98px) {
+  //  height: 192px;
+  //}
+  height: 208px;
 }
 
 .featured-image-text {

src/static/img/posts/overlay-right-mobile.png

@@ -0,0 +1,74 @@
+.wishlist-promo {
+  position: absolute;
+  top: 28px;
+  right: 32px;
+  width: min(700px, 100%);
+  height: calc(200px - 33.5px);
+  transform: scale(0.9);
+  transform-origin: top right;
+  overflow: visible;
+}
+
+.wishlist-promo-glass {
+  position: relative;
+  width: 100%;
+  border-radius: 4px;
+  box-shadow: 0 0 48px rgba(0, 0, 0, 0.7);
+  height: calc(200px - 33.5px);
+  overflow: visible;
+}
+
+.wishlist-promo-glass::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 4px;
+  background: rgb(20 20 20 / 0.35);
+  height: calc(200px - 33.5px);
+  backdrop-filter: blur(8px) saturate(80%) contrast(2);
+  -webkit-backdrop-filter: blur(8px) saturate(80%) contrast(2);
+  z-index: 0;
+  pointer-events: none;
+}
+
+.wishlist-promo-glass > iframe {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 200px;
+  opacity: 0.85;
+  border: 0;
+  background: transparent;
+  filter: saturate(150%);
+  overflow: visible;
+}
+
+.wishlist-promo-overlay {
+  position: absolute;
+  z-index: 2;
+  pointer-events: none;
+  user-select: none;
+
+  display: block;
+  max-width: none;
+  max-height: none;
+
+  object-fit: contain;
+  top: 0;
+  width: auto;
+}
+
+.wishlist-promo-overlay-left {
+  left: 0;
+  height: 314px;
+  object-position: left top;
+  transform: translate(-116px, -70px);
+}
+
+.wishlist-promo-overlay-right {
+  right: 0;
+  height: 314px;
+  object-position: right top;
+  transform: translate(124.5px, -72.5px);
+}