@t2ca/gatsby-theme-showcase 1.0.0 → 1.0.2

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

@@ -6,25 +6,46 @@ export default {
   },
   Header: {
     primary: {
-      bg: `cBg`,
-      borderBottom: `1px solid transparent`,
-      borderColor: `rgb(212, 212, 213)`,
+      bg: `Menu`,
+      // borderBottom: `1px solid transparent`,
+      // position: "fixed",
+      // top: 0,
+      // width: "100%",
+      // zIndex: 10,
+      // borderColor: `rgb(212, 212, 213)`,
+
+      // borderColor: `rgb(212, 212, 213)`,
     },
     secondary: {
       bg: `cBg`,
       borderBottom: `1px solid transparent`,
+      // position: "fixed",
+      // top: 0,
+      // width: "100%",
+      // zIndex: 10,
+      // borderColor: `rgb(212, 212, 213)`,
     },
   },
   p: {
-    fontSize: [2],
+    fontSize: [1],
   },
   h1: {
-    variant: "textStyles.heading",
-    fontSize: [5, 6],
+    fontSize: [4, 6, 7],
+    fontWeight: `bold`,
   },
   h2: {
-    variant: "textStyles.heading",
-    fontSize: [4, 5],
-    fontWeight: 500,
+    fontSize: [3, 4, 5],
+    fontWeight: `semibold`,
+  },
+  input: {
+    fontSize: [1],
   },
+  // project: {
+  //   primary: {
+  //     bg: "cBg",
+  //   },
+  //   secondary: {
+  //     bg: "sBg",
+  //   },
+  // },
 }

package/src/menu.mdx

@@ -0,0 +1 @@
+- [Showcase](/projects/)

package/src/templates/project.js

@@ -3,18 +3,14 @@ import { graphql } from "gatsby"
 import Layout from "../components/layout"
 import Project from "../components/project"
 
-const ProjectTemplates = ({ data: { project } }) => {
-  const mainStyles = {
+const ProjectTemplates = ({ data: { projectYaml }, location }) => {
+  const styles = {
     variant: "styles.Header.secondary",
   }
 
-  const headRoomStyles = {
-    borderColor: `rgb(212, 212, 213)`,
-  }
-
   return (
-    <Layout mainStyles={mainStyles} headRoomStyles={headRoomStyles}>
-      <Project {...project} />
+    <Layout main={styles} header={styles} location={location}>
+      <Project {...projectYaml} />
     </Layout>
   )
 }
@@ -23,10 +19,15 @@ export default ProjectTemplates
 
 export const query = graphql`
   query($projectID: String!) {
-    project(id: { eq: $projectID }) {
+    projectYaml(id: { eq: $projectID }) {
       title
-      notes
-      address
+      hero {
+        childImageSharp {
+          fluid {
+            ...GatsbyImageSharpFluid_withWebp_tracedSVG
+          }
+        }
+      }
     }
   }
 `

package/src/templates/projects.js

@@ -3,34 +3,29 @@ import { graphql, useStaticQuery } from "gatsby"
 import Layout from "../components/layout"
 import ProjectList from "../components/project-list"
 
-const ProjectsTemplates = () => {
+const ProjectsTemplates = props => {
   const data = useStaticQuery(graphql`
     query {
-      allProject(
-        sort: { fields: date, order: ASC }
-        filter: { date: { ne: null } }
-      ) {
+      allProjectYaml(sort: { fields: slug, order: ASC }) {
         nodes {
           id
           title
-          address
-          notes
-          date
-          dateTime
           slug
         }
       }
     }
   `)
 
-  const projects = data.allProject.nodes
+  const projects = data.allProjectYaml.nodes
 
   const styles = {
-    variant: "styles.Header.primary",
+    bg: `Menu`,
+    borderBottom: `1px solid transparent`,
+    borderColor: `MenuBorder`,
   }
 
   return (
-    <Layout headerStyles={styles}>
+    <Layout header={styles} location={props.location}>
       <ProjectList projects={projects} />
     </Layout>
   )

package/src/components/switch.js

@@ -1,19 +0,0 @@
-import React from "react"
-import ReactSwitch from "react-switch"
-import { css } from "theme-ui"
-
-export const Switch = props => <ReactSwitch {...props} />
-
-Switch.defaultProps = {
-  checkedIcon: false,
-  uncheckedIcon: false,
-  height: 24,
-  width: 48,
-  handleDiameter: 16,
-  offColor: `#00bfff`,
-  onColor: `#000`,
-
-  // boxShadow: `inset 0 0 0 1px #000`,
-}
-
-export default Switch

package/src/components/tiles.js

@@ -1,32 +0,0 @@
-import React from "react"
-import { ThemeProvider } from "theme-ui"
-
-export default props => (
-  <ThemeProvider
-    theme={{
-      styles: {
-        ul: {
-          listStyle: `none`,
-          display: [`block`, `flex`],
-          margin: [`0`, `0 -16px`],
-          p: 0,
-          m: 0,
-        },
-        li: {
-          bg: `cBg`,
-          boxShadow: `0 1px 2px 0 rgba(34,36,38,.15)`,
-          borderRadius: `.125rem`,
-          border: `1px solid rgba(34,36,38,.15)`,
-          textAlign: `center`,
-          // fontSize: `.875rem`,
-          mx: [0, 3],
-          mb: 4,
-          mt: 2,
-          p: 3,
-        },
-      },
-    }}
-  >
-    <div {...props} />
-  </ThemeProvider>
-)