add responsivity to website and made some adjusts in terminal

GustavoSMelo · Aug 1, 2023 · 1495bcc · 1495bcc
1 parent f61f8a9
commit 1495bcc
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 3 deletions.
diff --git a/src/components/terminal/commands/content/help/style.ts b/src/components/terminal/commands/content/help/style.ts
@@ -9,4 +9,8 @@ export const Container = styled.table`
     .commandNameTitle {
         color: ${vars.colors.aurora.yellow};
     }
+
+    td {
+        padding: 5px 0px;
+    }
 `;
diff --git a/src/views/terminal/index.tsx b/src/views/terminal/index.tsx
@@ -58,7 +58,7 @@ const Terminal = () => {
                         placeholder='Click here to type a command...'
                         autoFocus
                         onKeyDown={(event) => execCommand(event)}
-                        onChange={(e) => setBin(e.target.value)}
+                        onChange={(e) => setBin(e.target.value.toLowerCase())}
                     />
                 </form>
             </>
@@ -78,7 +78,9 @@ const Terminal = () => {
                 But if you want to see a GUI portfolio version you can click
                 here
             </p>
-            {renderLine()}
+            <span className='mt10'>
+                {renderLine()}
+            </span>
         </Container>
     );
 };

diff --git a/src/views/terminal/terminal.style.ts b/src/views/terminal/terminal.style.ts
@@ -47,6 +47,10 @@ export const Container = styled.main`
         color: transparent;
     }
 
+    .mt10 {
+        margin-top: 10px;
+    }
+
     @media screen and (max-width: 580px) {
         form {
             flex-direction: column;

diff --git a/src/views/website/styled.ts b/src/views/website/styled.ts
@@ -56,8 +56,37 @@ const PresentationSection = styled.section`
     }
 
     @media screen and (max-width: 1024px) {
-        width: 90%;
         justify-content: center;
+        padding: 20px;
+        flex-direction: column;
+
+        div {
+            width: auto;
+        }
+    }
+
+    @media screen and (max-width: 590px){
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        figure, figure > img {
+            width: 200px;
+        }
+    }
+
+    @media screen and (max-width: 480px){
+        div > h2 {
+            font-size: large;
+        }
+
+        div > p {
+            font-size: medium;
+        }
+
+        figure, figure > img {
+            width: 180px;
+        }
     }
 `;
 
@@ -132,6 +161,31 @@ const ExperienceSection = styled.section<IChoosedExperience>`
         width: 1024px;
     }
 
+    @media screen and (max-width: 1000px) {
+        span {
+            flex-direction: column;
+        }
+
+        h1 {
+            font-size: 12pt;
+        }
+
+        .timePipe {
+            top: 30px;
+            transform: rotate(0deg);
+        }
+
+        .tabControlBtns {
+            display: flex;
+            flex-direction: row;
+        }
+
+        .exp-content {
+            padding: 30px;
+            width: auto;
+        }
+    }
+
 `;
 
 const TecnologiesSection = styled.section`
@@ -166,6 +220,12 @@ const TecnologiesSection = styled.section`
         font-size: 16pt;
         margin: 5px;
     }
+
+    @media screen and (max-width: 1440px) {
+        div, ul {
+            flex-direction: column;
+        }
+    }
 `;
 
 const ContactSection = styled.section`
@@ -206,6 +266,19 @@ const ContactSection = styled.section`
     .link.In {
         background-color: ${vars.colors.others.blue};
     }
+
+    @media screen and (max-width: 1000px) {
+        h1 {
+            font-size: 12pt;
+            text-align: center;
+        }
+    }
+
+    @media screen and (max-width: 705px) {
+        span {
+            flex-direction: column;
+        }
+    }
 `;
 
 export {Container, PresentationSection, ExperienceSection, TecnologiesSection, ContactSection};