feat: updated typography and styles for better readability

naffiq · Mar 31, 2021 · 8fe6093 · 8fe6093
1 parent 4ba9043
commit 8fe6093
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
@@ -10,7 +10,7 @@ export const Container = styled.div<{ narrow?: boolean }>`
 `;
 
 export const ContainerContent = styled.div`
-  padding: 0 32px;
+  padding: 32px 32px;
   display: block;
   width: calc(100% - 64px);
 `;

diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx
@@ -5,7 +5,9 @@ export const LineThrough = styled.span`
 `;
 
 export const Paragraph = styled.p`
-  line-height: 24px;
+  font-family: 'Lora', serif;
+  line-height: 1.8rem;
+  font-size: 1.1rem;
 `;
 
 export const Heading1 = styled.h1``;

diff --git a/src/layouts/index.css b/src/layouts/index.css
@@ -2,6 +2,7 @@ html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   height: 100%;
+  font-size: 18px;
 }
 body {
   margin: 0;
@@ -11,3 +12,10 @@ body {
 #___gatsby > * {
   height: 100%;
 }
+
+.blog-post-content {
+  font-family: 'Lora', serif;
+  line-height: 1.8rem;
+  font-size: 1.1rem;
+  margin: 2rem 0;
+}
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
@@ -34,10 +34,8 @@ const DefaultLayout = ({ children }: DefaultLayoutProps) => {
           }
         ]}
       >
-        <link
-          href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800|Playfair+Display"
-          rel="stylesheet"
-        />
+        <link rel="preconnect" href="https://fonts.gstatic.com"/> 
+        <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Open+Sans:wght@400;700;800&display=swap" rel="stylesheet"/>
         <link
           href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
           rel="stylesheet"