From dd1f362ffe9018de76f701ffb61448d5464bdc81 Mon Sep 17 00:00:00 2001
From: Randy <randymoralesg@gmail.com>
Date: Sun, 8 Aug 2021 16:07:31 -0600
Subject: [PATCH] Edit post CSS styles

Signed-off-by: Randy <randymoralesg@gmail.com>
---
 README.md                |  2 +-
 lib/gtag.js              |  2 +-
 pages/blog/[id].js       |  5 ++++-
 styles/blog.module.css   | 38 +++++++++++++++++++++++++++-----------
 styles/globals.css       |  4 ++--
 styles/navbar.module.css |  6 ++++--
 6 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 04f6779..f6c1a24 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 - [X] Add tags per post
 - [X] Add Search bar for posts
 - [X] Add comments section for posts
-- [ ] Views per posts
+- [X] Views per posts
 - [ ] Add SEO component
 
 
diff --git a/lib/gtag.js b/lib/gtag.js
index b859076..953dbbb 100644
--- a/lib/gtag.js
+++ b/lib/gtag.js
@@ -1,7 +1,7 @@
 export const GA_TRACKING_ID = 'UA-186464085-3'
 
 export const pageview = (url, title) => {
-  window.gtag('config', process.env.GA_TRACKING_ID, {
+  window.gtag('config', GA_TRACKING_ID, {
     page_location: url,
     page_title: title,
   })
diff --git a/pages/blog/[id].js b/pages/blog/[id].js
index d6c8795..9fde1bb 100644
--- a/pages/blog/[id].js
+++ b/pages/blog/[id].js
@@ -92,7 +92,7 @@ export default function Post({ postData }) {
         priority
       />
 
-      <h1>{postData.title}</h1>
+      <h1 className={blogStyles.postTitle}>{postData.title}</h1>
 
       <p className={blogStyles.postDescription}>{postData.description}</p>
 
@@ -100,6 +100,9 @@ export default function Post({ postData }) {
         <div>
           {views} {t('views')}
         </div>
+
+        <span> | </span>
+
         <span>
           <PublishedDate dateString={postData.date} locale={locale} />
         </span>
diff --git a/styles/blog.module.css b/styles/blog.module.css
index 990e2cb..453d199 100644
--- a/styles/blog.module.css
+++ b/styles/blog.module.css
@@ -136,6 +136,7 @@
 
 .postContent p {
   margin: 1em 0 0;
+  font-size: calc(1.5em * var(--scale));
 }
 
 .postContent p a {
@@ -176,7 +177,6 @@
 
 .postContent a:hover {
   border-bottom: var(--link-hover-animation);
-
 }
 
 .postContent p img {
@@ -211,6 +211,22 @@
   .cardDescription {
     font-size: calc(1.1em * var(--scale));
   }
+
+  .postTitle {
+    font-size: calc(2.5em * var(--scale));
+  }
+
+  .postDescription, .postMetadata {
+    font-size: calc(2em * var(--scale));
+  }
+
+  .postContent {
+    margin-top: 3.5rem;
+  }
+
+  .postContent h2 {
+    font-size: 2em;
+  }
 }
 
 @media (max-width: 680px) {
@@ -248,8 +264,16 @@
     font-size: calc(1em * var(--scale));
   }
 
-  .postMetadata {
-    width: 70%;
+  .postTitle {
+    font-size: calc(1.5em * var(--scale));
+  }
+
+  .postDescription, .postMetadata {
+    font-size: calc(1.2em * var(--scale));
+  }
+
+  .postContent h2 {
+    font-size: 1em;
   }
 }
 
@@ -274,10 +298,6 @@
   .cardDescription {
     font-size: calc(0.95em * var(--scale));
   }
-
-  .postMetadata {
-    width: 80%;
-  }
 }
 
 @media (max-width: 330px) {
@@ -297,8 +317,4 @@
   .cardDescription {
     font-size: calc(0.9em * var(--scale));
   }
-
-  .postMetadata {
-    width: 90%;
-  }
 }
diff --git a/styles/globals.css b/styles/globals.css
index 1c5f20e..98fb7f8 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -88,7 +88,6 @@
 html {
   display: table;
   height: 100%;
-  width: 100%;
 }
 
 body {
@@ -98,14 +97,15 @@ body {
   font-family: var(--font-family);
   font-size: calc(var(--font-size) * var(--scale));
   line-height: 1.75;
-  width: 100%;
 }
 
 html, body {
   margin: 0;
+  max-width: 100%;
   min-height: 100%;
   padding: 0;
   position: relative;
+  width:100vw;
 }
 
 h1 {
diff --git a/styles/navbar.module.css b/styles/navbar.module.css
index 12e7e9f..ac003dd 100644
--- a/styles/navbar.module.css
+++ b/styles/navbar.module.css
@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  width: 100%;
 }
 
 .nav a:hover {
@@ -16,6 +17,7 @@
 }
 
 .menu {
+  align-items: center;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -35,8 +37,8 @@
   }
 }
 
-@media (max-width: 360px) {
+@media (max-width: 1024px) {
   .menu {
-    font-size: calc(var(--font-size) * 0.60);
+    font-size: calc(1.5em * var(--scale));
   }
 }
\ No newline at end of file