Skip to content

Commit 13bd8d4

Browse files
ritorhymesritorhymes
committed
feat(footer): restructure and optimize footer
- add X social icon asset and accessible X button - use semantic <footer> element - refactor HTML/SCSS to Flexbox for spacing and alignment - link Bitcoin Core logo to localized home route - improve a11y for links - remove clearfix and modernize legacy styling
1 parent 5ee87a3 commit 13bd8d4

File tree

3 files changed

+227
-74
lines changed

3 files changed

+227
-74
lines changed

‎_includes/footer.html‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,36 @@
1-
<div>
2-
<span>
3-
<a href="https://x.com/bitcoincoreorg" target="_blank" class="">X</a><br />
4-
<a href="/en/legal/">Legal</a> | <a href="/en/legal/privacy">Privacy Policy</a> | <a href="/{{ page.lang }}/rss/">RSS <img src="/assets/images/rss-24x24.png" alt="rss feeds" width="14" height="14"></a>
1+
<footer class="site-footer" role="contentinfo">
2+
<div class="footer-unit footer-unit--social">
3+
<a href="https://x.com/bitcoincoreorg"
4+
target="_blank"
5+
rel="noopener noreferrer"
6+
class="footer-button"
7+
aria-label="Bitcoin Core on X (@bitcoincoreorg)">
8+
<img src="/assets/images/icons/x.png" alt="" aria-hidden="true" class="x-icon">
9+
<span>@bitcoincoreorg</span>
10+
</a>
11+
12+
<div class="footer-links">
13+
<a href="/en/legal/">Legal</a>
14+
<span class="separator" aria-hidden="true">|</span>
15+
<a href="/en/legal/privacy">Privacy Policy</a>
16+
<span class="separator" aria-hidden="true">|</span>
17+
<a href="/{{ page.lang }}/rss/">
18+
RSS <img src="/assets/images/rss-24x24.png" alt="" aria-hidden="true" class="rss-icon">
19+
</a>
20+
</div>
21+
</div>
22+
23+
<div class="footer-unit footer-unit--branding">
24+
<a href="{% if page.lang %}/{{ page.lang }}/{% else %}/{% endif %}"
25+
class="footer-logo-link"
26+
aria-label="Home — Bitcoin Core">
27+
<img src="/assets/images/bitcoin_core_logo.png" alt="" class="footer-logo">
28+
</a>
29+
30+
<span class="copyright">
31+
&copy; {{ site.time | date: '%Y' }} {{ site.owner.name }}
532
</span>
6-
</div>
7-
<div>
8-
<img src="/assets/images/bitcoin_core_logo.png" alt="bitcoin core logo" width="160"><br />
9-
<span class="copyright">&copy; {{ site.time | date: '%Y' }} {{ site.owner.name }}</span>
10-
</div>
33+
</div>
34+
</footer>
1135

1236
<link rel="stylesheet" href="/assets/css/fonts.css">

‎_sass/page.scss‎

Lines changed: 194 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -790,76 +790,205 @@ li.lang:hover {
790790
}
791791
}
792792

793-
/* Footer wrapper */
794-
.footer-wrap {
795-
background-color: lighten($black,90);
796-
border-top: 1px solid lighten($black,70);
797-
color: lighten($black,60);
798-
@include container;
799-
@include clearfix;
800-
clear: both;
801-
padding-bottom: 1.5em;
802-
a,
803-
a:active,
804-
a:visited,
805-
p,
806-
h4,
807-
h5,
808-
h6,
809-
span {
810-
@include font-rem(16);
811-
}
812-
footer {
813-
padding-top: 0.5em;
814-
@include grid(12,10);
815-
@include prefix(12,1);
816-
@include suffix(12,1);
817-
@media #{$small} {
818-
@include grid(12,6);
819-
@include prefix(12,3);
820-
@include suffix(12,3);
821-
}
822-
@media #{$x-large} {
823-
@include grid(12,4.5);
824-
@include prefix(12,4);
825-
@include suffix(12,3.5);
826-
}
827-
}
828-
footer div {
829-
@include grid(12,6);
830-
&:last-child {
831-
text-align: right;
832-
}
833-
}
834-
a {
835-
color: lighten($black,60);
836-
&:visited, &:focus, &:hover, &:active {
837-
color: lighten($black,60);
838-
}
839-
&:hover {
840-
color: $black;
841-
}
842-
}
843-
.copyright {
844-
@include font-rem(11);
845-
}
793+
/* Modern Flexbox Footer */
794+
.site-footer {
795+
display: flex;
796+
justify-content: center;
797+
align-items: center;
798+
gap: 2rem;
799+
background-color: #f5f5f5;
800+
border-top: 1px solid #d9d9d9;
801+
color: #666666;
802+
font-size: 1rem;
803+
min-height: 120px;
846804
}
847805

