feat: mimic dracula ui,

commiting more changes in the project structure,
see also: #12

components/HeaderHome/styles.module.scss

@@ -4,8 +4,6 @@
   background-size: 100% 12rem;
 
   width: 100%;
-  max-width: var(--maxWidth);
-  min-width: 30rem;
   padding-top: 6rem;
 
   @media (max-width: 34rem) {

components/HeaderPost/styles.module.scss

@@ -7,19 +7,11 @@ $prefix: header-post;
   justify-content: space-between;
 
   width: 100%;
-  padding: 2rem 5rem 0;
+  padding: 2rem 5rem;
   margin: 0;
 
-  border-radius: 30px 30px 0 0;
-
   @media (max-width: 34rem) {
     padding: 1rem 2rem;
-    border-radius: 0;
-
-    img {
-      width: 8rem;
-      height: 8rem;
-    }
   }
 }
 

components/Layout/styles.module.scss

@@ -1,8 +1,11 @@
 .layout {
+  max-width: var(--maxWidth);
+
   width: 100%;
   height: 100%;
   margin: 0 auto;
   padding: 0;
+  word-break: break-word;
 }
 
 .layout__head {
@@ -46,7 +49,7 @@
   }
 }
 
-@media (max-width: 34rem) {
+@media (max-width: &sm) {
   .container {
     margin: 0 auto;
     padding: 0;
@@ -55,6 +58,12 @@
 
   .main {
     padding: 1rem 2rem;
-    font-size: 20px;
+  }
+
+  .layout__footer {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    border: 5px solid red;
   }
 }

pages/_app.tsx

@@ -3,7 +3,7 @@ import type { AppProps } from "next/app";
 
 import "../styles/global.css";
 import "../styles/layout.css";
-import "../styles/colors.css";
+import "../styles/_colors.scss";
 import "../styles/dracula-clone/index.css";
 
 // Para o Highligh.js

pages/posts/styles.module.scss

@@ -3,7 +3,7 @@
   flex-direction: column;
   text-align: justify;
   margin: 1.5rem;
-  font-size: 1.2rem;
+  font-size: 1.1rem;
 
   p {
     text-indent: 3rem;
@@ -14,7 +14,7 @@
   font-size: 2rem;
   line-height: 1.3;
   font-weight: 800;
-  letter-spacing: -0.05rem;
+  color: var(--yellow);
 }
 
 .post__meta {

styles/_breakpoints.scss

@@ -0,0 +1,6 @@
+// Bootstrap
+
+$sm: 576px;
+$md: 768px;
+$lg: 992px;
+$xg: 1200px;

styles/global.css

@@ -2,11 +2,11 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: monospace;
 }
 
 html,
 body {
-  font-family: monospace;
   line-height: 1.6;
   font-size: 14px;
   background-color: var(--black);
@@ -31,6 +31,16 @@ main {
   padding-top: 1rem;
 }
 
+p {
+  tab-size: 2rem;
+  -moz-tab-size: 2rem; /* Firefox */
+  color: var(--white); /* .drac-text-white */
+}
+
+/* ===================
+  TABLE
+=================== */
+
 table,
 th,
 td {
@@ -59,10 +69,18 @@ u {
   text-decoration-style: wavy;
 }
 
+/* ===================
+  LIST
+=================== */
+
 ul {
   list-style: none;
 }
 
+/* ===================
+  CODE
+=================== */
+
 pre {
   background-color: rgb(246, 248, 250);
   border-radius: 6px;
@@ -80,17 +98,3 @@ code {
   word-break: normal;
   word-wrap: normal;
 }
-
-p {
-  tab-size: 2rem;
-  -moz-tab-size: 2rem; /* Firefox */
-  color: var(--white); /* .drac-text-white */
-}
-
-@media (max-width: 375px) {
-  p,
-  div,
-  li {
-    font-size: 1.3rem;
-  }
-}

styles/layout.css

@@ -1,3 +1,3 @@
 :root {
-  --maxWidth: 72rem;
+  --maxWidth: 950px;
 }