Skip to content

Commit 0f99ba2

Browse files
jgthmsjgthms
committed
Fix hello
1 parent fc69d3c commit 0f99ba2

8 files changed

Lines changed: 1842 additions & 68 deletions

File tree

‎_includes/carbon.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<script type="text/javascript">
2+
window.carbonLoaded = false;
3+
4+
window.helloCarbon = function() {
5+
window.carbonLoaded = true;
6+
}
7+
8+
document.addEventListener('DOMContentLoaded', function() {
9+
// Hello
10+
var $hello = document.getElementById('hello');
11+
var $huggingFace = document.getElementById('huggingFace');
12+
var $carbon = document.getElementById('carbon');
13+
var $placeholder = document.getElementById('placeholder');
14+
15+
setTimeout(function() {
16+
if (!window.carbonLoaded) {
17+
$hello.style.minHeight = '218px';
18+
$huggingFace.style.display = 'none';
19+
$carbon.style.display = 'block';
20+
} else {
21+
$hello.style.minHeight = '0';
22+
$huggingFace.style.display = 'block';
23+
$carbon.style.display = 'none';
24+
}
25+
$placeholder.style.display = 'none';
26+
}, 2000);
27+
});
28+
</script>
29+
30+
<div id="hello">
31+
<div id="huggingFace">
32+
<p>HTML Reference is <strong>free</strong> and always will be!</p>
33+
<p>Please whitelist us in your ad blocker.</p>
34+
<p>Thank you! <img src="{{site.url}}/images/hugging-face.png" alt="Hugging face emoji"></p>
35+
</div>
36+
37+
<div id="placeholder" class="placeholder">
38+
<div class="placeholder-image"><div></div></div>
39+
<div class="placeholder-content"><div></div><div></div><div></div></div>
40+
<div class="placeholder-footer"><div></div></div>
41+
</div>
42+
43+
<div id="carbon">
44+
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=htmlreferenceio" id="_carbonads_js" onload ="window.helloCarbon()"></script>
45+
</div>
46+
</div>

‎_includes/menu.html‎

Lines changed: 2 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,3 @@
1-
<!--script type="text/javascript">
2-
window.carbonLoaded = false;
3-
4-
window.helloCarbon = function() {
5-
window.carbonLoaded = true;
6-
}
7-
8-
document.addEventListener('DOMContentLoaded', function() {
9-
var $menuHello = document.getElementById('menuHello');
10-
var $huggingFace = document.getElementById('huggingFace');
11-
var $carbon = document.getElementById('carbon');
12-
var $placeholder = document.getElementById('placeholder');
13-
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);
26-
});
27-
</script-->
28-
291
<aside class="menu">
302
<a id="logo" class="menu-logo" href="{{site.url}}">
313
<img src="{{site.url}}/images/html-reference-logo.png" alt="{{site.title}} logo">
@@ -67,26 +39,8 @@
6739
</a>
6840
</nav>
6941
{% endif %}
70-
<!--footer id="menuHello" class="menu-hello">
71-
<div id="huggingFace">
72-
<p>
73-
HTML Reference is <strong>free</strong> and always will be!
74-
</p>
75-
<p>
76-
Please whitelist us in your ad blocker.
77-
</p>
78-
<p>
79-
Thank you! <img src="{{site.url}}/images/hugging-face.png" alt="Hugging face emoji">
80-
</p>
81-
</div>
82-
<div id="placeholder" class="placeholder">
83-
<div class="placeholder-image"><div></div></div>
84-
<div class="placeholder-content"><div></div><div></div><div></div></div>
85-
<div class="placeholder-footer"><div></div></div>
86-
</div>
87-
<div id="carbon">
88-
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=htmlreferenceio" id="_carbonads_js" onload ="window.helloCarbon()"></script>
89-
</div-->
42+
<footer class="menu-hello">
43+
{% include carbon.html %}
9044
</footer>
9145
</aside>
9246

‎_includes/noscript.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<noscript>
22
<style type="text/css">
3-
#menuHello {
3+
#hello {
44
min-height: 0;
55
}
66

