@t2ca/gatsby-theme-showcase 1.0.12 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
@@ -26,7 +26,6 @@
     "@emotion/styled": "^10.0.17",
     "@hot-loader/react-dom": "^16.9.0",
     "@mdx-js/mdx": "^1.4.0",
-    "@theme-ui/color-modes": "^0.3.0-alpha.4",
     "@theme-ui/components": "^0.3.0-alpha.4",
     "@theme-ui/preset-bootstrap": "^0.3.0-alpha.4",
     "@theme-ui/preset-tailwind": "^0.3.0-alpha.4",

package/src/components/header.js

@@ -12,7 +12,7 @@ export default ({ setMenuOpen, styles, menuOpen, nav, name, menuList }) => {
     <Flex
       sx={{ ...styles, position: `fixed`, zIndex: `100`, width: `100%`, py: 2 }}
     >
-      <Container sx={{ py: 0, px: `2rem` }}>
+      <Container sx={{ py: 0, px: 4 }}>
         <div
           sx={{
             display: `flex`,

package/src/components/hero.js

@@ -25,7 +25,7 @@ export default ({
           minHeight: minHeight, // screenHeight
         }}
       >
-        <Container>
+        <Container sx={{ py: 3, px: 4 }}>
           <animated.div style={titleProps}>
             <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
               {headingTop}

package/src/components/layout.js

@@ -68,35 +68,33 @@ const Layout = ({ header, main, location, children }) => {
         nav={nav}
       />
 
-      <div>
-        <div
-          ref={nav}
-          onFocus={e => {
-            setMenuOpen(true)
-          }}
-          onBlur={e => {
-            setMenuOpen(false)
-          }}
-          onClick={e => {
-            setMenuOpen(false)
-          }}
-        >
-          <Sidebar
-            open={menuOpen}
-            sx={{
-              display: [null, "none"],
-            }}
-          />
-        </div>
-
-        <div
+      <div
+        ref={nav}
+        onFocus={e => {
+          setMenuOpen(true)
+        }}
+        onBlur={e => {
+          setMenuOpen(false)
+        }}
+        onClick={e => {
+          setMenuOpen(false)
+        }}
+      >
+        <Sidebar
+          open={menuOpen}
           sx={{
-            ...main,
-            pt: `4.75rem`,
+            display: [null, "none"],
           }}
-        >
-          {children}
-        </div>
+        />
+      </div>
+
+      <div
+        sx={{
+          ...main,
+          pt: `4.75rem`,
+        }}
+      >
+        {children}
       </div>
 
       {location && location.pathname === "/contact/" ? (

package/src/components/navigation-mobile.js

@@ -19,6 +19,10 @@ const MobileNavItem = ({ linkTo, label, icon, isDark }) => {
     textAlign: `center`,
     p: `0.75rem`,
     "&:hover": { textDecoration: `none` },
+    "&.active": {
+      color: "primary",
+      cursor: "default",
+    },
   }
 
   return (
@@ -26,7 +30,7 @@ const MobileNavItem = ({ linkTo, label, icon, isDark }) => {
       to={linkTo}
       sx={linkStyles}
       partiallyActive={linkTo === "/" ? false : true}
-      activeStyle={{ color: colorMode === "light" ? `#2b6cb0` : `pink` }}
+      activeClassName="active"
     >
       <span>{icon}</span>
       <div>{label}</div>

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

@@ -1,8 +1,8 @@
 export default {
   Container: {
-    py: 3,
-    width: ["100%", "90%"],
-    maxWidth: "1168px",
+    // py: 3,
+    // width: ["100%", "90%"],
+    // maxWidth: "1168px",
   },
   Header: {
     primary: {