@t2ca/gatsby-theme-showcase 1.0.7 → 1.0.9

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.7",
+  "version": "1.0.9",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {

package/src/components/header.js

@@ -16,6 +16,7 @@ export default ({
   nav,
   name,
   menuList,
+  type,
 }) => {
   const toggleColorMode = e => {
     e.preventDefault()

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

@@ -129,7 +129,7 @@ const Layout = props => {
 
           </div>*/}
 
-          {props.location.pathname === "/" ? <Hero isDark={isDark} /> : null}
+          {/* {props.location.pathname === "/" ? <Hero isDark={isDark} /> : null}*/}
 
           <div
             sx={{

package/src/components/logo-banner.js

@@ -106,7 +106,7 @@ const LogoBanner = () => {
           gridGap: 4,
           alignItems: "center",
           overflowX: "scroll",
-          paddingRight: 5,
+          paddingLeft: 2,
           paddingBottom: 1,
           "&::-webkit-scrollbar": { display: "none" },
         }}

package/src/components/nav-link.js

@@ -4,36 +4,24 @@ import { jsx } from "theme-ui"
 import { Link } from "gatsby"
 import isAbsoluteURL from "is-absolute-url"
 
-const styles = {
-  display: "inline-block",
-  px: 0,
-  py: 0,
-  color: "primary",
-  margin: 3,
-  textDecoration: "none",
-  borderBottom: `2px solid transparent`,
-  lineHeight: 2,
-  transition: `all .5s ease-in;`,
-  "&.active": {
-    borderBottom: `1px solid transparent`,
-    borderColor: "secondary",
-    color: "secondary",
-    cursor: "default",
-  },
-  "&:hover:not(.active)": {
-    borderColor: "primary",
-  },
-}
-
-export default ({ href, ...props }) => {
+export default ({ href, type = "basic", ...props }) => {
   const isExternal = isAbsoluteURL(href || "")
   if (isExternal) {
     return (
-      <a href={href} sx={styles}>
+      <a href={href} sx={props.styles}>
         {props}
       </a>
     )
   }
   const to = props.to || href
-  return <Link {...props} to={to} sx={styles} activeClassName="active" />
+  return (
+    <Link
+      {...props}
+      to={to}
+      sx={{
+        variant: `links.${type}`,
+      }}
+      activeClassName="active"
+    />
+  )
 }

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,12 @@ const Project = data => {
       </Container>
 
       <Wave background="cBg" />
+
+      <div sx={{ bg: `mBg` }}>
+        <Container>
+          <Image fluid={data.laptop.childImageSharp.fluid} sx={{}} />
+        </Container>
+      </div>
     </React.Fragment>
   )
 }

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

@@ -52,6 +52,89 @@ export default merge(
         width: `full`,
       },
     },
+    links: {
+      primary: {
+        display: "inline-block",
+        px: 0,
+        py: 0,
+        color: "primary",
+        margin: 3,
+        textDecoration: "none",
+        lineHeight: 1.75,
+        position: `relative`,
+        "&.active": {
+          borderBottom: `1px solid transparent`,
+          borderColor: "secondary",
+          color: "secondary",
+          cursor: "default",
+        },
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          height: "1px",
+          width: 0,
+          bottom: 0,
+          left: 0,
+          bg: "primary",
+          transition: `all .25s ease-in-out 0s`,
+        },
+        "&:hover:not(.active)::after": {
+          width: `100%`,
+        },
+      },
+      secondary: {
+        display: "inline-block",
+        px: 0,
+        py: 0,
+        color: "primary",
+        margin: 3,
+        textDecoration: "none",
+        lineHeight: 1.75,
+        position: `relative`,
+        "&.active": {
+          borderBottom: `1px solid transparent`,
+          borderColor: "secondary",
+          color: "secondary",
+          cursor: "default",
+        },
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          width: "100%",
+          height: "1px",
+          bottom: "0",
+          left: "0",
+          visibility: "hidden",
+          transform: "scaleX(0)",
+          transition: "all 0.25s ease-in-out 0s",
+          bg: "primary",
+        },
+        "&:hover:not(.active)::after": {
+          visibility: "visible",
+          transform: "scaleX(1)",
+        },
+      },
+      basic: {
+        display: "inline-block",
+        px: 0,
+        py: 0,
+        color: "primary",
+        margin: 3,
+        textDecoration: "none",
+        borderBottom: `2px solid transparent`,
+        lineHeight: 2,
+        transition: `all .5s ease-in;`,
+        "&.active": {
+          borderBottom: `1px solid transparent`,
+          borderColor: "secondary",
+          color: "secondary",
+          cursor: "default",
+        },
+        "&:hover:not(.active)": {
+          borderColor: "primary",
+        },
+      },
+    },
     alerts: {
       error: {
         borderRadius: `sm`,

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
+          }
+        }
+      }
     }
   }
 `