Add SVG pattern on background

src/App.vue

@@ -27,20 +27,20 @@ export default {
 }
 
 main {
-  padding: 1rem;
+  padding: 2rem 1rem 1rem 1rem;
-  margin: 58px auto 0 auto;
+  background-color: @secondary-color;
-  max-width: 1200px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='%230c9696' fill-opacity='0.35'%3E%3Cpath fill-rule='evenodd' d='M29.42 29.41c.36-.36.58-.85.58-1.4V0h-4v26H0v4h28c.55 0 1.05-.22 1.41-.58h.01zm0 29.18c.36.36.58.86.58 1.4V88h-4V62H0v-4h28c.56 0 1.05.22 1.41.58zm29.16 0c-.36.36-.58.85-.58 1.4V88h4V62h26v-4H60c-.55 0-1.05.22-1.41.58h-.01zM62 26V0h-4v28c0 .55.22 1.05.58 1.41.37.37.86.59 1.41.59H88v-4H62zM18 36c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm16-26a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 58a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 78a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zM34 4a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm-8 82a2 2 0 1 1 4 0v2h-4v-2zm0-68a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V18zM66 4a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm0 72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm-48 0a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm0-72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm24-4h4v2a2 2 0 1 1-4 0V0zm0 60a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V60zm14-24c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm-28-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM36 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-8-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 68a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-34a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-12a2 2 0 1 0 0 4 6 6 0 1 1 0 12 2 2 0 1 0 0 4 10 10 0 1 0 0-20zm-64 0a2 2 0 1 1 0 4 6 6 0 1 0 0 12 2 2 0 1 1 0 4 10 10 0 1 1 0-20zm56-12a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-48 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm24 32a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-4a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm36-36a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM10 44c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm56 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm8 24c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zM3 68c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm0-48c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm71 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm6 66a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM8 86a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-68A6 6 0 1 1 8 2a6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm36 36a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-color: rgba(0, 0, 0, 0.06);
 
   h2 {
-    width: -webkit-max-content;
+    margin: 0 auto 1rem auto;
-    width: -moz-max-content;
     width: max-content;
-    padding-right: 1rem;
+    padding: 0.85rem 2rem 0.75rem 2rem;
-    padding-bottom: 0.35rem;
+    border-radius: 25px;
-    font-size: 26px;
+    font-size: 28px;
-    border-bottom: 2px solid @primary-color;
+    text-align: center;
-    margin-bottom: 1.35rem;
+    background-color: #ffffff;
-    text-align: left;
   }
 
   h3 {

src/components/Grid.vue

@@ -25,15 +25,15 @@ export default {
   column-gap: 1rem;
   row-gap: 1.5rem;
 
-  @media screen and (min-width: @sm) {
-    grid-template-columns: 1fr 1fr;
-  }
-
   @media screen and (min-width: @md) {
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
 
   @media screen and (min-width: @lg) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media screen and (min-width: @xl) {
     grid-template-columns: repeat(4, 1fr);
   }
 }

src/components/GridItem.vue

@@ -28,8 +28,8 @@ export default {
 
 <style scoped lang="less">
 .grid-item {
+  background-color: @secondary-color;
   border-radius: 10px;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
   overflow: hidden;
 
   &:hover .thumbnail img {
@@ -74,7 +74,7 @@ export default {
 
       .tag {
         border-radius: 25px;
-        padding: 0.55rem;
+        padding: 0.55rem 0.75rem 0.35rem 0.75rem;
         margin-left: 0.75rem;
         color: #ffffff;
         font-size: 14px;

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="main-nav">
+  <nav id="header" class="main-nav">
     <img src="https://www.cycloid.io/themes/cycloid/images/owl_logo.png" alt="Cycloid.io" />
     <h1>Fruits</h1>
   </nav>
@@ -7,7 +7,20 @@
 
 <script>
 export default {
-  name: "Header"
+  name: "Header",
+  created() {
+    // const header = document.getElementById("header");
+    // this.observeElmt(header);
+  },
+  methods: {
+    // observeElmt(elmt) {
+    //   const observer = new IntersectionObserver(
+    //     ([e]) => e.target.classList.toggle("box-shadow", e.intersectionRatio < 1),
+    //     { threshold: [1] }
+    //   );
+    //   observer.observe(elmt);
+    // }
+  }
 };
 </script>
 
@@ -17,7 +30,8 @@ nav {
   align-items: center;
   background-color: @secondary-color;
   padding: 0.5rem;
-  box-shadow: 0 19px 34px -15px #d2d2f2;
+  // TODO: Use
+  box-shadow: 0 0px 14px 0px #cecece;
 
   h1 {
     margin: 0;
@@ -26,9 +40,11 @@ nav {
   }
 
   &.main-nav {
-    position: fixed;
+    position: sticky;
     top: 0;
     left: 0;
+    right: 0;
+    transition: all 0.3s ease-in-out;
     width: 100%;
     height: calc(58px - 0.5rem * 2);
     z-index: 15;

src/views/Fruits.vue

@@ -20,3 +20,10 @@ export default {
   }
 };
 </script>
+
+<style lang="less">
+.fruits {
+  margin: 0 auto;
+  max-width: 1200px;
+}
+</style>