diff --git a/docusaurus.config.ts b/docusaurus.config.ts index b73e821..c80f2a4 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -99,6 +99,18 @@ const config: Config = { }, copyright: `Copyright © ${new Date().getFullYear()} IOG, Inc.`, links: [ + { + label: 'Report an issue', + href: 'https://github.com/input-output-hk/quality-engineering/issues/new?assignees=&labels=bug&projects=&template=issue-report.md&title=', + }, + { + label: 'Share feedback', + href: 'https://github.com/input-output-hk/quality-engineering/issues/new?assignees=&labels=feedback&projects=&template=feedback.md&title= ', + }, + { + label: 'Got a story?', + href: 'https://github.com/input-output-hk/quality-engineering/issues/new?assignees=&labels=blog&projects=&template=blog.md&title= ', + }, { label: 'Cookie Policy', href: 'pathname:///iog-cookie-policy.pdf', diff --git a/src/css/custom.css b/src/css/custom.css index e7b965f..db93af8 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -135,29 +135,87 @@ div:has(> .dsla-search-wrapper) { --ifm-navbar-sidebar-width: 100vw; } +.footer { + padding-top: 60px; +} + .footer .container { display: flex; flex-direction: column; gap: 1.5rem; } -.footer__bottom { - display: contents; - text-align: left; +.footer__link-item, +.footer__copyright { + font-size: 0.875rem; } .footer__links { + display: grid; + grid-template-columns: repeat(2, 160px); + grid-template-rows: auto; + row-gap: 12px; + column-gap: 24px; +} + +@media (min-width: 769px) { + .footer__link-item:nth-of-type(1) { + grid-column: 1; + grid-row: 1; + } + .footer__link-item:nth-of-type(2) { + grid-column: 1; + grid-row: 2; + } + .footer__link-item:nth-of-type(3) { + grid-column: 1; + grid-row: 3; + } + .footer__link-item:nth-of-type(4) { + grid-column: 2; + grid-row: 1; + } + .footer__link-item:nth-of-type(5) { + grid-column: 2; + grid-row: 2; + } + .footer__link-item:nth-of-type(6) { + grid-column: 2; + grid-row: 3; + } +} + +@media (max-width: 768px) { + .footer__links { + grid-template-columns: repeat(1, 160px); + } + + .footer__link-item:nth-of-type(4) { + margin-top: 24px; + } + + .footer__logo img { + content: url('@site/static/img/logo-only-symbol.svg'); + } +} + +.footer__link-item { + color: var(--color-white-1) !important; text-align: left; - margin: 0; + width: 100%; } -.footer__bottom > div:first-child { - order: -1; - /* docusaurus theme uses !important so we need to override it */ - margin: 0 !important; +.footer__link-item svg { + display: none !important; } -.footer__link-item, -.footer__copyright { - font-size: 0.875rem; +.footer__link-separator { + display: none !important; +} + +.footer__bottom { + display: flex; + border-top: 1px solid var(--ifm-footer-color); + justify-content: space-between; + align-items: center; } diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts new file mode 100644 index 0000000..cfcc3b6 --- /dev/null +++ b/src/hooks/useMediaQuery.ts @@ -0,0 +1,19 @@ +import { useEffect, useState } from 'react'; + +export default function useMediaQuery(query: string) { + const [match, setMatch] = useState(false); + + useEffect(() => { + const matchMedia = window.matchMedia(query); + const listener = (e: MediaQueryListEvent) => { + if (process.env.NODE_ENV !== 'production') { + console.info(`Media query change: ${query}`, e.matches); + } + setMatch(e.matches); + }; + matchMedia.addEventListener('change', listener); + setMatch(matchMedia.matches); + return () => matchMedia.removeEventListener('change', listener); + }, [query]); + return match; +} diff --git a/src/theme/Footer/Logo/index.tsx b/src/theme/Footer/Logo/index.tsx new file mode 100644 index 0000000..693bc30 --- /dev/null +++ b/src/theme/Footer/Logo/index.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import { useBaseUrlUtils } from '@docusaurus/useBaseUrl'; +import ThemedImage from '@theme/ThemedImage'; +import type { Props } from '@theme/Footer/Logo'; + +import styles from './styles.module.css'; +import useMediaQuery from '@site/src/hooks/useMediaQuery'; + +function LogoImage({ logo }: Props) { + const { withBaseUrl } = useBaseUrlUtils(); + const sources = { + light: withBaseUrl(logo.src), + dark: withBaseUrl(logo.srcDark ?? logo.src), + }; + return ( + + ); +} + +export default function FooterLogo({ logo }: Props): JSX.Element { + const isTabletUp = useMediaQuery('(min-width: 767px)'); + console.log(logo); + return logo.href ? ( + + + + ) : ( + + ); +} diff --git a/src/theme/Footer/Logo/styles.module.css b/src/theme/Footer/Logo/styles.module.css new file mode 100644 index 0000000..faf0e60 --- /dev/null +++ b/src/theme/Footer/Logo/styles.module.css @@ -0,0 +1,9 @@ +.footerLogoLink { + opacity: 0.5; + transition: opacity var(--ifm-transition-fast) + var(--ifm-transition-timing-default); +} + +.footerLogoLink:hover { + opacity: 1; +} diff --git a/static/img/logo-only-symbol.svg b/static/img/logo-only-symbol.svg new file mode 100644 index 0000000..80b6e9d --- /dev/null +++ b/static/img/logo-only-symbol.svg @@ -0,0 +1,4 @@ + + + +