@t2ca/gatsby-theme-showcase 1.0.54 → 1.0.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.0.54",
+  "version": "1.0.56",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
@@ -30,7 +30,6 @@
     "@theme-ui/preset-tailwind": "^0.4.0-rc.1",
     "@theme-ui/sidenav": "^0.4.0-rc.1",
     "@theme-ui/typography": "^0.4.0-rc.1",
-    "deepmerge": "^4.0.0",
     "framer-motion": "^1.10.3",
     "gatsby": "^2.13.3",
     "gatsby-image": "^2.2.7",
@@ -49,7 +48,6 @@
     "react-icons": "^3.7.0",
     "remark-slug": "^6.0.0",
     "theme-ui": "^0.4.0-rc.1",
-    "typeface-righteous": "^0.0.72",
     "yup": "^0.29.0"
   },
   "scripts": {

package/src/components/header.js

@@ -64,7 +64,7 @@ export default ({
                 bg: "transparent",
                 border: 0,
                 color: "text",
-                display: ["initial", "none"],
+                display: ["initial", "initial", "none"],
                 fontFamily: "inherit",
                 fontSize: 24,
                 p: 0,
@@ -80,7 +80,7 @@ export default ({
             <Burger />
           )}
           <Link to="/" sx={{ color: "inherit", textDecoration: "none" }}>
-            <div sx={{ display: ["none", "inherit"], pt: "4px" }}>
+            <div sx={{ display: ["none", "none", "inherit"], pt: "4px" }}>
               <img
                 src={isDark ? desktopLogoWhite : desktopLogo}
                 height={35}
@@ -100,7 +100,7 @@ export default ({
                 loading="eager"
               />*/}
             </div>
-            <div sx={{ display: ["inherit", "none"] }}>
+            <div sx={{ display: ["inherit", "inherit", "none"] }}>
               <img
                 src={mobileLogo}
                 height={35}
@@ -131,7 +131,7 @@ export default ({
               height: 59,
             }}
           >
-            <div sx={{ display: ["none", "inherit"] }}>
+            <div sx={{ display: ["none", "none", "inherit"] }}>
               {menuList &&
                 menuList.map(({ node: { label, link, id } }) => (
                   <NavLink key={id} to={link}>

package/src/components/hero.js

@@ -1,8 +1,6 @@
 /** @jsx jsx */
 import React from "react"
-// import { useStaticQuery, graphql } from "gatsby"
-// import Img from "gatsby-image"
-import { jsx, Styled, Container, Flex, Box } from "theme-ui"
+import { jsx, Styled, Container, Flex } from "theme-ui"
 import { motion } from "framer-motion"
 
 export default ({
@@ -62,7 +60,7 @@ export default ({
               <Flex
                 sx={{
                   // px: 6,
-                  display: [`none`, `initial`],
+                  display: [`none`, `none`, `initial`],
                   // alignItems: `center`,
                   // justifyContent: `center`,
                   flexDirection: `column`,

package/src/components/layout.js

@@ -48,12 +48,7 @@ const Layout = ({ header, main, children }) => {
           setMenuOpen(false)
         }}
       >
-        <Sidebar
-          open={menuOpen}
-          sx={{
-            display: [null, "none"],
-          }}
-        />
+        <Sidebar open={menuOpen} />
       </div>
 
       <div

package/src/components/project.js

@@ -11,11 +11,11 @@ import Wave from "./wave"
 const Project = (data) => {
   return (
     <React.Fragment>
-      <Container sx={{ px: [0, 4], py: 0 }}>
+      <Container sx={{ px: [0, 0, 4], py: 0 }}>
         <div
           sx={{
             py: "15rem",
-            px: ["1.5rem", "3rem"],
+            px: ["1.5rem", "1.5rem", "3rem"],
             zIndex: "1",
             position: "relative",
             minHeight: `75vh`, // screenHeight

package/src/components/sidebar.js

@@ -10,22 +10,24 @@ const components = {
   a: NavLink,
 }
 
-export default props => {
-  const Menu = props.menuList || MenuList
+export default ({ menuList, open }) => {
+  const Menu = menuList || MenuList
 
   return (
     <Menu
-      {...props}
       components={components}
       sx={{
-        width: 256,
-        flex: "none",
         px: 3,
         pt: 3,
         pb: 4,
-        mt: [60, 0],
+        mt: [60, 60, 0],
+        position: ["fixed", "fixed", "sticky"],
+        bottom: [0, 0, "auto"],
+        maxHeight: ["100vh", "100vh", "none"],
+        bg: ["Menu", "Menu", "transparent"],
+        display: [null, null, "none"],
+        transform: [open ? "translateX(0)" : "translate(-100%) !important"],
         zIndex: 10,
-        bg: "Menu",
       }}
     />
   )

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

@@ -1,173 +1,154 @@
-import merge from "deepmerge"
+import { merge } from "theme-ui"
 import tailwind from "@theme-ui/preset-tailwind"
 import styles from "./styles"
 import colors from "./colors"
 
-import "typeface-righteous/index.css"
-
-const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray
-
-export default merge(
-  tailwind,
-  {
-    // breakpoints: ["768px", "992px", "1200px"],
-    breakpoints: ["768px", "1024px", "1280px"],
-    // initialColorMode: `light`,
-    // useCustomProperties: true,
-    textStyles: {
-      heading: {
-        fontFamily: "heading",
-        fontWeight: "heading",
-        lineHeight: "heading",
-      },
+export default merge(tailwind, {
+  colors,
+  styles,
+  buttons: {
+    primary: {
+      ...tailwind.buttons.simple,
+      backgroundColor: `brand`,
+      outline: `none`,
+      "&:hover": { backgroundColor: `brandHover` },
     },
-    colors,
-    styles,
-    buttons: {
-      primary: {
-        ...tailwind.buttons.simple,
-        backgroundColor: `brand`,
-        outline: `none`,
-        "&:hover": { backgroundColor: `brandHover` },
-      },
-      secondary: {
-        ...tailwind.buttons.elevated,
-        outline: `none`,
-        color: `gray.8`,
-      },
-      basic: {
-        ...tailwind.buttons.outline,
-        outline: `none`,
-        borderColor: `brand`,
-        color: `brand`,
-        "&:hover": { backgroundColor: `brand`, color: `white` },
-      },
+    secondary: {
+      ...tailwind.buttons.elevated,
+      outline: `none`,
+      color: `gray.8`,
+    },
+    basic: {
+      ...tailwind.buttons.outline,
+      outline: `none`,
+      borderColor: `brand`,
+      color: `brand`,
+      "&:hover": { backgroundColor: `brand`, color: `white` },
+    },
+  },
+  inputs: {
+    primary: {
+      ...tailwind.inputs.inline,
+      width: `full`,
+      caretColor: tailwind.colors.pink[6],
     },
-    inputs: {
-      primary: {
-        ...tailwind.inputs.inline,
-        width: `full`,
-        caretColor: tailwind.colors.pink[6],
+    secondary: {
+      ...tailwind.inputs.shadow,
+      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",
       },
-      secondary: {
-        ...tailwind.inputs.shadow,
-        width: `full`,
+      "&::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%`,
       },
     },
-    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",
       },
-      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)",
-        },
+      "&::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",
       },
-      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",
-        },
+      "&:hover:not(.active)::after": {
+        visibility: "visible",
+        transform: "scaleX(1)",
       },
     },
-    alerts: {
-      error: {
-        borderRadius: `sm`,
-        bg: `red.1`,
-        // border: `1px solid ${tailwind.colors.red[8]}`,
-        boxShadow: `inset 0 0 0 1px ${tailwind.colors.red[8]}, 0 0 0 0 transparent`,
-        opacity: 0.7,
-        color: `red.8`,
-        p: 3,
-        my: 3,
-        fontWeight: `medium`,
-        display: `flex`,
-        width: `100%`,
-        alignItems: `center`,
+    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",
       },
-      success: {
-        borderRadius: `sm`,
-        bg: `green.1`,
-        // border: `1px solid ${tailwind.colors.green[8]}`,
-        boxShadow: (t) =>
-          `inset 0 0 0 1px ${t.colors.green[8]}, 0 0 0 0 transparent`,
-        opacity: 0.7,
-        color: `green.8`,
-        p: 3,
-        my: 3,
-        fontWeight: `medium`,
-        display: `flex`,
-        width: `100%`,
-        alignItems: `center`,
+      "&:hover:not(.active)": {
+        borderColor: "primary",
       },
     },
   },
-  { arrayMerge: overwriteMerge }
-)
+  alerts: {
+    error: {
+      borderRadius: `sm`,
+      bg: `red.1`,
+      // border: `1px solid ${tailwind.colors.red[8]}`,
+      boxShadow: `inset 0 0 0 1px ${tailwind.colors.red[8]}, 0 0 0 0 transparent`,
+      opacity: 0.7,
+      color: `red.8`,
+      p: 3,
+      my: 3,
+      fontWeight: `medium`,
+      display: `flex`,
+      width: `100%`,
+      alignItems: `center`,
+    },
+    success: {
+      borderRadius: `sm`,
+      bg: `green.1`,
+      // border: `1px solid ${tailwind.colors.green[8]}`,
+      boxShadow: (t) =>
+        `inset 0 0 0 1px ${t.colors.green[8]}, 0 0 0 0 transparent`,
+      opacity: 0.7,
+      color: `green.8`,
+      p: 3,
+      my: 3,
+      fontWeight: `medium`,
+      display: `flex`,
+      width: `100%`,
+      alignItems: `center`,
+    },
+  },
+})