<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Avatar from '../Avatar';
import Background from '../Background';
import NavLink from '../NavLink';
import ProjectTitle from '../ProjectTitle';
import StyledHeader from '../StyledHeader';
import Wrapper from '../Wrapper';
import { pxToRem } from '../../../../../../theme';

export const StyledHeaderWide = StyledHeader.extend`
  box-shadow: 0 ${pxToRem(2)} ${pxToRem(4)} 0 rgba(0,0,0,0.5);
`;

export const StyledOuterWrapper = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  height: 20vh;
  max-height: ${pxToRem(150)};
  min-height: ${pxToRem(120)};
  margin: 0 3vw;
  z-index: 2;
`;

export const StyledAvatar = styled(Avatar)`
  margin-right: ${pxToRem(20)};
`;

export const StyledWrapper = styled(Wrapper)`
  box-sizing: border-box;
  margin: 0;
  padding: 0 ${pxToRem(10)};
`;

export const Nav = styled.nav`
  flex: 1;
  margin-left: ${pxToRem(20)};
`;

export const List = styled.ul`
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
`;

export const ListItem = styled.li`
  list-style: none;

  &:not(:last-of-type) {
    margin-right: ${pxToRem(30)};
  }
`;

export const StyledNavLink = styled(NavLink)`
  border-bottom: ${pxToRem(3)} solid transparent;
  margin-top: ${pxToRem(2)};

  &:hover,
  &.active {
    border-color: white;
  }
`;

function ProjectNavbarWide(props) {
<commit_msg>Fix project nav link styles Use :after to apply spacing between elements.<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Avatar from '../Avatar';
import Background from '../Background';
import NavLink from '../NavLink';
import ProjectTitle from '../ProjectTitle';
import StyledHeader from '../StyledHeader';
import Wrapper from '../Wrapper';
import { pxToRem } from '../../../../../../theme';

export const StyledHeaderWide = StyledHeader.extend`
  box-shadow: 0 ${pxToRem(2)} ${pxToRem(4)} 0 rgba(0,0,0,0.5);
`;

export const StyledOuterWrapper = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  height: 20vh;
  max-height: ${pxToRem(150)};
  min-height: ${pxToRem(120)};
  margin: 0 3vw;
  z-index: 2;
`;

export const StyledAvatar = styled(Avatar)`
  margin-right: ${pxToRem(20)};
`;

export const StyledWrapper = styled(Wrapper)`
  box-sizing: border-box;
  margin: 0;
  padding: 0 ${pxToRem(10)};
`;

export const Nav = styled.nav`
  flex: 1;
  margin-left: ${pxToRem(20)};
`;

export const List = styled.ul`
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
`;

export const ListItem = styled.li`
  display: inline;
  list-style: none;

  &:not(:last-of-type)::after {
    content: " ";
    font-size: 0;
    line-height: 0;
    margin-right: ${pxToRem(30)};
    white-space: pre;
  }
`;

export const StyledNavLink = styled(NavLink)`
  border-bottom: ${pxToRem(3)} solid transparent;
  display: inline-block;
  margin-top: ${pxToRem(2)};

  &:hover,
  &.active {
    border-color: white;
  }
`;

function ProjectNavbarWide(props) {

{'fraction_non_alphanumeric': 0.16923560868197546, 'fraction_numerical': 0.023277760301981754, 'mean_word_length': 3.937888198757764, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '1378596', 'n_tokens_mistral': 1204, 'n_tokens_neox': 1142, 'n_words': 292}