diff --git a/public/css/main.css b/public/css/main.css index dc77e44ad..a367b583a 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -1981,38 +1981,15 @@ code { background: var(--color-cream); } -.footer-content { +/* Single horizontal row: wordmark left, nav centered, credit right. + Three groups, no two-tier split, no dividers. */ +.footer-row { max-width: var(--width-max); margin: 0 auto; - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: auto 1fr auto; align-items: center; - flex-wrap: wrap; - gap: var(--spacing-lg); -} - -@media (max-width: 768px) { - .site-footer { - padding: var(--spacing-lg) var(--spacing-md); - } - - .footer-content { - flex-direction: column; - text-align: center; - gap: var(--spacing-md); - } - - .footer-links { - gap: var(--spacing-sm) var(--spacing-md); - justify-content: center; - font-size: 0.8125rem; - } -} - -.footer-brand { - display: flex; - flex-direction: column; - gap: var(--spacing-xs); + gap: var(--spacing-xl); } .footer-logo { @@ -2020,15 +1997,12 @@ code { font-size: 1.25rem; font-weight: 400; color: var(--color-ink); -} - -.footer-tagline { - font-size: 0.875rem; - color: var(--color-ash); + text-decoration: none; } .footer-links { display: flex; + justify-content: center; gap: var(--spacing-lg); flex-wrap: wrap; } @@ -2036,6 +2010,7 @@ code { .footer-links a { font-size: 0.875rem; color: var(--color-ash); + text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } @@ -2043,99 +2018,54 @@ code { color: var(--color-accent); } -.footer-author { - display: flex; - align-items: center; - justify-content: center; - gap: var(--spacing-md); - flex-wrap: wrap; - width: 100%; - padding-top: var(--spacing-lg); - margin-top: var(--spacing-md); - border-top: 1px solid var(--color-mist); -} - -.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-author-label a:hover { - color: var(--color-accent); -} - -.footer-author-links { +.footer-credit { display: flex; align-items: center; gap: var(--spacing-sm); + font-size: 0.875rem; + color: var(--color-ash); + white-space: nowrap; +} + +.footer-credit a { + color: var(--color-text); + text-decoration: none; + transition: color var(--duration-fast) var(--ease-out); +} + +.footer-credit a:hover { + color: var(--color-accent); } .footer-social-link { - display: flex; + display: inline-flex; align-items: center; justify-content: center; - width: 36px; - height: 36px; + padding: 4px; color: var(--color-ash); - background: transparent; - border-radius: 50%; - transition: all var(--duration-fast) var(--ease-out); - text-decoration: none; + transition: color var(--duration-fast) var(--ease-out); } .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); +@media (max-width: 900px) { + .footer-row { + grid-template-columns: 1fr; + justify-items: center; + text-align: center; + gap: var(--spacing-md); } - .footer-author-divider { - display: none; + .footer-links { + justify-content: center; + gap: var(--spacing-sm) var(--spacing-md); + font-size: 0.8125rem; + } + + .site-footer { + padding: var(--spacing-lg) var(--spacing-md); } } diff --git a/public/css/styles.css b/public/css/styles.css index 70e3cf62b..314f75dd4 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -4196,138 +4196,77 @@ code { padding: var(--spacing-xl) var(--spacing-lg); background: var(--color-cream); } -.footer-content { +.footer-row { max-width: var(--width-max); margin: 0 auto; - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: auto 1fr auto; align-items: center; - flex-wrap: wrap; - gap: var(--spacing-lg); -} -@media (max-width: 768px) { - .site-footer { - padding: var(--spacing-lg) var(--spacing-md); - } - .footer-content { - flex-direction: column; - text-align: center; - gap: var(--spacing-md); - } - .footer-links { - gap: var(--spacing-sm) var(--spacing-md); - justify-content: center; - font-size: 0.8125rem; - } -} -.footer-brand { - display: flex; - flex-direction: column; - gap: var(--spacing-xs); + gap: var(--spacing-xl); } .footer-logo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; color: var(--color-ink); -} -.footer-tagline { - font-size: 0.875rem; - color: var(--color-ash); + text-decoration: none; } .footer-links { display: flex; + justify-content: center; gap: var(--spacing-lg); flex-wrap: wrap; } .footer-links a { font-size: 0.875rem; color: var(--color-ash); + text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .footer-links a:hover { color: var(--color-accent); } -.footer-author { - display: flex; - align-items: center; - justify-content: center; - gap: var(--spacing-md); - flex-wrap: wrap; - width: 100%; - padding-top: var(--spacing-lg); - margin-top: var(--spacing-md); - border-top: 1px solid var(--color-mist); -} -.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-author-label a:hover { - color: var(--color-accent); -} -.footer-author-links { +.footer-credit { display: flex; align-items: center; gap: var(--spacing-sm); + font-size: 0.875rem; + color: var(--color-ash); + white-space: nowrap; +} +.footer-credit a { + color: var(--color-text); + text-decoration: none; + transition: color var(--duration-fast) var(--ease-out); +} +.footer-credit a:hover { + color: var(--color-accent); } .footer-social-link { - display: flex; + display: inline-flex; align-items: center; justify-content: center; - width: 36px; - height: 36px; + padding: 4px; color: var(--color-ash); - background: transparent; - border-radius: 50%; - transition: all var(--duration-fast) var(--ease-out); - text-decoration: none; + transition: color var(--duration-fast) var(--ease-out); } .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); +@media (max-width: 900px) { + .footer-row { + grid-template-columns: 1fr; + justify-items: center; + text-align: center; + gap: var(--spacing-md); } - .footer-author-divider { - display: none; + .footer-links { + justify-content: center; + gap: var(--spacing-sm) var(--spacing-md); + font-size: 0.8125rem; + } + .site-footer { + padding: var(--spacing-lg) var(--spacing-md); } } .btn { diff --git a/public/index.html b/public/index.html index 9d64f72cd..066c5ba0e 100644 --- a/public/index.html +++ b/public/index.html @@ -674,46 +674,28 @@