keith/Portfolio-2026
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Enhance footer with social media links and styling updates
Sync TODOs with Issues / sync_todos (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Keith Solomon
2026-08-23 16:05:31 -05:00
parent 0613e33411
commit e31ed29962
10 changed files with 299 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/components/site-footer.css
+146 -20
View File
@@ -4,24 +4,150 @@
background: var(--color-surface, #121318);
color: var(--color-on-surface, #e3e1e9);
border-top: 1px solid var(--color-outline-variant, #444651);
}
.site-footer__title a { color: var(--color-on-surface, #e3e1e9); text-decoration: none; }
.site-footer__desc { color: var(--color-on-surface-variant, #c5c5d3); }
.site-footer__area h3,
.site-footer__nav h3 {
color: var(--color-on-surface, #e3e1e9);
font-family: var(--font-sans);
font-weight: 700;
margin: 0 0 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-outline-variant, #444651);
}
.site-footer a { color: var(--color-primary, #b6c4ff); }
.site-footer a:hover { text-decoration: underline; }
.site-footer__copyright {
background: var(--color-surface-container-lowest, #0d0e13);
color: var(--color-on-surface-variant, #c5c5d3);
text-align: center;
padding: 0.75rem;
font-size: 0.875rem;
.site-footer__title a { color: #e3e1e9; text-decoration: none; }
.site-footer__area h3,
.site-footer__nav h3 {
color: var(--color-on-surface, #e3e1e9);
font-family: var(--font-sans);
font-weight: 700;
margin: 0 0 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-outline-variant, #444651);
}
.site-footer a { color: #b6c4ff; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__copyright {
background: var(--color-surface-container-lowest, #0d0e13);
color: var(--color-on-surface-variant, #c5c5d3);
text-align: center;
padding: 0.75rem;
font-size: 0.875rem;
}
/* Social media links styling */
.social-links {
display: flex;
flex-wrap: nowrap;
gap: 0.5rem;
align-items: center;
}
.social-links a {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
/* SVG icon alignment */
.site-footer svg {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
}
/* Quick Links styling */
.site-footer__nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer__nav > ul > li {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-bottom: 0.75rem;
}
.site-footer__nav > ul > li:last-child {
margin-bottom: 0;
}
/* Main menu items with SVG marker */
.site-footer__nav > ul > li > a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.site-footer__nav > ul > li > a::before {
content: '';
width: 16px;
height: 16px;
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.15533 5.59469C6.94083 5.38019 6.61824 5.31603 6.33799 5.43211C6.05773 5.5482 5.875 5.82168 5.875 6.12502V18.625C5.875 18.9284 6.05773 19.2018 6.33799 19.3179C6.61824 19.434 6.94083 19.3699 7.15533 19.1554L13.4053 12.9054C13.6982 12.6125 13.6982 12.1376 13.4053 11.8447L7.15533 5.59469Z' fill='%23b6c4ff'/%3E%3Cpath opacity='0.4' d='M11.6553 5.59467C11.3624 5.30178 10.8876 5.30178 10.5947 5.59467C10.3018 5.88756 10.3018 6.36244 10.5947 6.65533L16.3143 12.375L10.5947 18.0947C10.3018 18.3876 10.3018 18.8624 10.5947 19.1553C10.8876 19.4482 11.3624 19.4482 11.6553 19.1553L17.9053 12.9053C18.1982 12.6124 18.1982 12.1376 17.9053 11.8447L11.6553 5.59467Z' fill='%23b6c4ff'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Submenu styling */
.site-footer__nav-submenu {
list-style: none;
padding: 0;
margin: 0.5rem 0 0 4rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.site-footer__nav-submenu-item {
margin: 0;
padding-left: 1.5rem;
}
.site-footer__nav-submenu-item a {
color: #b6c4ff;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.site-footer__nav-submenu-item a::before {
content: '';
width: 16px;
height: 16px;
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.15533 5.59469C6.94083 5.38019 6.61824 5.31603 6.33799 5.43211C6.05773 5.5482 5.875 5.82168 5.875 6.12502V18.625C5.875 18.9284 6.05773 19.2018 6.33799 19.3179C6.61824 19.434 6.94083 19.3699 7.15533 19.1554L13.4053 12.9054C13.6982 12.6125 13.6982 12.1376 13.4053 11.8447L7.15533 5.59469Z' fill='%23b6c4ff'/%3E%3Cpath opacity='0.4' d='M11.6553 5.59467C11.3624 5.30178 10.8876 5.30178 10.5947 5.59467C10.3018 5.88756 10.3018 6.36244 10.5947 6.65533L16.3143 12.375L10.5947 18.0947C10.3018 18.3876 10.3018 18.8624 10.5947 19.1553C10.8876 19.4482 11.3624 19.4482 11.6553 19.1553L17.9053 12.9053C18.1982 12.6124 18.1982 12.1376 17.9053 11.8447L11.6553 5.59467Z' fill='%23b6c4ff'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.site-footer__nav-submenu a:hover {
text-decoration: underline;
}
/* Contact button styling */
.site-footer__nav-contact > a.button {
display: inline-block;
padding: 0.5rem 1rem;
background-color: #b6c4ff;
color: #121318;
border-radius: 0.25rem;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
}
.site-footer__nav-contact > a.button::before {
display: none;
}
.site-footer__nav-contact > a.button:hover {
background-color: #e3e1e9;
text-decoration: none;
}
.site-footer__nav-contact {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-outline-variant, #444651);
}
}