Merge pull request #17 from iranjunior/improvement/responsive

Improvement/responsive
iranjunior · Apr 14, 2020 · 6daa411 · 6daa411
2 parents 4a62366 + 555cc53
commit 6daa411
Show file tree

Hide file tree

Showing 23 changed files with 216 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -17,11 +17,13 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.1",
     "react-toastify": "^5.5.0",
+    "source-map-explorer": "^2.4.2",
     "storybook-addon-styled-component-theme": "^1.3.0",
     "storybook-chromatic": "^3.5.2",
     "styled-components": "^5.0.1"
   },
   "scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "lint": "eslint --fix ./src/",

diff --git a/src/components/composes/about/styles.js b/src/components/composes/about/styles.js
@@ -5,10 +5,15 @@ export const Container = styled.div`
     width: 75%;
     margin: 50px;
     flex-direction: column;
+    @media only screen and (max-width: 1250px) {
+        width: 90%;
+        margin: 1em;
+    }
 `;
 export const WrapperStrength = styled.div`
     display: flex;
     width: 100%;
     justify-content: space-around;
     margin-top: 35px;
+    flex-wrap: wrap;
 `;
diff --git a/src/components/composes/contact/styles.js b/src/components/composes/contact/styles.js
@@ -15,35 +15,59 @@ export const Container = styled.div`
     width: 75%;
     margin: 50px;
     flex-direction: column;
+    @media only screen and (max-width: 1250px) {
+        width: 90%;
+        margin: 1em;
+    }
 `;
 export const MessageZone = styled.form`
     height: 100%;
     width: 100%;
     display: grid;
-    grid-template-areas:
-    "name name email email"    
-    "message message message message" 
-    "blank blank blank submit"
-    ;   
-    grid-template-rows: 12% 70% 12%;
-    grid-template-columns: 20% 20% 30% 10%;
     justify-content: center;
-    grid-gap: 10px;
+
+    @media only screen and (min-width: 1250px) {
+        grid-template-areas:
+        "name name email email"    
+        "message message message message" 
+        "blank blank blank submit"
+        ;   
+        grid-template-rows: 12% 70% 12%;
+        grid-template-columns: 20% 20% 30% 10em;
+        grid-gap: 10px;
+    }
+    @media only screen and (max-width: 1250px) {
+        grid-template-areas:
+        "name"
+        "email"    
+        "message" 
+        "submit"
+        ;   
+        grid-template-rows: 2em 2em 10em 3em;
+        grid-template-columns: 80%;
+        grid-gap: 2em;
+    }
+    @media only screen and (max-width: 400px) {
+        grid-template-areas:
+        "name"
+        "email"    
+        "message" 
+        "submit"
+        ;   
+        grid-template-rows: 1em 1em 10em 2em;
+        grid-template-columns: 100%;
+        grid-gap: 2em;
+        justify-content: flex-start;
+    }   
 `;
 export const Name = styled.input`
     grid-area: name;
-    padding: 20px 10px;
-    font-size: ${(props) => props.theme.fontSize.small};
 `;
 export const Email = styled.input`
     grid-area: email;
-    padding: 20px 10px;
-    font-size: ${(props) => props.theme.fontSize.small};
 `;
 export const Message = styled.textarea`
     grid-area: message;
-    padding: 20px 10px;
-    font-size: ${(props) => props.theme.fontSize.small};
 `;
 export const Send = styled.button`
     grid-area: submit;

diff --git a/src/components/composes/formation/styles.js b/src/components/composes/formation/styles.js
@@ -5,10 +5,14 @@ export const Container = styled.div`
     width: 75%;
     margin: 50px;
     flex-direction: column;
+    @media only screen and (max-width: 1250px) {
+        width: 90%;
+        margin: 1em;
+    }
 `;
 export const CardZone = styled.div`
     width: 100%;
-    height: 100%;
+    height: 27.5em;
     overflow-y: scroll;
     padding: 20px;
 

diff --git a/src/components/composes/menu/styles.js b/src/components/composes/menu/styles.js
@@ -9,8 +9,9 @@ export const Container = styled.div`
     background: ${(props) => props.theme.colors.primary};
     transition: all 200ms ease;
 
-    @media only screen and (max-width: 1200px) {
+    @media only screen and (max-width: 1250px) {
         display: flex;
+        padding: 0;
     }
 `;
 export const WrapperMenu = styled.div`

diff --git a/src/components/composes/nav/styles.js b/src/components/composes/nav/styles.js
@@ -10,7 +10,7 @@ export const Container = styled.div`
     background: ${(props) => props.theme.colors.primary};
     transition: all 200ms ease;
 
