feat: update others componentes,

enhance the readability of the code by changing the name of css classes, add layout.css for global css variables different of colors, see also: #12
64J0 · May 8, 2021 · d1d636c · d1d636c
1 parent 48e5385
commit d1d636c
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 93 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import type { AppProps } from "next/app";
 
 import "../styles/global.css";
+import "../styles/layout.css";
 import "../styles/colors.css";
 import "../styles/dracula-clone/index.css";
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -33,27 +33,29 @@ const Home: React.FC<{ allPostsData: AllPostsData[]; }> = ({ allPostsData }) =>
         <title>{siteTitle}</title>
       </Head>
 
-      <div className={utilStyles.mainContent}>
-        <section className={utilStyles.headingMd}>
-          <p className={utilStyles.adjustText}>
+      <div className={utilStyles['container']}>
+
+        <section className={utilStyles['resume']}>
+          <p className={utilStyles['resume__text']}>
             Formado em engenharia mecatrônica no CEFET-MG, desenvolvedor WEB focado na stack JS/TS (React, Vue, Next.js e Node.js, principalmente) atualmente trabalhando na <a href="https://jmvtechnology.com/">JMV Technology</a> no ramo de streaming de áudio/vídeo utilizando tecnologias como FFMPEG e Wowza.
           </p>
         </section>
-        <section className={utilStyles.posts}>
-          <h2 className={utilStyles.posts__header}>
+
+        <section className={utilStyles['posts-list']}>
+          <h2 className={utilStyles['posts-list__header']}>
             Postagens
           </h2>
-          <ul className={utilStyles.posts__body}>
+          <ul className={utilStyles['posts-list__body']}>
             {
               allPostsData.map(({ id, date, title }: AllPostsData) => (
-                <li className={utilStyles.item} key={id}>
+                <li className={utilStyles['item']} key={id}>
                   <Link href="/posts/[id]" as={`/posts/${id}`}>
                     <a className="drac-text-purple-cyan">
                       {title}
                     </a>
                   </Link>
                   <br />
-                  <small className={utilStyles.lightText}>
+                  <small className={utilStyles['post-date']}>
                     <Date dateString={date} />
                   </small>
                 </li>

diff --git a/pages/posts/[id].tsx b/pages/posts/[id].tsx
@@ -9,8 +9,7 @@ import Date from "../../components/Date";
 
 import { getAllPostIds, getPostData } from "../../lib/posts";
 
-import utilStyles from "../../styles/utils.module.css";
-import postStyles from "./styles.module.scss";
+import styles from "./styles.module.scss";
 
 interface PostData {
   title: string;
@@ -43,11 +42,11 @@ const Post: React.FC<{ postData: PostData }> = ({ postData }) => {
         <title>{postData.title}</title>
       </Head>
 
-      <article className={postStyles.container}>
-        <h1 className={utilStyles.headingX1}>
+      <article className={styles['post']}>
+        <h1 className={styles['post__title']}>
           {postData.title}
         </h1>
-        <div className={`${utilStyles.textRight} + ${utilStyles.lightText}`}>
+        <div className={styles['post__meta']}>
           <Date dateString={postData.date} /><br/>
           {postData.tags && <small>Tags: [{postData.tags.join(", ")}]</small>}
         </div>

diff --git a/pages/posts/styles.module.scss b/pages/posts/styles.module.scss
@@ -1,28 +1,24 @@
-.container {
+.post {
   display: flex;
   flex-direction: column;
   text-align: justify;
   margin: 1.5rem;
-
-  p,
-  div {
-    font-size: 1.2rem;
-  }
+  font-size: 1.2rem;
 
   p {
     text-indent: 3rem;
   }
+}
 
-  @media (max-width: 375px) {
-    p,
-    div {
-      font-size: 1.4rem;
-    }
-  }
+.post__title {
+  font-size: 2rem;
+  line-height: 1.3;
+  font-weight: 800;
+  letter-spacing: -0.05rem;
 }
 
-.footer {
-  text-align: center;
-  font-size: 1.5rem;
-  margin: 1.5rem 0 0.5rem;
+.post__meta {
+  margin: 0.1rem initial;
+  text-align: right;
+  color: #999;
 }
diff --git a/styles/global.css b/styles/global.css
@@ -59,6 +59,10 @@ u {
   text-decoration-style: wavy;
 }
 
+ul {
+  list-style: none;
+}
+
 pre {
   background-color: rgb(246, 248, 250);
   border-radius: 6px;

diff --git a/styles/layout.css b/styles/layout.css
@@ -0,0 +1,3 @@
+:root {
+  --maxWidth: 72rem;
+}
diff --git a/styles/utils.module.css b/styles/utils.module.css
@@ -1,89 +1,35 @@
-.headingX1 {
-  font-size: 2rem;
-  line-height: 1.3;
-  font-weight: 800;
-  letter-spacing: -0.05rem;
-}
-
-@media (max-width: 34rem) {
-  .headingX1 {
-    margin-top: 1rem;
-  }
-}
-
-.headingLg {
-  font-size: 1.5rem;
-  line-height: 1.4;
-}
-
-.headingMd {
-  font-size: 1.2rem;
-  line-height: 1.5;
-}
-
-.borderCircle {
-  border-radius: 9999px;
-}
-
-.colorInherit {
-  color: inherit;
-}
-
-.padding1px {
-  padding-top: 1px;
-}
-
-.lightText {
-  color: #999;
-}
-
-.mainContent {
+.container {
   display: flex;
   flex-direction: column;
   width: 100%;
 
   padding: 0 1.5rem 2rem 1.5rem;
 }
 
-.shadow {
-  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
-  transition: box-shadow 0.4s;
-}
-
-.shadow:hover {
-  cursor: pointer;
-  box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
-  transition: box-shadow 0.4s;
-}
-
-.adjustText {
+.resume__text {
   overflow-wrap: break-word;
   text-indent: 4rem;
   text-align: justify;
+  font-size: 1.2rem;
 }
 
-.textRight {
-  text-align: right;
-  margin: 0.1rem initial;
-}
-
-/* NEW STYLES */
-
-.posts {}
-
-.posts__header {
+.posts-list__header {
   color: var(--yellow); /* .drac-text-yellow */
   font-size: 2rem;
   padding: 1.5rem 0;
 }
 
-.posts__body {
+.posts-list__body {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
-.posts__body > .item {
+.posts-list__body > .item {
   margin: 0 0 1.25rem;
   font-size: 1.3rem;
+}
+
+.post-date {
+  color: #999;
 }