diff --git a/public/css/main.css b/public/css/main.css index 432fe4adb..6e2187a8a 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -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 ============================================ */ diff --git a/public/index.html b/public/index.html index b45e18487..2983092a5 100644 --- a/public/index.html +++ b/public/index.html @@ -436,7 +436,28 @@ Downloads GitHub -
+ +