{"size": 771, "ext": "js", "max_stars_repo_path": "src/utils/layout.js", "max_stars_repo_name": "justintemps/justintemps", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/utils/layout.js", "max_issues_repo_name": "justintemps/justintemps", "max_issues_repo_issues_event_min_datetime": "2020-05-25T12:39:42.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-21T08:14:41.000Z", "max_forks_repo_path": "src/utils/layout.js", "max_forks_repo_name": "justintemps/justintemps", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 6, "max_forks_count": null, "avg_line_length": 21.4166666667, "max_line_length": 53, "alphanum_fraction": 0.6757457847}
import styled from "styled-components";

const desktop = {
  maxWidth: "1300px",
  padding: "0 20px",
};

export const PageLayout = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 85px auto 50px;
  width: 100%;
  min-height: 100vh;
  grid-template-areas:
    "header header header header"
    "main main main main"
    "footer footer footer footer";
`;

export const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 0 20px;
  max-width: ${desktop.maxWidth};
  width: 100%;
  padding: ${desktop.padding};
`;

export const FlexContainer = styled.div`
  display: flex;
  flex-flow: row nowrap;
  max-width: ${desktop.maxWidth};
  padding: ${desktop.padding};
  width: 100%;
`;
