Atv02: Adicionado adaptação para telas menores

Davi-D18 · Oct 15, 2024 · 74746ac · 74746ac
1 parent 49d18f9
commit 74746ac
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 21 deletions.
diff --git a/src/activities/atv02_padrinhos-magicos/src/styles/index.css b/src/activities/atv02_padrinhos-magicos/src/styles/index.css
@@ -15,7 +15,7 @@ header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  max-width: 1200px;
+  max-width: 90vw;
   margin: auto;
 }
 .container-header img {
@@ -49,19 +49,17 @@ header {
 }
 
 .container-main {
-  max-width: 1300px;
+  max-width: 90vw;
   margin: auto;
 }
 
 body {
   background-color: #181818;
   cursor: url("../assets/cursor/varinha-magica.png") 27 4, auto;
-  fallback: auto;
 }
 
 button, a {
   cursor: url("../assets/cursor/varinha-magica-hover.png") 27 4, auto;
-  fallback: auto;
 }
 
 main {
@@ -130,4 +128,25 @@ footer a::after {
 }
 footer a:hover::after {
   width: 100%;
+}
+
+@media (max-width: 768px) {
+  header {
+    padding-bottom: 1.5rem;
+  }
+  .container-header {
+    flex-direction: column;
+    gap: 2rem;
+  }
+  .ep-description h1, .ep-description span {
+    font-size: 28px;
+  }
+  .card-ep {
+    align-items: center;
+  }
+}
+@media (max-width: 481px) {
+  .ep-description img {
+    display: none;
+  }
 }/*# sourceMappingURL=index.css.map */
diff --git a/src/activities/atv02_padrinhos-magicos/src/styles/index.css.map b/src/activities/atv02_padrinhos-magicos/src/styles/index.css.map
diff --git a/src/activities/atv02_padrinhos-magicos/src/styles/index.scss b/src/activities/atv02_padrinhos-magicos/src/styles/index.scss
@@ -22,7 +22,7 @@ header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  max-width: 1200px;
+  max-width: 90vw;
   margin: auto;
 
   img {
@@ -67,19 +67,17 @@ header {
 // Estilos do conteúdo principal (Main)
 
 .container-main {
-  max-width: 1300px;
+  max-width: 90vw;
   margin: auto;
 }
 
 body {
   background-color: $fundo-main;
   cursor: url('../assets/cursor/varinha-magica.png') 27 4, auto;
-  fallback: auto; // se o navegador não suportar o cursor personalizado ou se o arquivo não for carregado, o navegador usará o cursor padrão
 }
 
 button, a {
   cursor: url("../assets/cursor/varinha-magica-hover.png") 27 4, auto;
-  fallback: auto;
 }
 
 main {
@@ -163,3 +161,32 @@ footer {
     }
   }
 }
+
+@media (max-width: 768px) {
+  header {
+    padding-bottom: 1.5rem;
+  }
+
+  .container-header {
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .ep-description {
+    h1, span {
+      font-size: 28px;
+    }
+  }
+
+  .card-ep {
+    align-items: center;
+  }
+}
+
+@media (max-width: 481px) {
+  .ep-description {
+    img {
+      display: none;
+    }
+  }
+}
diff --git a/src/css/footer.css b/src/css/footer.css
@@ -3,12 +3,18 @@ footer {
   padding: 10px;
   background-color: #282828;
   color: white;
-  position: fixed;
+  position: absolute;
   bottom: 0;
   width: 100%;
 }
 
 
 footer > p > span {
   margin-top: 9px;
+}
+
+@media (max-width: 768px) {
+  footer {
+    position: initial;
+  }
 }
diff --git a/src/js/info-atividades.js b/src/js/info-atividades.js
@@ -3,17 +3,17 @@ const description = "Imagem referente ao site dessa atividade"
 
 export const activities = [
   {
-    "title": "Atividade 01: Projeto Get Coffe",
-    "description": "Desenvolvimento de um site sobre café para atrair clientes",
-    "link": "./src/activities/atv01_projeto-coffe",
-    "image": "./src/assets/screenshots/get-coffe.png",
-    "alt": `${description}`
+    title: "Atividade 01: Projeto Get Coffe",
+    description: "Desenvolvimento de um site sobre café para atrair clientes",
+    link: "./src/activities/atv01_projeto-coffe",
+    image: "./src/assets/screenshots/get-coffe.png",
+    alt: `${description}`,
   },
   {
-    "title": "Atividade 02: Padrinhos Mágicos",
-    "description": "Criação de um site falando sobre os padrinhos mágicos",
-    "link": "./src/activities/atv02_padrinhos-magicos",
-    "image": "./src/assets/screenshots/padrinhos-magicos.png",
-    "alt": `${description}`
-  }
+    title: "Atividade 02: Padrinhos Mágicos",
+    description: "Criação de um site falando sobre os padrinhos mágicos",
+    link: "./src/activities/atv02_padrinhos-magicos",
+    image: "./src/assets/screenshots/padrinhos-magicos.png",
+    alt: `${description}`,
+  },
 ];