use inter font

Signed-off-by: Himanshu Mishra <himanshu@orkohunter.net>
OrkoHunter · Dec 20, 2024 · 82d6055 · 82d6055
1 parent d135305
commit 82d6055
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 27 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -213,8 +213,8 @@ module.exports = {
         ],
         web: [
           {
-            name: `Arimo`,
-            file: `https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap`,
+            name: `Inter`,
+            file: `https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap`,
           },
         ],
       },

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -5,7 +5,13 @@ import Header from "./Header";
 import Footer from "./Footer";
 
 const MainContainer = styled.div`
-  max-width: calc((10 * 100vw) / 12);
+  max-width: calc((10 * 100vw) / 18);
+
+  @media screen and (max-width: 1023px) {
+    max-width: calc((10 * 100vw) / 12);
+  }
+
+  /* max-width: 80ch; */
   margin-left: auto;
   margin-right: auto;
 `;

diff --git a/src/components/PostsContainer.js b/src/components/PostsContainer.js
@@ -29,7 +29,7 @@ const BlogListRowContainer = styled.div`
 
   &:hover {
     /* color: rgb(63, 81, 181) !important; */
-    color: rgba(0, 0, 0, 0.6) !important;
+    /* color: rgba(0, 0, 0, 0.6) !important; */
   }
 `;
 
@@ -56,7 +56,7 @@ const Button = styled.button`
   &:hover {
     cursor: pointer;
     /* background-color: rgb(63, 81, 181); */
-    background-color: rgba(0, 0, 0, 0.6);
+    /* background-color: rgba(0, 0, 0, 0.6); */
     transition: 0.5s;
   }
 `;

diff --git a/src/components/Typography.js b/src/components/Typography.js
@@ -1,9 +1,9 @@
 import styled from "styled-components";
 
 export const SubTitle = styled.p`
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-  font-family: Montserrat, serif;
-  font-size: 1em;
+  /* font-weight: 500; */
+  /* color: rgba(0, 0, 0, 0.6); */
+  font-family: Inter, Montserrat, sans-serif;
+  font-size: 1.5em;
   margin-top: 0px;
 `;
diff --git a/src/global.css b/src/global.css
@@ -1,8 +1,8 @@
 html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  font-size: 16px;
-  font-family: "Arimo", "Montserrat", serif;
+  font-size: 18px;
+  font-family: "Inter", "Montserrat", sans-serif;
   box-sizing: border-box;
   overflow-y: scroll;
 }
@@ -28,15 +28,10 @@ body {
 
 a {
   text-decoration: none;
-  color: #356a8d;
-}
-
-a:hover {
-  color: rgb(63, 81, 181);
+  color: #007acc;
 }
 
 h1 {
-  /* font-family: Montserrat, serif; */
   font-size: 3em;
   /* line-height: 1.25; */
   /* color: #333; */
@@ -46,29 +41,27 @@ h1 {
 }
 
 h2 {
-  /* font-family: Montserrat, serif; */
   /* font-size: 40px; */
   /* line-height: 1.25; */
   /* color: #333; */
-  font-size: 28px;
+  font-size: 2em;
   font-weight: 400;
-  margin-bottom: 24px;
-  margin-top: 24px;
+  margin-bottom: 1.5em;
   /* letter-spacing: 2px; */
 }
 
 p,
 ul,
 ol {
-  line-height: 1.6em;
+  line-height: 1.8em;
   font-size: 1.5em;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased !important;
   -moz-font-smoothing: antialiased !important;
   text-rendering: optimizelegibility !important;
-  letter-spacing: 0.03em;
-  margin-bottom: 1em;
-  margin-top: 1em;
+  /* letter-spacing: 0.03em; */
+  margin-bottom: 1.5em;
+  margin-top: 1.5em;
 }
 
 blockquote {
@@ -98,8 +91,6 @@ blockquote:after {
   vertical-align: -0.4em;
 }
 blockquote p {
-  /* font-family: "Roboto", Georgia, "Times New Roman"; */
-  /* font-size: 1.4em; */
   font-style: italic;
   display: inline;
 }