-    @media only screen and (max-width: 1200px) {
+    @media only screen and (max-width: 1250px) {
         display: none;
     }
 `;

diff --git a/src/components/composes/portfolio/styles.js b/src/components/composes/portfolio/styles.js
@@ -5,10 +5,14 @@ export const Container = styled.div`
     width: 75%;
     margin: 50px;
     flex-direction: column;
+    @media only screen and (max-width: 1250px) {
+        width: 90%;
+        margin: 1em;
+    }
 `;
 export const CardZone = styled.div`
     width: 100%;
-    height: 100%;
+    height: 27.5em;
     overflow-y: scroll;
     padding: 20px;
 

diff --git a/src/components/composes/profile/styles.js b/src/components/composes/profile/styles.js
@@ -4,13 +4,12 @@ import {
 } from 'react-icons/fa';
 
 export const Container = styled.div`
-  height: 100%;
   width: 400px;
   background-color: ${(props) => props.theme.colors.secondary};
   display: flex;
   flex-direction: column;
 
-  @media only screen and (max-width: 1200px) {
+  @media only screen and (max-width: 1250px) {
         display: flex;
         flex-direction: row;
         width: 100%;
@@ -24,7 +23,7 @@ export const Container = styled.div`
     }
 `;
 export const Header = styled.div`
