Skip to content

Commit 2ddb060

Browse files
dlebauerdlebauer
authored
Merge pull request #87 from divine7022/enhancement/footer-design
Improve Footer UI: Added Icons & Arrows for Better Navigation
2 parents 44e63da + ed1d12c commit 2ddb060

File tree

2 files changed

+150
-12
lines changed

2 files changed

+150
-12
lines changed

‎docusaurus.config.js‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ module.exports = {
7777
{
7878
label: "Tutorial",
7979
to: "/documentation/master",
80+
className: "footer-docs-link",
8081
},
8182
],
8283
},
@@ -86,10 +87,12 @@ module.exports = {
8687
{
8788
label: "Slack",
8889
href: "https://join.slack.com/t/pecanproject/shared_invite/enQtMzkyODUyMjQyNTgzLWEzOTM1ZjhmYWUxNzYwYzkxMWVlODAyZWQwYjliYzA0MDA0MjE4YmMyOTFhMjYyMjYzN2FjODE4N2Y4YWFhZmQ",
90+
className: "footer-slack-link",
8991
},
9092
{
9193
label: "Twitter",
9294
href: "https://twitter.com/pecanproject",
95+
className: "footer-twitter-link",
9396
},
9497
],
9598
},
@@ -99,26 +102,24 @@ module.exports = {
99102
{
100103
label: "GitHub",
101104
href: "https://github.com/PecanProject",
105+
className: "footer-github-link",
102106
},
103107
],
104108
},
105109
{
106-
title: "Past Contributors",
107110
items: [
108111
{
109-
label: "PecanProject",
110-
href: "https://github.com/PecanProject/pecan/graphs/contributors",
111-
},
112-
{
113-
label: "BETYdb Database",
114-
href: "https://github.com/PecanProject/bety/graphs/contributors",
115-
},
116-
{
117-
label: "Pecan Website",
118-
href: "https://github.com/PecanProject/web/graphs/contributors",
112+
html: `
113+
<div class="footer-logo">
114+
<a href="/" class="footer-logo-link">
115+
<img src="/img/logo.jpeg" alt="PEcAn Logo" class="footer-logo-img"/>
116+
<span class="footer-logo-text">PEcAn</span>
117+
</a>
118+
</div>
119+
`,
119120
},
120121
],
121-
},
122+
}
122123
],
123124
copyright: `Copyright © ${new Date().getFullYear()} PEcAn Project.`,
124125
},

