make home responsive

HectorVilas · Apr 30, 2023 · 35ca87f · 35ca87f
1 parent 99cabf1
commit 35ca87f
Showing 1 changed file with 42 additions and 1 deletion.
diff --git a/styles/home.css b/styles/home.css
@@ -184,4 +184,45 @@
 .category-card img {
   width: 100%;
   align-self: self-end;
-}
+}
+
+/* responsiveness */
+
+@media only screen and (max-width: 800px) {
+  /* hero section */
+  .home-hero {
+    grid-template-areas: "hero-div hero-div";
+    justify-items: center;
+    background-position: 40%;
+  }
+  .home-hero-div {
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .home-hero-div svg {
+    transform: none;
+  }
+  .home-hero-div p {
+    transform: none;
+  }
+
+  /* about section */
+  .home-about {
+    isolation: isolate;
+    position: relative;
+    grid-template-areas: none;
+  }
+  .home-about-div {
+    z-index: 1;
+  }
+  .home-about-image-div {
+    border: none;
+    opacity: .25;
+  }
+  .home-about-image-div img {
+    border: none;
+    transform: translateX(-10px);
+  }
+}