Skip to content

Commit 9cee224

Browse files
carlospolopcarlospolop
committed
f
1 parent 126ea66 commit 9cee224

File tree

3 files changed

+355
-68
lines changed

3 files changed

+355
-68
lines changed

‎theme/index.hbs‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -304,18 +304,26 @@
304304

305305
<div id="content" class="content">
306306
<main>
307-
<div class="mobilesponsor-wrapper">
308-
309-
<a class="mobilesponsor" href="" target="_blank">
310-
<img src="" alt="" srcset="">
311-
<div class="mobilesponsor-title">
312-
</div>
313-
<div class="mobilesponsor-description">
314-
</div>
315-
<div class="mobilesponsor-cta"></div>
316-
</a>
307+
<div class="topsponsor-bsa" aria-hidden="true">
308+
<div id="bsa-zone_1773736844679-9_123456"></div>
317309
</div>
318310
{{{ content }}}
311+
<div class="bottomsponsor-wrapper">
312+
<a class="bottomsponsor" href="" target="_blank" rel="noopener noreferrer">
313+
<img src="" alt="" srcset="">
314+
<div class="bottomsponsor-title">
315+
</div>
316+
<div class="bottomsponsor-description">
317+
</div>
318+
<div class="bottomsponsor-cta"></div>
319+
</a>
320+
<div class="bottomsponsor-bsa" aria-hidden="true">
321+
<div id="bsa-zone_1773736987437-6_123456"></div>
322+
</div>
323+
</div>
324+
<div class="bsa-crawler-slot" aria-hidden="true">
325+
<div id="bsa-zone_1773065859037-5_123456"></div>
326+
</div>
319327
</main>
320328

321329
<nav class="nav-wrapper" aria-label="Page navigation">
@@ -356,14 +364,17 @@
356364
</button>
357365
<div id="sidetoc-wrapper" class="sidetoc-wrapper">
358366
<nav class="pagetoc"></nav>
359-
<a class="sidesponsor" href="" target="_blank">
367+
<a class="sidesponsor" href="" target="_blank" rel="noopener noreferrer">
360368
<img src="" alt="" srcset="">
361369
<div class="sponsor-title">
362370
</div>
363371
<div class="sponsor-description">
364372
</div>
365373
<div class="sponsor-cta"></div>
366374
</a>
375+
<div class="sidesponsor-bsa" aria-hidden="true">
376+
<div id="bsa-zone_1773737041447-5_123456"></div>
377+
</div>
367378
</div>
368379
</div>
369380
</div>

‎theme/pagetoc.css‎