‎src/css/custom.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ html[data-theme="dark"] {
3030
.navbar img {
3131
border-radius: 15px !important;
3232
}
33+
34+
/* Footer */
35+
3336
html[data-theme="dark"] .footer {
3437
--ifm-footer-color: #f5f5f5;
3538
--ifm-footer-link-color:#f5f5f5;
@@ -42,6 +45,98 @@ html[data-theme="light"] .footer {
4245
--ifm-footer-title-color: #292d30;
4346
}
4447

48+
/* docs */
49+
.footer-docs-link,
50+
.footer-pastContributors-link {
51+
display: flex;
52+
align-items: center;
53+
font-weight: 500;
54+
color: var(--ifm-footer-link-color);
55+
text-decoration: none;
56+
gap: 8px;
57+
}
58+
59+
.footer-docs-link::before,
60+
.footer-pastContributors-link::before {
61+
content: "";
62+
display: inline-block;
63+
width: 20px;
64+
height: 20px;
65+
color: var(--ifm-footer-link-color);
66+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23898989' d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
67+
background-size: contain;
68+
background-repeat: no-repeat;
69+
}
70+
71+
/* community */
72+
.footer-github-link {
73+
display: flex;
74+
align-items: center;
75+
gap: 8px;
76+
color: var(--ifm-footer-link-color);
77+
78+
}
79+
80+
.footer-github-link::before {
81+
content: "";
82+
width: 24px;
83+
height: 24px;
84+
display: inline-block;
85+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
86+
no-repeat center;
87+
background-size: contain;
88+
}
89+
90+
html[data-theme="dark"] .footer-github-link::before {
91+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
92+
no-repeat center;
93+
background-size: contain;
94+
}
95+
96+
.footer-slack-link {
97+
display: flex;
98+
align-items: center;
99+
gap: 8px;
100+
color: var(--ifm-footer-link-color);
101+
}
102+
103+
.footer-slack-link::before {
104+
content: "";
105+
width: 24px;
106+
height: 24px;
107+
display: inline-block;
108+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='24px' height='24px' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9,7C8.359,7,4.639,7,4,7C2.895,7,2,7.895,2,9c0,1.105,0.895,2,2,2c0.639,0,4.359,0,5,0c1.105,0,2-0.895,2-2C11,7.895,10.105,7,9,7z' fill='%23292d30'/%3E%3Cpath d='M11,4c0,0.598,0,2,0,2S9.507,6,9,6C7.895,6,7,5.105,7,4s0.895-2,2-2S11,2.895,11,4z' fill='%23292d30'/%3E%3Cpath d='M7,14c0,0.641,0,4.361,0,5c0,1.105,0.895,2,2,2c1.105,0,2-0.895,2-2c0-0.639,0-4.359,0-5c0-1.105-0.895-2-2-2C7.895,12,7,12.895,7,14z' fill='%23292d30'/%3E%3Cpath d='M4,12c0.598,0,2,0,2,0s0,1.493,0,2c0,1.105-0.895,2-2,2s-2-0.895-2-2S2.895,12,4,12z' fill='%23292d30'/%3E%3Cpath d='M14,16c0.641,0,4.361,0,5,0c1.105,0,2-0.895,2-2c0-1.105-0.895-2-2-2c-0.639,0-4.359,0-5,0c-1.105,0-2,0.895-2,2C12,15.104,12.895,16,14,16z' fill='%23292d30'/%3E%3Cpath d='M12,19c0-0.598,0-2,0-2s1.493,0,2,0c1.105,0,2,0.895,2,2c0,1.105-0.895,2-2,2S12,20.104,12,19z' fill='%23292d30'/%3E%3Cpath d='M16,9c0-0.641,0-4.361,0-5c0-1.105-0.895-2-2-2c-1.105,0-2,0.895-2,2c0,0.639,0,4.359,0,5c0,1.105,0.895,2,2,2C15.104,11,16,10.104,16,9z' fill='%23292d30'/%3E%3Cpath d='M19,11c-0.598,0-2,0-2,0s0-1.493,0-2c0-1.105,0.895-2,2-2c1.105,0,2,0.895,2,2S20.104,11,19,11z' fill='%23292d30'/%3E%3C/svg%3E") no-repeat center;
109+
background-size: contain;
110+
}
111+
112+
html[data-theme="dark"] .footer-slack-link::before {
113+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2333d375' d='M33,8c0-2.209-1.791-4-4-4s-4,1.791-4,4c0,1.254,0,9.741,0,11c0,2.209,1.791,4,4,4s4-1.791,4-4C33,17.741,33,9.254,33,8z'/%3E%3Cpath fill='%2333d375' d='M43,19c0,2.209-1.791,4-4,4c-1.195,0-4,0-4,0s0-2.986,0-4c0-2.209,1.791-4,4-4S43,16.791,43,19z'/%3E%3Cpath fill='%2340c4ff' d='M8,14c-2.209,0-4,1.791-4,4s1.791,4,4,4c1.254,0,9.741,0,11,0c2.209,0,4-1.791,4-4s-1.791-4-4-4C17.741,14,9.254,14,8,14z'/%3E%3Cpath fill='%2340c4ff' d='M19,4c2.209,0,4,1.791,4,4c0,1.195,0,4,0,4s-2.986,0-4,0c-2.209,0-4-1.791-4-4S16.791,4,19,4z'/%3E%3Cpath fill='%23e91e63' d='M14,39.006C14,41.212,15.791,43,18,43s4-1.788,4-3.994c0-1.252,0-9.727,0-10.984c0-2.206-1.791-3.994-4-3.994s-4,1.788-4,3.994C14,29.279,14,37.754,14,39.006z'/%3E%3Cpath fill='%23e91e63' d='M4,28.022c0-2.206,1.791-3.994,4-3.994c1.195,0,4,0,4,0s0,2.981,0,3.994c0,2.206-1.791,3.994-4,3.994S4,30.228,4,28.022z'/%3E%3Cpath fill='%23ffc107' d='M39,33c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.254,0-9.741,0-11,0c-2.209,0-4,1.791-4,4s1.791,4,4,4C29.258,33,37.746,33,39,33z'/%3E%3Cpath fill='%23ffc107' d='M28,43c-2.209,0-4-1.791-4-4c0-1.195,0-4,0-4s2.986,0,4,0c2.209,0,4,1.791,4,4S30.209,43,28,43z'/%3E%3C/svg%3E") no-repeat center;
114+
background-size: contain;
115+
}
116+
117+
.footer-twitter-link {
118+
display: flex;
119+
align-items: center;
120+
gap: 8px;
121+
color: var(--ifm-footer-link-color);
122+
}
123+
124+
.footer-twitter-link::before {
125+
content: "";
126+
width: 24px;
127+
height: 24px;
128+
display: inline-block;
129+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.37,26l-8.795-12.822l0.015,0.012L25.52,4h-2.65l-6.46,7.48L11.28,4H4.33l8.211,11.971L12.54,15.97L3.88,26h2.65l7.182-8.322L19.42,26H26.37z M10.23,6l12.34,18h-2.1L8.12,6H10.23z'/%3E%3C/svg%3E") no-repeat center;
130+
background-size: contain;
131+
}
132+
133+
html[data-theme="dark"] .footer-twitter-link::before {
134+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.053,7.988l5.631,8.024h-1.497L8.566,7.988H10.053z M21,21H3V3h18V21z M17.538,17l-4.186-5.99L16.774,7h-1.311l-2.704,3.16L10.552,7H6.702l3.941,5.633L6.906,17h1.333l3.001-3.516L13.698,17H17.538z'/%3E%3C/svg%3E") no-repeat center;
135+
background-size: contain;
136+
}
137+
138+
/*HEADER */
139+
45140
.header-github-link:hover {
46141
opacity: 0.6;
47142
}
@@ -84,3 +179,45 @@ html[data-theme="dark"] .card:hover {
84179
height: 100%;
85180
border: none;
86181
}
182+
183+
.footer-logo {
184+
display: flex;
185+
align-items: center;
186+
gap: 8px;
187+
}
188+
189+
.footer-logo-img {
190+
width: 60px;
191+
height: 60px;
192+
border-radius: 50%;
193+
}
194+
195+
.footer-logo-text {
196+
font-size: 18px;
197+
font-weight: 700;
198+
display: flex;
199+
align-items: center;
200+
font-size: 18px;
201+
font-weight: 700;
202+
text-decoration: none !important;
203+
}
204+
205+
html[data-theme="dark"] .footer-logo-text {
206+
color:#f5f5f5;
207+
}
208+
209+
html[data-theme="light"] .footer-logo-text {
210+
color: #292d30;
211+
}
212+
213+
.footer-logo-link {
214+
display: flex;
215+
align-items: center;
216+
gap: 8px;
217+
text-decoration: none !important;
218+
}
219+
220+
.footer-logo-link:hover .footer-logo-text {
221+
color: rgb(70, 203, 174);
222+
text-decoration: none !important;
223+
}

0 commit comments

Comments
 (0)