{"size": 3742, "ext": "js", "max_stars_repo_path": "src/components/EducationComponent/EducationContent.js", "max_stars_repo_name": "xanderbakx/west-marin-compost", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/EducationComponent/EducationContent.js", "max_issues_repo_name": "xanderbakx/west-marin-compost", "max_issues_repo_issues_event_min_datetime": "2020-04-05T21:05:47.000Z", "max_issues_repo_issues_event_max_datetime": "2020-04-05T21:05:47.000Z", "max_forks_repo_path": "src/components/EducationComponent/EducationContent.js", "max_forks_repo_name": "xanderbakx/west-marin-compost", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 40.2365591398, "max_line_length": 325, "alphanum_fraction": 0.6044895778}
import React, { Component } from 'react'
import { Section, Title } from '../../utils'
import styled from 'styled-components'
import { styles } from '../../utils'
import { StaticQuery, graphql } from "gatsby"
import Img from 'gatsby-image'

export default class EducationContent extends Component {
  render() {
    return (
      <Section>
        <Title message="" title="West Marin Compost hopes that you will visit our website regularly to find out about events, workshops, articles, and videos" />
        <EducationContentWrapper>
          <h2 style={{ paddingTop: '2rem' }}>Carbon Farming</h2>
          <p className="text">Increasing organic matter in our soils helps building healthy soils:</p>
          <ul style={{ fontWeight: 600, padding: '1rem 0' }}>
            <li>Conserve water</li>
            <li>Reduce erosion</li>
            <li>Improve soil structure</li>
            <li>Diverse, abundant microbial population</li>
            <li>Optimized nutrient management</li>
          </ul>

          <p className="text">Increased soil organic matter also takes CO2 from the atmosphere and sequesters it in the soil, thereby helping to reverse climate change. Wise use of compost and mulches helps to carbon farm.</p>
          <p className="text">Carbon farming found its roots right here in Marin County through the <a href="https://www.marincarbonproject.org" target="_blank" rel="noopener noreferrer">Marin Carbon Project</a></p>
          <div style={{ margin: '1rem 0', position: 'relative', overflow: 'hidden', paddingTop: '56.25%' }}>
            <iframe style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: '100%',
              border: 0
            }} title="Soil Story" width="560" height="315" src="https://www.youtube.com/embed/nvAoZ14cP7Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
          </div>
          <h2>Getting started with carbon gardening</h2>
          <p className="text">We can also do our part of carbon sequestration in the backyard. The same principals apply. <a href="http://www.igrowsonoma.org/wp-content/uploads/2015/09/climate-friendly-gardener-ucs.pdf" target="_blank" rel="noopener noreferrer">Here</a> is an educational article that will get you going.</p>

          <StaticQuery
            query={graphql`
              query {
                climate: file(relativePath: { eq: "climate-friendly.png" }) {
                  childImageSharp {
                    fluid(maxWidth: 1600) {
                      ...GatsbyImageSharpFluid_tracedSVG
                    }
                  }
                }
              }
            `}
            render={data => <a href="http://www.igrowsonoma.org/wp-content/uploads/2015/09/climate-friendly-gardener-ucs.pdf" target="_blank" rel="noopener noreferrer">
              <Img id="gardener" style={{ margin: '1rem auto 1rem auto', border: '2px solid lightgrey', width: '75%' }} fluid={data.climate.childImageSharp.fluid} /></a>}
          />

        </EducationContentWrapper>
      </Section>
    )
  }
}

const EducationContentWrapper = styled.div`
  width: 90%;
  margin: 2rem auto;
  max-width: 992px;
  ul {
    list-style-type: none;
  }
  li {
    padding: 0.2rem 0;
  }
  h2 {
    padding: 2rem 0 0.5rem 0;
    color: ${styles.colors.mainBrown}
  }
  p {
    padding-bottom: 1rem;
  }
  a {
    text-decoration: none;
    color: ${styles.colors.mainBrown}
  }
  .text {
    line-height: 2rem;
    color: ${styles.colors.mainGrey};
    word-spacing: 0.2rem;
  }
  @media (min-width: 768px) {
    width: 70%;
  }
  @media (min-width: 992px) {
    width: 60%;
  }   
`