[gatsby-theme-cara]: Change size/factor of sections

[kujaomega]

First of all, thanks for the open source project. I would like to share some issues with the theme.

When you add long texts in Hero, Projects and About section, the page doesn't have a good responsiveness behaviour, It will be great to achieve this.

When you see the theme in a phone in landscape mode, the text overlaps for all parts.

Kind regards

[LekoArts]

When you add long texts in Hero, Projects and About section, the page doesn't have a good responsiveness behaviour, It will be great to achieve this.

Fixed in: https://github.com/LekoArts/gatsby-themes/commit/e893a9b60911f475017931ecd9841321cb3d4fa8 (@lekoarts/gatsby-theme-cara@1.1.0)

You now can change the factor of each section. The prop refers to react-spring's prop: https://www.react-spring.io/docs/props/parallax

This means that if you shadow src/templates/cara.tsx with these contents:

import React from "react"
import { Parallax } from "react-spring/renderprops-addons.cjs"
import Layout from "@lekoarts/gatsby-theme-cara/src/components/layout"
import Hero from "@lekoarts/gatsby-theme-cara/src/components/hero"
import Projects from "@lekoarts/gatsby-theme-cara/src/components/projects"
import About from "@lekoarts/gatsby-theme-cara/src/components/about"
import Contact from "@lekoarts/gatsby-theme-cara/src/components/contact"

const Cara = () => (
  <Layout>
    <Parallax pages={5}>
      <Hero offset={0} factor={1} />
      <Projects offset={1} factor={2} />
      <About offset={3} factor={1} />
      <Contact offset={4} factor={1} />
    </Parallax>
  </Layout>
)

export default Cara

You can change the factor of each page instead of shadowing each section.

When you see the theme in a phone in landscape mode, the text overlaps for all parts.

Unfortunately that's not something I want to fix.