@t2ca/gatsby-theme-showcase 1.0.11 → 1.0.13

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 +8 -10
  2. package/src/components/footer.js +3 -3
  3. package/src/components/header.js +4 -4
  4. package/src/components/hero.js +1 -1
  5. package/src/components/layout.js +73 -93
  6. package/src/gatsby-plugin-theme-ui/index.js +2 -2
  7. package/src/gatsby-plugin-theme-ui/styles.js +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@t2ca/gatsby-theme-showcase",
3
- "version": "1.0.11",
3
+ "version": "1.0.13",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
6
  "devDependencies": {
@@ -23,23 +23,21 @@
23
23
  "react-dom": "^16.9.0"
24
24
  },
25
25
  "dependencies": {
26
- "@emotion/core": "^10.0.14",
27
26
  "@emotion/styled": "^10.0.17",
28
27
  "@hot-loader/react-dom": "^16.9.0",
29
28
  "@mdx-js/mdx": "^1.4.0",
30
- "@mdx-js/react": "^1.4.0",
31
- "@theme-ui/components": "^0.2.49",
32
- "@theme-ui/preset-bootstrap": "^0.2.25",
33
- "@theme-ui/preset-tailwind": "^0.2.30",
34
- "@theme-ui/sidenav": "^0.2.36",
35
- "@theme-ui/typography": "^0.2.5",
29
+ "@theme-ui/components": "^0.3.0-alpha.4",
30
+ "@theme-ui/preset-bootstrap": "^0.3.0-alpha.4",
31
+ "@theme-ui/preset-tailwind": "^0.3.0-alpha.4",
32
+ "@theme-ui/sidenav": "^0.3.0-alpha.4",
33
+ "@theme-ui/typography": "^0.3.0-alpha.4",
36
34
  "deepmerge": "^4.0.0",
37
35
  "gatsby": "^2.13.3",
38
36
  "gatsby-image": "^2.2.7",
39
37
  "gatsby-plugin-emotion": "^4.1.2",
40
38
  "gatsby-plugin-mdx": "^1.0.33",
41
39
  "gatsby-plugin-sharp": "^2.2.9",
42
- "gatsby-plugin-theme-ui": "^0.2.29",
40
+ "gatsby-plugin-theme-ui": "^0.3.0-alpha.4",
43
41
  "gatsby-remark-images": "^3.1.7",
44
42
  "gatsby-source-filesystem": "^2.1.4",
45
43
  "gatsby-transformer-json": "^2.2.2",
@@ -51,7 +49,7 @@
51
49
  "react-spring": "^8.0.27",
52
50
  "react-switch": "^5.0.0",
53
51
  "remark-slug": "^5.1.2",
54
- "theme-ui": "^0.2.5"
52
+ "theme-ui": "^0.3.0-alpha.4"
55
53
  },
