Add SVG pattern on background

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;