‎_includes/social/iframe-github.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<iframe class="iframe iframe--github" data-src="https://ghbtns.com/github-btn.html?user=jgthms&repo=css-reference&type=star&count=true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
1+
<iframe class="iframe iframe--github" data-src="https://ghbtns.com/github-btn.html?user=jgthms&repo=html-reference&type=star&count=true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>

‎css/website.css‎

Lines changed: 1752 additions & 1 deletion
Large diffs are not rendered by default.

‎index.html‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,22 @@ <h1 class="header-figure">
3737
<img src="{{site.url}}/images/html-reference-type.png" alt="{{site.title}} type">
3838
</h1>
3939
<div class="header-content">
40-
<h2 class="header-title">
41-
{{site.subtitle}}
42-
</h2>
43-
<p class="header-subtitle">
44-
<strong>Learn by example</strong>: <a href="{{site.url}}">htmlreference.io</a> is a free guide to HTML. It features all <strong>elements</strong> and <strong>attributes</strong>.
45-
</p>
40+
<div class="header-carbon">
41+
{% include carbon.html %}
42+
</div>
43+
<div class="header-text">
44+
<h2 class="header-title">
45+
{{site.subtitle}}
46+
</h2>
47+
<p class="header-subtitle">
48+
<strong>Learn by example</strong>: <a href="{{site.url}}">htmlreference.io</a> is a free guide to HTML. It features all <strong>elements</strong> and <strong>attributes</strong>.
49+
</p>
50+
<footer class="header-share">
51+
{% include social/button-twitter.html %}
52+
{% include social/button-facebook.html %}
53+
</footer>
54+
</div>
4655
</div>
47-
<footer class="header-share">
48-
{% include social/button-twitter.html %}
49-
{% include social/button-facebook.html %}
50-
</footer>
5156
</div>
5257
</header>
5358
<main class="index">

‎sass/header.sass‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,21 @@
77
height: 128px
88
width: 128px
99

10+
.header-carbon
11+
background-color: white
12+
border-radius: 5px
13+
box-shadow: 0 0 1rem rgba(#000, 0.2)
14+
display: flex
15+
flex-shrink: 0
16+
width: 240px
17+
#huggingFace
18+
1019
.header-title
1120
color: $text-strong
1221
font-size: 1.2rem
1322
font-weight: bold
1423
line-height: 1.6rem
24+
margin-bottom: 1rem
1525

1626
.header-subtitle
1727
line-height: 1.6rem
@@ -24,7 +34,7 @@
2434
align-items: center
2535
display: flex
2636
justify-content: center
27-
margin-top: 30px
37+
margin-top: 1rem
2838
.share-button
2939
height: 48px
3040
width: 48px
@@ -42,6 +52,9 @@
4252
margin-bottom: 30px
4353
img:last-child
4454
height: 40px
55+
.header-carbon
56+
justify-content: center
57+
margin: 0 auto 2rem
4558
.header-subtitle
4659
margin-top: 10px
4760

@@ -55,10 +68,13 @@
5568
img:last-child
5669
height: 80px
5770
margin-left: 20px
71+
.header-carbon
72+
margin-left: 1rem
73+
margin-right: 2rem
5874
.header-content
75+
align-items: center
5976
display: flex
60-
.header-title
61-
flex-basis: 40%
62-
padding: 0 1rem
63-
.header-subtitle
64-
flex-basis: 60%
77+
.header-text
78+
margin-right: 2rem
79+
.header-share
80+
justify-content: flex-start

‎sass/menu.sass‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,13 +162,15 @@
162162

163163
.menu-hello
164164
background: #fff
165+
#huggingFace
166+
background: #fff
165167

166168
#huggingFace
167-
background: #fff
168169
color: $text-strong
169170
display: none
170171
font-size: 16px
171172
line-height: 1.4
173+
min-height: 218px
172174
padding: 1.5rem
173175
padding-bottom: 1rem
174176
img

0 commit comments

Comments
 (0)