diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx index 81255de..ddaa1f0 100644 --- a/src/components/Overlay.tsx +++ b/src/components/Overlay.tsx @@ -27,6 +27,8 @@ const OverlayPane = styled(animated.div)` hsl(187, 71%, 50%) 50%, hsl(34, 100%, 50%) 100% ); + display: flex; + flex-direction: column; background-size: 300%; animation: overlay-animation 4s infinite alternate; @keyframes overlay-animation { @@ -43,8 +45,8 @@ const LinkBox = styled.div` display: flex; flex-direction: column; margin: auto; - width: 100%; - height: 100%; +/* width: 100%; + height: 100%; */ justify-content: center; `; @@ -62,6 +64,9 @@ const StyledLink = styled.a` font-style: ${props => (props.current === true ? 'italic' : 'black')}; color: ${props => (props.current === true ? 'hsla(0, 0%, 90%,1) ' : 'white')}; font-weight: ${props => (props.current === true ? 400 : '200')}; + @media (max-height: 500px) { + margin: 8px auto; + } :after { position: absolute; left: 0; diff --git a/src/components/Socials.tsx b/src/components/Socials.tsx index 461ea6f..d6c7183 100644 --- a/src/components/Socials.tsx +++ b/src/components/Socials.tsx @@ -2,8 +2,8 @@ import React from 'react'; import styled from 'styled-components'; const SocialsContainer = styled.div` - bottom: 0; - position: absolute; + /* bottom: 0; + position: absolute; */ margin: auto; width: 100%; margin: auto; diff --git a/src/components/Who.tsx b/src/components/Who.tsx index 217bfcc..0604c04 100644 --- a/src/components/Who.tsx +++ b/src/components/Who.tsx @@ -20,13 +20,16 @@ const WhoWrapper = styled.div` const Img = styled.div` grid-area: image; align-self: center; - width: 480px; - height: 480px; + width: 100%; + max-width: 480px; + height: 100%; + max-height: 480px; border-radius: 50%; vertical-align: middle; /* position: relative; */ overflow: hidden; margin: auto; + margin-right: 24px; img { margin: 0 auto; margin-top: -20%; @@ -35,9 +38,16 @@ const Img = styled.div` width: 100%; } @media (max-width: 900px) { - width: 88px; - height: 88px; - margin: 10% 24px 24px 24px; + width: 240px; + height: 240px; + margin: 10% 12px 6px 0px; + align-self: start; + float: left; + } + @media (max-width: 620px) { + width: 140px; + height: 140px; + margin: 10% 12px 6px 0px; align-self: start; float: left; }