Skip to content

Commit d1b40ad

Browse files
RotzbuaRotzbua
committed
Refactor footer
* Add icons * Remove useless html tags * Remove redundant CSS classes * Fix image accessibility
1 parent 1a0d4d9 commit d1b40ad

File tree

4 files changed

+123
-85
lines changed

4 files changed

+123
-85
lines changed

‎_includes/footer.html

Lines changed: 94 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,100 @@
1-
<div class="container-fluid svg-wave no-padding">
1+
<footer>
2+
<div class="container-fluid no-padding">
23
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
3-
<path fill="#F7FAFC" fill-opacity="1"
4+
<path class="svg-wave" fill="#00000" fill-opacity="0"
45
d="M0,160L80,181.3C160,203,320,245,480,245.3C640,245,800,203,960,197.3C1120,192,1280,224,1360,240L1440,256L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z">
5-
</path>
6+
</path>
67
</svg>
7-
</div>
8-
<footer>
9-
<div class="container-fluid pb-2 background-gray-100">
10-
<div class="container">
11-
<div class="row pt-2 mb-4 mb-lg-3 justify-content-between">
12-
<div class="col-12 col-lg-4 col-md-12 mb-3">
13-
<div class="small mb-4 mb-lg-3"><a href="/{% if site.lang != 'en' %}{{ site.lang }}{% endif %}"><img
14-
src="/assets/branding/logo-full-horizontal-dynamic.svg" width="260" /></a></div>
15-
<p class="size-14 color-gray-900 mb-3">{% t footer.description %}</p>
16-
</div>
17-
<div class="col-0 col-lg-2"></div>
18-
<div class="col-6 col-lg-2 col-md-4 col-sm-4 mb-3">
19-
<div class="small">
20-
<div class="mb-2 size-16"><a class="color-gray-900"
21-
href="{{ site.baseurl }}/about"><span>{% t titles.about %}</span></a></div>
22-
<div class="mb-2 size-16"><a class="color-gray-900"
23-
href="{{ site.baseurl }}/blog"><span>{% t titles.blog %}</span></a></div>
24-
<div class="mb-2 size-16"><a class="color-gray-900"
25-
href="{{ site.baseurl }}/contribute"><span>{% t titles.contribute %}</span></a></div>
26-
<div class="mb-2 size-16"><a class="color-gray-900"
27-
href="{{ site.baseurl }}/documentation"><span>{% t titles.documentation %}</span></a></div>
28-
</div>
29-
</div>
30-
<div class="col-6 col-lg-2 col-md-4 col-sm-4 mb-3">
31-
<div class="small">
32-
<div class="mb-2 size-16"><a class="color-gray-900"
33-
href="{{ site.baseurl }}/download"><span>{% t titles.download %}</span></a></div>
34-
<!--<div class="mb-2 size-16"><a class="color-gray-900"
35-
href="{{ site.baseurl }}/media-kit"><span>{% t titles.media-kit %}</span></a></div>-->
36-
</div>
37-
</div>
38-
<div class="col-5 col-lg-2 col-md-4 col-sm-4">
39-
{% if site.twitter_username %}
40-
<p class="mb-2">
41-
<a class="mr-2 color-gray-900" href="https://twitter.com/{{ site.twitter_username }}"
42-
target="_blank" rel="noopener"><i class="fa-brands fa-twitter mr-1"></i>Twitter</a>
43-
</p>
44-
{% endif %}
45-
{% if site.mastodon_username %}
46-
<p class="mb-2">
47-
<a class="mr-2 color-gray-900" href="https://{{ site.mastodon_server }}/@{{ site.mastodon_username }}"
48-
target="_blank" rel="me noopener"><i class="fa-brands fa-mastodon mr-1"></i>Mastodon</a>
49-
</p>
50-
{% endif %}
51-
{% if site.github_username %}
52-
<p class="mb-2">
53-
<a class="mr-2 color-gray-900" href="https://github.com/{{ site.github_username }}"
54-
target="_blank" rel="noopener"><i class="fa-brands fa-github mr-1"></i>GitHub</a>
55-
</p>
56-
{% endif %}
57-
<p>
58-
<a class="mr-2 color-gray-900" href="/rss.xml"
59-
target="_blank" rel="noopener"><i class="fa fa-rss mr-1"></i>RSS</a>
60-
</p>
61-
</div>
62-
</div>
63-
<p class="top-border mb-2"></p>
64-
<div class="d-block d-lg-flex justify-content-between pt-0 pb-3">
65-
<div class="small mb-2 mb-lg-0">
66-
<span class="copyright">&copy;&nbsp;{{ 'now' | date: "%Y" }}&nbsp;{{ site.title }}</span>
67-
<span class="copyright mx-2">|</span>
68-
<span class="copyright"><a class="copyright underline-hover"
69-
href="{{ site.baseurl }}/license">{% t titles.license %}</a></span>
70-
<span class="copyright mx-2">|</span>
71-
<span class="copyright"><a class="copyright underline-hover"
72-
href="{{ site.baseurl }}/privacy">{% t titles.privacy %}</a></span>
73-
</div>
74-
</div>
8+
</div>
9+
<div class="container-fluid pb-2 bg-body-tertiary">
10+
<div class="container">
11+
<div class="row pt-2 mb-4 mb-lg-3 justify-content-between">
12+
<div class="col-12 col-lg-4 col-md-12 mb-3">
13+
<div class="mb-4 mb-lg-3">
14+
<a href="/{% if site.lang != 'en' %}{{ site.lang }}{% endif %}">
15+
<img src="/assets/branding/logo-full-horizontal-dynamic.svg" width="260" alt="{% t generic.accessibility.logo %}">
16+
</a>
17+
</div>
18+
<p class="small mb-3">{% t footer.description %}</p>
19+
</div>
20+
<div class="col-0 col-lg-2"></div>
21+
<div class="col-6 col-lg-2 col-md-4 col-sm-4 mb-3">
22+
<div class="mb-2">
23+
<a href="{{ site.baseurl }}/about">
24+
<i class="fa fa-circle-info mr-1"></i>{% t titles.about %}
25+
</a>
26+
</div>
27+
<div class="mb-2">
28+
<a href="{{ site.baseurl }}/blog">
29+
<i class="fa fa-blog mr-1"></i>{% t titles.blog %}
30+
</a>
31+
</div>
32+
<div class="mb-2">
33+
<a href="{{ site.baseurl }}/contribute">
34+
<i class="fa fa-heart mr-1"></i>{% t titles.contribute %}
35+
</a>
36+
</div>
37+
<div class="mb-2">
38+
<a href="{{ site.baseurl }}/documentation">
39+
<i class="fa fa-book mr-1"></i>{% t titles.documentation %}
40+
</a>
41+
</div>
42+
</div>
43+
<div class="col-6 col-lg-2 col-md-4 col-sm-4 mb-3">
44+
<div class="mb-2">
45+
<a href="{{ site.baseurl }}/download">
46+
<i class="fa fa-download mr-1"></i>{% t titles.download %}
47+
</a>
48+
</div>
49+
<!--<div class="mb-2">-->
50+
<!-- <a href="{{ site.baseurl }}/media-kit">-->
51+
<!-- <span>{% t titles.media-kit %}</span>-->
52+
<!-- </a>-->
53+
<!--</div>-->
54+
</div>
55+
<div class="col-5 col-lg-2 col-md-4 col-sm-4">
56+
{% if site.twitter_username %}
57+
<p class="mb-2">
58+
<a class="mr-2" href="https://twitter.com/{{ site.twitter_username }}" target="_blank" rel="noopener">
59+
<i class="fa-brands fa-twitter mr-1"></i>Twitter
60+
</a>
61+
</p>
62+
{% endif %}
63+
{% if site.mastodon_username %}
64+
<p class="mb-2">
65+
<a class="mr-2" href="https://{{ site.mastodon_server }}/@{{ site.mastodon_username }}" target="_blank" rel="me noopener">
66+
<i class="fa-brands fa-mastodon mr-1"></i>Mastodon
67+
</a>
68+
</p>
69+
{% endif %}
70+
{% if site.github_username %}
71+
<p class="mb-2">
72+
<a class="mr-2" href="https://github.com/{{ site.github_username }}" target="_blank" rel="noopener">
73+
<i class="fa-brands fa-github mr-1"></i>GitHub
74+
</a>
75+
</p>
76+
{% endif %}
77+
<p>
78+
<a class="mr-2" href="/rss.xml" target="_blank" rel="noopener">
79+
<i class="fa fa-rss mr-1"></i>RSS
80+
</a>
81+
</p>
82+
</div>
83+
</div>
84+
<p class="top-border mb-2"></p>
85+
<div class="d-block d-lg-flex justify-content-between pt-0 pb-3 copyright">
86+
<div class="small mb-2 mb-lg-0">
87+
&copy;&nbsp;{{ 'now' | date: "%Y" }}&nbsp;{{ site.title }}
88+
<span class="mx-1">|</span>
89+
<a class="underline-hover" href="{{ site.baseurl }}/license">
90+
<i class="fa fa-gavel mr-1"></i>{% t titles.license %}
91+
</a>
92+
<span class="mx-1">|</span>
93+
<a class="underline-hover" href="{{ site.baseurl }}/privacy">
94+
<i class="fa fa-user-shield mr-1"></i>{% t titles.privacy %}
95+
</a>
7596
</div>
97+
</div>
7698
</div>
99+
</div>
77100
</footer>

