<commit_before>import React from "react";
import styled from "styled-components";
import Link from "gatsby-link";

import PostList from "../components/PostList";

import { featuredTalks } from "../data/about";

const StyledCollection = styled.div`
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
`;

const StyledItem = styled.div`
  width: 33.33%;
  height: 250px;
  background-image: ${props => `url(${props.image})`};
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
`;

const StyledContent = styled.div`
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(91, 115, 125, 0.8);
  -webkit-transition: opacity 250ms ease-out;
  transition: opacity 250ms ease-out;
  opacity: 0;
  z-index: 15;
  position: absolute;
  top: 0;
  left: 0;
  :hover {
    opacity: 1;
  }
`;

const StyledLink = styled(Link)`
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 1px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  padding: 10px 25px;
  :hover {
    background: white;
    color: black;
    text-decoration: none;
  }
`;

export default ({ data }) => {
  const posts = data.allMarkdownRemark.edges;
  return (
    <div>
      <StyledCollection>
        {featuredTalks.map(talk => (
          <StyledItem image={talk.image}>
            <StyledContent>
              <StyledLink to={talk.link}>{talk.event}</StyledLink>
            </StyledContent>
          </StyledItem>
        ))}
      </StyledCollection>
      <PostList posts={posts} />
    </div>
  );
};

// eslint-disable-next-line
export const pageQuery = graphql`
  query TalksQuery {
    allMarkdownRemark(
      filter: { fileAbsolutePath: { regex: "/talks/" } }
      sort: { fields: [frontmatter___date], order: DESC }
    ) {
      edges {
        node {
          id
          frontmatter {
            title
            path
          }
        }
      }
    }
  }
`;<commit_msg>enhancement(pages/talks): better gallery styles<commit_after>import Link from "gatsby-link";
import PostList from "../components/PostList";
import React from "react";
import { featuredTalks } from "../data/about";
import styled from "styled-components";

const StyledContainer = styled.div`
  margin-left: calc(-1rem - 8px);
  margin-right: calc(-1rem - 8px);
`;

const StyledCollection = styled.div`
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
`;

const StyledItem = styled.div`
  width: 33.33%;
  height: 250px;
  background-image: ${props => `url(${props.image})`};
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
`;

const StyledContent = styled.div`
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(91, 115, 125, 0.8);
  -webkit-transition: opacity 250ms ease-out;
  transition: opacity 250ms ease-out;
  opacity: 0;
  z-index: 15;
  position: absolute;
  top: 0;
  left: 0;
  :hover {
    opacity: 1;
  }
`;

const StyledLink = styled(Link)`
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 1px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  padding: 10px 25px;
  :hover {
    background: white;
    color: black;
    text-decoration: none;
  }
`;

export default ({ data }) => {
  const posts = data.allMarkdownRemark.edges;
  return (
    <StyledContainer>
      <StyledCollection>
        {featuredTalks.map(talk => (
          <StyledItem image={talk.image}>
            <StyledContent>
              <StyledLink to={talk.link}>{talk.event}</StyledLink>
            </StyledContent>
          </StyledItem>
        ))}
      </StyledCollection>
      <PostList posts={posts} />
    </StyledContainer>
  );
};

// eslint-disable-next-line
export const pageQuery = graphql`
  query TalksQuery {
    allMarkdownRemark(
      filter: { fileAbsolutePath: { regex: "/talks/" } }
      sort: { fields: [frontmatter___date], order: DESC }
    ) {
      edges {
        node {
          id
          frontmatter {
            title
            path
          }
        }
      }
    }
  }
`;
{'fraction_non_alphanumeric': 0.14335588042766748, 'fraction_numerical': 0.026620117826751038, 'mean_word_length': 2.6208530805687205, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5587392', 'n_tokens_mistral': 1735, 'n_tokens_neox': 1567, 'n_words': 362}