56
54
  "scripts": {
57
55
  "build": "gatsby build",
package/src/components/footer.js CHANGED
@@ -1,11 +1,11 @@
1
1
  /** @jsx jsx */
2
2
  import React from "react"
3
- import { jsx, Footer, Container } from "theme-ui"
3
+ import { jsx, Flex, Container } from "theme-ui"
4
4
 
5
5
  export default ({ name }) => {
6
6
  return (
7
- <Footer>
7
+ <Flex sx={{ backgroundColor: "#1b1c1d", color: "white" }}>
8
8
  <Container sx={{ px: 3, py: 4 }}>{name}</Container>
9
- </Footer>
9
+ </Flex>
10
10
  )
11
11
  }
package/src/components/header.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /** @jsx jsx */
2
2
  import React from "react"
3
3
  import { Link } from "gatsby"
4
- import { jsx, Header, Container } from "theme-ui"
4
+ import { jsx, Container, Flex } from "theme-ui"
5
5
 
6
6
  import MenuButton from "./menu-button"
7
7
  import NavLink from "./nav-link"
@@ -9,10 +9,10 @@ import ColorModeToggle from "./color-mode-toggle"
9
9
 
10
10
  export default ({ setMenuOpen, styles, menuOpen, nav, name, menuList }) => {
11
11
  return (
12
- <Header
12
+ <Flex
13
13
  sx={{ ...styles, position: `fixed`, zIndex: `100`, width: `100%`, py: 2 }}
14
14
  >
15
- <Container sx={{ py: 0 }}>
15
+ <Container sx={{ py: 0, px: 4 }}>
16
16
  <div
17
17
  sx={{
18
18
  display: `flex`,
@@ -63,6 +63,6 @@ export default ({ setMenuOpen, styles, menuOpen, nav, name, menuList }) => {
63
63
  </div>
64
64
  </div>
65
65
  </Container>
66
- </Header>
66
+ </Flex>
67
67
  )
68
68
  }
package/src/components/hero.js CHANGED
@@ -25,7 +25,7 @@ export default ({
25
25
  minHeight: minHeight, // screenHeight
26
26
  }}
27
27
  >
28
- <Container>
28
+ <Container sx={{ py: 3, px: 4 }}>
29
29
  <animated.div style={titleProps}>
30
30
  <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
31
31
  {headingTop}
package/src/components/layout.js CHANGED
@@ -1,12 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import React, { useState, useRef } from "react"
3
- import {
4
- jsx,
5
- Layout as DefaultLayout,
6
- Main,
7
- Styled,
8
- useColorMode,
9
- } from "theme-ui"
3
+ import { jsx, Styled, useColorMode } from "theme-ui"
10
4
  import { Global } from "@emotion/core"
11
5
 
12
6
  import {
@@ -53,97 +47,83 @@ const Layout = ({ header, main, location, children }) => {
53
47
 
54
48
  return (
55
49
  <Styled.root>
56
- <DefaultLayout>
57
- <Global
58
- styles={{
59
- "*": {
60
- boxSizing: `inherit`,
61
- "&:before": {
62
- boxSizing: `inherit`,
63
- },
64
- "&:after": {
65
- boxSizing: `inherit`,
66
- },
67
- },
68
- body: { margin: 0 },
69
- html: {
70
- fontSize: `16px`,
71
- boxSizing: `border-box`,
72
- WebkitFontSmoothing: `antialiased`,
73
- MozOsxFontSmoothing: `grayscale`,
74
- },
75
- ".mapElement > div": {
76
- backgroundColor: "transparent !important",
77
- },
78
- }}
79
- />
50
+ <Global
51
+ styles={{
52
+ body: { margin: 0 },
53
+ html: {
54
+ fontSize: `16px`,
55
+ WebkitFontSmoothing: `antialiased`,
56
+ MozOsxFontSmoothing: `grayscale`,
57
+ },
58
+ ".mapElement > div": {
59
+ backgroundColor: "transparent !important",
60
+ },
61
+ }}
62
+ />
80
63
 
81
- <Header
82
- styles={header}
83
- menuOpen={menuOpen}
84
- setMenuOpen={setMenuOpen}
85
- nav={nav}
86
- />
64
+ <Header
65
+ styles={header}
66
+ menuOpen={menuOpen}
67
+ setMenuOpen={setMenuOpen}
68
+ nav={nav}
69
+ />
87
70
 
88
- <Main>
89
- <div
90
- ref={nav}
91
- onFocus={e => {
92
- setMenuOpen(true)
93
- }}
94
- onBlur={e => {
95
- setMenuOpen(false)
96
- }}
97
- onClick={e => {
98
- setMenuOpen(false)
99
- }}
100
- >
101
- <Sidebar
102
- open={menuOpen}
103
- sx={{
104
- display: [null, "none"],
105
- }}
106
- />
107
- </div>
71
+ <div
72
+ ref={nav}
73
+ onFocus={e => {
74
+ setMenuOpen(true)
75
+ }}
76
+ onBlur={e => {
77
+ setMenuOpen(false)
78
+ }}
79
+ onClick={e => {
80
+ setMenuOpen(false)
81
+ }}
82
+ >
83
+ <Sidebar
84
+ open={menuOpen}
85
+ sx={{
86
+ display: [null, "none"],
87
+ }}
88
+ />
89
+ </div>
108
90
 
109
- <div
110
- sx={{
111
- ...main,
112
- pt: `4.75rem`,
113
- }}
114
- >
115
- {children}
116
- </div>
117
- </Main>
91
+ <div
92
+ sx={{
93
+ ...main,
94
+ pt: `4.75rem`,
95
+ }}
96
+ >
97
+ {children}
98
+ </div>
118
99
 
119
- {location && location.pathname === "/contact/" ? (
120
- <div sx={{ display: ["none", "initial"] }}>
121
- <WrapperMap
122
- googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyBOY0sT1quks122bprrLM_0wrWLDWyVnMQ`}
123
- loadingElement={<div sx={{ height: `350px` }} />}
124
- containerElement={
125
- <div
126
- sx={{
127
- height: `350px`,
128
- backgroundColor: colorMode === "light" ? "#f8f9fa" : "#333",
129
- }}
130
- />
131
- }
132
- mapElement={
133
- <div
134
- sx={{
135
- height: `100%`,
136
- }}
137
- className="mapElement"
138
- />
139
- }
140
- />
141
- </div>
142
- ) : null}
100
+ {location && location.pathname === "/contact/" ? (
101
+ <div sx={{ display: ["none", "initial"] }}>
102
+ <WrapperMap
103
+ googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyBOY0sT1quks122bprrLM_0wrWLDWyVnMQ`}
104
+ loadingElement={<div sx={{ height: `350px` }} />}
105
+ containerElement={
106
+ <div
107
+ sx={{
108
+ height: `350px`,
109
+ backgroundColor: colorMode === "light" ? "#f8f9fa" : "#333",
110
+ }}
111
+ />
112
+ }
113
+ mapElement={
114
+ <div
115
+ sx={{
116
+ height: `100%`,
117
+ }}
118
+ className="mapElement"
119
+ />
120
+ }
121
+ />
122
+ </div>
123
+ ) : null}
143
124
 
144
- <Footer />
145
- <MobileNavigation />
146
- </DefaultLayout>
125
+ <Footer />
126
+ <MobileNavigation />
147
127
  </Styled.root>
148
128
  )
149
129
  }
package/src/gatsby-plugin-theme-ui/index.js CHANGED
@@ -10,8 +10,8 @@ export default merge(
10
10
  {
11
11
  // breakpoints: ["768px", "992px", "1200px"],
12
12
  breakpoints: ["768px", "1024px", "1280px"],
13
- initialColorMode: `light`,
14
- useCustomProperties: true,
13
+ // initialColorMode: `light`,
14
+ // useCustomProperties: true,
15
15
  textStyles: {
16
16
  heading: {
17
17
  fontFamily: "heading",
package/src/gatsby-plugin-theme-ui/styles.js CHANGED
@@ -1,8 +1,8 @@
1
1
  export default {
2
2
  Container: {
3
- py: 3,
4
- width: ["100%", "90%"],
5
- maxWidth: "1168px",
3
+ // py: 3,
4
+ // width: ["100%", "90%"],
5
+ // maxWidth: "1168px",
6
6
  },
7
7
  Header: {
8
8
  primary: {