Add media queries for lg breakpoint

Author: PrinceSumberia

src/index.css

@@ -19,9 +19,13 @@ body {
   font-size: 1.6rem;
   line-height: 1.7;
   color: #1A1053;
-  /* background-color: #fff; */
   background-color: rgb(245, 245, 245);
-  /* background-color: rgba(185, 185, 185, 0.281); */
+}
+
+@media (max-width: 1100px) {
+  body {
+    font-size: 1.4rem
+  }
 }
 
 code {

src/styles/CovidAppStyles.js

@@ -1,4 +1,5 @@
 import colors from "../constants/colors";
+import sizes from "./sizes";
 
 export default {
   header: {
@@ -52,6 +53,11 @@ export default {
     textAlign: "center",
     marginTop: "2.5rem",
     fontSize: "3rem",
+
+    [sizes.down("lg")]: {
+      fontSize: "2.5rem",
+      marginTop: "1.5rem",
+    },
   },
 
   tinyChartArea: {
@@ -64,7 +70,6 @@ export default {
   },
 
   tinyChart: {
-    // width: "50%",
     margin: "2.5rem",
     "& h3": {
       textTransform: "capitalize",

src/styles/DisplayPanelsStyles.js

@@ -1,12 +1,12 @@
 import colors from "../constants/colors";
+import sizes from "./sizes";
 
 export default {
   panel: {
     display: "flex",
     flexDirection: "column",
     marginBottom: "3.5rem",
     marginTop: "3.5rem",
-    // boxShadow: "0 1rem 2rem rgba(0, 0, 0, 0.05)",
     backgroundColor: (props) => (props.isDarkMode ? colors.darkPurple : "#fff"),
     margin: (props) => (props.isMiniPanel ? "3rem 1rem" : "3.5rem 0"),
     padding: (props) => (props.isMiniPanel ? "1.5rem 1.5rem" : "1.5rem 3rem"),
@@ -17,23 +17,19 @@ export default {
         return null;
       }
       return "0 1.5rem 3rem rgba(0, 0, 0, 0.1)";
-      // let color;
-      // let title = props.title.toLowerCase();
-      // if (title === "recovered") {
-      //   color = "rgb(28, 177, 66,.2)";
-      // } else if (title === "deceased") {
-      //   color = "rgb(98, 54, 25,.2)";
-      // } else if (title === "active") {
-      //   color = "rgb(250, 100, 0,.2)";
-      // } else if (title === "confirmed") {
-      //   color = "rgb(249, 52, 94,.2)";
-      // }
-      // return `0 .5rem 3rem ${color}`;
+    },
+
+    [sizes.down("lg")]: {
+      marginBottom: ".5rem",
+      marginTop: "2.5rem",
     },
   },
 
   heading: {
     fontSize: (props) => (props.isMiniPanel ? "1.5rem" : "2rem"),
+    [sizes.down("lg")]: {
+      fontSize: (props) => (props.isMiniPanel ? "1.2rem" : "1.7rem"),
+    },
   },
 
   number: {
@@ -54,6 +50,9 @@ export default {
     fontSize: (props) => (props.isMiniPanel ? "2.2rem" : "3.5rem"),
     paddingTop: ".5rem",
     paddingBottom: ".5rem",
+    [sizes.down("lg")]: {
+      fontSize: (props) => (props.isMiniPanel ? "1.5rem" : "3rem"),
+    },
   },
 
   dataChange: {

src/styles/NavbarStyles.js

@@ -1,9 +1,9 @@
 import colors from "../constants/colors";
+import sizes from "./sizes";
 
 export default {
   nav: {
     marginTop: "12rem",
-    // padding: "2rem 5rem",
   },
   navItems: {
     listStyle: "none",
@@ -42,19 +42,32 @@ export default {
       zIndex: "10",
       position: "relative",
       animation: "$float 2s ease infinite",
+      transition: "all .5s",
+
+      [sizes.down("lg")]: {
+        animation: "none",
+      },
 
       "&::before": {
         content: '""',
         position: "absolute",
         width: "155%",
         height: "110%",
         display: "block",
+        borderRadius: "25px",
+        transform: "translateX(2rem) skewX(10deg)",
         backgroundColor: (props) =>
           props.isDarkMode ? colors.lightPurple : "rgb(245, 245, 245)",
-        transform: "translateX(2rem) skewX(10deg)",
-        borderRadius: "25px",
         zIndex: 10,
+
+        [sizes.down("lg")]: {
+          width: "120%",
+          padding: ".5rem 2.5rem",
+          height: "100%",
+          transform: "translateX(0) skewX(0)",
+        },
       },
+
       "&::after": {
         content: '""',
         position: "absolute",
@@ -67,6 +80,10 @@ export default {
           props.isDarkMode ? "rgba(255,255,255,.6)nop" : colors.lightPurple,
         transform: "translate(-1rem, .1rem) skew(10deg, -5deg)",
         borderRadius: "25px",
+
+        [sizes.down("lg")]: {
+          content: "none",
+        },
       },
     },
   },