Skip to content

Commit 0090809

Browse files
jgthmsjgthms
committed
Update Footer
1 parent 5ae66cb commit 0090809

2 files changed

Lines changed: 166 additions & 67 deletions

File tree

‎_includes/menu.html‎

Lines changed: 149 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,179 @@
11
<script type="text/javascript">
2-
window.carbonLoaded = false;
2+
window.carbonLoaded = false;
33

4-
window.helloCarbon = function() {
5-
window.carbonLoaded = true;
6-
}
4+
window.helloCarbon = function () {
5+
window.carbonLoaded = true;
6+
};
77

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');
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");
1313

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-
}
28-
});
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+
}
28+
});
2929
</script>
3030

3131
<aside class="menu">
3232
<a id="logo" class="menu-logo" href="{{site.url}}">
33-
<img src="{{site.url}}/images/css-reference-logo.png" alt="{{site.title}} logo">
33+
<img
34+
src="{{site.url}}/images/css-reference-logo.png"
35+
alt="{{site.title}} logo"
36+
/>
3437
</a>
3538
<nav class="menu-collections">
3639
<ul>
37-
<li><a class="menu-collection-link{% if page.template == 'index' %} menu-collection-link--active{% endif %}" href="{{site.url}}/">All properties</a></li>
38-
<li><a class="menu-collection-link{% if page.collection_name == 'Animations' %} menu-collection-link--active{% endif %}" href="{{site.url}}/animations/">Animations</a></li>
39-
<li><a class="menu-collection-link{% if page.collection_name == 'Backgrounds' %} menu-collection-link--active{% endif %}" href="{{site.url}}/backgrounds/">Backgrounds</a></li>
40-
<li><a class="menu-collection-link{% if page.collection_name == 'Box model' %} menu-collection-link--active{% endif %}" href="{{site.url}}/box-model/">Box model</a></li>
41-
<li><a class="menu-collection-link{% if page.collection_name == 'Flexbox' %} menu-collection-link--active{% endif %}" href="{{site.url}}/flexbox/">Flexbox</a></li>
42-
<li><a class="menu-collection-link{% if page.collection_name == 'Grid' %} menu-collection-link--active{% endif %}" href="{{site.url}}/css-grid/">CSS Grid</a></li>
43-
<li><a class="menu-collection-link{% if page.collection_name == 'Positioning' %} menu-collection-link--active{% endif %}" href="{{site.url}}/positioning/">Positioning</a></li>
44-
<li><a class="menu-collection-link{% if page.collection_name == 'Transitions' %} menu-collection-link--active{% endif %}" href="{{site.url}}/transitions/">Transitions</a></li>
45-
<li><a class="menu-collection-link{% if page.collection_name == 'Typography' %} menu-collection-link--active{% endif %}" href="{{site.url}}/typography/">Typography</a></li>
40+
<li>
41+
<a
42+
class="menu-collection-link{% if page.template == 'index' %} menu-collection-link--active{% endif %}"
43+
href="{{site.url}}/"
44+
>All properties</a
45+
>
46+
</li>
47+
<li>
48+
<a
49+
class="menu-collection-link{% if page.collection_name == 'Animations' %} menu-collection-link--active{% endif %}"
50+
href="{{site.url}}/animations/"
51+
>Animations</a
52+
>
53+
</li>
54+
<li>
55+
<a
56+
class="menu-collection-link{% if page.collection_name == 'Backgrounds' %} menu-collection-link--active{% endif %}"
57+
href="{{site.url}}/backgrounds/"
58+
>Backgrounds</a
59+
>
60+
</li>
61+
<li>
62+
<a
63+
class="menu-collection-link{% if page.collection_name == 'Box model' %} menu-collection-link--active{% endif %}"
64+
href="{{site.url}}/box-model/"
65+
>Box model</a
66+
>
67+
</li>
68+
<li>
69+
<a
70+
class="menu-collection-link{% if page.collection_name == 'Flexbox' %} menu-collection-link--active{% endif %}"
71+
href="{{site.url}}/flexbox/"
72+
>Flexbox</a
73+
>
74+
</li>
75+
<li>
76+
<a
77+
class="menu-collection-link{% if page.collection_name == 'Grid' %} menu-collection-link--active{% endif %}"
78+
href="{{site.url}}/css-grid/"
79+
>CSS Grid</a
80+
>
81+
</li>
82+
<li>
83+
<a
84+
class="menu-collection-link{% if page.collection_name == 'Positioning' %} menu-collection-link--active{% endif %}"
85+
href="{{site.url}}/positioning/"
86+
>Positioning</a
87+
>
88+
</li>
89+
<li>
90+
<a
91+
class="menu-collection-link{% if page.collection_name == 'Transitions' %} menu-collection-link--active{% endif %}"
92+
href="{{site.url}}/transitions/"
93+
>Transitions</a
94+
>
95+
</li>
96+
<li>
97+
<a
98+
class="menu-collection-link{% if page.collection_name == 'Typography' %} menu-collection-link--active{% endif %}"
99+
href="{{site.url}}/typography/"
100+
>Typography</a
101+
>
102+
</li>
46103
</ul>
47104
</nav>
48105
{% if page.template != "index" %}
49-
<nav id="menu-nav" class="menu-nav">
50-
<div class="menu-search">
51-
<input id="menu-search-input" type="search" autocomplete="off" placeholder="Search for a property">
52-
<i class="icon is-search"></i>
53-
</div>
54-
<div id="menu-list" class="menu-list">
55-
<ul id="menu-list-ul" class="menu-list-ul">
56-
{% if page.menu_list && page.layout == "collection" %}
57-
{% include collections/{{page.menu_list}}.html %}
58-
{% else %}
59-
{% include lists/menu-list.html %}
60-
{% endif %}
61-
</ul>
62-
<i id="menu-shadow-top" class="menu-list-shadow is-top"></i>
63-
<i id="menu-shadow-bottom" class="menu-list-shadow is-bottom"></i>
64-
</div>
65-
<a id="menu-nav-close" class="menu-close">
66-
<i class="icon is-close"></i>
67-
<strong>Close</strong>
68-
</a>
69-
</nav>
106+
<nav id="menu-nav" class="menu-nav">
107+
<div class="menu-search">
108+
<input
109+
id="menu-search-input"
110+
type="search"
111+
autocomplete="off"
112+
placeholder="Search for a property"
113+
/>
114+
<i class="icon is-search"></i>
115+
</div>
116+
<div id="menu-list" class="menu-list">
117+
<ul id="menu-list-ul" class="menu-list-ul">
118+
{% if page.menu_list && page.layout == "collection" %} {% include
119+
collections/{{page.menu_list}}.html %} {% else %} {% include
120+
lists/menu-list.html %} {% endif %}
121+
</ul>
122+
<i id="menu-shadow-top" class="menu-list-shadow is-top"></i>
123+
<i id="menu-shadow-bottom" class="menu-list-shadow is-bottom"></i>
124+
</div>
125+
<a id="menu-nav-close" class="menu-close">
126+
<i class="icon is-close"></i>
127+
<strong>Close</strong>
128+
</a>
129+
</nav>
70130
{% endif %}
71-
<footer class="menu-hello">
72-
{% include carbon.html %}
73-
</footer>
131+
<footer class="menu-hello">{% include carbon.html %}</footer>
74132
</aside>
75133

