Skip to content

Commit e172023

Browse files
kylegordykylegordy
committed
Add footer component
1 parent aa0153a commit e172023

File tree

4 files changed

+227
-4
lines changed

4 files changed

+227
-4
lines changed

‎_includes/footer.html

Lines changed: 81 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,82 @@
1-
<footer>
2-
<h2>{{ site.title | escape }}</h2>
3-
<p>This is the footer.</p>
1+
<footer class="footer">
2+
<div class="footer__container container">
3+
4+
<!-- Logo -->
5+
<h2 class="m-0">
6+
<a rel="author" href="{{ "/" | relative_url }}">
7+
{% include logo.html color="dark" %}
8+
<span class="visually-hidden">{{ site.title | escape }}</span>
9+
</a>
10+
</h2>
11+
12+
<!-- Page list -->
13+
{%- if page_paths -%}
14+
<ul class="footer-nav list--plain monospace">
15+
{%- for path in page_paths -%}
16+
{%- assign my_page = site.pages | where: "path", path | first -%}
17+
{% assign class = nil %}
18+
{% if page.url == my_page.url %}
19+
{% assign class = 'active' %}
20+
{% endif %}
21+
{%- if my_page.title -%}
22+
<li class="footer-nav__item">
23+
<a class="footer-link {{ class }}" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
24+
</li>
25+
{%- endif -%}
26+
{%- endfor -%}
27+
</ul>
28+
{%- endif -%}
29+
30+
<!-- Social icons-->
31+
<ul class="footer-social-list list--inline">
32+
<li class="footer-social-list__item">
33+
<a class="footer-link no-underline" href="https://www.twitter.com/{{ site.twitter_username| cgi_escape | escape }}">
34+
<svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/social-icons.svg#twitter' | relative_url }}"></use></svg>
35+
<span class="visually-hidden">Twitter</span>
36+
</a>
37+
</li>
38+
<li class="footer-social-list__item">
39+
<a class="footer-link no-underline" href="https://www.facebook.com/{{ site.facebook_username| cgi_escape | escape }}">
40+
<svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/social-icons.svg#facebook' | relative_url }}"></use></svg>
41+
<span class="visually-hidden">Facebook</span>
42+
</a>
43+
</li>
44+
<li class="footer-social-list__item">
45+
<a class="footer-link no-underline" href="https://www.linkedin.com/company/{{ site.linkedin_username| cgi_escape | escape }}">
46+
<svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/social-icons.svg#linkedin' | relative_url }}"></use></svg>
47+
<span class="visually-hidden">LinkedIn</span>
48+
</a>
49+
</li>
50+
<li class="footer-social-list__item">
51+
<a class="footer-link no-underline" href="https://github.com/{{ site.github_username| cgi_escape | escape }}">
52+
<svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/social-icons.svg#github' | relative_url }}"></use></svg>
53+
<span class="visually-hidden">Github</span>
54+
</a>
55+
</li>
56+
</ul>
57+
</div>
58+
59+
<!-- Secondary Footer -->
60+
<section class="footer-secondary">
61+
<div class="footer-secondary__container container">
62+
63+
<!-- Open Source Links -->
64+
<ul class="open-source-nav list--inline fs-md monospace">
65+
<li class="open-source-nav__item">
66+
<a class="footer-link" href="{{site.github.repository_url}}/edit/{{ site.branch }}/{{page.path}}">Improve this Page</a>
67+
</li>
68+
<li class="open-source-nav__item">
69+
<a class="footer-link" href="{{site.github.repository_url}}/commits/{{ site.branch }}/{{page.path}}">Page History</a>
70+
</li>
71+
</ul>
72+
73+
<!-- License Info -->
74+
<p class="footer-license">
75+
<a href="https://creativecommons.org/licenses/by-sa/4.0/">
76+
<img class="footer-license__img" alt="Creative Commons Attribution-ShareAlike license" src="https://licensebuttons.net/l/by-sa/4.0/88x31.png">
77+
</a>
78+
This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License
79+
</p>
80+
</div>
81+
</section>
482
</footer>

‎assets/_sass/base/_helpers.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
////////////////////
1818

