@t2ca/gatsby-theme-showcase 1.0.8 → 1.0.10

package/index.js

@@ -5,3 +5,5 @@ export { default as Card } from "./src/components/card"
 export { default as Button } from "./src/components/button"
 export { default as LogoBanner } from "./src/components/logo-banner"
 export { default as Wave } from "./src/components/wave"
+export { default as Hero } from "./src/components/hero"
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
@@ -28,6 +28,7 @@
     "@hot-loader/react-dom": "^16.9.0",
     "@mdx-js/mdx": "^1.4.0",
     "@mdx-js/react": "^1.4.0",
+    "@theme-ui/components": "^0.2.49",
     "@theme-ui/preset-bootstrap": "^0.2.25",
     "@theme-ui/preset-tailwind": "^0.2.30",
     "@theme-ui/sidenav": "^0.2.36",
@@ -46,7 +47,6 @@
     "gatsby-transformer-sharp": "^2.2.5",
     "gatsby-transformer-yaml": "^2.2.1",
     "react-google-maps": "^9.4.5",
-    "react-headroom": "^2.2.8",
     "react-icons": "^3.7.0",
     "react-spring": "^8.0.27",
     "react-switch": "^5.0.0",

package/src/components/color-mode-toggle.js

@@ -1,75 +1,111 @@
-/** @jsx jsx */
 import React from "react"
-import { jsx } from "theme-ui"
+import styled from "@emotion/styled"
+import { useColorMode } from "theme-ui"
 