76134
<footer class="footer">
77135
<p class="footer-title">
78-
<strong>{{site.subtitle}}</strong> <small>Created by <a href="https://jgthms.com">@jgthms</a></small>
136+
<strong>{{site.subtitle}}</strong>
137+
<small>Created by <a href="https://jgthms.com">@jgthms</a></small>
79138
</p>
80139
<p class="footer-share footer-share--social">
81140
<strong class="footer-share-label">Share</strong>
82-
{% include social/button-twitter.html %}
83-
{% include social/button-facebook.html %}
141+
{% include social/button-twitter.html %} {% include
142+
social/button-facebook.html %}
84143
<a id="menu-nav-open" class="footer-share-nav">Menu</a>
85144
</p>
86145
<div class="footer-facebook">
87-
<iframe class="footer-iframe" data-src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssreference%2F&width=100&layout=button_count&action=like&size=small&show_faces=false&share=false&height=20&appId=1212191075486670" width="100" height="20" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
146+
<iframe
147+
class="footer-iframe"
148+
data-src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssreference%2F&width=100&layout=button_count&action=like&size=small&show_faces=false&share=false&height=20&appId=1212191075486670"
149+
width="100"
150+
height="20"
151+
scrolling="no"
152+
frameborder="0"
153+
allowTransparency="true"
154+
></iframe>
155+
</div>
156+
<div class="footer-facebook" style="margin-right: 1rem">
157+
<p>
158+
Browser testing via
159+
<a href="https://www.lambdatest.com/" target="_blank"
160+
><img
161+
src="https://www.lambdatest.com/support/img/logo.svg"
162+
style="vertical-align: middle; margin-left: 5px"
163+
width="147"
164+
height="26"
165+
/></a>
166+
</p>
88167
</div>
89168
<div class="footer-github">
90-
<iframe class="footer-iframe" 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>
169+
<iframe
170+
class="footer-iframe"
171+
data-src="https://ghbtns.com/github-btn.html?user=jgthms&repo=css-reference&type=star&count=true"
172+
frameborder="0"
173+
scrolling="0"
174+
width="110px"
175+
height="20px"
176+
></iframe>
91177
</div>
92178
<!-- <p class="footer-share footer-share--contribute">
93179
<strong class="footer-share-label">Contribute</strong>

‎_includes/sister.html‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,33 @@
11
<footer class="sisters">
22
<div class="sister sister--htmlreference container">
33
<h4 class="sister-title">
4-
Check out our sister website:<br>
4+
Check out our sister website:<br />
55
<strong>HTML Reference</strong> 😃
66
</h4>
77
<a class="sister-banner" href="https://htmlreference.io">
8-
<img src="{{site.url}}/images/html-reference-logo.png" alt="HTML Reference logo">
8+
<img
9+
src="{{site.url}}/images/html-reference-logo.png"
10+
alt="HTML Reference logo"
11+
/>
912
</a>
1013
</div>
1114
<div class="sister sister--bulma container">
1215
<h4 class="sister-title">
13-
Need a CSS framework?<br>
16+
Need a CSS framework?<br />
1417
Try out <strong>Bulma</strong> 😎
1518
</h4>
1619
<a class="sister-banner" href="https://bulma.io">
17-
<img src="{{site.url}}/images/bulma-logo.png" alt="Bulma logo">
20+
<img src="{{site.url}}/images/bulma-logo.png" alt="Bulma logo" />
1821
</a>
1922
</div>
23+
<div class="sister sister--bulma container">
24+
<h4 class="sister-title">Browser testing via</h4>
25+
<a class="sister-banner" href="https://www.lambdatest.com/" target="_blank"
26+
><img
27+
src="https://www.lambdatest.com/support/img/logo.svg"
28+
style="vertical-align: middle; margin-left: 5px"
29+
width="220"
30+
height="39"
31+
/></a>
32+
</div>
2033
</footer>

0 commit comments

Comments
 (0)