Add responsive layout

Author: MathyouMB

src/components/core/TopicCard/TopicCard.style.scss

@@ -3,6 +3,10 @@
   margin-bottom: 1rem;
   width: 20rem;
 
+  @media (max-width: 525px) {
+    width: 100%;
+  }
+
   &__content {
     display: flex;
     flex-direction: column;

src/components/resources/Header/Header.style.scss

@@ -1,10 +1,16 @@
 .header {
-  width: 100vw;
+  // width: 100vw;
   background-color: rgb(255, 255, 255);
   display: flex;
   justify-content: space-evenly;
   align-items: center;
 
+  @media (max-width: 1100px) {
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+  }
+
   &__container {
     width: 75rem;
     padding-left: calc(5% + 9px);
@@ -14,13 +20,24 @@
     justify-content: space-between;
     align-items: center;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1100px) {
       flex-direction: column;
+      width: 95%;
+    }
+
+    @media (max-width: 525px) {
+      padding-left: 0;
+      padding-right: 0;
     }
   }
 
   &__search {
     margin-top: 2rem;
+    width: 100%;
+    @media (max-width: 1100px) {
+      display: flex;
+      justify-content: center;
+    }
   }
 
   &__animation {
@@ -45,13 +62,25 @@
       font-size: 1.4rem;
       color: gray;
     }
+
+    @media (max-width: 1100px) {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      text-align: center;
+      width: 100%;
+    }
   }
 
   &__left {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 34rem;
+    @media (max-width: 1100px) {
+      width: 100%;
+    }
   }
 
   &__right {
@@ -60,6 +89,10 @@
     align-items: center;
     flex-direction: column;
     height: 100%;
+
+    @media (max-width: 1100px) {
+      display: none;
+    }
   }
 }
 

src/components/resources/Header/Search/Search.style.scss

@@ -9,6 +9,10 @@
   font-size: 1.1rem;
   border: 1px solid rgb(205, 205, 205);
 
+  @media (max-width: 525px) {
+    width: 100%;
+  }
+
   i {
     color: rgb(160, 160, 160);
   }

src/components/resources/Sidebar/data/SidebarData.json

@@ -70,6 +70,10 @@
       {
         "title": "Plagirism and Cheating",
         "path": "/academics/plagirism-and-cheating"
+      },
+      {
+        "title": "Carleton vs Other CS Programs",
+        "path": "/academics/carleton-cs-vs-other-cs-programs"
       }
     ]
   },

src/pages/resources.style.scss

@@ -16,6 +16,9 @@
     display: flex;
     align-items: center;
     gap: 3rem;
+    @media (max-width: 420px) {
+      display: none;
+    }
   }
 
   &__cards {