diff --git a/landing/header.css b/landing/header.css index c05296d4a..c1c6a293a 100644 --- a/landing/header.css +++ b/landing/header.css @@ -1,131 +1,117 @@ -nav.wrapper { - transition-property: max-width; - transition: 300ms; - max-width: 1850px; - margin-left: auto; - margin-right: auto; - display: grid; - padding: 16px 0; +nav.headerContainer { + display: flex; + justify-content: center; +} + +div.headerNavContentContainer { + display: flex; align-items: center; - grid-template-columns: 40px repeat(12, 1fr) 40px; - column-gap: 1.5%; - grid-template-areas: '. logo logo . . . page_nav page_nav . . sIcons sIcons sIcons .'; + justify-content: space-between; + padding: 18px 32px; + width: 1850px; } .logo { - grid-area: logo; + display: flex; + align-items: center; + min-width: 85px; } .logo h1 { font-size: 28px; font-weight: 500; color: var(--logo-color); } .tab { font-size: 24px; font-weight: 500; color: #808080; font-family: var(--sans-serif); transition: 150ms; transition-property: color; } .tab:hover { color: #ffffff; } -.page_nav { - grid-area: page_nav; +.pageNav { display: flex; justify-content: space-evenly; min-width: 225px; } -.social_icons_container { - grid-area: sIcons; +.socialIconsContainer { display: flex; justify-self: flex-end; align-items: center; } -div.twitter_icon, -div.github_icon, -div.webapp_icon { +div.twitterIcon, +div.githubIcon, +div.webappIcon { display: flex; justify-content: center; align-items: center; font-size: 24px; margin-inline: 4px; border-radius: 50px; width: 44px; height: 44px; transition: 300ms; } -div.twitter_icon svg, -div.github_icon svg, -div.webapp_icon svg { +div.menuIcon { + display: none; +} + +div.twitterIcon svg, +div.githubIcon svg, +div.webappIcon svg { transition: 300ms; } -div.github_icon:hover svg { +div.githubIcon:hover svg { color: #151013; transition: 300ms; } -div.github_icon:hover { +div.githubIcon:hover { background-color: #ffffff; transition: 300ms; } -div.webapp_icon:hover { +div.webappIcon:hover { background-color: var(--btn-bg); transition: 300ms; } -div.twitter_icon:hover { + +div.twitterIcon:hover { background-color: #1d9bf0; transition: 300ms; } -@media screen and (max-width: 1099px) { - nav.wrapper { - grid-template-columns: 16px repeat(12, 1fr) 16px; - grid-template-areas: '. logo logo logo page_nav page_nav page_nav page_nav page_nav page_nav sIcons sIcons sIcons .'; - } - - .logo { - min-width: 85px; - } - - .page_nav { - justify-content: center; - gap: 12px; - } - - .social_icon { - display: block; - } - - div.webapp_icon { +@media screen and (max-width: 480px) { + .pageNav { display: none; } -} -@media screen and (max-width: 480px) { - nav.wrapper { - grid-template-columns: 16px repeat(6, 1fr) 16px; - grid-template-rows: 1fr 1fr; - column-gap: 1.5%; - row-gap: 25px; - grid-template-areas: - '. logo logo . sIcons sIcons sIcons .' - '. page_nav page_nav page_nav page_nav page_nav page_nav .'; + div.twitterIcon, + div.githubIcon, + div.webappIcon { + display: none; } - .page_nav { - grid-area: page_nav; + div.menuIcon { display: flex; justify-content: center; - gap: 40px; - min-width: 225px; + align-items: center; + font-size: 24px; + margin-inline: 4px; + width: 44px; + height: 44px; + } + + div.menuIcon:hover { + cursor: pointer; } } diff --git a/landing/header.react.js b/landing/header.react.js index 2916246e7..3f6adc35e 100644 --- a/landing/header.react.js +++ b/landing/header.react.js @@ -1,58 +1,63 @@ // @flow import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'; -import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; +import { faExternalLinkAlt, faBars } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as React from 'react'; import { NavLink } from 'react-router-dom'; import css from './header.css'; const iconProps = { size: 'sm', color: '#ebedee', }; const navLinkProps = { className: css.tab, activeStyle: { color: 'white', }, }; function Header(): React.Node { return ( -