-const ColorModeToggle = ({ isDark, toggle }) => (
-  <React.Fragment>
-    <button
-      onClick={toggle}
-      type="button"
-      aria-label={isDark ? `Light Mode` : `Dark Mode`}
-      title={isDark ? `Light Mode` : `Dark Mode`}
-      sx={{
-        opacity: 0.65,
-        position: `relative`,
-        borderRadius: `5px`,
-        // width: `40px`,
-        // height: `25px`,
-        display: `flex`,
-        alignItems: `center`,
-        justifyContent: `center`,
-        transition: `opacity 0.3s ease`,
-        border: `none`,
-        outline: `none`,
-        background: `none`,
-        cursor: `pointer`,
-        "&:hover, &:focus": { opacity: 1 },
-      }}
+const IconWrapper = styled.button`
+  padding: 0;
+  appearance: none;
+  outline: none;
+  align-items: center;
+  background: transparent;
+  border-radius: 5px;
+  border: 0;
+  cursor: pointer;
+  display: inline-flex;
+  height: 40px;
+  justify-content: center;
+  opacity: 0.75;
+  overflow: hidden;
+  position: relative;
+  transform: scale(0.75);
+  transition: opacity 0.3s ease;
+  vertical-align: middle;
+  width: 40px;
+  &:hover {
+    opacity: 1;
+  }
+`
+
+const MoonOrSun = styled.div`
+  border: ${p => (p.isDark ? `4px` : `2px`)} solid
+    ${p => p.theme.colors.toggleIcon};
+  background: ${p => p.theme.colors.toggleIcon};
+  border-radius: 50%;
+  height: 24px;
+  overflow: ${p => (p.isDark ? `visible` : `hidden`)};
+  position: relative;
+  transform: scale(${p => (p.isDark ? 0.55 : 1)});
+  transition: all 0.45s ease;
+  width: 24px;
+  &::before {
+    border-radius: 50%;
+    border: 2px solid ${p => p.theme.colors.toggleIcon};
+    content: "";
+    height: 24px;
+    opacity: ${p => (p.isDark ? 0 : 1)};
+    position: absolute;
+    right: -9px;
+    top: -9px;
+    transform: translate(${p => (p.isDark ? `14px, -14px` : `0, 0`)});
+    transition: transform 0.45s ease;
+    width: 24px;
+  }
+  &::after {
+    border-radius: 50%;
+    box-shadow: 0 -23px 0 ${p => p.theme.colors.toggleIcon},
+      0 23px 0 ${p => p.theme.colors.toggleIcon},
+      23px 0 0 ${p => p.theme.colors.toggleIcon},
+      -23px 0 0 ${p => p.theme.colors.toggleIcon},
+      15px 15px 0 ${p => p.theme.colors.toggleIcon},
+      -15px 15px 0 ${p => p.theme.colors.toggleIcon},
+      15px -15px 0 ${p => p.theme.colors.toggleIcon},
+      -15px -15px 0 ${p => p.theme.colors.toggleIcon};
+    content: "";
+    height: 8px;
+    left: 50%;
+    margin: -4px 0 0 -4px;
+    position: absolute;
+    top: 50%;
+    width: 8px;
+    transform: scale(${p => (p.isDark ? 1 : 0)});
+    transition: all 0.35s ease;
+  }
+`
+
+const MoonMask = styled.div`
+  background: ${p => p.theme.colors.white};
+  border-radius: 50%;
+  border: 0;
+  height: 24px;
+  opacity: ${p => (p.isDark ? 0 : 1)};
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translate(${p => (p.isDark ? `14px, -14px` : `0, 0`)});
+  transition: background 0.25s ease, transform 0.45s ease;
+  width: 24px;
+`
+
+const ColorModeToggle = () => {
+  const [colorMode, setColorMode] = useColorMode()
+  const isDark = colorMode === `dark`
+
+  const toggleColorMode = e => {
+    e.preventDefault()
+    setColorMode(isDark ? `light` : `dark`)
+  }
+
+  return (
+    <IconWrapper
+      isDark={isDark}
+      onClick={toggleColorMode}
+      aria-label={isDark ? `Activate light mode` : `Activate dark mode`}
+      title={isDark ? `Activate light mode` : `Activate dark mode`}
     >
-      <div
-        sx={{
-          position: `relative`,
-          width: `24px`,
-          height: `24px`,
-          borderRadius: `50%`,
-          border: t => (isDark ? `4px solid ${t.colors.toggleIcon}` : `none`),
-          backgroundColor: isDark ? `toggleIcon` : `transparent`,
-          transform: isDark ? `scale(0.40)` : `scale(0.80)`,
-          transition: `all 0.45s ease`,
-          overflow: isDark ? `visible` : `hidden`,
-          boxShadow: t =>
-            isDark ? `none` : `inset 8px -8px 0px 0px ${t.colors.toggleIcon}`,
-          "&:before": {
-            content: `""`,
-            position: `absolute`,
-            right: `-9px`,
-            top: `-9px`,
-            height: `24px`,
-            width: `24px`,
-            border: t => (isDark ? `2px solid ${t.colors.toggleIcon}` : `none`),
-            borderRadius: `50%`,
-            transform: isDark ? `translate(14px, -14px)` : `translate(0, 0)`,
-            opacity: isDark ? 0 : 1,
-            transition: `transform 0.45s ease`,
-          },
-          "&:after": {
-            content: `""`,
-            width: `8px`,
-            height: `8px`,
-            borderRadius: `50%`,
-            margin: `-4px 0 0 -4px`,
-            position: `absolute`,
-            top: `50%`,
-            left: `50%`,
-            boxShadow: t =>
-              `0 -23px 0 ${t.colors.toggleIcon}, 0 23px 0 ${t.colors.toggleIcon}, 23px 0 0 ${t.colors.toggleIcon}, -23px 0 0 ${t.colors.toggleIcon}, 15px 15px 0 ${t.colors.toggleIcon}, -15px 15px 0 ${t.colors.toggleIcon}, 15px -15px 0 ${t.colors.toggleIcon}, -15px -15px 0 ${t.colors.toggleIcon}`,
-            transform: isDark ? `scale(1)` : `scale(0)`,
-            transition: `all 0.35s ease`,
-          },
-        }}
-      />
-    </button>
-  </React.Fragment>
-)
+      <MoonOrSun isDark={isDark} />
+      <MoonMask isDark={isDark} />
+    </IconWrapper>
+  )
+}
 
 export default ColorModeToggle

