Skip to content
A single page gatsby theme
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
gatsby-theme-teranova
.gitignore
README.md
package.json
yarn.lock

README.md

Gatsby Theme teranova

See the live demo

Installation

To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme

    npm i gatsby-theme-teranova

    or

    yarn add gatsby-theme-teranova
  2. 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
          }
        }
      ]
    }
  3. There are mdx files and images for intro, services and about blocks

    1. 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.
    
    1. 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.
    
    1. 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.
    
  4. 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: 'info@teranova.com',
       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',
     };
     
  5. 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
  1. Add static/images/favicon.png to your project. The gatsby-plugin-manifest needs this image.

  2. Start your site

    gatsby develop
  3. 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))',
       },
    };


You can’t perform that action at this time.