Skip to content

Commit ebe864f

Browse files
apkdapkd
committed
Add hk promo
1 parent b29fcaf commit ebe864f

10 files changed

Lines changed: 136 additions & 3 deletions

File tree

‎src/_layouts/post.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,15 @@ <h1 class="post-title" data-pagefind-meta="title">{{ page.title | markdownify }}
4545

4646
{% if page.image %}
4747
<div class="featured-image-container mb-4">
48+
<div class="wishlist-promo">
49+
<div class="wishlist-promo-glass">
50+
<iframe src="https://store.steampowered.com/widget/3107870/?l=english" frameborder="0"></iframe>
51+
</div>
52+
53+
<img class="wishlist-promo-overlay fade-in-long wishlist-promo-overlay-left d-none d-md-block" src="/assets/img/posts/overlay-left.png" alt="">
54+
<img class="wishlist-promo-overlay fade-in-long wishlist-promo-overlay-right d-none d-sm-block" src="/assets/img/posts/overlay-right.png" alt="">
55+
<img class="wishlist-promo-overlay fade-in-long wishlist-promo-overlay-right d-xs-block d-sm-none" src="/assets/img/posts/overlay-right-mobile.png" alt="">
56+
</div>
4857
<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 }}">
4958
{% comment %}
5059
{% if page.thumbtext %}
@@ -139,6 +148,24 @@ <h1 class="post-title" data-pagefind-meta="title">{{ page.title | markdownify }}
139148
</div>
140149
</div>
141150
</div>
151+
152+
<div class="featured-image-container mb-5 mt-5">
153+
<div class="wishlist-promo" style="left: -24px">
154+
<div class="wishlist-promo-glass">
155+
<iframe src="https://store.steampowered.com/widget/3107870/?l=english" frameborder="0"></iframe>
156+
</div>
157+
158+
<img class="wishlist-promo-overlay wishlist-promo-overlay-left d-none d-md-block" src="/assets/img/posts/overlay-left.png" alt="">
159+
<img class="wishlist-promo-overlay wishlist-promo-overlay-right d-none d-sm-block" src="/assets/img/posts/overlay-right.png" alt="">
160+
<img class="wishlist-promo-overlay wishlist-promo-overlay-right d-xs-block d-sm-none" src="/assets/img/posts/overlay-right-mobile.png" alt="">
161+
</div>
162+
<img width="2048" height="400" class="featured-image" fetchpriority="high" src="assets/img/cover/XucH5JNRFig.webp" alt="Highland Keep Promo">
163+
{% comment %}
164+
{% if page.thumbtext %}
165+
<div class="featured-image-text">{{ page.thumbtext }}</div>
166+
{% endif %}
167+
{% endcomment %}
168+
</div>
142169
</div>
143170
</div>
144171

‎src/_layouts/site.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
</li>
7777

7878
<li class="nav-item">
79-
<a class="nav-link" href="https://highlandkeep.com/" target="_blank">highland keep</a>
79+
<a class="nav-link" href="https://highlandkeep.com/" target="_blank">⚔ highland keep ⚔</a>
8080
</li>
8181

8282
</ul>

‎src/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@
2121
{% for post in featured_posts %}
2222
{% include featuredbox.html %}
2323
{% endfor %}
24+
25+
{% assign author = site.authors[post.author] %}
26+
<div class="col-md-6 align-content-center">
27+
<iframe src="https://store.steampowered.com/widget/3107870/?l=english" style="width: 100%; height: 200px" frameborder="0"></iframe>
28+
</div>
2429
</div>
2530
</section>
2631
{% endif %}

‎src/static/bundle.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@
66
@use "./scss/pagefind" as *;
77
@use "./scss/theme" as *;
88
@use "./scss/rouge" as *;
9+
@use "./scss/wishlistpromo" as *;
910
@use "./scss/gist" as *;

‎src/static/img/cover/XucH5JNRFig.jpg‎

488 KB
Loading

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

23.4 KB
Loading

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

16.6 KB
Loading

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

27.8 KB
Loading

‎src/static/scss/theme.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -172,14 +172,18 @@ img {
172172

173173
.featured-image {
174174
width: 100%;
175-
height: auto;
176175
display: block;
177176
margin-bottom: 2rem;
178177
margin-left: 0;
179178
margin-right: 0;
180179
box-shadow: rgba(0, 0, 0, 0.7) 0 -2px 4px 1;
180+
//height: auto;
181+
//@media (max-width: 767.98px) {
182+
// height: 192px;
183+
//}
184+
height: 208px;
181185
@media (max-width: 767.98px) {
182-
height: 192px;
186+
height: 240px;
183187
}
184188
}
185189

‎src/static/scss/wishlistpromo.scss‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
.wishlist-promo {
2+
position: absolute;
3+
top: 28px;
4+
right: 32px;
5+
width: min(700px, 100%);
6+
height: calc(200px - 33.5px);
7+
transform: scale(0.9);
8+
transform-origin: top right;
9+
overflow: visible;
10+
@media (max-width: 767.98px) {
11+
top: 40px;
12+
right: 20px;
13+
left: -20px;
14+
width: auto;
15+
}
16+
}
17+
18+
.wishlist-promo-glass {
19+
position: relative;
20+
width: 100%;
21+
border-radius: 4px;
22+
box-shadow: 0 0 48px rgba(0, 0, 0, 0.7);
23+
height: calc(200px - 33.5px);
24+
overflow: visible;
25+
}
26+
27+
.wishlist-promo-glass::before {
28+
content: '';
29+
position: absolute;
30+
inset: 0;
31+
border-radius: 4px;
32+
background: rgb(20 20 20 / 0.35);
33+
height: calc(200px - 33.5px);
34+
backdrop-filter: blur(8px) saturate(80%) contrast(2);
35+
-webkit-backdrop-filter: blur(8px) saturate(80%) contrast(2);
36+
z-index: 0;
37+
pointer-events: none;
38+
}
39+
40+
.wishlist-promo-glass > iframe {
41+
position: relative;
42+
z-index: 1;
43+
display: block;
44+
width: 100%;
45+
height: 200px;
46+
opacity: 0.85;
47+
border: 0;
48+
background: transparent;
49+
filter: saturate(150%);
50+
overflow: visible;
51+
}
52+
53+
.wishlist-promo-overlay {
54+
position: absolute;
55+
z-index: 2;
56+
pointer-events: none;
57+
user-select: none;
58+
59+
display: block;
60+
max-width: none;
61+
max-height: none;
62+
63+
object-fit: contain;
64+
top: 0;
65+
width: auto;
66+
}
67+
68+
.wishlist-promo-overlay-left {
69+
left: 0;
70+
height: 318px;
71+
object-position: left top;
72+
transform: translate(-121px, -74px);
73+
}
74+
75+
.wishlist-promo-overlay-right {
76+
right: 0;
77+
height: 318px;
78+
object-position: right top;
79+
transform: translate(127px, -74px);
80+
}
81+
82+
.fade-in-long {
83+
opacity: 0;
84+
animation: fadeIn 6s ease forwards;
85+
}
86+
87+
@keyframes fadeIn {
88+
to { opacity: 1; }
89+
}
90+
91+
@media (prefers-reduced-motion: reduce) {
92+
.fade-in-long, .fade-in-short {
93+
opacity: 1;
94+
animation: none;
95+
}
96+
}

0 commit comments

Comments
 (0)