From 9ef46d750685cf8114b70e058ce433e5a0c54161 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Mon, 22 Jan 2024 18:05:10 +0100
Subject: [PATCH] Make homepage responsive

---
 assets/scss/custom.scss | 199 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 199 insertions(+)

diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index edd7f3c..cb9dd53 100755
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -398,3 +398,202 @@ figure.image {
     }
     figcaption {}
 }
+
+@media screen and (max-width: 1279px) {
+  section {
+    &.li-block {
+      &.section-5 {
+        .container .row {
+          ul {
+            flex-wrap: wrap;
+          }
+          ul li {
+            flex: 30%;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+@media screen and (max-width: 1023px) {
+  main > section {
+    &.section-4 {
+      h4 {
+        height: 224px;
+      }
+      .btn-primary {
+        top: 56%;
+      }
+    }
+  }
+
+  section {
+    &.li-block {
+      &.section-5 {
+        .container .row {
+          ul {
+            flex-wrap: wrap;
+          }
+          ul li {
+            flex: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  main > section {
+    &.hero {
+      height: 110vh;
+    }
+    &.section-3 {
+      h2:before {
+        top: -70%;
+        left: 5%;
+        z-index: -1;
+      }
+    }
+    &.section-4 {
+      h4 {
+        height: 280px;
+      }
+      .btn-primary {
+        top: 64%;
+      }
+    }
+  }
+
+  section {
+    &.li-block {
+      .container .row {
+        & > div {
+          ul {
+            flex-direction: column;
+            li {
+              margin-bottom: 4rem;
+            }
+          }
+        }
+      }
+      // Add custom colored icons on each item
+      &.section-1 {
+        ul li {
+          &:nth-child(1) {
+            top: -66%;
+          }
+          &:nth-child(2) {
+            top: -66%;
+          }
+          &:nth-child(3):before {
+            top: -85%;
+          }
+          &:nth-child(4):before {
+            top: -85%;
+          }
+        }
+      }
+      &.section-5 {
+        .container .row {
+          ul {
+            flex-wrap: wrap;
+          }
+          ul li {
+            flex: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 513px) {
+  main > section {
+    &.hero {
+      height: 120vh;
+    }
+    &.section-4 {
+      h4 {
+        font-size: 1.1rem;
+      }
+      .btn-primary {
+        top: 64%;
+      }
+    }
+    &.section-5 {
+      .container .row {
+        ul li {
+          width: 350px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 470px) {
+  main > section {
+    &.section-4 {
+      h4 {
+        height: 280px;
+      }
+      .btn-primary {
+        top: 64%;
+      }
+    }
+  }
+
+  section {
+    &.li-block {
+      &.section-1 {
+        ul li {
+          &:nth-child(3):before {
+            top: -70%;
+          }
+          &:nth-child(4):before {
+            top: -70%;
+          }
+        }
+      }
+
+      &.section-5 {
+        .container .row {
+          ul {
+            flex-wrap: wrap;
+          }
+          ul li {
+            width: 350px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 420px) {
+  section {
+    &.li-block {
+/*      &.section-1 {
+        ul li {
+          &:nth-child(3):before {
+            top: -70%;
+          }
+          &:nth-child(4):before {
+            top: -70%;
+          }
+        }
+      }*/
+
+      &.section-5 {
+        .container .row {
+          ul li {
+            width: 300px;
+          }
+        }
+      }
+    }
+  }
+}
+