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

create custom theme

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": {
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@fontsource/karmilla": "^4.5.3",
"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.3",
"gatsby": "^5.3.3",

67
src/components/layout.js
View File

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

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 (
<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
</Typography>
<Typography variant="h2">What we offer</Typography>
@ -89,7 +92,9 @@ const BlogIndex = ({ data, location }) => {
</Typography>
<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>
{/* <Bio /> */}
{/* <ol style={{ listStyle: `none` }}>

5
yarn.lock
View File

@ -1183,6 +1183,11 @@
minimatch "^3.0.4"
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":
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"