gatsby-theme-90s
This is a Gatsby theme project that pays homage to the old roots of the web! Please note that gatsby-theme-90s
has a dependency on theme-ui.
Check out the live demo!
Installation
To use this theme in your Gatsby sites, follow these instructions:
1 - Install the theme
npm install --save gatsby-theme-90s
2 - Add the theme to your gatsby-config.js
:
moduleexports = plugins: "gatsby-theme-90s"
3 - Start your site
gatsby develop
Usage
If you wish to use the layout of the theme, please set up the Layout as follows. If you follow this markup structure, it will be a frictionless experience with using the theme.
/** @jsx jsx */ const Layout = <ThemeLayout> <Navbar /> <Main role="main"> <Header> <h1 sx= fontFamily: "header" >Hello World!</h1> </Header> <Container> <ul> <li> <img src="hello.jpg" alt="hello-tag" /> <h3>Hello</h3> <a href="www.hello.com">Hello</a> </li> <li> <img src="world.jpg" alt="world-tag" /> <h3>World</h3> <a href="www.world.com">World</a> </li> </ul> </Container> <FooterTheme role="contentinfo"> <Footer /> </FooterTheme> </Main> </ThemeLayout>
Individual Styling
This is how you would use the individual styles if you wish to have more controls over styles.
const Navbar = { return <nav role="navigation"> <Styledul> <Styledli> <a href="/">Home</a> </Styledli> <Styledli> <a href="/hello">Hello</a> </Styledli> <Styledli> <a href="/world">World</a> </Styledli> </Styledul> </nav> }
Theme Component Shadowing
Please follow this guide to override or extend this gatsby-theme-90s
.
Example
/** * ! NOTE * * Shadow the folder structure of the theme: ./src/gatsby-theme-90s/theme.js */ const theme = ...baseTheme colors: ...baseThemecolors primary: "tomato" // Change the primary colour styles: ...baseThemestyles p: ...baseThemestylesp fontWeight: "bold" // Change the font weight of "p" tag