{"size": 2366, "ext": "js", "max_stars_repo_path": "components/Project.js", "max_stars_repo_name": "sheadscott/undefined-site", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/Project.js", "max_issues_repo_name": "sheadscott/undefined-site", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "components/Project.js", "max_forks_repo_name": "sheadscott/undefined-site", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 17.6567164179, "max_line_length": 64, "alphanum_fraction": 0.5224006762}
import styled from "styled-components";
import Icon from "../images/button.svg";

const Project = ({ project }) => {
  const imageSizes = require(`../images/${project.img}?resize`);

  return (
    <div>
      <Section>
        <Text>
          <h1>{project.title}</h1>
          <h2>{project.tagline}</h2>
          <StyledIcon />
        </Text>
        {}
        {project.img && project.imgNoMarginRight ? (
          <ImageContainer className="no-margin-right">
            <Image
              sizes="100vw"
              srcSet={imageSizes.srcSet}
              src={imageSizes.src}
              alt=""
            />
          </ImageContainer>
        ) : (
          <ImageContainer>
            <Image
              sizes="100vw"
              srcSet={imageSizes.srcSet}
              src={imageSizes.src}
              alt=""
            />
          </ImageContainer>
        )}
      </Section>
      <HRule />
    </div>
  );
};

export default Project;

const Section = styled.section`
  margin: 4rem 0 0 0;
  display: flex;
  flex-wrap: wrap;
`;

const Text = styled.div`
  padding-right: calc(70px + 2rem);
  color: black;
  position: relative;

  @media (min-width: 768px) {
    width: 60%;
  }

  h1,
  h2 {
    font-weight: normal;
    width: 100%;
  }
  h1 {
    text-transform: uppercase;
    font-size: 18px;
    margin-top: 0;
    font-weight: 700;
    @media (min-width: 415px) {
      font-size: 28px;
    }
  }
  h2 {
    font-size: 18px;
    @media (min-width: 415px) {
      font-size: 28px;
    }
  }
`;

const StyledIcon = styled(Icon)`
  width: 63px;
  position: absolute;
  top: -0.2rem;
  right: -1rem;

  @media (min-width: 415px) {
    width: 80px;
  }

  @media (min-width: 768px) {
    position: relative;
    right: 0;
  }
`;

const ImageContainer = styled.div`
  width: 100%;
  flex: auto;
  order: 3;
  display: flex;
  align-items: flex-end;

  &.no-margin-right {
    margin-right: -2rem;
  }

  @media (min-width: 728px) {
    width: 40%;
    order: 2;
  }
`;

const Image = styled.img`
  /* float: right; */
  /* width: 280px; */
  max-width: 100%;

  @media (min-width: 414px) {
    /* width: 400px; */
  }

  @media (min-width: 1200px) {
    /* width: 600px; */
  }
`;

const HRule = styled.div`
  position: relative;
  right: calc(-2rem + -1px);
  border-bottom: 1px solid #666;
  width: 90%;
  margin-left: 10%;
`;
