skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-21 10:36:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add enhanced footer with social links and newsletter CTA

Browse Source 
- Add X/Twitter and LinkedIn social icons to footer
- Add "Renaissance Geek" newsletter button with arrow animation
- Create dedicated author section with subtle divider styling
- Responsive layout that stacks on mobile

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-01-07 18:54:01 -08:00
co-authored by Claude Opus 4.5
parent af21bf2d34
commit dade431495
2 changed files with 108 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+86 -7
View File
@@ -1506,23 +1506,102 @@ code {
color: var(--color-accent);
}
.footer-credit {
font-size: 0.875rem;
color: var(--color-ash);
margin-top: var(--spacing-md);
.footer-author {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
flex-wrap: wrap;
width: 100%;
text-align: center;
padding-top: var(--spacing-lg);
margin-top: var(--spacing-md);
border-top: 1px solid var(--color-mist);
}
.footer-credit a {
.footer-author-label {
font-size: 0.875rem;
color: var(--color-ash);
}
.footer-author-label a {
color: var(--color-text);
transition: color var(--duration-fast) var(--ease-out);
}
.footer-credit a:hover {
.footer-author-label a:hover {
color: var(--color-accent);
}
.footer-author-links {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.footer-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--color-ash);
background: transparent;
border-radius: 50%;
transition: all var(--duration-fast) var(--ease-out);
text-decoration: none;
}
.footer-social-link:hover {
color: var(--color-accent);
background: var(--color-accent-dim);
}
.footer-author-divider {
width: 1px;
height: 20px;
background: var(--color-mist);
margin: 0 var(--spacing-xs);
}
.footer-newsletter {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
text-decoration: none;
padding: 8px 14px;
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 100px;
transition: all var(--duration-fast) var(--ease-out);
}
.footer-newsletter:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.footer-newsletter svg {
transition: transform var(--duration-fast) var(--ease-out);
}
.footer-newsletter:hover svg {
transform: translateX(3px);
}
@media (max-width: 768px) {
.footer-author {
flex-direction: column;
gap: var(--spacing-sm);
}
.footer-author-divider {
display: none;
}
}
/* ============================================
BUTTONS
============================================ */
public/index.html
+22 -1
View File
@@ -436,7 +436,28 @@
<a href="#downloads">Downloads</a>
<a href="https://github.com/pbakaus/impeccable">GitHub</a>
</div>
<p class="footer-credit">Created by <a href="https://www.paulbakaus.com">Paul Bakaus</a></p>
</div>
<div class="footer-author">
<span class="footer-author-label">Created by <a href="https://www.paulbakaus.com">Paul Bakaus</a></span>
<div class="footer-author-links">
<a href="https://x.com/pbakaus" class="footer-social-link" aria-label="Follow on X" target="_blank" rel="noopener">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</a>
<a href="https://linkedin.com/in/paulbakaus" class="footer-social-link" aria-label="Connect on LinkedIn" target="_blank" rel="noopener">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<span class="footer-author-divider"></span>
<a href="https://www.paulbakaus.com" class="footer-newsletter" target="_blank" rel="noopener">
Renaissance Geek
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
</div>
</footer>