1919
.no-underline {
20-
text-decoration: none;
20+
text-decoration: none !important;
2121
}
2222

2323
////////////////////

‎assets/_sass/component/_footer.scss

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
////////////////////
2+
// Sticky Footer
3+
////////////////////
4+
5+
// Make the footer stick to the bottom of pages
6+
body {
7+
display: flex;
8+
min-height: 100vh;
9+
flex-direction: column;
10+
}
11+
12+
main { flex: 1; }
13+
14+
////////////////////
15+
// Footer
16+
////////////////////
17+
18+
.footer {
19+
background-color: $slate-700;
20+
}
21+
22+
.footer__container {
23+
padding-top: rem-calc(25px);
24+
padding-bottom: rem-calc(25px);
25+
text-align: center;
26+
27+
@media(min-width: $bp-md) {
28+
display: grid;
29+
align-items: center;
30+
grid-template-columns: 25% 1fr 25%;
31+
padding-top: rem-calc(40px);
32+
padding-bottom: rem-calc(40px);
33+
text-align: left;
34+
}
35+
}
36+
37+
.footer .logo {
38+
@media(max-width: $bp-md) {
39+
margin-bottom: rem-calc(10px);
40+
max-width: rem-calc(110px);
41+
}
42+
}
43+
44+
.footer-nav {
45+
margin-bottom: rem-calc(10px);
46+
text-align: center;
47+
font-size: rem-calc(14px);
48+
49+
@media(min-width: $bp-md) {
50+
margin-bottom: 0;
51+
}
52+
53+
@media(min-width: $bp-md) {
54+
font-size: rem-calc(16px);
55+
}
56+
}
57+
58+
.footer-nav__item {
59+
display: inline-block;
60+
padding: rem-calc(10px);
61+
62+
&:not(:first-child) {
63+
64+
@media(min-width: $bp-lg) {
65+
margin-left: 4%;
66+
}
67+
}
68+
69+
}
70+
71+
.footer-link {
72+
color: $slate-300;
73+
74+
&.active,
75+
&:hover,
76+
&:focus {
77+
color: $white;
78+
text-decoration: underline;
79+
}
80+
}
81+
82+
.footer-social-list {
83+
@media(min-width: $bp-md) {
84+
text-align: right;
85+
}
86+
}
87+
88+
.footer-social-list__item:not(:first-child) {
89+
margin-left: rem-calc(10px);
90+
}
91+
92+
// Secondary Footer
93+
.footer-secondary {
94+
padding: rem-calc(20px 0);
95+
background-color: $slate-800;
96+
}
97+
98+
.footer-secondary__container {
99+
text-align: center;
100+
101+
@media(min-width: $bp-md) {
102+
display: flex;
103+
justify-content: space-between;
104+
align-items: center;
105+
}
106+
}
107+
108+
.open-source-nav {
109+
display: inline-flex;
110+
align-items: center;
111+
}
112+
113+
.open-source-nav__item:not(:last-child) {
114+
margin-right: 1em;
115+
padding-right: 1em;
116+
border-right: 1px solid $seafoam-light;
117+
}
118+
119+
.footer-license {
120+
margin: rem-calc(20px 0 0 0);
121+
font-size: rem-calc(12px);
122+
color: rgba($white, .5);
123+
124+
@media(min-width: $bp-md) {
125+
display: inline-flex;
126+
align-items: center;
127+
flex-direction: row-reverse;
128+
margin: 0 0 0 rem-calc(10px);
129+
max-width: 60%;
130+
font-size: rem-calc(14px);
131+
text-align: right;
132+
}
133+
}
134+
135+
.footer-license__img {
136+
display: block;
137+
margin: 0 auto rem-calc(10px) auto;
138+
139+
@media(min-width: $bp-md) {
140+
flex: 0 0 auto;
141+
display: inline-block;
142+
margin: 0 0 0 rem-calc(15px);
143+
}
144+
}

‎assets/css/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,4 @@
1717
@import "component/buttons";
1818
@import "component/navigation";
1919
@import "component/hamburger-button";
20+
@import "component/footer";

0 commit comments

Comments
 (0)