changes for repsonsive

src/assets/demo.css

@@ -164,3 +164,43 @@
 .section-examples h5{
     margin-top: 30px;
 }
+
+
+.leaf1,
+.leaf3,
+.leaf4,
+.leaf2 {
+  position: absolute;
+  z-index: 9;
+}
+
+.leaf4 {
+  right: 172px;
+  top: -122px;
+  width: 17%;
+  width: 32%;
+  transform: rotate(-83deg);
+}
+
+.leaf3 {
+  top: 21px;
+  right: -69px;
+  left: auto;
+  width: 24%;
+  transform: rotate(-13deg);
+}
+
+.leaf2 {
+  width: 25%;
+  left: 170px;
+  top: -28px;
+  transform: rotate(90deg);
+}
+
+.leaf1 {
+  transform: rotate(0deg);
+  right: auto;
+  top: 25px;
+  width: 15%;
+  left: -11px;
+}

src/assets/scss/material-kit/_responsive.scss

@@ -354,6 +354,16 @@
     }
   }
 
+  .index-page .brand h1 {
+    font-size: 4.3rem;
+  }
+
+  .index-page .brand h3 {
+    max-width: 500px;
+    line-height: normal;
+    font-size: 1.7rem;
+  }
+
   .nav-tabs {
     overflow: auto;
   }
@@ -442,3 +452,9 @@
       max-width: 1140px;
   }
 }
+
+@media screen and (max-width: 450px) {
+  .index-page .brand {
+    max-width: 300px;
+  }
+}

src/views/Index.vue

@@ -288,63 +288,4 @@ export default {
     display: flex;
   }
 }
-
-.leaf1,
-.leaf3,
-.leaf4,
-.leaf2 {
-  position: absolute;
-  z-index: 9;
-}
-
-.leaf4 {
-  right: 172px;
-  top: -122px;
-  width: 17%;
-  width: 32%;
-  transform: rotate(-83deg);
-}
-
-.leaf3 {
-  top: 21px;
-  right: -69px;
-  left: auto;
-  width: 24%;
-  transform: rotate(-13deg);
-}
-
-.leaf2 {
-  width: 25%;
-  left: 170px;
-  top: -28px;
-  transform: rotate(90deg);
-}
-
-.leaf1 {
-  transform: rotate(0deg);
-  right: auto;
-  top: 25px;
-  width: 15%;
-  left: -11px;
-}
-
-@media all and (max-width: 768px) {
-  .index-page .image-wrapper /deep/ .brand {
-    h1 {
-      font-size: 4.3rem;
-    }
-
-    h3 {
-      max-width: 500px;
-      line-height: normal;
-      font-size: 1.7rem;
-    }
-  }
-}
-
-@media all and (max-width: 450px) {
-  .index-page .image-wrapper /deep/ .brand {
-    max-width: 300px;
-  }
-}
 </style>