example-first-publish/src/components/text/style/text.js

Typography for BNNVARA

import styled, { injectGlobal } from 'styled-components';
import theme from '@bnnvara/colors';
import { breakpoints } from '@bnnvara/breakpoints';

injectGlobal`
  @import url('https://fonts.bnnvara.nl');
  
  body {
    font-family: "Exo BNNVARA", "Verdana", "sans-serif";
  }
`;

const TextStyle = styled.div`
  p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: ${theme.bnnvara.base.black};
  
    ${breakpoints.md} {
      font-size: 20px;   
    }
  }
  
  blockquote {
    font-size: 28px;
    color: ${theme.bnnvara.base.black}; 
    line-height: 1.6;
    border-left: 3px solid ${theme.bnnvara.primary.main};
    padding-left: 15px;
    
    ${breakpoints.md} {
      font-size: 32px;
      padding-left: 22px;
    }
  }
  
  a {
    text-decoration: underline;
    color: ${theme.bnnvara.primary.main};
  }    
`;

export default TextStyle;