Edit CSS styles for posts and about page

Signed-off-by: Randy <randymoralesg@gmail.com>

components/Layout.js

@@ -6,7 +6,7 @@ import useTranslation from '@/i18n/useTranslation'
 
 import layoutStyles from '@/styles/layout.module.css'
 
-export default function Layout({ children, pageTitle }) {
+export default function Layout({ children, pageTitle, large }) {
   const { t } = useTranslation()
   const Navbar = dynamic(() => import('@/components/Navbar'))
 
@@ -47,7 +47,9 @@ export default function Layout({ children, pageTitle }) {
 
       <Navbar />
 
-      <main className={layoutStyles.content}>{children}</main>
+      <main className={large ? layoutStyles.large : layoutStyles.content}>
+        {children}
+      </main>
     </div>
   )
 }

pages/about.js

@@ -9,7 +9,7 @@ export default function About() {
 
   return (
     <>
-      <Layout pageTitle={t('about')}>
+      <Layout pageTitle={t('about')} large={true}>
         <h1>
           {t('greeting')} {Name}
         </h1>

styles/about.module.css

@@ -16,7 +16,6 @@
 .container {
     display: flex;
     justify-content: space-between;
-    margin-top: 4rem;
     position: relative;
     width: 100%;
     z-index: -1;
@@ -42,7 +41,6 @@
 @media (max-width: 1024px) {
     .container {
         align-items: center;
-        display: flex;
         flex-direction: column;
     }
 

styles/blog.module.css

@@ -119,7 +119,7 @@
   display: flex;
   font-size: calc(1.2em * var(--scale));
   justify-content: space-between;
-  width: 50%;
+  width: 100%;
 }
 
 .postContent h2 {
@@ -150,10 +150,6 @@
 /* ******** Media Queries ******** */
 
 @media screen and (max-width: 1024px) {
-  .card {
-    width: 44%;
-  }
-
   .cardTag {
     font-size: calc(1.05em * var(--scale));
   }
@@ -169,10 +165,6 @@
   .cardDescription {
     font-size: calc(1.1em * var(--scale));
   }
-
-  .postMetadata {
-    width: 40%;
-  }
 }
 
 @media screen and (max-width: 680px) {
@@ -183,7 +175,7 @@
   .card {
     height: 300px;
     margin: 1rem 0;
-    width: 85%;
+    width: 49%;
   }
 
   .cardImg {
@@ -211,7 +203,7 @@
   }
 
   .postMetadata {
-    width: 60%;
+    width: 70%;
   }
 }
 

styles/globals.css

@@ -12,21 +12,19 @@
 
 @media all and (max-width: 1920px) {
   :root {
-    --main-width: 80%;
+    --main-width: 50%;
     --scale: 0.95;
   }
 }
 
 @media all and (max-width: 1368px) {
   :root {
-    --main-width: 85%;
     --scale: 0.90;
   }
 }
 
 @media all and (max-width: 1024px) {
   :root {
-    --main-width: 90%;
     --scale: 0.85;
   }
 }
@@ -90,7 +88,7 @@ body {
   color: var(--content-text-color);
   font-family: var(--font-family);
   font-size: calc(var(--font-size) * var(--scale));
-  line-height:1.6
+  line-height:1.75
 }
 
 h1 {
@@ -138,6 +136,9 @@ main {
   margin: 2em 0;
 }
 
+.utterances, .utterances-frame {
+  position: static;
+}
 
 /* ******** Tags colors ******** */
 .blog {
@@ -148,10 +149,6 @@ main {
   background:#e4ffe7
 }
 
-.utterances, .utterances-frame {
-  position: static;
-}
-
 /* ******** CSSTransition from react-transition-group ******** */
 
 .NavAnimation-enter {

styles/layout.module.css

@@ -1,4 +1,11 @@
-.content {
+.content, .large {
     margin-top: calc(var(--header-height) + 2em);
+}
+
+.content {
     width: var(--main-width);
 }
+
+.large {
+    width: 80%;
+}