Lines changed: 156 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,47 @@
22
.sidetoc {
33
display: none !important;
44
}
5-
.mobilesponsor {
5+
.topsponsor-bsa {
6+
margin-top: 25px;
7+
margin-bottom: 25px;
8+
background-color: var(--bg);
9+
border: 1px solid var(--table-border-color);
10+
border-radius: 8px;
11+
padding: 5px;
12+
display: none; /*changed via JS once ad is loaded*/
13+
overflow: hidden;
14+
}
15+
.bottomsponsor-wrapper {
16+
margin-top: 25px;
17+
}
18+
.bottomsponsor,
19+
.bottomsponsor-bsa {
620
margin-top: 25px;
7-
max-height: 40%;
8-
height: 40%;
921
background-color: var(--bg);
1022
border: 1px solid var(--table-border-color);
1123
border-radius: 8px;
1224
padding: 5px;
1325
display: none; /*changed via JS once ad is loaded*/
14-
flex-direction: column;
1526
text-decoration: none !important;
1627
}
17-
.mobilesponsor img {
28+
.bottomsponsor {
29+
flex-direction: column;
30+
}
31+
.bottomsponsor-bsa {
32+
overflow: hidden;
33+
}
34+
.bottomsponsor img {
1835
height: auto;
1936
width: 40%;
2037
padding: 10px;
2138
transition-property: all;
2239
transition-timing-function: cubic-bezier(.4,0,.2,1);
2340
transition-duration: .3s;
2441
}
25-
/* .mobilesponsor:hover img{
42+
/* .bottomsponsor:hover img{
2643
width: 30%;
2744
} */
28-
.mobilesponsor .mobilesponsor-title{
45+
.bottomsponsor .bottomsponsor-title{
2946
margin-top: 5px;
3047
margin-bottom: 5px;
3148
margin-left: 15px;
@@ -34,7 +51,7 @@
3451
font-size: 2rem;
3552
color: var(--sponsor-fg);
3653
}
37-
.mobilesponsor .mobilesponsor-description{
54+
.bottomsponsor .bottomsponsor-description{
3855
display:block;
3956
margin-top: 5px;
4057
margin-bottom: 15px;
@@ -45,10 +62,10 @@
4562
transition-timing-function: cubic-bezier(.4,0,.2,1);
4663
transition-duration: .3s;
4764
}
48-
/* .mobilesponsor:hover .mobilesponsor-description{
65+
/* .bottomsponsor:hover .bottomsponsor-description{
4966
display:block;
5067
} */
51-
.mobilesponsor .mobilesponsor-cta{
68+
.bottomsponsor .bottomsponsor-cta{
5269
margin-top: auto;
5370
margin-bottom: 10px;
5471
margin-left: 20px;
@@ -65,6 +82,17 @@
6582
main {
6683
position: relative;
6784
}
85+
.topsponsor-bsa {
86+
margin: 0 auto 32px;
87+
width: min(100%, 760px);
88+
background-color: transparent;
89+
border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent);
90+
border-radius: 8px;
91+
padding: 12px;
92+
display: none; /*changed via JS once ad is loaded*/
93+
overflow: hidden;
94+
backdrop-filter: blur(6px);
95+
}
6896
.sidetoc {
6997
width: 250px;
7098
margin-top: 25px;
@@ -149,8 +177,77 @@
149177
background-color: var(--fg);
150178
color: var(--bg);
151179
}
152-
.mobilesponsor-wrapper {
153-
display: none !important;
180+
.sidesponsor-bsa {
181+
max-height: 40%;
182+
height: 40%;
183+
background-color: transparent;
184+
border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent);
185+
border-radius: 8px;
186+
padding: 5px;
187+
display: none; /*changed via JS once ad is loaded*/
188+
overflow: hidden;
189+
backdrop-filter: blur(6px);
190+
}
191+
.bottomsponsor-wrapper {
192+
margin-top: 32px;
193+
}
194+
.bottomsponsor,
195+
.bottomsponsor-bsa {
196+
margin: 0 auto;
197+
width: min(100%, 760px);
198+
background-color: transparent;
199+
border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent);
200+
border-radius: 8px;
201+
padding: 12px;
202+
display: none; /*changed via JS once ad is loaded*/
203+
text-decoration: none !important;
204+
backdrop-filter: blur(6px);
205+
}
206+
.bottomsponsor {
207+
flex-direction: column;
208+
}
209+
.bottomsponsor-bsa {
210+
overflow: hidden;
211+
}
212+
.bottomsponsor img {
213+
height: auto;
214+
width: 40%;
215+
max-width: 240px;
216+
padding: 10px;
217+
transition-property: all;
218+
transition-timing-function: cubic-bezier(.4,0,.2,1);
219+
transition-duration: .3s;
220+
}
221+
.bottomsponsor .bottomsponsor-title {
222+
margin-top: 5px;
223+
margin-bottom: 5px;
224+
margin-left: 15px;
225+
margin-right: 15px;
226+
font-weight: 800;
227+
font-size: 2rem;
228+
color: var(--sponsor-fg);
229+
}
230+
.bottomsponsor .bottomsponsor-description {
231+
display: block;
232+
margin-top: 5px;
233+
margin-bottom: 15px;
234+
margin-left: 15px;
235+
margin-right: 15px;
236+
color: var(--sponsor-fg);
237+
transition-property: all;
238+
transition-timing-function: cubic-bezier(.4,0,.2,1);
239+
transition-duration: .3s;
240+
}
241+
.bottomsponsor .bottomsponsor-cta {
242+
margin-top: auto;
243+
margin-bottom: 10px;
244+
margin-left: 20px;
245+
margin-right: 20px;
246+
text-align: center;
247+
padding: 7px;
248+
border-radius: 8px;
249+
background-color: var(--fg);
250+
color: var(--bg);
154251
}
155252

156253
.sidetoc-toggle {
@@ -238,3 +335,50 @@
238335
display: none;
239336
}
240337
}
338+
339+
.bsa-crawler-slot {
340+
position: absolute;
341+
width: 1px;
342+
height: 1px;
343+
overflow: hidden;
344+
opacity: 0;
345+
pointer-events: none;
346+
}
347+
348+
@media only screen and (min-width: 0px) and (min-height: 0px) {
349+
#bsa-zone_1773736844679-9_123456 {
350+
min-height: 100px;
351+
}
352+
353+
#bsa-zone_1773736987437-6_123456 {
354+
min-height: 100px;
355+
}
356+
357+
#bsa-zone_1773065859037-5_123456 {
358+
min-height: 1px;
359+
}
360+
361+
#bsa-zone_1773737041447-5_123456 {
362+
min-height: 0px;
363+
}
364+
}
365+
366+
@media only screen and (min-width: 770px) and (min-height: 0px) {
367+
#bsa-zone_1773736844679-9_123456 {
368+
min-height: 90px;
369+
}
370+
371+
#bsa-zone_1773736987437-6_123456 {
372+
min-height: 280px;
373+
}
374+
375+
#bsa-zone_1773065859037-5_123456 {
376+
min-height: 1px;
377+
}
378+
}
379+
380+
@media only screen and (min-width: 880px) and (min-height: 0px) {
381+
#bsa-zone_1773737041447-5_123456 {
382+
min-height: 250px;
383+
}
384+
}

0 commit comments

Comments
 (0)