finalizando

rocketseat-content · Mar 17, 2020 · f85237e · f85237e
1 parent 347f700
commit f85237e
Show file tree

Hide file tree

Showing 7 changed files with 232 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,21 @@
 # Responsividade 
 
+Fala Dev! 💜
+
+Responsividade é um assunto muito importante para que nosso layout seja flexível, conforme o dispositivo que o está acessando, seja ele smartphone, tablet ou desktop. (E até mesmo, a impressora sabia?)
+
+Na Masterclass de hoje, vamos usar estratégias de CSS Units para que tanto o nosso Layout, quanto os nossos textos, fiquem fluidos. 
+
+Utilizaremos também CSS Media Queries para adicionar CSS customizados conforme o breakpoint definido, para que nosso layout fique adaptado ao viewport do dispositivo. 
+
+Além do mais, veremos atributos e tags HTML especiais, para que possamos obter sucesso ao tornar nosso layout responsivo.
+
+Se você ainda não sabe muito bem como fazer layouts responsivos, está começando nesse assunto, está um pouco inseguro, fique tranquilo, vem comigo que eu vou tirar suas dúvidas!
+
+Espero que faça sentido pra você. 🥰
+
+Bora codar? 🚀 
+
 ## CSS Units
 
 Unidades de medidas do CSS
@@ -21,3 +37,55 @@ Texto fluidos
 `em` - multiplicado pelo pai 
 `rem` - multiplicado pelo root
 
