reza added some change

src/views/Home/HomeScroll/index.scss

@@ -10,7 +10,6 @@
     &--right{
       position: relative;
       h1{
-        font-size: calc(100vw / 60);
         font-family: numeralBold;
         letter-spacing: -1px;
       }
@@ -27,7 +26,6 @@
     
     &--more{
       span{
-        font-size: calc(100vw / 75);
         color: #7dc241;
         font-family: numeralMedium;
       }

src/views/Home/HomeSlider/Simple/index.js

@@ -2,6 +2,18 @@ import React, { Component } from 'react';
 import {Link} from 'react-router-dom';
 
 import './index.scss';
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 65,
+    h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
+    notAvailable: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
+    available: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
+  },
+};
+
 export default class Simple extends Component {
   render() {
     const { height, data } = this.props;
@@ -12,24 +24,24 @@ export default class Simple extends Component {
     }}>
         <Link to={`/books/${data.id}`}>
           <img src={data.image} alt={data.title} />
-          <h1>{data.title}</h1>
+          <h1 style={{fontSize : fontSize.desktop.h1 }}>{data.title}</h1>
-          <h2>{data.subTitle}</h2>
+          <h2 style={{fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
           {
             data.price ? 
             <div className="slider-simple__price d-flex justify-content-center">
               {
                 data.oldPrice ? 
                 <div>
-                  <div className="slider-simple__price--old d-flex">
+                  <div style={{fontSize: fontSize.desktop.available }}  className="slider-simple__price--old d-flex">
                     {data.oldPrice} تومان 
                     <span></span>
                   </div>
                   
                 </div> : null
               }
-              <div className="slider-simple__price--price">{data.price} تومان</div>
+              <div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--price">{data.price} تومان</div>
             </div> : 
-            <div className="slider-simple__notAvailabe">ناموجود</div>
+            <div style={{fontSize: fontSize.desktop.notAvailable }} className="slider-simple__notAvailabe">ناموجود</div>
           }
         </Link>
       </article>

src/views/Home/HomeSlider/Simple/index.scss

@@ -14,27 +14,23 @@
     h1{
       font-family: numeralBold;
       margin-top: 15px;
-      font-size: calc(100vw / 70);
       color: #7dc241;
       letter-spacing: -1px;
     }
     h2{
       font-family: numeralLight;
       margin-top: 10px;
-      font-size: calc(100vw / 95);
       color: #6f7074;
     }
   }
   &__notAvailabe{
     font-family: numeralBold;
-    font-size: calc(100vw / 80);
     width : 100%;
     text-align: center;
     color: #6f7074;
     margin-top: 15px;
   }
   &__price{
-    font-size: calc(100vw / 85);
     width : 100%;
     margin-top: 15px;
     text-align: center;
@@ -44,7 +40,6 @@
       position: relative;
       margin-left: 10px;
       align-items:center;
-      font-size: calc(100vw / 80);
       span{
         position: absolute;
         left: 0px;

src/views/Home/HomeSlider/index.js

@@ -8,17 +8,26 @@ import dropdown from "../../../assets/icons/dropdown.png";
 
 import "./index.scss";
 
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65,
+    span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
+  },
+};
+
 const SimpleHeader = (props) => {
   return (
     <>
       {window.innerWidth > 1000 ? (
         <div className="home-scroll__header d-flex">
           <div className="home-scroll__header--right d-flex">
-            <h1>{props.title}</h1>
+            <h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1>
             <span></span>
           </div>
           <div className="home-scroll__header--more d-flex">
-            <span>ادامه لیست</span>
+            <span style={{ fontSize: fontSize.desktop.h1 }}>ادامه لیست</span>
             <img src={dropdown} alt="فلش" />
           </div>
         </div>

src/views/Home/HomeStatic/index.js

@@ -2,6 +2,15 @@ import React, { Component } from "react";
 import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
 
 import "./index.scss";
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    h2: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
+  },
+};
+
 export default class HomeStatic extends Component {
   render() {
     const { data, height, title } = this.props;
@@ -49,8 +58,8 @@ const Item = (props) => {
           className="home-static__list--item d-flex"
         >
           <div className="d-flex flex-column">
-            <h2 style={{ color: "#02733c" }}>{props.data.topText}</h2>
+            <h2 style={{ color: "#02733c", fontSize: fontSize.desktop.h2 }}>{props.data.topText}</h2>
-            <h2 style={{ color: "#7dc241" }}>{props.data.bottomText}</h2>
+            <h2 style={{ color: "#7dc241", fontSize: fontSize.desktop.h2 }}>{props.data.bottomText}</h2>
           </div>
           <img src={props.data.image} alt="عکس" />
         </div>

src/views/Home/HomeStatic/index.scss

@@ -19,8 +19,8 @@
       }
       img {
         margin-right: 20px;
-        transform: scale(0.9);
         border-radius: 10px;
+        width: 80px;
       }
     }
   }

src/views/Home/Navbar/Laptop/index.js

@@ -4,6 +4,17 @@ import { Link } from "react-router-dom";
 import logo from '../../../../assets/icons/logo.png';
 
 import "./index.scss";
+
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    li: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
+    a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
+  },
+};
+
 export default class LaptopNavbar extends Component {
   render() {
     const { links } = this.props;
@@ -15,15 +26,15 @@ export default class LaptopNavbar extends Component {
           </div>
           <ul className="laptop-navbar__list d-flex">
             {links.map((item, i) => (
-              <li key={i}>
+              <li style={{fontSize : fontSize.desktop.li }} key={i}>
                 <Link to={item.to}>{item.name}</Link>
               </li>
             ))}
           </ul>
         </div>
         <div className="d-flex">
-          <Link to={'/signin'} className="laptop-navbar__signin">ورود به حساب کاربری</Link>
+          <Link style={{fontSize : fontSize.desktop.a }} to={'/signin'} className="laptop-navbar__signin">ورود به حساب کاربری</Link>
-          <Link to={'/signup'} className="laptop-navbar__signup">ثبت نام</Link>
+          <Link style={{fontSize : fontSize.desktop.a }} to={'/signup'} className="laptop-navbar__signup">ثبت نام</Link>
         </div>
       </nav>
     );

src/views/Home/Navbar/Laptop/index.scss

@@ -20,7 +20,6 @@
       margin: 0px 10px;
       padding: 0px 15px;
       text-decoration: none;
-      font-size: calc(100vw / 90);
       a{
         text-decoration: none;
         color: #6f7074;
@@ -36,7 +35,6 @@
     color: #6cbe44;
     padding : 10px 20px;
     margin-left: 12px;
-    font-size: calc(100vw / 90);
     &:hover{
       color: #6cbe44;
     }
@@ -49,7 +47,6 @@
     background-color: #6cbe44;
     border-radius: 6px;
     padding : 10px 20px;
-    font-size: calc(100vw / 90);
     &:hover{
       color: white;
     }

src/views/Home/SingleBlog/index.js

@@ -2,6 +2,17 @@ import React, { Component } from "react";
 import {Link} from 'react-router-dom';
 
 import "./index.scss";
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 28 : window.innerWidth / 45,
+    p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
+    a: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
+  },
+};
+
 export default class SingleBlog extends Component {
   render() {
     const { height, data, direction } = this.props;
@@ -11,9 +22,9 @@ export default class SingleBlog extends Component {
         className="single-blog d-flex"
       >
         <div className="single-blog__right d-flex flex-column justify-content-center">
-          <h1>{data.title}</h1>
+          <h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
-          <p>{data.subTitle}</p>
+          <p style={{fontSize: fontSize.desktop.p }}>{data.subTitle}</p>
-          <Link to={data.link}>
+          <Link style={{fontSize : fontSize.desktop.a }} to={data.link}>
             {data.buttonText}
           </Link>
         </div>

src/views/Home/SingleBlog/index.scss

@@ -9,12 +9,10 @@
     h1{
       font-family: numeralBold;
       color: #1bbc6e;
-      font-size: calc(100vw / 45);
       text-align: justify;
     }
     p{
       font-family: numeralLight;
-      font-size: calc(100vw / 110);
       text-align: justify;
       margin-top: 15px;
       color: #a5a5a5;