diff --git a/landing/header.css b/landing/header.css index 1326cbe96..08c0eb181 100644 --- a/landing/header.css +++ b/landing/header.css @@ -1,192 +1,186 @@ /* ===== CSS HEADER GRID LAYOUT ===== */ div.header_grid { max-width: 1920px; margin-left: auto; margin-right: auto; display: grid; column-gap: 6em; padding-left: 60px; padding-right: 60px; padding-top: 20px; padding-bottom: 40px; transition-property: max-width; transition: 300ms; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'logo top_nav social_icons'; } -div.header_legal { - max-width: 1080px; - transition-property: max-width; - transition: 300ms; -} - /* ===== LOGO ===== */ div.logo { grid-area: logo; } div.logo h1 { font-size: 32px; } div.logo a { color: white; } div.logo a:hover { color: #7e57c2; } /* ===== NAVIGATION ===== */ div.top_nav { grid-area: top_nav; align-self: center; display: flex; flex-direction: row; justify-content: center; } div.top_nav h1 { font-size: 20px; } div.top_nav div.active_tab, div.top_nav div.inactive_tab { margin-inline: 16px; } div.active_tab a { color: white; transition: 300ms; } div.inactive_tab a { color: #8a8f98; transition: 300ms; } div.top_nav a:hover { color: white; } /* ===== REQUEST ACCESS BUTTON ===== */ div.request_access { border-radius: 4px; padding-inline: 12px; margin-right: 12px; background-color: #7e57c2; color: #ebedee; transition: 300ms; } div.request_access:hover { color: #7e57c2; background-color: #ebedee; transition: 300ms; } div.request_access p { font-size: 14px; font-weight: bold; line-height: 2.5; } /* ===== TWITTER/GITHUB BUTTONS ===== */ div.social_icons { grid-area: social_icons; align-items: center; display: flex; flex-direction: row; justify-self: flex-end; } div.twitter_icon, div.github_icon { margin-inline: 8px; padding: 16px; border-radius: 36px; transition: 300ms; } div.twitter_icon:hover, div.github_icon:hover { background-color: #ebedee; transition: 300ms; } div.twitter_icon svg, div.github_icon svg { transition: 300ms; } div.twitter_icon:hover svg { color: #1d9bf0; transition: 300ms; } div.github_icon:hover svg { color: #151013; transition: 300ms; } div.twitter_icon h1, div.github_icon h1 { font-size: 32px; } @media (max-width: 1499px) { div.request_access p { font-size: 11px; } div.request_access { padding-inline: 10px; margin-right: 10px; } } /* ===== SMALLEST BREAKPOINT ===== */ @media (max-width: 1099px) { div.twitter_icon, div.github_icon { margin-inline: 4px; padding: 10px; border-radius: 36px; transition: 300ms; } div.header_grid { padding-left: 3%; padding-right: 3%; padding-top: 0px; padding-bottom: 20px; grid-template-columns: minmax(auto, 540px); justify-content: center; grid-template-columns: 1fr 1fr; grid-template-areas: 'logo social_icons' 'top_nav top_nav'; } div.social_icons { justify-self: flex-end; margin-left: 8px; } div.top_nav { grid-area: top_nav; display: flex; flex-direction: row; justify-content: center; align-self: center; } div.active_tab, div.inactive_tab { margin-right: 10px; } div.request_access { display: none; } } diff --git a/landing/header.react.js b/landing/header.react.js index af422edc8..9dad387c1 100644 --- a/landing/header.react.js +++ b/landing/header.react.js @@ -1,77 +1,73 @@ // @flow import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as React from 'react'; import { Link } from 'react-router-dom'; import headerStyles from './header.css'; import type { LandingPageName } from './landing.react'; type HeaderProps = { - +isLegalPage: boolean, +activePageName: LandingPageName, +onRequestAccess: (e: Event) => Promise, }; function Header(props: HeaderProps): React.Node { - const { isLegalPage, activePageName, onRequestAccess } = props; - - const headerStyle = isLegalPage - ? `${headerStyles.header_grid} ${headerStyles.header_legal}` - : headerStyles.header_grid; + const { activePageName, onRequestAccess } = props; + const headerStyle = `${headerStyles.header_grid}`; return (

Comm

App

Keyservers

Request Access

); } export default Header; diff --git a/landing/landing.react.js b/landing/landing.react.js index 93b700d91..e63d52459 100644 --- a/landing/landing.react.js +++ b/landing/landing.react.js @@ -1,68 +1,67 @@ // @flow import * as React from 'react'; import { useRouteMatch } from 'react-router-dom'; import AppLanding from './app-landing.react'; import Footer from './footer.react'; import Header from './header.react'; import Keyservers from './keyservers.react'; import Privacy from './privacy.react'; import Support from './support.react'; import Terms from './terms.react'; import useScrollToTopOnNavigate from './use-scroll-to-top-on-navigate.react'; export type LandingPageName = | 'app' | 'keyservers' | 'privacy' | 'terms' | 'support'; type ActivePage = { name: LandingPageName, node: React.Node }; function Landing(): React.Node { useScrollToTopOnNavigate(); const onPrivacy = useRouteMatch({ path: '/privacy' }); const onTerms = useRouteMatch({ path: '/terms' }); const onSupport = useRouteMatch({ path: '/support' }); const onKeyservers = useRouteMatch({ path: '/keyservers' }); const isLegalPage: boolean = React.useMemo( () => !!(onPrivacy || onTerms || onSupport), [onPrivacy, onSupport, onTerms], ); const scrollToSubscriptionForm = React.useCallback(async (e: Event) => { e.preventDefault(); window?.scrollTo(0, document.body?.scrollHeight); document.getElementById('subscription-form')?.focus(); }, []); const activePage: ActivePage = React.useMemo(() => { if (onPrivacy) { return { name: 'privacy', node: }; } else if (onTerms) { return { name: 'terms', node: }; } else if (onSupport) { return { name: 'support', node: }; } else if (onKeyservers) { return { name: 'keyservers', node: }; } else { return { name: 'app', node: }; } }, [onKeyservers, onPrivacy, onSupport, onTerms]); return ( <>
{activePage.node}