See the live demo
To use this theme in your Gatsby sites, follow these instructions:
-
Install the theme
npm i gatsby-theme-teranova
or
yarn add gatsby-theme-teranova
-
Add the theme to your
gatsby-config.js
:module.exports = { plugins: [ { resolve: "gatsby-theme-teranova", options: { headingFont: `Vollkorn`, // default google font bodyFont: 'Roboto', // default google font } } ] }
-
There are mdx files and images for intro, services and about blocks
intro.mdx
with content that looks like this:
--- type: intro img: ./banner.jpg --- ## Making good times Better We are a company dedicated to making your satisfaction into our goals. You don’t need to worry about a single thing.And now we are offering special discounts right now.
about.mdx
with content that looks like this:
--- type: about img: ./about.jpg title: About us --- We Believe in a stronger community and a chance for redemption for every one and provide the opportunities that can lead to a better life for everyone. So, What are you waiting for? Join us today and be your best self. No more waiting, Join us before march to win exclusive prizes and a chance to win a million dollars. We Believe in a stronger community and a chance for redemption for every one and provide the opportunities that can lead to a better life for everyone. So, What are you waiting for? Join us today and be your best self. No more waiting, Join us before march to win exclusive prizes and a chance to win a million dollars. We Believe in a stronger community and a chance for redemption for every one and provide the opportunities that can lead to a better life for everyone. So, What are you waiting for? Join us today and be your best self. No more waiting, Join us before march to win exclusive prizes and a chance to win a million dollars.
- A service mdx file with looks like this:
--- title: Branding type: service --- We provide the best branding solutions and optimized designs to go along with a rangle of supporting features for companies of all sizes.
-
Create a
src/gatsby-theme-teranova/data/index.js
file and pass in this object of data to override the theme's data:module.exports = { title: 'Teranova', description: 'A single page gatsby theme created by Nirjan Khadka', url: 'https://nifty-sinoussi-4a8cab.netlify.com', image: '/images/banner.png', twitterUsername: '@nirjankhadka', facebookUsername: 'nirjankhadka13', instagramUsername: 'nk13.dev', phone: '555 219 619', email: '[email protected]', address: 'Stewart Street, Marks Avenue, California', mapUrl: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3306.033277112893!2d-118.26944278515673!3d34.04301748060843!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c7b85dea2a93%3A0x1ff47c3ceb7bb2d5!2sSTAPLES+Center!5e0!3m2!1sen!2snp!4v1564632144369!5m2!1sen!2snp', logo: '/images/logo.svg', trackingId: 'UA-135638651-2', //google analytics // options for gatsby plugin manifest shortName: 'teranova', pathPrefix: '/', backgroundColor: '#F9F9F9', themeColor: '#FFD700', favicon: 'static/images/favicon.png', // path from the root // gatsby sitemap plugin needs this siteUrl: 'https://nifty-sinoussi-4a8cab.netlify.com', };
-
Add a src/pages/index.mdx file to your project with the following components
import Intro from 'gatsby-theme-teranova/src/components/intro';
import About from 'gatsby-theme-teranova/src/components/about';
import Services from 'gatsby-theme-teranova/src/components/services';
import Contact from 'gatsby-theme-teranova/src/components/contact';
<Intro />
<About />
<Services />
<Contact />
you can reorder the components or add new custom components here
-
Add static/images/favicon.png to your project. The gatsby-plugin-manifest needs this image.
-
Start your site
gatsby develop
-
You can override colors by creating a
src/gatsby-theme-teranova/src/theme.js
file with object:export const theme = { fonts: { families: ['Roboto', 'Vollkorn'], body: '"Roboto",sans-serif', heading: '"Vollkorn",serif', }, fontSizes: [0.75, 1, 1.33, 1.77, 2.369, 3.157], fontWeights: { body: 400, heading: '700', bold: 700, }, spacing: [0.618, 1, 1.618, 2.618, 4.236, 6.854, 11.089], lineHeights: { body: 1.7, heading: 1.2, }, letterSpacings: { body: 'normal', caps: '0.2rem', }, colors: { primary: '#FFD700', dark: '#333', grey: '#B2AB99', secondaryLight: '#00FFD8', secondary: '#03866e', darkLight: '#5A5751', greyLight: '#F9F9F9', white: '#FEFEFE', secondaryDark: '#065648', primaryGradient: 'linear-gradient(to right, rgba(242, 153, 74,0.9), rgba(242, 201, 76,0.4))', }, };