@t2ca/gatsby-theme-showcase 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/header.js +1 -1
  3. package/src/components/hero.js +7 -7
  4. package/src/components/nav-link.js +2 -2
  5. package/src/components/navigation-mobile.js +30 -31
  6. package/src/gatsby-plugin-theme-ui/colors.js +6 -0
  7. package/src/components/cards.js +0 -13
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@t2ca/gatsby-theme-showcase",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
6
  "devDependencies": {
package/src/components/header.js CHANGED
@@ -45,7 +45,7 @@ export default ({
45
45
  <Link to="/" sx={{ color: "inherit", textDecoration: "none" }}>
46
46
  <span
47
47
  sx={{
48
- fontSize: [`1.25rem`, `1.5rem`],
48
+ fontSize: [3, 4],
49
49
  fontWeight: 600,
50
50
  color: "brand",
51
51
  }}
package/src/components/hero.js CHANGED
@@ -13,11 +13,11 @@ export default props => {
13
13
  <React.Fragment>
14
14
  <div
15
15
  sx={{
16
- py: "9rem",
17
- px: ["1.5rem", "3rem"],
16
+ py: 6,
17
+ px: [4, 5],
18
18
  position: "relative",
19
19
  bg: `MainHero`,
20
- minHeight: `80vh`,
20
+ minHeight: `screenHeight`, // 80vh
21
21
  }}
22
22
  >
23
23
  <Container>
@@ -34,22 +34,22 @@ export default props => {
34
34
  </div>
35
35
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200">
36
36
  <path
37
- fill={props.isDark ? "#1b1c1d" : "#ffffff"}
37
+ sx={{ fill: "Menu" }}
38
38
  d="M0,96L40,112C80,128,160,160,240,170.7C320,181,400,171,480,160C560,149,640,139,720,112C800,85,880,43,960,37.3C1040,32,1120,64,1200,96C1280,128,1360,160,1400,176L1440,192L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"
39
39
  ></path>
40
40
  <g transform="translate(0.000000, 44.000000)">
41
41
  <path
42
- fill={props.isDark ? "#777777" : props.color}
42
+ sx={{ fill: "waveX" }}
43
43
  d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
44
44
  opacity="0.100000001"
45
45
  ></path>
46
46
  <path
47
- fill={props.isDark ? "#999999" : props.color}
47
+ sx={{ fill: "waveY" }}
48
48
  d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
49
49
  opacity="0.100000001"
50
50
  ></path>
51
51
  <path
52
- fill={props.isDark ? "#555555" : props.color}
52
+ sx={{ fill: "waveZ" }}
53
53
  d="M920,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
54
54
  id="Path-4"
55
55
  opacity="0.200000003"
package/src/components/nav-link.js CHANGED
@@ -9,10 +9,10 @@ const styles = {
9
9
  px: 0,
10
10
  py: 0,
11
11
  color: "primary",
12
- margin: "1rem",
12
+ margin: 4,
13
13
  textDecoration: "none",
14
14
  borderBottom: `2px solid transparent`,
15
- lineHeight: "2rem",
15
+ lineHeight: 5,
16
16
  transition: `all .5s ease-in;`,
17
17
  "&.active": {
18
18
  borderBottom: `1px solid transparent`,
package/src/components/navigation-mobile.js CHANGED
@@ -1,29 +1,29 @@
1
+ /** @jsx jsx */
1
2
  import React from "react"
3
+ import { jsx } from "theme-ui"
2
4
  import { Link } from "gatsby"
3
5
  import { css } from "@emotion/core"
4
6
 
5
7
  import Icon from "./icon"
6
8
 
7
9
  const MobileNavItem = ({ linkTo, label, icon, isDark }) => {
8
- const linkStyles = css`
9
- borderradius: 2;
10
- color: ${isDark ? "white" : "#333"};
11
- font-size: 0.75rem;
12
- flex-shrink: 0;
13
- line-height: 1;
14
- width: 64;
15
- text-decoration: none;
16
- text-align: center;
17
- padding: 0.75rem;
18
- &:hover {
19
- text-decoration: none;
20
- }
21
- `
10
+ const linkStyles = {
11
+ borderRadius: "2px",
12
+ color: "text",
13
+ fontSize: "0.75rem",
14
+ flexShrink: "0",
15
+ lineHeight: "1",
16
+ // width: "64",
17
+ textDecoration: "none",
18
+ textAlign: "center",
19
+ padding: "0.75rem",
20
+ "&:hover": { textDecoration: "none" },
21
+ }
22
22
 
23
23
  return (
24
24
  <Link
25
25
  to={linkTo}
26
- css={linkStyles}
26
+ sx={linkStyles}
27
27
  partiallyActive={linkTo === "/" ? false : true}
28
28
  activeStyle={{ color: isDark ? "pink" : `#2b6cb0` }}
29
29
  >
@@ -36,22 +36,21 @@ const MobileNavItem = ({ linkTo, label, icon, isDark }) => {
36
36
  const MobileNavigation = ({ isDark, menuList }) => (
37
37
  <React.Fragment>
38
38
  <div
39
- css={css`
40
- position: fixed;
41
- display: flex;
42
- justify-content: space-around;
43
- bottom: 0;
44
- left: 0;
45
- right: 0;
46
- z-index: 50;
47
- border-top: 1px solid ${isDark ? "#333" : "#d4d4d5"};
48
- background: ${isDark ? "#1b1c1d" : "white"};
49
- height: 3.75rem;
50
- padding-bottom: env(safe-area-inset-bottom);
51
- @media (min-width: 640px) {
52
- display: none;
53
- }
54
- `}
39
+ sx={{
40
+ position: "fixed",
41
+ display: "flex",
42
+ justifyContent: "space-around",
43
+ bottom: "0",
44
+ left: "0",
45
+ right: "0",
46
+ zIndex: "50",
47
+ borderTop: "1px solid transparent",
48
+ borderColor: "MenuBorder",
49
+ bg: "Menu",
50
+ height: "3.75rem",
51
+ paddingBottom: "env(safe-area-inset-bottom)",
52
+ "@media (min-width: 640px)": { display: "none" },
53
+ }}
55
54
  >
56
55
  {menuList &&
57
56
  menuList
package/src/gatsby-plugin-theme-ui/colors.js CHANGED
@@ -11,6 +11,9 @@ export default {
11
11
  MenuBorder: `rgb(212, 212, 213)`,
12
12
  MainHero: `white`,
13
13
  toggleIcon: `#777777`,
14
+ waveX: theme.colors.pink[6],
15
+ waveY: theme.colors.pink[6],
16
+ waveZ: theme.colors.pink[6],
14
17
  modes: {
15
18
  dark: {
16
19
  background: `#333333`,
@@ -23,6 +26,9 @@ export default {
23
26
  primary: theme.colors.pink[3],
24
27
  MainHero: `#1b1c1d`,
25
28
  toggleIcon: theme.colors.white,
29
+ waveX: `#777`,
30
+ waveY: `#999`,
31
+ waveZ: `#555`,
26
32
  },
27
33
  },
28
34
  }
package/src/components/cards.js DELETED
@@ -1,13 +0,0 @@
1
- /** @jsx jsx */
2
- import React from "react"
3
- import { jsx, Styled } from "theme-ui"
4
-
5
- export default ({ children }) => (
6
- <div
7
- sx={{
8
- variant: `cards.primary`,
9
- }}
10
- >
11
- <Styled.ul>{children}</Styled.ul>
12
- </div>
13
- )