Skip to content

Commit 78e4e78

Browse files
phiro56madolson
phiro56
and
madolson
authored
feat: redesign footer with social media icons and links (#240)
Feat: redesign footer with social media icons and links. Add social media icons and links to the footer, including Slack, GitHub, LinkedIn, X (Twitter), and Connect. Improve footer layout and styling. <img width="1727" alt="Screenshot 2025-04-17 at 1 58 53 PM" src="https://github.com/user-attachments/assets/5f311820-ac2e-460c-8ddd-93fe77e7a81d" /> <img width="514" alt="Screenshot 2025-04-17 at 1 59 03 PM" src="https://github.com/user-attachments/assets/5de67d56-9b69-4810-b615-4af75d9487e6" /> --------- Signed-off-by: Daniel Phillips <[email protected]> Co-authored-by: Madelyn Olson <[email protected]>
1 parent 392a849 commit 78e4e78

File tree

7 files changed

+139
-53
lines changed

7 files changed

+139
-53
lines changed

‎sass/_valkey.scss‎

Lines changed: 78 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -345,33 +345,81 @@ p {
345345
}
346346

347347
.footer {
348-
border-top: 1px solid $grey-dk-100;
349-
background-color: $grey-lt-300;
348+
background-color: #1a2026;
350349
@include sans-serif;
351350
font-size: 1.4rem;
351+
color: #fff;
352+
padding: 2rem 0;
353+
354+
.icon-links {
355+
display: flex;
356+
flex-direction: column;
357+
gap: 15px;
358+
359+
@include respond-min(768px) {
360+
flex-direction: row;
361+
border: none;
362+
}
363+
364+
a {
365+
display: flex;
366+
align-items: center;
367+
color: #fff;
368+
369+
&:hover {
370+
color: #fff;
371+
text-decoration: underline;
372+
opacity: 0.8;
373+
}
374+
375+
img {
376+
margin-right: 5px;
377+
}
378+
}
379+
380+
}
352381

353382
.links {
354383
display: flex;
355-
flex-flow: row nowrap;
356-
justify-content: space-evenly;
357-
margin-bottom: 4em;
384+
flex-direction: column;
385+
gap: 15px;
386+
justify-content: flex-end;
387+
border-top: 1px solid rgba(255, 255, 255, 0.08);
388+
margin-top: 2rem;
389+
padding-top: 2rem;
390+
391+
@include respond-min(768px) {
392+
flex-direction: row;
393+
border: none;
394+
margin-top: 0;
395+
padding-top: 0;
396+
}
397+
398+
a {
399+
color: #fff;
400+
text-decoration: underline;
401+
402+
&:hover {
403+
opacity: 0.8;
404+
}
405+
}
358406
}
359407

360-
nav {
361-
font-size: 1.5rem;
362-
font-weight: 600;
408+
&_bottom {
409+
width: 100%;
410+
margin-top: 2rem;
411+
padding: 2rem;
363412

364-
h4 {
365-
font-weight: 400;
366-
@include sans-serif;
367-
font-size: 1.5rem;
413+
border-top: 1px solid rgba(255, 255, 255, 0.08);
414+
text-align: center;
415+
416+
p {
417+
max-width: 720px;
418+
margin: 8px auto;
368419
}
369420

370421
a {
371-
display: list-item;
372-
list-style: none;
373-
white-space: nowrap;
374-
margin-bottom: 1em;
422+
color: #6983ff;
375423

376424
&:hover {
377425
text-decoration: underline;
@@ -410,28 +458,35 @@ p {
410458

411459
.col {
412460
flex: 1 1 100%;
413-
padding: 0 2rem;
461+
padding-left: 2rem;
462+
padding-right: 2rem;
414463
}
415464

416465
.col-10 {
417-
flex: 1 1 83.33%;
466+
@include respond-min(768px) {
467+
flex: 1 1 83.33%;
468+
}
418469
}
419470

420471
.col-8 {
421-
flex: 1 1 66.66%;
472+
@include respond-min(768px) {
473+
flex: 1 1 66.66%;
474+
}
422475
}
423476

424477
.col-6 {
425-
flex: 1 1 50%;
478+
@include respond-min(768px) {
479+
flex: 1 1 50%;
480+
}
426481
}
427482

428483
.col-4 {
429-
flex: 1 1 33.33%;
484+
@include respond-min(768px) {
485+
flex: 1 1 33.33%;
486+
}
430487
}
431488

432489
.col_3 {
433-
flex: 1 1 100%;
434-
435490
@include respond-min(768px) {
436491
flex: 1 1 25%;
437492
}

‎static/img/IconGithub.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎static/img/IconLinkedin.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎static/img/IconMail.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎static/img/IconSlack.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎static/img/IconX.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎templates/default.html‎

Lines changed: 46 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -48,36 +48,52 @@
4848
{% block content %}{% endblock %}
4949
</div>
5050
<div class="footer">
51-
<div class="width-limiter">
52-
<div class="links">
53-
<nav role="navigation" aria-label="Get Involved">
54-
<h4>Get Involved</h4>
55-
<a role="menuitem" href="/code_of_conduct.html">Code of Conduct</a>
56-
<a role="menuitem" href="https://github.com/orgs/valkey-io/discussions">Forum</a>
57-
<a role="menuitem" href="https://github.com/valkey-io">GitHub</a>
58-
</nav>
59-
<nav role="navigation" aria-label="Resources">
60-
<h4>Resources</h4>
61-
<a role="menuitem" href="/about">About</a>
62-
</nav>
63-
<nav role="navigation" aria-label="Contact Us">
64-
<h4>Contact</h4>
65-
<a role="menuitem" href="/connect.html">Connect</a>
66-
</nav>
67-
</div>
68-
<p>&copy; Valkey contributors, 2024.</p>
69-
<p>Valkey and the Valkey logo are trademarks of LF Projects, LLC.</p>
70-
<p>
71-
<a href="https://lfprojects.org/policies/trademark-policy/">Trademark Policy</a>.
72-
<a href="https://lfprojects.org/policies/privacy-policy/">Privacy Policy</a>.
73-
<a href="https://lfprojects.org/policies/terms-of-use/">Terms of Use</a>.
74-
For other policies, please see <a href="https://lfprojects.org/">lfprojects.org</a>.
75-
</p>
76-
<p>Valkey includes certain 3-Clause BSD-licensed Redis code from Redis Ltd. and other source code. Redis Ltd. is
77-
not the source of that other source code. Redis is a registered trademark of Redis Ltd.</p>
78-
<p>
79-
Logo design by <a href="https://github.com/dizys" target="_blank">Ziyang.</a>
80-
</p>
51+
<div class="row">
52+
<div class="col col-6 icon-links">
53+
<a href="https://valkey.io/slack" target="_blank">
54+
<img src="/img/IconSlack.svg" alt="Slack Icon" width="20" height="20" />
55+
Slack
56+
</a>
57+
<a href="https://github.com/valkey-io" target="_blank">
58+
<img src="/img/IconGithub.svg" alt="Github Icon" width="20" height="20" />
59+
GitHub
60+
</a>
61+
<a href="https://www.linkedin.com/company/valkey/" target="_blank">
62+
<img src="/img/IconLinkedin.svg" alt="LinkedIn Icon" width="20" height="20" />
63+
LinkedIn
64+
</a>
65+
<a href="https://x.com/valkey_io" target="_blank">
66+
<img src="/img/IconX.svg" alt="X Icon" width="20" height="20" />
67+
X.com
68+
</a>
69+
<a href="/connect">
70+
<img src="/img/IconMail.svg" alt="Mail Icon" width="20" height="20" />
71+
Connect
72+
</a>
73+
</div>
74+
75+
<div class="col col-6 links">
76+
<a href="/code_of_conduct">Code of Conduct</a>
77+
<a href="https://github.com/orgs/valkey-io/discussions" target="_blank">Forum</a>
78+
<a href="/about">About</a>
79+
<a href="/topics/faq">FAQ</a>
80+
</div>
81+
</div>
82+
83+
<div class="footer_bottom">
84+
<p>&copy; Valkey contributors.</p>
85+
<p>Valkey and the Valkey logo are trademarks of LF Projects, LLC.</p>
86+
<p>
87+
<a href="https://lfprojects.org/policies/trademark-policy/">Trademark Policy</a>.
88+
<a href="https://lfprojects.org/policies/privacy-policy/">Privacy Policy</a>.
89+
<a href="https://lfprojects.org/policies/terms-of-use/">Terms of Use</a>.
90+
For other policies, please see <a href="https://lfprojects.org/">lfprojects.org</a>.
91+
</p>
92+
<p>Valkey includes certain 3-Clause BSD-licensed Redis code from Redis Ltd. and other source code. Redis Ltd. is
93+
not the source of that other source code. Redis is a registered trademark of Redis Ltd.</p>
94+
<p>
95+
Logo design by <a href="https://github.com/dizys" target="_blank">Ziyang.</a>
96+
</p>
8197
</div>
8298
</div>
8399
</body>

0 commit comments

Comments
 (0)