Edit post CSS styles

Signed-off-by: Randy <randymoralesg@gmail.com>
randymorales · Aug 8, 2021 · dd1f362 · dd1f362
1 parent aa417af
commit dd1f362
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 18 deletions.
diff --git 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
@@ -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
@@ -92,14 +92,17 @@ export default function Post({ postData }) {
         priority
       />
 
-      <h1>{postData.title}</h1>
+      <h1 className={blogStyles.postTitle}>{postData.title}</h1>
 
       <p className={blogStyles.postDescription}>{postData.description}</p>
 
       <div className={blogStyles.postMetadata}>
         <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
@@ -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
@@ -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
@@ -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));
   }
 }