responsive web

juniorwmr · Oct 13, 2020 · 019dcd5 · 019dcd5
1 parent 9137f47
commit 019dcd5
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 8 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,10 @@
 <html lang="pt">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap"
       rel="stylesheet"

diff --git a/src/pages/OrphanagesMap.tsx b/src/pages/OrphanagesMap.tsx
@@ -28,8 +28,9 @@ const OrphanagesMap: React.FC = () => {
 
       <Map
         center={[-9.944267, -67.8211988]}
-        zoom={15}
-        style={{ width: '100%', height: '100%' }}
+        zoom={13}
+        keyboard={false}
+        style={{ width: '100vw', height: '100vh' }}
       >
         <TileLayer
           url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -2,6 +2,8 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+
+  font-size: 100%;
 }
 
 body {
@@ -15,3 +17,9 @@ button,
 textarea {
   font: 600 18px Nunito, sans-serif;
 }
+
+@media (max-width: 700px) {
+  * {
+    font-size: 80%;
+  }
+}
diff --git a/src/styles/pages/landing.css b/src/styles/pages/landing.css
@@ -24,21 +24,22 @@
 
   background: url('../../images/landing.svg') no-repeat 80% center;
   background-size: 40%;
+  background-position-x: 90%;
 }
 
 .content-wrapper main {
   max-width: 350px;
   animation: down 500ms backwards;
 }
 .content-wrapper main h1 {
-  font-size: 76px;
+  font-size: 5rem;
   font-weight: 900;
   line-height: 70px;
 }
 
 .content-wrapper main p {
   margin-top: 40px;
-  font-size: 24px;
+  font-size: 1.5rem;
   line-height: 34px;
 }
 
@@ -47,7 +48,7 @@
   right: 0;
   top: 0;
 
-  font-size: 24px;
+  font-size: 1.3rem;
   line-height: 34px;
 
   display: flex;
@@ -106,3 +107,54 @@
     transform: translateY(0%);
   }
 }
+
+@media (max-width: 700px) {
+  #page-landing {
+    padding: 10px;
+    align-items: baseline;
+  }
+
+  #page-landing .content-wrapper {
+    max-height: 650px;
+
+    background-size: 50%;
+    background-position-y: 20%;
+  }
+
+  .content-wrapper main {
+    max-width: 280px;
+    margin-left: 5px;
+    padding-bottom: 30px;
+  }
+
+  .content-wrapper main h1 {
+    font-size: 4rem;
+    font-weight: 800;
+    line-height: 50px;
+  }
+  .content-wrapper main p {
+    width: 255px;
+  }
+
+  .content-wrapper .enter-app {
+    right: 10px;
+  }
+
+  .content-wrapper .location {
+    position: absolute;
+    right: 5px;
+    top: 20px;
+
+    line-height: 20px;
+  }
+}
+
+@media (max-width: 340px) {
+  .content-wrapper .enter-app {
+    width: 50px;
+    height: 50px;
+
+    right: 10px;
+    bottom: 10px;
+  }
+}
diff --git a/src/styles/pages/orphanages-map.css b/src/styles/pages/orphanages-map.css
@@ -1,8 +1,7 @@
 #page-map {
-  width: 100vw;
   height: 100vh;
+  width: 100vw;
 
-  position: relative;
   display: flex;
 }
 
@@ -95,3 +94,55 @@
     transform: translateY(0%);
   }
 }
+
+@media (max-width: 700px) {
+  #page-map {
+    flex-direction: column;
+  }
+
+  #page-map aside {
+    width: 100vw;
+    height: 13vh;
+    padding: 0;
+
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #page-map aside h2 {
+    font-size: 1.8rem;
+    line-height: 0px;
+    margin-top: 0px;
+  }
+
+  #page-map .leaflet-container {
+    z-index: 1;
+  }
+
+  #page-map .create-orphanage {
+    right: 40px;
+    bottom: 40px;
+
+    z-index: 2;
+  }
+
+  #page-map header img {
+    display: none;
+  }
+
+  #page-map aside p {
+    display: none;
+  }
+
+  #page-map aside footer {
+    display: none;
+  }
+}
+
+@media (max-width: 340px) {
+  #page-map .create-orphanage {
+    width: 50px;
+    height: 50px;
+  }
+}