make compatible with theme updates

home-cloud-io · Sep 18, 2024 · f577375 · f577375
1 parent d7d8417
commit f577375
Show file tree

Hide file tree

Showing 3 changed files with 275 additions and 0 deletions.
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
@@ -9,10 +9,13 @@ $site-ease: cubic-bezier(0.77, 0, 0.175, 1);
 $border-color: #e3d0fc;
 $box-shadow: #e3d0fc;
 $footer-color: e3d0fc;
+$nav-color: $body-color;
 
 // solid colors
 $white: #fff;
 $black: #000;
 
+@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700");
+
 // Font Variables
 $primary-font: 'Poppins',sans-serif;
diff --git a/assets/scss/components/_getting-started.scss b/assets/scss/components/_getting-started.scss
@@ -0,0 +1,241 @@
+.getting-started {
+  margin-top: -150px;
+  padding-bottom: 100px;
+  @include mobile {
+    margin-top: -100px;
+  }
+  &-post {
+    padding-bottom: 100px;
+    @include mobile {
+      padding-bottom: 50px;
+    }
+    &-item {
+      background-color: $white;
+      box-shadow: 0px 20px 25px rgba(67, 103, 90, 0.1);
+      border-radius: 10px;
+      margin-bottom: 50px;
+      padding: 15px 15px 20px;
+      transition: 0.3s ease;
+      &:hover {
+        transform: scale(1.02);
+      }
+      @include desktop {
+        margin-bottom: 30px;
+      }
+    }
+    &-thumb {
+      img {
+        width: 100%;
+        border-radius: 10px;
+      }
+      margin-bottom: 18px;
+    }
+    &-content {
+      padding: 0 8px;
+      h2 {
+        line-height: 28px;
+        margin-bottom: 10px;
+        a {
+          font-size: 20px;
+          font-weight: 600;
+          display: block;
+          color: $text-color-dark;
+          text-decoration: none;
+          transition: 0.3s ease;
+          min-height: 56px;
+          &:hover {
+            color: rgba($color: $primary-color, $alpha: 0.7);
+          }
+        }
+      }
+      .post-author {
+        display: flex;
+        align-items: center;
+        .thumb {
+          width: 46px;
+          height: 46px;
+          border-radius: 50%;
+          overflow: hidden;
+          margin-right: 15px;
+          img {
+            width: 100%;
+          }
+        }
+        .meta {
+          h3 {
+            font-size: 15px;
+            margin-bottom: 0;
+            font-weight: 600;
+          }
+          p {
+            margin-bottom: 0;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+    .see-all-post {
+      margin-top: 40px;
+      text-align: center;
+      margin: 0 auto;
+    }
+  }
+  &-pagination {
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    margin-top: 30px;
+    ul {
+      padding: 0;
+      margin: 0;
+      .page-item {
+        .page-link {
+          width: 50px;
+          height: 50px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 16px;
+          font-weight: 500;
+          padding: 0;
+          text-align: center;
+          border-radius: 4px;
+          border: none;
+          color: $text-color-dark;
+          margin-right: 20px;
+          background-color: rgba($color: $primary-color, $alpha: 0.1);
+          transition: all 0.3s ease-in-out;
+          z-index: 99;
+          position: relative;
+          @include mobile {
+            width: 60px;
+            height: 60px;
+            font-size: 25px;
+            margin-right: 15px;
+          }
+          &:hover {
+            background: $primary-color;
+            color: $white;
+          }
+        }
+        &.active .page-link {
+          background-color: $primary-color;
+          color: $white;
+        }
+      }
+    }
+  }
+  &-single {
+    position: relative;
+    margin-top: -150px;
+    margin-bottom: 50px;
+    border-radius: 10px;
+    @include mobile {
+      margin-top: -100px;
+    }
+    &-post {
+      padding: 50px 40px 50px;
+      background-color: $white;
+      box-shadow: 0px 5px 25px rgba(25, 24, 29, 0.1);
+      border-radius: 20px;
+      @include mobile {
+        padding: 30px;
+      }
+      img {
+        max-height: 50%;
+        max-width: 50%;
+        margin-bottom: 30px;
+        border-radius: 20px;
+        display: block;
+        margin: 1.0rem auto;
+        height: auto;
+      }
+      .post-title {
+        width: 90%;
+        margin: 0 auto 30px;
+        font-size: 35px;
+        @include desktop {
+          font-size: 30px;
+          line-height: 40px;
+          width: 100%;
+        }
+      }
+      h2 {
+        font-size: 30px;
+        line-height: 50px;
+        text-align: center;
+        margin-bottom: 20px;
+        @include desktop {
+          font-size: 25px;
+          line-height: 40px;
+        }
+      }
+      p {
+        margin-bottom: 30px;
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+      ul {
+        padding: 0 0 0 20px;
+        margin: 0 0 40px;
+        li {
+          list-style: none;
+          display: block;
+          position: relative;
+          line-height: 28px;
+          font-size: 18px;
+          padding-left: 30px;
+          width: 65%;
+          margin-bottom: 20px;
+          @include tablet {
+            width: 100%;
+          }
+          &::before {
+            position: absolute;
+            content: "";
+            background: rgba($color: $primary-color, $alpha: 0.7);
+            width: 12px;
+            height: 12px;
+            border-radius: 4px;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+      }
+    }
+    &-header {
+      .post-meta {
+        margin: 50px auto 0;
+        @include mobile {
+          margin-top: 25px;
+        }
+        ul {
+          margin: 0 auto;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          list-style: none;
+          padding: 0;
+          li {
+            color: $text-color-dark;
+            &:not(:last-child) {
+              margin-right: 30px;
+            }
+            img {
+              width: 50px;
+              height: 50px;
+              border-radius: 50%;
+            }
+            h5 {
+              font-size: 18px;
+              font-weight: 500;
+              margin: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/assets/scss/non-critical.scss b/assets/scss/non-critical.scss
@@ -0,0 +1,31 @@
+@import "variables";
+
+@import "mixins";
+
+@import "plugins/slick";
+
+@import "plugins/slick-theme";
+
+@import "plugins/aos";
+
+@import "plugins/magnific-popup";
+
+@import "common";
+
+@import "components/service";
+
+@import "components/feature";
+
+@import "components/screenshots";
+
+@import "components/faq";
+
+@import "components/testimonial";
+
+@import "components/blog";
+
+@import "components/contact";
+
+@import "components/footer";
+
+@import "components/getting-started";