responsive

src/app/app.component.scss

@@ -42,7 +42,7 @@ app-header {
     display: flex;
     justify-content: center;
     width: calc(100vw - 64px);
-    height: calc(100vh - 210px);
+    height: calc(100vh - 240px);
     padding: 32px;
   }
   app-sidebar {
@@ -58,7 +58,6 @@ app-header {
     display: flex;
     justify-content: center;
     width: calc(100vw - 32px);
-    height: calc(100vh - 210px);
     padding: 32px 16px;
   }
 }

src/app/components/summary/summary.component.html

@@ -10,8 +10,10 @@
       <div class="top-frame">
         <div class="todo-done" routerLink="/board">
           <div class="circle">
+            <div class="inline">
               <img src="./../../../assets/img/summary/pencil.svg" alt="" />
             </div>
+          </div>
           <div class="details">
             <span>{{ todoTasksCount }}</span>
             <p>To-do</p>
@@ -57,19 +59,19 @@
         <div class="tasks" routerLink="/board">
           <div class="details">
             <span>{{ allTasksCount }}</span>
-            <p>Task in Board</p>
+            <p>Task<br />in Board</p>
           </div>
         </div>
         <div class="tasks" routerLink="/board">
           <div class="details">
             <span>{{ inprogressTasksCount }}</span>
-            <p>Task in Progress</p>
+            <p>Task in<br />Progress</p>
           </div>
         </div>
         <div class="tasks" routerLink="/board">
           <div class="details">
             <span>{{ awaitfeedbackTasksCount }}</span>
-            <p>Awaiting Feedback</p>
+            <p>Awaiting<br />Feedback</p>
           </div>
         </div>
       </div>

src/app/components/summary/summary.component.scss

@@ -1,7 +1,11 @@
+section {
+  padding-bottom: 32px;
+}
+
 .header {
   display: flex;
   align-items: center;
-  padding-left: 24px;
+  position: relative;
   height: 73px;
   .title {
     font-size: 61px;
@@ -22,7 +26,7 @@
 
 .content {
   display: flex;
-  padding: 24px;
+  margin-top: 48px;
 }
 
 .right-container {
@@ -70,6 +74,10 @@
     transform: scale(1.02);
     transition: 500ms ease-out;
     background-color: var(--dark-blue);
+    p,
+    span {
+      color: var(--white);
+    }
     .circle {
       background-color: var(--white);
       img {
@@ -77,12 +85,6 @@
           brightness(104%) contrast(101%);
       }
     }
-    p {
-      color: var(--white);
-    }
-    span {
-      color: var(--white);
-    }
   }
 }
 
@@ -173,3 +175,164 @@
     }
   }
 }
+
+@media screen and (max-width: 700px) {
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    padding-left: 0;
+    height: 100%;
+    .metrics-txt {
+      padding-left: 0;
+    }
+    .blue-bar {
+      position: absolute;
+      bottom: -15px;
+      height: 3px;
+      width: 100px;
+    }
+  }
+}
+
+@media screen and (max-width: 650px) {
+  .left-container {
+    width: calc(100vw - 80px);
+    height: 100%;
+  }
+
+  .todo-done,
+  .urgent,
+  .tasks {
+    width: 100%;
+    height: 150px;
+    border-radius: 30px;
+  }
+
+  .circle {
+    margin-left: 10%;
+  }
+
+  .urgent {
+    margin: 20px 0;
+    img {
+      margin-left: 10%;
+    }
+  }
+
+  .todo-done {
+    &:first-child {
+      margin-right: 20px;
+    }
+  }
+
+  .tasks {
+    &:nth-child(2) {
+      margin: 0 20px;
+    }
+  }
+}
+
+@media screen and (max-width: 520px) {
+  .todo-done,
+  .tasks {
+    .circle {
+      width: 40px;
+      height: 40px;
+    }
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .urgent {
+    img {
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  .details {
+    p {
+      font-size: 16px;
+    }
+    span {
+      font-size: 38px;
+    }
+  }
+
+  .tasks {
+    .details {
+      p {
+        padding: 16px 0 0 0;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 450px) {
+  section {
+    width: calc(100vw - 32px);
+  }
+
+  .left-container {
+    width: calc(100vw - 32px);
+    height: 100%;
+  }
+
+  .todo-done,
+  .urgent,
+  .tasks {
+    width: 100%;
+    height: 120px;
+    border-radius: 30px;
+    .line {
+      height: 80px;
+    }
+  }
+
+  .date {
+    p {
+      font-size: 14px;
+    }
+    span {
+      font-size: 18px;
+    }
+  }
+}
+
+@media screen and (max-width: 350px) {
+  .todo-done,
+  .urgent,
+  .tasks {
+    height: 100px;
+  }
+
+  .details {
+    p {
+      padding: 0 12px;
+      font-size: 14px;
+    }
+    span {
+      font-size: 32px;
+    }
+  }
+
+  .date {
+    p {
+      font-size: 14px;
+    }
+    span {
+      font-size: 18px;
+    }
+  }
+
+  .tasks {
+    height: 120px;
+    .details {
+      p {
+        padding: 8px 0;
+      }
+    }
+  }
+}