+## CSS Media Queries 
+
+No HTMl eu coloco a seguinte tag meta
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+```
+
+No CSS eu uso da seguinte forma
+
+```css
+@media (max-width: 320px) {
+  #form h3 {
+    font-size: 2rem;
+  }
+}
+```
+
+## HTML Media Attrib.
+
+Posso utilizar o atribuito `media` no link do meu HTML, ao importar um arquivo css, usando as propriedades da mesma forma que usaria na regra `@media` do css.
+
+```html
+<link 
+    rel="stylesheet"
+    href="responsive.css" 
+    media="screen and (max-width: 768px)"
+/>
+
+<link rel="stylesheet" href="print.css" media="print">
+```
+
+## Imagens
+
+Usamos a tag `<picture>` para que as imagens sejam responsivas.
+
+```html
+<picture class="image" alt="Imagem">
+    <source media="(min-width: 768px)" 
+        srcset="https://i.ytimg.com/vi/GykTLqODQuU/maxresdefault.jpg">
+    <source media="(min-width: 320px)" 
+        srcset="https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg">
+    <source media="(min-width: 10px)" 
+        srcset="https://i.ytimg.com/vi/GykTLqODQuU/mqdefault.jpg">
+
+    <img 
+        src="https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg" 
+        alt="Imagem" />
+</picture>
+```
+
+Sempre que possível, usar SVG ao invés de JPG, PNG
diff --git a/index.html → final/index.html b/index.html → final/index.html
@@ -3,6 +3,15 @@
   <head>
     <title>Document</title>
     <link rel="stylesheet" href="style.css" />
+    <link 
+      rel="stylesheet"
+      href="responsive.css" 
+      media="screen and (max-width: 768px)"
+    />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="print.css" media="print">
   </head>
   <body>
     <header>
@@ -61,6 +70,16 @@ <h2>
     <main>
       <section class="cards">
         <div class="card">
+          <!--
+          <picture class="image" alt="Imagem">
+            <source media="(min-width: 768px)" srcset="https://i.ytimg.com/vi/GykTLqODQuU/maxresdefault.jpg">
+            <source media="(min-width: 320px)" srcset="https://i.ytimg.com/vi/rAzHvYnQ8DY/hqdefault.jpg">
+            <source media="(min-width: 10px)" srcset="https://i.ytimg.com/vi/HN1UjzRSdBk/mqdefault.jpg">
+            
+            <img src="https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg" alt="Imagem" />
+            </picture>
+
+          -->
           <div class="image">
             <img src="https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg" />
           </div>
@@ -133,5 +152,6 @@ <h3>Quero Estudar na Rocket!</h3>
     </div>
 
     <script src="scripts.js"></script>
+    <script src="menu.js"></script>
   </body>
 </html>
diff --git a/final/menu.js b/final/menu.js
@@ -0,0 +1,12 @@
+let show = true; 
+
+const menuSection = document.querySelector(".menu-section")
+const menuToggle = menuSection.querySelector(".menu-toggle")
+
+menuToggle.addEventListener("click", () => {
+
+    document.body.style.overflow = show ? "hidden" : "initial"
+
+    menuSection.classList.toggle("on", show)
+    show = !show;
+})
diff --git a/final/print.css b/final/print.css
@@ -0,0 +1,20 @@
+header,
+.hero,
+.image,
+#form {
+    display: none;
+    padding: 0;
+    margin: 0;
+}
+
+.cards {
+    display: block;
+}
+
+.card {
+    border-bottom: 1px solid;
+}
+
+.text--medium {
+    color: black;
+}
diff --git a/final/responsive.css b/final/responsive.css
@@ -0,0 +1,104 @@
+
+/* media queries */
+html {
+    font-size: 50%;
+}
+
+@media (max-width: 630px) {
+
+    .hero .container {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .hero .container img {
+        order: -1;
+    }
+
+    .form-group {
+        display: block;
+    }
+}
+
+@media (max-width: 540px) {
+    nav {
+        display: none;
+    }
+
+    .one,
+    .two,
+    .three {
+        background-color: #fff;
+        height: 5px;
+        width: 100%;
+        margin: 6px auto;
+
+        transition-duration: 0.3s;
+    }
+
+    .menu-toggle {
+        width: 40px;
+        height: 30px;
+        margin-right: 20px;
+    }
+
+    /* fullscreen */
+    .menu-section.on {
+        position: absolute;
+        top:0;
+        left:0;
+
+        width: 100vw;
+        height: 100vh;
+
+        background-color: #7159c1;
+
+        z-index: 10;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .menu-section.on nav {
+        display: block;
+    }
+
+    .menu-section.on .menu-toggle {
+        position: absolute;
+        right: 25px;
+        top: 15px;
+    }
+
+    .menu-section.on .menu-toggle .one {
+        transform: rotate(45deg) translate(7px, 7px);
+    }
+
+    .menu-section.on .menu-toggle .two {
+        opacity: 0;
+    }
+
+    .menu-section.on .menu-toggle .three {
+        transform: rotate(-45deg) translate(8px, -9px);
+    }
+
+    .menu-section.on nav ul {
+        text-align: center;
+        display: block;
+    }
+
+    .menu-section.on nav ul a{
+        transition-duration: 0.5s;
+        font-size: 3rem;
+        line-height: 4rem;
+        display: block;
+
+    }
+
+}
+
+@media (max-width: 320px) {
+    #form h3 {
+        font-size: 2rem;
+    }
+}
diff --git a/scripts.js → final/scripts.js b/scripts.js → final/scripts.js
@@ -77,3 +77,8 @@ document.querySelector(".close-modal").addEventListener("click", () => {
   modal.querySelector("iframe").src = ``;
   document.querySelector("body").style.overflow = "initial";
 });
+
+
+
+
+// MENU RESPONSIVO
diff --git a/style.css → final/style.css b/style.css → final/style.css
@@ -136,7 +136,7 @@ CARDS
   margin: auto;
 
   display: grid;
-  grid-template-columns: 310px 310px 310px;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: 20px;
 }
 
@@ -227,8 +227,8 @@ MODAL
 
   background-color: #fff;
 
-  width: 800px;
-  height: 400px;
+  width: 95%;
+  height: 95%;
 
   margin: 0 auto;
   padding: 10px;