1import {Link} from 'gatsby' 2import styled, {css} from 'styled-components' 3 4const baseLinkStyles = css` 5 font-weight: 500; 6 text-decoration: none; 7 letter-spacing: .3px; 8 font-size: 14px; 9` 10const featureLinkStyles = css` 11 ${baseLinkStyles} 12 color: ${(props) => props.theme.colors.black}; 13 transition: opacity .5s 14 &:hover { 15 opacity: .9; 16 } 17` 18 19const navLinkStyles = css` 20 ${baseLinkStyles}; 21 color: ${(props) => props.theme.colors.black}; 22 transition: opacity .5s; 23 margin: 0 10px; 24 25 &:hover { 26 opacity: .5; 27 } 28` 29export const FeatureLink = styled(Link)` 30 ${featureLinkStyles} 31` 32 33export const NavLink = styled(Link)` 34 ${navLinkStyles}; 35` 36 37export const BasicNavLink = styled.a` 38 ${navLinkStyles}; 39` 40 41export const SidebarLink = styled(Link)` 42 ${baseLinkStyles}; 43 color: ${(props) => props.theme.colors.red}; 44 padding: 10px; 45 transition: background-color .3s; 46 47 &:hover { 48 background-color: ${(props) => props.theme.colors.lightPurple}; 49 } 50` 51