848-
.footer-link {
849-
display: block;
850-
margin-bottom: 0.3em;
851-
&:visited {
852-
color: $black;
806+
/* Footer Units */
807+
.footer-unit {
808+
display: flex;
809+
flex-direction: column;
810+
align-items: center;
811+
text-align: center;
812+
gap: 0.75rem;
813+
}
814+
815+
// These widths help shape proportional distances between container units and the page margins
816+
.footer-unit--social {
817+
width: 340px;
818+
}
819+
.footer-unit--branding {
820+
width: 320px;
821+
}
822+
823+
/* X Button */
824+
.footer-button {
825+
display: inline-flex;
826+
align-items: center;
827+
gap: 0.5rem;
828+
padding: 0.5rem 1rem;
829+
border-radius: 100px;
830+
background-color: #000000;
831+
color: #d9d9d9;
832+
text-decoration: none;
833+
font-size: 0.9rem;
834+
transition: transform 0.2s ease;
835+
font-weight: 800;
836+
}
837+
.footer-button:hover {
838+
color: #ffffff;
839+
}
840+
.footer-button .x-icon {
841+
width: 20px;
842+
height: 20px;
843+
display: block;
844+
}
845+
.footer-button span {
846+
position: relative;
847+
top: -1px;
848+
}
849+
850+
/* Legal Links */
851+
.footer-links {
852+
display: flex;
853+
align-items: center;
854+
gap: 0.5rem;
855+
white-space: nowrap;
856+
flex-wrap: nowrap;
857+
}
858+
.footer-links a {
859+
color: #666666;
860+
text-decoration: none;
861+
}
862+
.footer-links a:hover {
863+
color: #000000;
864+
}
865+
.footer-links .separator {
866+
color: #999999;
867+
user-select: none;
868+
}
869+
.footer-links .rss-icon {
870+
width: 14px;
871+
height: 14px;
872+
vertical-align: middle;
873+
margin-left: 2px;
874+
position: relative;
875+
top: -2px;
876+
}
877+
878+
/* Logo & Copyright */
879+
.footer-logo-link {
880+
display: block;
881+
transition: transform 0.2s ease;
882+
}
883+
.footer-logo {
884+
width: 160px;
885+
height: auto;
886+
display: block;
887+
}
888+
.copyright {
889+
font-size: 0.7rem;
890+
color: #999999;
891+
white-space: nowrap;
892+
}
893+
894+
/* Mobile Responsive footer */
895+
@media (max-width: 768px) {
896+
.site-footer {
897+
flex-direction: row;
898+
flex-wrap: wrap;
899+
gap: 50px;
900+
justify-content: center;
901+
padding: 0px 20px;
853902
}
854-
&:hover {
855-
@include scale(1.05);
903+
.footer-unit--social {
904+
width: auto;
905+
flex-shrink: 0;
856906
}
857-
&:active {
858-
@include translate(0, 2px);
907+
.footer-unit--branding {
908+
width: auto;
909+
flex-shrink: 0;
910+
}
911+
.footer-links {
912+
font-size: 0.9rem;
913+
}
914+
}
915+
916+
@media (max-width: 480px) {
917+
.footer-links {
918+
font-size: 0.85rem;
919+
}
920+
.footer-button {
921+
font-size: 0.85rem;
922+
}
923+
.site-footer {
924+
padding: 1.5rem 0.3rem;
925+
}
926+
.footer-unit--social {
927+
width: 300px;
928+
}
929+
}
930+
931+
/*keyboard-only focus behavior (keep visual focus for keyboard users) */
932+
.site-footer {
933+
.footer-button {
934+
outline: none;
935+
box-shadow: none !important;
936+
937+
&:focus,
938+
&:focus-visible {
939+
outline: 2px solid #9e9e9e;
940+
outline-offset: 3px;
941+
color: #ffffff;
942+
}
943+
944+
> span {
945+
color: inherit;
946+
}
947+
948+
&:focus:not(:focus-visible) {
949+
box-shadow: none !important;
950+
outline: none !important;
951+
}
952+
}
953+
954+
.footer-logo-link {
955+
outline: none;
956+
box-shadow: none !important;
957+
958+
&:focus,
959+
&:focus-visible {
960+
box-shadow: 0 0 0 3px #000;
961+
border-radius: 3px;
962+
outline: 2px solid #000;
963+
outline-offset: 4px;
964+
}
965+
966+
&:focus:not(:focus-visible) {
967+
box-shadow: none !important;
968+
outline: none !important;
969+
}
970+
}
971+
972+
.footer-links {
973+
a {
974+
outline: none;
975+
box-shadow: none !important;
976+
977+
&:focus,
978+
&:focus-visible {
979+
box-shadow: 0 0 0 3px #000;
980+
border-radius: 3px;
981+
outline: 2px solid #000;
982+
outline-offset: 3px;
983+
transition: none;
984+
}
985+
986+
&:focus:not(:focus-visible) {
987+
box-shadow: none !important;
988+
outline: none !important;
989+
}
990+
}
859991
}
860-
.fa {
861-
margin-right: 5px;
862-
}
863992
}
864993

865994
/* Related articles list */

‎assets/images/icons/x.png‎

34 KB
Loading

0 commit comments

Comments
 (0)