fahad/autonomic-zone-gatsby
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

create custom theme

Browse Source
This commit is contained in:
desmukh 2023-01-06 01:05:29 +05:00
parent 671325876e
commit aeeaa8eaad
6 changed files with 70 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gatsby-browser.js Normal file
View File

@ -0,0 +1 @@
import "@fontsource/karmilla/400.css"

1
package.json
View File

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.10.5", "@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5", "@emotion/styled": "^11.10.5",
"@fontsource/karmilla": "^4.5.3",
"@mui/icons-material": "^5.11.0", "@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.3", "@mui/material": "^5.11.3",
"gatsby": "^5.3.3", "gatsby": "^5.3.3",

67
src/components/layout.js
View File

@ -1,7 +1,8 @@
import * as React from "react" import * as React from "react"
import { Link as GatsbyLink } from "gatsby" import { Link as GatsbyLink } from "gatsby"
import { AppBar, Container, CssBaseline, Grid, Link, Toolbar } from "@mui/material" import { AppBar, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material"
import NavMenu from "./nav-menu" import NavMenu from "./nav-menu"
import theme from "./theme"
const Layout = ({ location, title, children }) => { const Layout = ({ location, title, children }) => {
// const rootPath = `${__PATH_PREFIX__}/` // const rootPath = `${__PATH_PREFIX__}/`
@ -24,39 +25,41 @@ const Layout = ({ location, title, children }) => {
return ( return (
<> <>
<ThemeProvider theme={theme}>
<CssBaseline /> <CssBaseline />
<AppBar <AppBar
component="header" component="header"
color="transparent" color="transparent"
position="relative" position="relative"
elevation={0} elevation={0}
> >
<Toolbar> <Toolbar>
<Link <Link
underline="hover" underline="hover"
component={GatsbyLink} component={GatsbyLink}
to="/" to="/"
sx={{ textTransform: "lowercase" }} sx={{ textTransform: "lowercase" }}
> >
{title} {title}
</Link> </Link>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Container> <Container>
<Grid container> <Grid container>
<Grid item xs={12} md={2}> <Grid item xs={12} md={2}>
<NavMenu /> <NavMenu />
</Grid>
<Grid item xs={12} md={10}>
<main>{children}</main>
</Grid>
</Grid> </Grid>
<Grid item xs={12} md={10}> <footer>
<main>{children}</main> © {new Date().getFullYear()}, Built with
</Grid> {` `}
</Grid> <a href="https://www.gatsbyjs.com">Gatsby</a>
<footer> </footer>
© {new Date().getFullYear()}, Built with </Container>
{` `} </ThemeProvider>
<a href="https://www.gatsbyjs.com">Gatsby</a>
</footer>
</Container>
</> </>
) )
} }

21
src/components/theme.js Normal file
View File

@ -0,0 +1,21 @@
import { createTheme } from "@mui/material";
const theme = createTheme({
palette: {
primary: {
main: "#DC3E9D",
},
secondary: {
main: "#0FB45D",
contrastText: "#FFF",
},
text: {
primary: "#DC3E9D",
}
},
typography: {
fontFamily: `"Karmilla", sans-serif`
}
})
export default theme

9
src/pages/index.js
View File

@ -40,7 +40,10 @@ const BlogIndex = ({ data, location }) => {
return ( return (
<Layout location={location} title={siteTitle}> <Layout location={location} title={siteTitle}>
<Typography variant="h1"> <Typography
variant="h1"
sx={{ fontWeight: 400, fontSize: 44, lineHeight: "40px" }}
>
Autonomic is a co-operative that is owned and run by its workers Autonomic is a co-operative that is owned and run by its workers
</Typography> </Typography>
<Typography variant="h2">What we offer</Typography> <Typography variant="h2">What we offer</Typography>
@ -89,7 +92,9 @@ const BlogIndex = ({ data, location }) => {
</Typography> </Typography>
<Box display="flex" justifyContent="center"> <Box display="flex" justifyContent="center">
<Button variant="contained">Contact us at hello@autonomic.zone</Button> <Button variant="contained" color="secondary">
Contact us at hello@autonomic.zone
</Button>
</Box> </Box>
{/* <Bio /> */} {/* <Bio /> */}
{/* <ol style={{ listStyle: `none` }}> {/* <ol style={{ listStyle: `none` }}>

5
yarn.lock
View File

@ -1183,6 +1183,11 @@
minimatch "^3.0.4" minimatch "^3.0.4"
strip-json-comments "^3.1.1" strip-json-comments "^3.1.1"
"@fontsource/karmilla@^4.5.3":
version "4.5.3"
resolved "https://registry.yarnpkg.com/@fontsource/karmilla/-/karmilla-4.5.3.tgz#80267f8ccc76e841308e52273b2d5007bfc50377"
integrity sha512-a5bINn+wkQqT4jUmJ5HZ5YnjhwDeJDve26zrD667qjT8ougbwHHN1haBvZOex1a1YGdE2/5FNlTOUCzQmvFEHA==
"@gatsbyjs/parcel-namer-relative-to-cwd@2.3.1": "@gatsbyjs/parcel-namer-relative-to-cwd@2.3.1":
version "2.3.1" version "2.3.1"
resolved "https://registry.yarnpkg.com/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-2.3.1.tgz#44779296e2b2f5e5d1fb6ce40a7661647d65f6fc" resolved "https://registry.yarnpkg.com/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-2.3.1.tgz#44779296e2b2f5e5d1fb6ce40a7661647d65f6fc"