-  @media only screen and (max-width: 1200px) {
+  @media only screen and (max-width: 1250px) {
         display: flex;
         flex-direction: column;
         width: 50%;
@@ -45,7 +44,7 @@ export const Content = styled.div`
     height: 100%;
     width: 100%;
     background-color: ${(props) => props.theme.colors.secondary};
-    @media only screen and (max-width: 1200px) {
+    @media only screen and (max-width: 1250px) {
         width: 50%;
     }
     @media only screen and (max-width: 700px) {
@@ -85,7 +84,7 @@ export const TitleContent = styled.h2`
 `;
 export const WrapperButton = styled.div`
     display: none;
-    @media only screen and (max-width: 1200px) {
+    @media only screen and (max-width: 1250px) {
     display: flex;
     flex-direction: row;
     height: 70px;

diff --git a/src/components/composes/skills/styles.js b/src/components/composes/skills/styles.js
@@ -5,6 +5,10 @@ export const Container = styled.div`
     width: 75%;
     margin: 50px;
     flex-direction: column;
+    @media only screen and (max-width: 1250px) {
+        width: 90%;
+        margin: 1em;
+    }
 `;
 
 export const Title = styled.h2`
@@ -45,6 +49,11 @@ export const WrapperSkills = styled.div`
     width: 100%;
     margin-top: 35px;
     column-count: 3;
+    @media screen and (max-width: 400px){
+        display: flex;
+        flex-wrap: wrap;
+        
+    }
 `;
 export const Skills = styled.div`
     width: 100%;

diff --git a/src/components/simples/cards/styles.js b/src/components/simples/cards/styles.js
@@ -16,6 +16,7 @@ box-shadow: 5px 5px ${(props) => props.theme.colors.tertiary};
 `;
 export const Reference = styled.label`
 margin: 10px 0;
+overflow-x: hidden;
 `;
 
 export const Links = styled.a`

diff --git a/src/components/simples/destak/styles.js b/src/components/simples/destak/styles.js
@@ -1,9 +1,15 @@
 import styled from 'styled-components';
 
 export default styled.h1`
-    font-size: 92px;
+    font-size: ${(props) => props.theme.fontSize.extraLarge};
     font-weight: 800;
     color: ${(props) => props.theme.colors.secondary};
     line-height: 0.75;
     margin-top: 0px;
+    @media only screen and (max-width: 700px) {
+        font-size: ${(props) => props.theme.fontSize.large};
+    }
+    @media only screen and (max-width: 400px) {
+        font-size: ${(props) => props.theme.fontSize.medium};
+    }
 `;
diff --git a/src/components/simples/icons/styles.js b/src/components/simples/icons/styles.js
@@ -4,5 +4,9 @@ import styled from 'styled-components';
 export default styled.div`
     display: flex;
     justify-content: center;
-    color: #ccc
+    color: #ccc;
+    
+    @media screen and (max-width: 1250px){
+        padding: 20px;
+  }
 `;
diff --git a/src/components/simples/imageProfile/styles.js b/src/components/simples/imageProfile/styles.js
@@ -6,7 +6,7 @@ export const Image = styled.img`
 `;
 export const WrapperButton = styled.div`
     display: none;
-    @media only screen and (max-width: 1200px) {
+    @media only screen and (max-width: 1250px) {
     display: flex;
     flex-direction: row;
     height: 70px;

diff --git a/src/components/simples/informations/styles.js b/src/components/simples/informations/styles.js
@@ -10,7 +10,7 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
 
-  @media only screen and (max-width: 1200px) {
+  @media only screen and (max-width: 1250px) {
         display: flex;
         flex-direction: row;
         width: 100%;
@@ -24,7 +24,7 @@ export const Container = styled.div`
     }
 `;
 export const Header = styled.div`
-  @media only screen and (max-width: 1200px) {
+  @media only screen and (max-width: 1250px) {
         display: flex;
         flex-direction: column;
         width: 50%;
@@ -45,7 +45,7 @@ export const Content = styled.div`
     height: 100%;
     width: 100%;
     background-color: ${(props) => props.theme.colors.secondary};
-    @media only screen and (max-width: 1200px) {
+    @media only screen and (max-width: 1250px) {
         width: 50%;
     }
     @media only screen and (max-width: 700px) {
@@ -85,7 +85,7 @@ export const TitleContent = styled.h2`
 `;
 export const WrapperButton = styled.div`
     display: none;
-    @media only screen and (max-width: 1200px) {
+    @media only screen and (max-width: 1250px) {
     display: flex;
     flex-direction: row;
     height: 70px;

diff --git a/src/components/simples/introduction/styles.js b/src/components/simples/introduction/styles.js
@@ -1,9 +1,12 @@
 import styled from 'styled-components';
 
 export default styled.h3`
-    font-size: 30px;
+    font-size: ${(props) => props.theme.fontSize.medium};
     font-weight: 500;
     color: #7a798c;
     line-height: 0.75;
+    @media only screen and (max-width: 400px) {
+        font-size: ${(props) => props.theme.fontSize.small};
+    }
 
 `;
diff --git a/src/components/simples/listNav/styles.js b/src/components/simples/listNav/styles.js
@@ -8,7 +8,7 @@ export const Menu = styled.ul`
     margin: 0;
     padding: 0;
 
-    @media only screen and (max-width: 1200px) {
+    @media only screen and (max-width: 1250px) {
         display: none;
     }
 `;

diff --git a/src/components/simples/menuDropdown/styles.js b/src/components/simples/menuDropdown/styles.js
@@ -7,16 +7,23 @@ export const Menu = styled.div`
     transition: all 200ms ease;
     display: flex;
     align-items: center;
-    transform: translateY(${(props) => (props.active === 'hidden' ? '-70px' : '280px')});
+    transform: translateY(${(props) => (props.active === 'hidden' ? '-2.5em' : '8em')});
 
+    @media screen and (max-width: 1250px) {
+        transform: translateY(${(props) => (props.active === 'hidden' ? '-2.5em' : '8.5em')});
+    }
+    @media screen and (max-width: 400px) {
+        transform: translateY(${(props) => (props.active === 'hidden' ? '-17px' : '8em')});
+    }
 `;
 export const Dropdown = styled.ul`
     display: flex;
     flex-direction: column;
     z-index: 10;
     position: relative;
-    height: 600px;
+    height: 20em;
     margin: 0;
+    padding: 0;
 `;
 export const Item = styled.li`
     display: flex;
@@ -42,4 +49,9 @@ export const Item = styled.li`
         width: auto;
         font-size: ${(props) => props.theme.fontSize.medium};
     }
+    @media only screen and (max-width: 400px) {
+        width: auto;
+        font-size: ${(props) => props.theme.fontSize.small};
+        height: 50px;
+    }
 `;
diff --git a/src/components/simples/strengths/styles.js b/src/components/simples/strengths/styles.js
@@ -14,6 +14,10 @@ export const Strength = styled.div`
     transform-style: preserve-3d;
     perspective: 1000px;
     cursor: default;
+
+    @media screen and (max-width: 1000px) {
+        margin: 1em;
+    }
     :hover {
         transform: rotateX(180deg) scale(1.2, 1.2);
         box-shadow: 0px 0px 20px #FFF;

diff --git a/src/components/simples/title/styles.js b/src/components/simples/title/styles.js
@@ -3,9 +3,8 @@ import styled from 'styled-components';
 export default styled.div`
   font-size: ${(props) => props.theme.fontSize.medium};
   font-weight: 800;
+  margin-right: 1em;
   color: ${(props) => props.theme.colors.secondary};
-  margin-right: 48px;
-  margin-top: -5px;
   transition: all 200ms ease;
   display: flex;
   align-items: center;
@@ -17,4 +16,8 @@ export default styled.div`
   :focus{
     outline: 1px solid ${(props) => props.theme.colors.primary};
   }
+  @media only screen and (max-width: 400px) {
+        margin-top: 1em;
+        font-size: ${(props) => props.theme.fontSize.small};
+    }
 `;