Remueve clases anidadas

MaximoJSDev · Aug 20, 2024 · 3bfcb94 · 3bfcb94
1 parent d1897b2
commit 3bfcb94
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 65 deletions.
diff --git a/src/components/Habilidades.astro b/src/components/Habilidades.astro
@@ -39,71 +39,65 @@
       "frontend mantenimiento mantenimiento";
     grid-template-columns: 380px 1fr;
     gap: 30px;
-
-    article {
-      position: relative;
-      background-size: cover;
-      background-repeat: no-repeat;
-    }
-    article::after {
-      content: "";
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-    }
-    article * {
-      position: relative;
-      z-index: 11;
-    }
-    .frontend {
-      grid-area: frontend;
-      background-image: url("/images/frontend.webp");
-      background-position-y: center;
-      background-position-x: 30%;
-    }
-    .frontend h3 {
-      font-size: 24px;
-      margin-bottom: 40px;
-    }
-    .frontend p {
-      font-size: 22px;
-      margin-bottom: 22px;
-    }
-    .frontend::after {
-      background-color: rgba(33, 35, 55, 0.85);
-    }
-    .ui-ux {
-      grid-area: diseño;
-      background-image: url("/images/ui-ux.webp");
-      background-position-x: center;
-      background-position-y: 55%;
-    }
-    .ui-ux::after {
-      background-color: rgba(71, 66, 66, 0.85);
-    }
-    .mantenimiento {
-      grid-area: mantenimiento;
-      background-image: url("/images/backend.webp");
-      background-position: center;
-    }
-    .mantenimiento::after {
-      background-color: rgba(40, 20, 47, 0.67);
-    }
-    h3 {
-      font-size: 24px;
-      margin-bottom: 20px;
-    }
-    p {
-      font-size: 22px;
-      margin-bottom: 22px;
-    }
   }
-  .habilidades__grid article {
+  .habilidad {
+    position: relative;
+    background-size: cover;
+    background-repeat: no-repeat;
+    cursor: default;
     padding: 40px;
     border-radius: 10px;
     overflow: hidden;
   }
+  .habilidad::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .habilidad * {
+    position: relative;
+    z-index: 11;
+  }
+  .frontend {
+    grid-area: frontend;
+    background-image: url("/images/frontend.webp");
+    background-position-y: center;
+    background-position-x: 30%;
+  }
+  .frontend::after {
+    background-color: rgba(33, 35, 55, 0.85);
+  }
+  .ui-ux {
+    grid-area: diseño;
+    background-image: url("/images/ui-ux.webp");
+    background-position-x: center;
+    background-position-y: 55%;
+  }
+  .ui-ux::after {
+    background-color: rgba(71, 66, 66, 0.85);
+  }
+  .mantenimiento {
+    grid-area: mantenimiento;
+    background-image: url("/images/backend.webp");
+    background-position: center;
+  }
+  .mantenimiento::after {
+    background-color: rgba(40, 20, 47, 0.67);
+  }
+  .habilidad h3 {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+  .habilidad p {
+    font-size: 22px;
+    margin-bottom: 22px;
+  }
+  .frontend h3 {
+    margin-bottom: 40px;
+  }
+
   .habilidad:hover {
     --active: 1;
   }
@@ -120,8 +114,4 @@
     opacity: var(--active, 0);
     z-index: 11;
   }
-  .habilidad {
-    position: relative;
-    cursor: default;
-  }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -176,7 +176,10 @@ import SobreMi from "@/components/SobreMi.astro";
 
 	@media (max-width: 500px) {
 		#nav {
-			padding-top: 	5px;
+			padding-top: 8px;
+		}
+		#inicio#inicio {
+			margin-top: 35px;
 		}
 		#inicio .inicio__title {
 			font-size: clamp(28px, 8.5vw, 32px); //32px;