‎_sass/_custom.scss

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
// Mock bootstrap 5 classes
2+
3+
.bg-body-tertiary {
4+
background-color: var(--bs-tertiary-bg);
5+
}
6+
17
// Smooth Scrolling
28

39
html {
@@ -1042,16 +1048,16 @@ i.member-img {
10421048

10431049
footer {
10441050
flex-shrink: 0;
1051+
color: var(--bs-secondary-color);
10451052
}
10461053

1047-
.copyright {
1048-
font-size: 14px;
1049-
font-weight: 400;
1050-
color: $gray-900;
1054+
footer a {
1055+
color: var(--bs-secondary-color) !important;
10511056
}
10521057

1053-
.copyright a:hover {
1054-
color: $gray-900;
1058+
footer .svg-wave {
1059+
fill: var(--bs-tertiary-bg);
1060+
fill-opacity: 1;
10551061
}
10561062

10571063
// Form

‎_sass/_dark.scss

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
@import "./bootstrap-dark/card";
2020

2121
:root {
22+
--bs-secondary-color: #ddd;
23+
--bs-tertiary-bg: #223; // .background-gray-100
2224
scrollbar-color: #333 #000;
2325
}
2426

@@ -96,20 +98,22 @@
9698
border: none;
9799
}
98100

99-
path {
100-
fill: #223;
101-
}
102-
103101
#search-input {
104102
color: #fff;
105103
}
106104

105+
// Footer
106+
107107
.copyright {
108-
color: #bbb;
109-
}
108+
color: #bbb !important;
110109

111-
.copyright a:hover {
112-
color: #fff;
110+
& a {
111+
color: #bbb !important;
112+
}
113+
114+
& a:hover {
115+
color: #fff !important;
116+
}
113117
}
114118

115119
.overlay {

‎_sass/_variables.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,8 @@ $grid-breakpoints: (
2121
lg: 992px,
2222
xl: 1400px
2323
);
24+
25+
:root {
26+
--bs-secondary-color: #{$gray-900};
27+
--bs-tertiary-bg: #{$gray-100};
28+
}

0 commit comments

Comments
 (0)