Merge branch 'Pull-Request-Community:staging' into staging

Noamili · web-flow · commit 69caacd48cf4 · 2022-07-10T10:29:51.000+03:00
diff --git a/components/buttons/basicButton.tsx b/components/buttons/basicButton.tsx
@@ -9,7 +9,7 @@ const BasicButton = ({ children, className }: BasicButtonProps) => {
           user-select: none;
           cursor: pointer;
           color: white;
-          font-size: 1.6rem;
+          font-size: 1rem;
           border: none;
           border-radius: 64px;
           background-color: var(--primary);
diff --git a/components/buttons/socialButton.tsx b/components/buttons/socialButton.tsx
@@ -9,7 +9,7 @@ const SocialButton = ({ children, className }: BasicButtonProps) => {
           user-select: none;
           cursor: pointer;
           color: white;
-          font-size: 2.4rem;
+          font-size: 1.5rem;
           border: none;
           border-radius: 100%;
           padding: 10px 0;
diff --git a/components/description/description.module.scss b/components/description/description.module.scss
@@ -7,7 +7,7 @@
   height: max-content;
   display: flex;
   flex-direction: column;
-  font-size: 1.6rem; // Based on 10px.
+  font-size: 1rem; // Based on 16px.
   background-color: var(--background-description);
   box-shadow: 0 0 10px 5px rgb(0, 0, 0, 0.2);
   padding: 95px 25px 97px;
diff --git a/components/layout/navbar/navbar.tsx b/components/layout/navbar/navbar.tsx
@@ -88,7 +88,7 @@ const Navbar = ({ DesHeight }) => {
         </div>
         <Link shallow href="/">
           <a className={className}>
-            <Img className="inner-logo" src="/images/logo-2.0.svg" />
+            <Img className="inner-logo" layout="fill" src="/images/logo-2.0.svg" />
           </a>
         </Link>
       </div>
@@ -165,13 +165,13 @@ const Navbar = ({ DesHeight }) => {
         }
 
         .navbar__title {
-          font-size: 2.2rem;
+          font-size: 1.375rem;
         }
 
         .navbar__navs {
           display: flex;
           align-items: center;
-          font-size: 2.2rem;
+          font-size: 1.375rem;
         }
 
         .navbar__tabs {
@@ -223,7 +223,7 @@ const Navbar = ({ DesHeight }) => {
           }
 
           .navbar__btn > span {
-            font-size: 1.8rem;
+            font-size: 1.125rem;
           }
           .navbar__logo {
             margin: 48px 0 0 -10px;
diff --git a/components/personCard/personCard.module.scss b/components/personCard/personCard.module.scss
@@ -47,7 +47,7 @@
       margin: 0 2px;
 
       & > svg {
-        width: 3rem;
+        width: 1.875rem;
         transition: all 0.2s ease-in;
 
         &:hover {
@@ -59,13 +59,13 @@
   }
 
   &__headline {
-    font-size: 4.8rem;
+    font-size: 3rem;
     font-weight: lighter;
     line-height: 1;
   }
 
   &__desc {
-    font-size: 1.6rem;
+    font-size: 1rem;
     transform: translateY(10px);
   }
 
@@ -92,16 +92,16 @@
     }
 
     &__headline {
-      font-size: 2.8rem;
+      font-size: 1.75rem;
     }
 
     &__desc {
-      margin-top: 1rem;
+      margin-top: 0.625rem;
     }
 
     &__icons {
       & > a > svg {
-        width: 2.1rem;
+        width: 1.3125rem;
       }
     }
   }
diff --git a/components/projectPage/ProjectPage.module.scss b/components/projectPage/ProjectPage.module.scss
@@ -31,7 +31,7 @@
 }
 
 .description {
-  font-size: 1.6rem; // Based on 10px.
+  font-size: 1rem; // Based on 16px.
 }
 
 .infoContainer {
diff --git a/components/typography/title.tsx b/components/typography/title.tsx
@@ -8,7 +8,7 @@ const Title = ({ children, center, className, ...rest }: TitleProps) => {
 
       <style jsx>{`
         .Title {
-          font-size: ${fontSize ?? '3.8rem'};
+          font-size: ${fontSize ?? '2.375rem'};
           line-height: 1.8;
           font-weight: bold;
           text-align: ${center ?? 'right'};
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,5 +1,4 @@
 import { GetStaticProps } from 'next';
-import Description from '../components/description/Description';
 import Layout from '../components/layout/layout';
 import { PersonCard } from '../components/personCard/personCard';
 import { getPeople, IPerson } from '../services/people';
@@ -14,12 +13,10 @@ interface IHomeProps {
 export default function Home({ people }: IHomeProps) {
   return (
     <Layout descriptionText={MainPageDescription()}>
-      <div className={styles.container}>
-        <div className={styles.cards__wrapper}>
-          {people.map((person, i) => (
-            <PersonCard key={person.name + i} person={person} />
-          ))}
-        </div>
+      <div className={styles.cards__wrapper}>
+        {people.map((person, i) => (
+          <PersonCard key={person.name + i} person={person} />
+        ))}
       </div>
     </Layout>
   );
diff --git a/styles/Home.module.scss b/styles/Home.module.scss
@@ -1,27 +1,18 @@
 @import "media";
 
-.container {
-  width: 100%;
+.cards__wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-auto-rows: 1fr;
+  gap: 30px 45px;
+  justify-items: center;
+  margin-bottom: 100px;
+  max-width: 1280px;
+  margin: -24px auto 0;
+}
 
+@media screen and (max-width: 1280px) {
   .cards__wrapper {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    grid-auto-rows: 1fr;
-    gap: 30px 45px;
-    justify-items: center;
     padding: 0 25px;
-    margin: 0 auto;
-    max-width: 1280px;
-    margin-bottom: 100px;
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .container {
-    width: 100%;
-
-    .cards__wrapper {
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    }
   }
 }
diff --git a/styles/globals.scss b/styles/globals.scss
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;600&display=swap");
+@import "./typography.scss";
 
 * {
   box-sizing: border-box;
@@ -18,7 +18,6 @@ html {
   direction: rtl;
   background-color: var(--background-color);
   color: var(--text);
-  font-size: 10px;
 
   @media screen and (max-width: 600px) {
     font-size: 9px;
diff --git a/styles/typography.scss b/styles/typography.scss
@@ -0,0 +1,80 @@
+@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;600;700;800&display=swap");
+
+//based on 1rem = 16px
+
+//font sizes
+$fontsize-1: 2.25rem; //36px
+$fontsize-2: 2rem; //32px
+$fontsize-3: 1.5rem; //24px
+$fontsize-4: 1.25rem; //20px
+$fontsize-5: 1rem; //16px
+$fontsize-6: 0.875rem; //14px
+
+//line heights
+$lineheight-1: 3rem; //48px
+$lineheight-2: 2.625rem; //42px
+$lineheight-3: 2rem; //32px
+$lineheight-4: 1.625rem; //26px
+$lineheight-5: 1.3125rem; //21px
+$lineheight-6: 1.125rem; //18px
+
+.heading-one {
+  font-size: $fontsize-1;
+  line-height: $lineheight-1;
+  font-weight: 800;
+}
+
+.heading-two {
+  font-size: $fontsize-2;
+  line-height: $lineheight-2;
+  font-weight: 800;
+}
+
+.heading-three {
+  font-size: $fontsize-3;
+  line-height: $lineheight-3;
+  font-weight: 700;
+}
+
+.heading-four {
+  font-size: $fontsize-4;
+  line-height: $lineheight-4;
+  font-weight: 700;
+}
+
+.subheading-one {
+  font-size: $fontsize-1;
+  line-height: $lineheight-1;
+  font-weight: 400;
+}
+
+.subheading-two {
+  font-size: $fontsize-2;
+  line-height: $lineheight-2;
+  font-weight: 400;
+}
+
+.body-one {
+  font-size: $fontsize-4;
+  line-height: $lineheight-4;
+  font-weight: 400;
+}
+
+.body-two {
+  font-size: $fontsize-3;
+  line-height: $lineheight-3;
+  font-weight: 400;
+}
+
+.small-text {
+  font-size: $fontsize-5;
+  line-height: $lineheight-5;
+  font-weight: 400;
+}
+
+.overline {
+  font-size: $fontsize-6;
+  line-height: $lineheight-6;
+  font-weight: 700;
+  text-transform: uppercase;
+}

Original file line number	Diff line number	Diff line change
`@@ -88,7 +88,7 @@ const Navbar = ({ DesHeight }) => {`
`88`	`88`	`</div>`
`89`	`89`	`<Link shallow href="/">`
`90`	`90`	`<a className={className}>`
`91`		`- <Img className="inner-logo" src="/images/logo-2.0.svg" />`
	`91`	`+ <Img className="inner-logo" layout="fill" src="/images/logo-2.0.svg" />`
`92`	`92`	`</a>`
`93`	`93`	`</Link>`
`94`	`94`	`</div>`
`@@ -165,13 +165,13 @@ const Navbar = ({ DesHeight }) => {`
`165`	`165`	`}`
`166`	`166`
`167`	`167`	`.navbar__title {`
`168`		`- font-size: 2.2rem;`
	`168`	`+ font-size: 1.375rem;`
`169`	`169`	`}`
`170`	`170`
`171`	`171`	`.navbar__navs {`
`172`	`172`	`display: flex;`
`173`	`173`	`align-items: center;`
`174`		`- font-size: 2.2rem;`
	`174`	`+ font-size: 1.375rem;`
`175`	`175`	`}`
`176`	`176`
`177`	`177`	`.navbar__tabs {`
`@@ -223,7 +223,7 @@ const Navbar = ({ DesHeight }) => {`
`223`	`223`	`}`
`224`	`224`
`225`	`225`	`.navbar__btn > span {`
`226`		`- font-size: 1.8rem;`
	`226`	`+ font-size: 1.125rem;`
`227`	`227`	`}`
`228`	`228`	`.navbar__logo {`
`229`	`229`	`margin: 48px 0 0 -10px;`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@`
`47`	`47`	`margin: 0 2px;`
`48`	`48`
`49`	`49`	`& > svg {`
`50`		`- width: 3rem;`
	`50`	`+ width: 1.875rem;`
`51`	`51`	`transition: all 0.2s ease-in;`
`52`	`52`
`53`	`53`	`&:hover {`
`@@ -59,13 +59,13 @@`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`&__headline {`
`62`		`- font-size: 4.8rem;`
	`62`	`+ font-size: 3rem;`
`63`	`63`	`font-weight: lighter;`
`64`	`64`	`line-height: 1;`
`65`	`65`	`}`
`66`	`66`
`67`	`67`	`&__desc {`
`68`		`- font-size: 1.6rem;`
	`68`	`+ font-size: 1rem;`
`69`	`69`	`transform: translateY(10px);`
`70`	`70`	`}`
`71`	`71`
`@@ -92,16 +92,16 @@`
`92`	`92`	`}`
`93`	`93`
`94`	`94`	`&__headline {`
`95`		`- font-size: 2.8rem;`
	`95`	`+ font-size: 1.75rem;`
`96`	`96`	`}`
`97`	`97`
`98`	`98`	`&__desc {`
`99`		`- margin-top: 1rem;`
	`99`	`+ margin-top: 0.625rem;`
`100`	`100`	`}`
`101`	`101`
`102`	`102`	`&__icons {`
`103`	`103`	`& > a > svg {`
`104`		`- width: 2.1rem;`
	`104`	`+ width: 1.3125rem;`
`105`	`105`	`}`
`106`	`106`	`}`
`107`	`107`	`}`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.description {`
`34`		`- font-size: 1.6rem; // Based on 10px.`
	`34`	`+ font-size: 1rem; // Based on 16px.`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`.infoContainer {`