From 12bf05f79be9cd0df1027629eae1670c72c314a5 Mon Sep 17 00:00:00 2001
From: Firesieht <firesieht@mail.ru>
Date: Sat, 7 May 2022 00:23:01 +0300
Subject: [PATCH] add adaptive layout

---
 components/main/index.tsx                     |   2 +-
 .../mobile header/mobileHeader.module.css     |  36 ++++++
 components/modal/Modal.module.css             |  12 ++
 components/modal/index.tsx                    |   2 +-
 components/rings/Ring.module.css              |   6 +
 components/team/Team.module.css               | 104 +++++++++++++++++-
 package.json                                  |   2 +-
 styles/globals.css                            |   4 +-
 8 files changed, 160 insertions(+), 8 deletions(-)

diff --git a/components/main/index.tsx b/components/main/index.tsx
index fd34304..f647b53 100644
--- a/components/main/index.tsx
+++ b/components/main/index.tsx
@@ -5,7 +5,7 @@ export const Main:React.FC = () =>{
     return(
         <div className={styles.main} id="main">
             <h1 >AR Quest</h1>
-            <h2>Квесты прямо в вашем доме!</h2>
+            <h2 style={{"textAlign":"center"}}>Квесты прямо в вашем доме!</h2>
             <Link  href="#buy" >
                 <a className={styles.inRow}>
                     Далее <img src="/images/arrowUp.svg"/>
diff --git a/components/mobile header/mobileHeader.module.css b/components/mobile header/mobileHeader.module.css
index 383a1ef..eb75258 100644
--- a/components/mobile header/mobileHeader.module.css	
+++ b/components/mobile header/mobileHeader.module.css	
@@ -60,3 +60,39 @@
     border:none;
     background-color: transparent;
 }
+
+@media (max-width: 385px){
+    .text{
+        margin-left: 40px;
+    }
+    .btn{
+        margin-left:-60%;
+    }
+
+}
+
+@media (max-width: 300px){
+    .text{
+        margin-left: 40px;
+    }
+    .btn{
+        margin-left:-30%;
+    }
+
+}
+@media (max-width: 300px){
+    .text{
+        margin-left: 40px;
+    }
+    .btn{
+        margin-left:-30%;
+    }
+
+}
+
+@media (max-width: 260px){
+    .menu{
+        font-size: 20px;
+    }
+
+}
\ No newline at end of file
diff --git a/components/modal/Modal.module.css b/components/modal/Modal.module.css
index 153b61f..813615d 100644
--- a/components/modal/Modal.module.css
+++ b/components/modal/Modal.module.css
@@ -58,3 +58,15 @@
     background-color: #f9f9fd;
   }
 
+.img{
+}
+
+@media (max-width: 800px){
+    .modalButton{
+        margin-left: 100;
+    }
+   .img{
+       width: 60%;
+       padding-bottom: 200px;
+   }
+}
\ No newline at end of file
diff --git a/components/modal/index.tsx b/components/modal/index.tsx
index 698b6ae..1e8503b 100644
--- a/components/modal/index.tsx
+++ b/components/modal/index.tsx
@@ -49,7 +49,7 @@ export const Modal:React.FC<{show:boolean, setShow:(a:boolean)=>void }> = (props
                         </ul>
                     </div>
                     <h2>Фото</h2>
-                    <img src="/images/mockups.png"/>
+                    <img className={styles.img} src="/images/mockups.png"/>
                 </div>
             </div> 
     );
diff --git a/components/rings/Ring.module.css b/components/rings/Ring.module.css
index d2807e0..f1a1790 100644
--- a/components/rings/Ring.module.css
+++ b/components/rings/Ring.module.css
@@ -6,4 +6,10 @@
     .ringVisible{
         display: none;
     }
+}
+
+@media (max-width: 260px){
+    .ring{
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/components/team/Team.module.css b/components/team/Team.module.css
index d1a9a53..fe1deda 100644
--- a/components/team/Team.module.css
+++ b/components/team/Team.module.css
@@ -86,13 +86,13 @@
     .ilArrow{
         width: 55%;
 
-        top: -50px;
-        transform:  rotate(-25deg);
-        left: 27%
+        top: -60px;
+        transform:  rotate(-35deg);
+        left: 40%
 
     }
     .ilText{
-        left: -30%
+        left: -10%
     }
     .denArrow{
         width: 55%;
@@ -111,4 +111,100 @@
         padding-top: 50%;
 
     }
+}
+
+@media (max-width: 430px) {
+    
+    .team{
+        padding-top: 50%;
+    }
+    .avatar{
+        width: 40%;
+    }
+    .carouselAvatar{
+        font-size: 12px;
+
+        flex-direction: column ;   
+    }
+    .miText{
+        position: relative;
+        top:-380px;
+        left: 13%
+    }
+    .miArrow{
+        top: -200px;
+        left: -30%;
+        width: 40%;
+    }
+    .danya{
+        margin-top: -150px;
+    }
+    .ilArrow{
+        width: 40%;
+        top: -50px;
+        transform:  rotate(-35deg);
+        left: 30%
+
+    }
+    .ilText{
+        top:-140px;
+        left: -5%
+    }
+    .denArrow{
+        width: 40%;
+        left: -30%;
+        transform: scale(-1, 1) rotate(-35deg);
+    }
+    .denText{
+        top: -130px;
+        left:10%
+    }
+}
+
+@media (max-width: 300px) {
+    
+    .team{
+        padding-top: 50%;
+    }
+    .avatar{
+        width: 40%;
+    }
+    .carouselAvatar{
+        font-size: 10px;
+
+        flex-direction: column ;   
+    }
+    .miText{
+        position: relative;
+        top:-300px;
+        left: 10%
+    }
+    .miArrow{
+        top: -150px;
+        left: -33%;
+        width: 40%;
+    }
+    .danya{
+        margin-top: -150px;
+    }
+    .ilArrow{
+        width: 40%;
+        top: -50px;
+        transform:  rotate(-35deg);
+        left: 30%
+
+    }
+    .ilText{
+        top:-100px;
+        left: -5%
+    }
+    .denArrow{
+        width: 40%;
+        left: -30%;
+        transform: scale(-1, 1) rotate(-35deg);
+    }
+    .denText{
+        top: -100px;
+        left:10%
+    }
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index db0ba92..48d0727 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "next build && next export",
     "start": "next start",
     "lint": "next lint"
   },
diff --git a/styles/globals.css b/styles/globals.css
index 31e71c3..3dd0cff 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -16,7 +16,9 @@ html{
     font-family: 'Inconsolata', monospace;
 
 }
-
+h1,h2{
+  text-align: center;
+}
 body{
   background: #FAFAFA;
   overflow-x: hidden;