diff --git a/components/NavBar.js b/components/NavBar.js index af09362..e753742 100644 --- a/components/NavBar.js +++ b/components/NavBar.js @@ -43,6 +43,9 @@ const NavGroupContainer = styled.div` ${(p) => p.theme.mediaQueries.tablet} { gap: 5px; } + ${(p) => p.theme.mediaQueries.mobile} { + display: none; + } `; const NavTextContainer = styled.div` @@ -59,14 +62,32 @@ const NavTextContainer = styled.div` } `; +const SocialContainer = styled.div` + display: flex; + gap: 28px; + align-items: center; + + ${(p) => p.theme.mediaQueries.tablet} { + gap: 15px; + } + + ${(p) => p.theme.mediaQueries.mobile} { + float: left; + } +`; + const SocialIcon = styled.a` color: white; padding: 10px; + font-size: 32px; &:hover { color: #20FFAF; } + ${(p) => p.theme.mediaQueries.mobile} { + font-size: 16px; + padding: 0px; + } ` - const NwPlusLogo = styled.img` margin-right: 18px; @@ -79,7 +100,8 @@ const LinkText = styled.a` font-weight: bold; color: ${(p) => p.theme.colors.secondary}; font-feature-settings: 'liga' off; - + font-size: 18px; + &:hover { background: ${(p) => p.theme.colors.primaryGradient}; -webkit-background-clip: text; @@ -286,12 +308,27 @@ const NavBar = () => { return ( <> - - - + + + + + + + + + + + + + + + + + + + + + { {/* Right menu */} - + @@ -356,7 +393,7 @@ const NavBar = () => { - +