Skip to content

Commit 331af95

Browse files
jgthmsjgthms
committed
Fix ff
1 parent 7c0253c commit 331af95

11 files changed

Lines changed: 169 additions & 27 deletions

File tree

‎_includes/bsa.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
<a class="ff is-fortyfour" href="https://jgthms.com/css-in-44-minutes-ebook" target="_blank">
2-
<div class="ff-background"></div>
3-
<p class="ff-text">
4-
<strong class="tag is-danger">New!</strong> My 44-page ebook "<strong>CSS in 44 minutes</strong>" is out! <span class="emoji">😃</span>
5-
</p>
6-
<span class="button is-primary is-rounded">
7-
<strong>Get it now →</strong>
8-
</span>
9-
</a>
1+
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
2+
<div id="bsa" class="bsa-cpc"><div id="bsaShadow" class="bsa-shadow"></div></div>
3+
<script>
4+
(function(){
5+
_bsa.init('default', 'CKYD55QL', 'placement:cssreferenceio', {
6+
target: '.bsa-cpc',
7+
align: 'horizontal',
8+
disable_css: 'true'
9+
});
10+
})();
11+
</script>

‎_includes/ff.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<a class="ff is-fortyfour" href="https://jgthms.com/css-in-44-minutes-ebook" target="_blank">
2+
<div class="ff-background"></div>
3+
<p class="ff-text">
4+
<strong class="tag is-danger">New!</strong> My 44-page ebook "<strong>CSS in 44 minutes</strong>" is out! <span class="emoji">😃</span>
5+
</p>
6+
<span class="button is-primary is-rounded">
7+
<strong>Get it now →</strong>
8+
</span>
9+
</a>

‎_includes/menu.html‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,20 @@
1111
var $carbon = document.getElementById('carbon');
1212
var $placeholder = document.getElementById('placeholder');
1313

14-
setTimeout(function() {
15-
if (window.carbonLoaded) {
16-
$menuHello.style.minHeight = '218px';
17-
$huggingFace.style.display = 'none';
18-
$carbon.style.display = 'block';
19-
} else {
20-
$menuHello.style.minHeight = '0';
21-
$huggingFace.style.display = 'block';
22-
$carbon.style.display = 'none';
23-
}
24-
$placeholder.style.display = 'none';
25-
}, 2000);
14+
if ($menuHello) {
15+
setTimeout(function() {
16+
if (window.carbonLoaded) {
17+
$menuHello.style.minHeight = '218px';
18+
$huggingFace.style.display = 'none';
19+
$carbon.style.display = 'block';
20+
} else {
21+
$menuHello.style.minHeight = '0';
22+
$huggingFace.style.display = 'block';
23+
$carbon.style.display = 'none';
24+
}
25+
$placeholder.style.display = 'none';
26+
}, 2000);
27+
}
2628
});
2729
</script>
2830

‎_layouts/collection.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,10 @@ <h1 class="heading-title">
5555
</a>
5656
</p>
5757
</header>
58-
{% include bsa.html %}
58+
{% include ff.html %}
59+
<div id="alo" class="alo">
60+
{% include bsa.html %}
61+
</div>
5962
<section class="properties">
6063
{{content}}
6164
</section>
@@ -64,6 +67,7 @@ <h1 class="heading-title">
6467
{% include google-fonts.html %}
6568
<script src="{{site.url}}/javascript/clipboard.min.js"></script>
6669
<script src="{{site.url}}/javascript/main.js"></script>
70+
<script src="{{site.url}}/javascript/collection.js"></script>
6771
{% include noscript.html %}
6872
</body>
6973
</html>

‎_layouts/single.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,19 @@
2929
<body>
3030
{% include menu.html %}
3131
<main class="main">
32-
{% include bsa.html %}
33-
<section class="properties">
32+
<div class="ola">
33+
{% include bsa.html %}
34+
</div>
35+
<section class="properties properties--single">
36+
{% include ff.html %}
3437
{{content}}
3538
</section>
3639
</main>
3740
{% include modals/share.html %}
3841
{% include google-fonts.html %}
3942
<script src="{{site.url}}/javascript/clipboard.min.js"></script>
4043
<script src="{{site.url}}/javascript/main.js"></script>
44+
<script src="{{site.url}}/javascript/single.js"></script>
4145
{% include noscript.html %}
4246
</body>
4347
</html>

‎css/website.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/website.sass‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
@import "../sass/elements"
2525
@import "../sass/ff"
2626

27-
.modal
27+
.modal,
28+
.bsa-cpc
2829
z-index: 50
2930

3031
.menu

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ <h2 class="header-title">
5757
</div>
5858
</div>
5959
</header>
60-
{% include bsa.html %}
60+
{% include ff.html %}
6161
<main class="index">
6262
<nav class="index-collections">
6363
<strong>Collections:</strong>

‎javascript/collection.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,38 @@
11
document.addEventListener('DOMContentLoaded', function() {
2+
var $root = document.documentElement;
3+
var $alo = document.getElementById('alo');
4+
var $bsaShadow = document.getElementById('bsaShadow');
5+
6+
var toTravel = $root.scrollHeight - window.innerHeight;
7+
var fromTop = $alo.offsetTop;
8+
var menuThrottle = null;
9+
10+
if ($alo) {
11+
document.addEventListener('scroll', function(event) {
12+
var scrollTop = window.scrollY;
13+
setBsa(scrollTop);
14+
clearTimeout(menuThrottle);
15+
throttle = setTimeout(setBsaShadows(scrollTop), 100);
16+
});
17+
18+
function setBsaShadows(scrollTop) {
19+
var distance = toTravel - scrollTop;
20+
var topFactor = 1 - (distance / toTravel);
21+
$bsaShadow.style.opacity = topFactor;
22+
$bsaShadow.style.transform = 'scaleY(' + topFactor + ')';
23+
}
24+
25+
function setBsa(scrollTop) {
26+
if (scrollTop >= fromTop) {
27+
$alo.classList.add('is-fixed');
28+
} else {
29+
$alo.classList.remove('is-fixed');
30+
}
31+
}
32+
33+
setBsaShadows(0);
34+
}
35+
236
// Hashes
337
var $hashes = document.querySelectorAll('.hash, .menu-list-ul li a');
438

‎javascript/single.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,23 @@
11
document.addEventListener('DOMContentLoaded', function() {
2+
var $root = document.documentElement;
3+
var toTravel = $root.scrollHeight - window.innerHeight;
4+
var $bsaShadow = document.getElementById('bsaShadow');
5+
var menuThrottle = null;
6+
7+
if ($bsaShadow) {
8+
document.addEventListener('scroll', function(event) {
9+
clearTimeout(menuThrottle);
10+
throttle = setTimeout(setBsaShadows(), 100);
11+
});
12+
13+
function setBsaShadows() {
14+
var scrollTop = window.scrollY;
15+
var distance = toTravel - scrollTop;
16+
var topFactor = 1 - (distance / toTravel);
17+
$bsaShadow.style.opacity = topFactor;
18+
$bsaShadow.style.transform = 'scaleY(' + topFactor + ')';
19+
}
20+
21+
setBsaShadows();
22+
}
223
});

0 commit comments

Comments
 (0)