diff --git a/src/components/Footer/FooterContent.tsx b/src/components/Footer/FooterContent.tsx index 0d2c050..d63ab60 100644 --- a/src/components/Footer/FooterContent.tsx +++ b/src/components/Footer/FooterContent.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; import { Link } from "@components/index"; +import Icon, { IconType } from "@components/Icon"; import colors from "@theme/colors"; import breakpoints from "@theme/breakpoints"; @@ -28,6 +29,7 @@ const Content = styled.div` h4 { color: ${colors.lightBlue}; padding: 1.5rem 0; + text-align: center; } a { @@ -67,6 +69,27 @@ const Map = styled.div` } `; +const SomeContainer = styled.div` + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + a { + display: flex; + flex-flow: row nowrap; + justify-content: center; + margin-right: 0.5rem; + + color: inherit; + text-decoration: none; + + } + svg{ + width: 24px; + height: 24px; + fill: ${colors.white}; +} +`; + const FooterContent: React.FC = () => (
@@ -90,6 +113,13 @@ const FooterContent: React.FC = () => ( Kuvagalleria Logot ja grafiikka
+
+ + + + + +
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 5d2f72d..e3572ed 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -33,7 +33,6 @@ export const renderNavigationItems = (mobile = false): JSX.Element => ( ); - const Nav = styled.div` flex: 1 0 auto; display: flex; @@ -57,6 +56,11 @@ const Nav = styled.div` @media screen and (max-width: ${breakpoints.mobile}) { justify-content: center; margin-left: 0; + /* line 59 */ + border-top: 2px solid ${colors.lightBlue}; /* Add line above */ + padding-top: 0.5rem; /* Add some spacing */ + padding-bottom: 0.5rem; /* Add some spacing */ + cursor: pointer; /* Make entire nav clickable */ } svg { @@ -78,22 +82,12 @@ const DesktopContainer = styled.div` } `; -const SomeContainer = styled.div` - display: flex; - flex-flow: row nowrap; - - a { - display: flex; - flex-flow: row nowrap; - justify-content: center; - margin: 1rem; - } -`; - const MobileMenu = styled.div` display: flex; margin: 0 1rem; + align-items: center; cursor: pointer; + padding: 0 50%; /* Large clickable area horizontally cheeze */ span { display: flex; @@ -103,9 +97,6 @@ const MobileMenu = styled.div` display: none; } - @media screen and (max-width: ${breakpoints.mobile}) { - margin-left: 3rem; - } `; interface NavigationProps { @@ -119,13 +110,8 @@ const Navigation: React.FC = ({ onMobileMenuOpen }) => { {desktopItems} - - - - - - - + + );