From 096e3bc3d8b653e984c682ae774f1e51c323004c Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Tue, 25 May 2021 10:55:21 -0400 Subject: [PATCH] feat(homepage): add banner for Spokestack Maker --- src/components/Banner.tsx | 56 ++++++++++--------------------- src/components/Layout.tsx | 21 +++++++++--- src/components/navigation/Nav.tsx | 5 +-- src/pages/index.tsx | 13 ++++++- static/banner.svg | 20 +++-------- 5 files changed, 54 insertions(+), 61 deletions(-) diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index ccf60212..2a7e2ffe 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -2,26 +2,18 @@ import * as theme from '../styles/theme' import React from 'react' import { css } from '@emotion/react' -import { Link } from 'gatsby' interface Props { children: React.ReactNode - to: string + href: string } -export default function Banner({ children, to }: Props) { +export default function Banner({ children, href }: Props) { return ( - - + + {children} - - + ) } @@ -30,28 +22,28 @@ const styles = { position: fixed; top: 0; width: 100%; - height: 40px; + height: 80px; display: flex; flex-direction: row; justify-content: center; align-items: center; - text-align: center; text-decoration: none; - background-color: ${theme.header}; - box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); - font-size: 13px; - padding-bottom: 1px; + background-color: ${theme.primaryDark}; + font-size: 14px; + font-weight: 400; + padding: 20px; + overflow: hidden; z-index: 99999; &, &:visited, &:hover, &:active { - color: ${theme.textDarkBg}; + color: white; } &:hover { - background-color: ${theme.headerColor.darken(0.1).hex()}; + background-color: ${theme.primary}; } &:active { box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.7); @@ -63,26 +55,14 @@ const styles = { ${theme.MIN_DEFAULT_MEDIA_QUERY} { position: absolute; - font-size: 16px; + height: 40px; } `, bannerImage: css` - width: 437px; - height: 40px; - position: absolute; - margin: 0; + width: 62px; + height: 62px; + flex-shrink: 0; line-height: 0; - display: none; - - ${theme.MIN_LARGE_DISPLAY_MEDIA_QUERY} { - display: block; - } - `, - bannerImageLeft: css` - left: 0; - `, - bannerImageRight: css` - right: 0; - transform: rotateY(180deg); + margin-right: 20px; ` } diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 27f214de..a8d9666d 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -1,5 +1,6 @@ +import * as theme from '../styles/theme' + import { Global, SerializedStyles, css } from '@emotion/react' -import { MIN_DEFAULT_MEDIA_QUERY, ieBreakpoint } from '../styles/theme' import React, { Fragment } from 'react' import Footer from './Footer' @@ -23,10 +24,19 @@ export default function Layout({ navStyle }: Props) { const style = [styles.container] + const navStyles = [] + const navContentStyles = [] if (banner) { style.push(css` top: 40px; `) + const navPushStyle = css` + ${theme.DEFAULT_MEDIA_QUERY} { + top: 80px; + } + ` + navStyles.push(navPushStyle) + navContentStyles.push(navPushStyle) } return ( @@ -35,7 +45,10 @@ export default function Layout({
-
@@ -59,13 +72,13 @@ const styles = { min-height: 300px; position: relative; - ${ieBreakpoint} { + ${theme.ieBreakpoint} { display: flex; flex-direction: column; align-items: center; } - ${MIN_DEFAULT_MEDIA_QUERY} { + ${theme.MIN_DEFAULT_MEDIA_QUERY} { min-height: calc(100vh - 60px); } ` diff --git a/src/components/navigation/Nav.tsx b/src/components/navigation/Nav.tsx index b0af08db..2d2d5f65 100644 --- a/src/components/navigation/Nav.tsx +++ b/src/components/navigation/Nav.tsx @@ -12,10 +12,11 @@ import NavDropdownLink from './NavDropdownLink' import NavLink from './NavLink' interface Props { + contentCss?: SerializedStyles | SerializedStyles[] extraCss?: SerializedStyles | SerializedStyles[] } -export default function Nav({ extraCss }: Props) { +export default function Nav({ contentCss, extraCss }: Props) { const [mobileOpen, setMobileOpen] = useState(false) const contentStyles = [styles.navContent] if (mobileOpen) { @@ -63,7 +64,7 @@ export default function Nav({ extraCss }: Props) { -
+
  • diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 09d16e51..adbc5d8a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,6 @@ import { PageRendererProps, graphql } from 'gatsby' +import Banner from '../components/Banner' import Create from '../components/Create' import Flexible from '../components/homepage/Flexible' import Header from '../components/homepage/Header' @@ -21,7 +22,17 @@ export default function Index({ data }: Props) { const siteTitle = data!.site!.siteMetadata!.title! return ( - + +

    + Spokestack Maker - Self-Service Tools for Personal Voice Model + Creation +

    + + } + extraCss={styles.container} + navStyle={styles.nav}>
    diff --git a/static/banner.svg b/static/banner.svg index 4d9062f5..c5be7f71 100644 --- a/static/banner.svg +++ b/static/banner.svg @@ -1,16 +1,4 @@ - - - banner - - \ No newline at end of file + + + +