diff --git a/ui/src/css/footer.css b/ui/src/css/footer.css index 6521947..c5e3105 100644 --- a/ui/src/css/footer.css +++ b/ui/src/css/footer.css @@ -1,15 +1,122 @@ footer.footer { background-color: var(--footer-background); color: var(--footer-font-color); - font-size: calc(15 / var(--rem-base) * 1rem); + font-size: calc(14 / var(--rem-base) * 1rem); line-height: var(--footer-line-height); - padding: 1.5rem; + padding: 2rem 1rem; + display: flex; + flex-direction: column; } .footer p { - margin: 0.5rem 0; + margin: 0; } .footer a { + color: inherit; + text-decoration: none; +} + +.footer a:hover { color: var(--footer-link-font-color); } + +.footer img { + vertical-align: middle; +} + +.footer p + p { + margin-top: 1em; +} + +.footer-main { + display: flex; + flex-direction: column; + align-items: center; +} + +.footer-brand { + display: flex; + align-items: center; + margin: 0; +} + +.footer-brand-links { + list-style: none; + display: flex; + margin: 1.25rem 0 0; + padding: 0; + font-size: 0.9rem; +} + +.footer-brand-links li + li::before { + content: '|'; + padding: 0 0.5em; +} + +.footer-brand-follow { + font-size: calc(24 / var(--rem-base) * 1rem); + font-weight: var(--body-font-weight-bold); + line-height: 1; +} + +.footer p.footer-brand-follow { + margin-top: 1.25rem; +} + +.footer-brand-follow .logo { + filter: invert(100%); + width: calc(24 / var(--rem-base) * 1rem); +} + +.footer-brand-follow .handle { + padding: 0 0 0.1em 0.5ch; +} + +.footer-legal { + margin-top: 1.5rem; +} + +.footer-legal, +.footer-thanks { + text-align: center; +} + +.footer-thanks .badges { + line-height: 1; + display: inline-flex; + align-items: center; +} + +.footer-thanks .badges a + a { + margin-left: 1em; +} + +@media screen and (min-width: 1024px) { + footer.footer { + flex-direction: row; + position: relative; + z-index: var(--z-index-footer); + } + + .footer-legal { + margin-top: 0; + padding: 0 1.5rem; + text-align: left; + width: 40%; + } + + .footer-main, + .footer-thanks { + width: 30%; + } + + .footer-thanks { + text-align: right; + } + + .footer-thanks .badges { + display: flex; + justify-content: flex-end; + } +} diff --git a/ui/src/css/vars.css b/ui/src/css/vars.css index 91c9c09..545094a 100644 --- a/ui/src/css/vars.css +++ b/ui/src/css/vars.css @@ -7,6 +7,7 @@ --color-smoke-70: #f0f0f0; --color-smoke-90: #e1e1e1; --color-gray-10: #c1c1c1; + --color-gray-15: #bababa; --color-gray-30: #9c9c9c; --color-gray-40: #8e8e8e; --color-gray-50: #808080; @@ -118,9 +119,9 @@ --toc-line-height: 1.2; /* footer */ --footer-line-height: var(--doc-line-height); - --footer-background: var(--color-smoke-90); - --footer-font-color: var(--color-gray-70); - --footer-link-font-color: var(--color-jet-80); + --footer-background: var(--color-jet-80); + --footer-font-color: var(--color-gray-15); + --footer-link-font-color: var(--color-white); /* dimensions and positioning */ --navbar-height: calc(63 / var(--rem-base) * 1rem); --toolbar-height: calc(45 / var(--rem-base) * 1rem); diff --git a/ui/src/partials/footer-content.hbs b/ui/src/partials/footer-content.hbs index cdeeb47..3deb196 100644 --- a/ui/src/partials/footer-content.hbs +++ b/ui/src/partials/footer-content.hbs @@ -1,4 +1,29 @@