package/src/components/header.js

@@ -7,24 +7,11 @@ import MenuButton from "./menu-button"
 import NavLink from "./nav-link"
 import ColorModeToggle from "./color-mode-toggle"
 
-export default ({
-  setColorMode,
-  setMenuOpen,
-  isDark,
-  styles,
-  menuOpen,
-  nav,
-  name,
-  menuList,
-  type,
-}) => {
-  const toggleColorMode = e => {
-    e.preventDefault()
-    setColorMode(isDark ? `light` : `dark`)
-  }
-
+export default ({ setMenuOpen, styles, menuOpen, nav, name, menuList }) => {
   return (
-    <Header sx={{ ...styles }}>
+    <Header
+      sx={{ ...styles, position: `fixed`, zIndex: `100`, width: `100%`, py: 2 }}
+    >
       <Container sx={{ py: 0 }}>
         <div
           sx={{
@@ -73,7 +60,7 @@ export default ({
                 ))}
             </div>
 
-            <ColorModeToggle isDark={isDark} toggle={toggleColorMode} />
+            <ColorModeToggle />
           </div>
         </div>
       </Container>

package/src/components/hero.js

@@ -2,9 +2,13 @@
 import React from "react"
 import { jsx, Styled, Container } from "theme-ui"
 import { useSpring, animated } from "react-spring"
-import Wave from "./wave"
 
-export default props => {
+export default ({
+  headingTop,
+  headingMiddle,
+  headingBottom,
+  minHeight = `100vh`,
+}) => {
   const titleProps = useSpring({
     from: { opacity: 0, transform: "translate3d(0, -200px, 0)" },
     to: { opacity: 1, transform: "translate3d(0, 0, 0)" },
@@ -18,19 +22,19 @@ export default props => {
           px: [4, 5],
           position: "relative",
           bg: `MainHero`,
-          minHeight: `75vh`, // screenHeight
+          minHeight: minHeight, // screenHeight
         }}
       >
         <Container>
           <animated.div style={titleProps}>
             <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
-              {props.headingTop}
+              {headingTop}
             </Styled.h1>
             <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
-              {props.headingMiddle}
+              {headingMiddle}
             </Styled.h1>
             <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
-              {props.headingBottom}
+              {headingBottom}
             </Styled.h1>
             <div sx={{ width: [`5/6`, `2/3`] }}>
               <Styled.p sx={{ fontSize: [1, 2], py: 4, lineHeight: 2.5 }}>
@@ -43,8 +47,6 @@ export default props => {
           </animated.div>
         </Container>
       </div>
-
-      <Wave background="Menu" />
     </React.Fragment>
   )
 }

package/src/components/layout.js

@@ -2,15 +2,13 @@
 import React, { useState, useRef } from "react"
 import {
   jsx,
-  css,
   Layout as DefaultLayout,
   Main,
-  Container,
   Styled,
   useColorMode,
 } from "theme-ui"
 import { Global } from "@emotion/core"
-import Headroom from "react-headroom"
+
 import {
   withGoogleMap,
   withScriptjs,
@@ -24,20 +22,13 @@ import jsonMapStylesDark from "./map-styles-dark"
 import MobileNavigation from "./navigation-mobile"
 import Header from "./header"
 import Footer from "./footer"
-// import MenuButton from "./menu-button"
-// import Button from "./button"
 import Sidebar from "./sidebar"
-import Hero from "./hero"
 
-const Layout = props => {
+const Layout = ({ header, main, location, children }) => {
   const [menuOpen, setMenuOpen] = useState(false)
   const nav = useRef(null)
 
-  const [colorMode, setColorMode] = useColorMode()
-  const isDark = colorMode === `dark`
-  // const toggleColorMode = e => {
-  //   setColorMode(isDark ? `light` : `dark`)
-  // }
+  const [colorMode] = useColorMode()
 
   const Map = () => {
     return (
@@ -45,7 +36,7 @@ const Layout = props => {
         defaultZoom={10}
         defaultCenter={{ lat: 51.0486, lng: -114.0708 }}
         defaultOptions={{
-          styles: isDark ? jsonMapStylesDark : jsonMapStyles,
+          styles: colorMode === "light" ? jsonMapStyles : jsonMapStylesDark,
           disableDefaultUI: true,
           zoomControl: false,
           scaleControl: false,
@@ -88,9 +79,7 @@ const Layout = props => {
         />
 
         <Header
-          styles={props.header}
-          setColorMode={setColorMode}
-          isDark={isDark}
+          styles={header}
           menuOpen={menuOpen}
           setMenuOpen={setMenuOpen}
           nav={nav}
@@ -116,55 +105,44 @@ const Layout = props => {
               }}
             />
           </div>
-          {/*          <div
-            id="content"
-            sx={{
-              width: "100%",
-              minWidth: 0,
-            }}
-          >
-            {props.children}
-
-
-
-          </div>*/}
-
-          {props.location.pathname === "/" ? <Hero isDark={isDark} /> : null}
 
           <div
             sx={{
-              ...props.main,
+              ...main,
+              pt: `4.75rem`,
             }}
           >
-            {props.children}
+            {children}
           </div>
         </Main>
 
-        {/*        <div sx={{ display: ["none", "initial"] }}>
-          <WrapperMap
-            googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyBOY0sT1quks122bprrLM_0wrWLDWyVnMQ`}
-            loadingElement={<div sx={{ height: `350px` }} />}
-            containerElement={
-              <div
-                sx={{
-                  height: `350px`,
-                  backgroundColor: isDark ? "#333" : "#f8f9fa",
-                }}
-              />
-            }
-            mapElement={
-              <div
-                sx={{
-                  height: `100%`,
-                }}
-                className="mapElement"
-              />
-            }
-          />
-        </div>*/}
+        {location && location.pathname === "/contact/" ? (
+          <div sx={{ display: ["none", "initial"] }}>
+            <WrapperMap
+              googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyBOY0sT1quks122bprrLM_0wrWLDWyVnMQ`}
+              loadingElement={<div sx={{ height: `350px` }} />}
+              containerElement={
+                <div
+                  sx={{
+                    height: `350px`,
+                    backgroundColor: colorMode === "light" ? "#f8f9fa" : "#333",
+                  }}
+                />
+              }
+              mapElement={
+                <div
+                  sx={{
+                    height: `100%`,
+                  }}
+                  className="mapElement"
+                />
+              }
+            />
+          </div>
+        ) : null}
 
         <Footer />
-        <MobileNavigation isDark={isDark} />
+        <MobileNavigation />
       </DefaultLayout>
     </Styled.root>
   )

package/src/components/navigation-mobile.js

@@ -1,23 +1,24 @@
 /** @jsx jsx */
 import React from "react"
-import { jsx } from "theme-ui"
+import { jsx, useColorMode } from "theme-ui"
 import { Link } from "gatsby"
-import { css } from "@emotion/core"
 
 import Icon from "./icon"
 
 const MobileNavItem = ({ linkTo, label, icon, isDark }) => {
+  const [colorMode] = useColorMode()
+
   const linkStyles = {
-    borderRadius: "2px",
-    color: "text",
-    fontSize: "0.75rem",
-    flexShrink: "0",
-    lineHeight: "1",
+    borderRadius: 1,
+    color: `text`,
+    fontSize: `0.75rem`,
+    flexShrink: 0,
+    lineHeight: `none`,
     // width: "64",
-    textDecoration: "none",
-    textAlign: "center",
-    padding: "0.75rem",
-    "&:hover": { textDecoration: "none" },
+    textDecoration: `none`,
+    textAlign: `center`,
+    p: `0.75rem`,
+    "&:hover": { textDecoration: `none` },
   }
 
   return (
@@ -25,7 +26,7 @@ const MobileNavItem = ({ linkTo, label, icon, isDark }) => {
       to={linkTo}
       sx={linkStyles}
       partiallyActive={linkTo === "/" ? false : true}
-      activeStyle={{ color: isDark ? "pink" : `#2b6cb0` }}
+      activeStyle={{ color: colorMode === "light" ? `#2b6cb0` : `pink` }}
     >
       <span>{icon}</span>
       <div>{label}</div>
@@ -37,19 +38,19 @@ const MobileNavigation = ({ isDark, menuList }) => (
   <React.Fragment>
     <div
       sx={{
-        position: "fixed",
-        display: "flex",
-        justifyContent: "space-around",
-        bottom: "0",
-        left: "0",
-        right: "0",
-        zIndex: "50",
-        borderTop: "1px solid transparent",
-        borderColor: "MenuBorder",
-        bg: "Menu",
-        height: "3.75rem",
-        paddingBottom: "env(safe-area-inset-bottom)",
-        "@media (min-width: 640px)": { display: "none" },
+        position: `fixed`,
+        display: [`flex`, `none`],
+        justifyContent: `space-around`,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 50,
+        bg: `Menu`,
+        borderColor: `MenuBorder`,
+        borderTopStyle: `solid`,
+        borderTopWidth: `1px`,
+        height: `3.75rem`,
+        pb: `env(safe-area-inset-bottom)`,
       }}
     >
       {menuList &&

package/src/components/project.js

@@ -29,6 +29,7 @@ const Project = data => {
             px: ["1.5rem", "3rem"],
             zIndex: "1",
             position: "relative",
+            minHeight: `75vh`, // screenHeight
           }}
         >
           <animated.div style={titleProps}>
@@ -55,6 +56,14 @@ const Project = data => {
       </Container>
 
       <Wave background="cBg" />
+
+      <div sx={{ bg: `mBg` }}>
+        <Container>
+          <div sx={{ width: `2/3`, m: `0 auto` }}>
+            <Image fluid={data.laptop.childImageSharp.fluid} sx={{}} />
+          </div>
+        </Container>
+      </div>
     </React.Fragment>
   )
 }

package/src/gatsby-plugin-theme-ui/styles.js

@@ -7,13 +7,12 @@ export default {
   Header: {
     primary: {
       bg: `Menu`,
-      // borderBottom: `1px solid transparent`,
+      borderBottom: `1px solid transparent`,
       // position: "fixed",
       // top: 0,
       // width: "100%",
       // zIndex: 10,
       // borderColor: `rgb(212, 212, 213)`,
-
       // borderColor: `rgb(212, 212, 213)`,
     },
     secondary: {

package/src/templates/project.js

@@ -3,17 +3,13 @@ import { graphql } from "gatsby"
 import Layout from "../components/layout"
 import Project from "../components/project"
 
-const ProjectTemplates = ({ data: { projectYaml }, location }) => {
+const ProjectTemplates = ({ data: { projectYaml } }) => {
   const styles = {
     variant: "styles.Header.secondary",
   }
 
   return (
-    <Layout
-      main={{ ...styles, borderBottom: `inherit` }}
-      header={styles}
-      location={location}
-    >
+    <Layout main={{ ...styles, borderBottom: `inherit` }} header={styles}>
       <Project {...projectYaml} />
     </Layout>
   )
@@ -32,6 +28,13 @@ export const query = graphql`
           }
         }
       }
+      laptop {
+        childImageSharp {
+          fluid {
+            ...GatsbyImageSharpFluid_withWebp_tracedSVG
+          }
+        }
+      }
     }
   }
 `