feat: starting implementation,

starting to change the blog layout and copy some classes and styles from the dracula theme, see also: #12
64J0 · May 6, 2021 · a430d05 · a430d05
1 parent d746b27
commit a430d05
Show file tree

Hide file tree

Showing 16 changed files with 352 additions and 228 deletions.
diff --git a/components/date.tsx → components/Date/index.tsx b/components/date.tsx → components/Date/index.tsx
diff --git a/components/HeaderHome/index.tsx b/components/HeaderHome/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Link from "next/link";
 
-import styles from "../layout.module.css";
+import styles from "../Layout/styles.module.scss";
 import utilStyles from "../../styles/utils.module.css";
 
 import headerStyles from "./styles.module.scss";
@@ -17,7 +17,9 @@ const Header: React.FC = () => {
           alt="Vinícius Gajo"
         />
       </Link>
-      <h1 className={utilStyles.heading2X}>Vinícius Gajo</h1>
+      <h1 className={`${utilStyles.heading2X} drac-text-purple-cyan`}>
+        Vinícius Gajo
+      </h1>
     </div >
   );
 }

diff --git a/components/HeaderHome/styles.module.scss b/components/HeaderHome/styles.module.scss
@@ -1,12 +1,11 @@
 .backgroundHeader {
-  background: url("../../public/gifs/matrix-animation-background.gif") #fff;
+  background: url("../../public/gifs/matrix-animation-background.gif");
   background-repeat: no-repeat;
   background-size: 100% 12rem;
 
   width: 100%;
   min-width: 30rem;
   padding-top: 6rem;
-  border-radius: 30px 30px 0 0;
 
   h1 {
     margin-bottom: 0;

diff --git a/components/HeaderPost/index.tsx b/components/HeaderPost/index.tsx
@@ -2,34 +2,32 @@ import React from "react";
 import Link from "next/link";
 import { FiHome, FiChevronLeft } from "react-icons/fi";
 
-import styles from "../layout.module.css";
+import styles from "../Layout/styles.module.scss";
 import utilStyles from "../../styles/utils.module.css";
 
 import headerStyles from "./styles.module.scss";
 
 const HeaderPost: React.FC = () => {
   return (
-    <>
-      <div className={headerStyles.container}>
-        <Link href="/contato">
+    <div className={headerStyles.container}>
+      <Link href="/contato">
+        <a>
+          <img
+            src="/images/profile.jpg"
+            className={`${styles.headerImage} ${utilStyles.borderCircle} ${headerStyles.contactLink}`}
+            alt={"Uma foto minha"}
+          />
+        </a>
+      </Link>
+      <h2 className={headerStyles.backToHome}>
+        <Link href="/">
           <a>
-            <img
-              src="/images/profile.jpg"
-              className={`${styles.headerImage} ${utilStyles.borderCircle} ${headerStyles.contactLink}`}
-              alt={"Uma foto minha"}
-            />
+            <FiChevronLeft size="4rem" className={headerStyles.moveToLeft} />
+            <FiHome size="4rem" />
           </a>
         </Link>
-        <h2 className={headerStyles.backToHome}>
-          <Link href="/">
-            <a>
-              <FiChevronLeft size="4rem" className={headerStyles.moveToLeft} />
-              <FiHome size="4rem" />
-            </a>
-          </Link>
-        </h2>
-      </div>
-    </>
+      </h2>
+    </div>
   );
 }
 

diff --git a/components/HeaderPost/styles.module.scss b/components/HeaderPost/styles.module.scss
@@ -9,7 +9,6 @@
   margin: 0;
 
   border-radius: 30px 30px 0 0;
-  background-color: #fff;
 
   @media (max-width: 34rem) {
     padding: 1rem 2rem;

diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import styles from "./styles.module.scss";
+
+import HeaderHome from "../HeaderHome";
+import HeaderPost from "../HeaderPost";
+
+export const siteTitle = "64j0 Blog";
+
+interface LayoutProps {
+  home?: any;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children, home }) => {
+  return (
+    <>
+      <div className={styles['layout-container']}>
+        <header className={styles.header}>
+          {home ? (<HeaderHome />) : (<HeaderPost />)}
+        </header>
+
+        <main className={styles.main}>
+          {children}
+        </main>
+
+        <footer className={`${styles.footer} drac-text-white`}>
+          <span>
+            &copy; Vinícius Gajo Marques Oliveira. All rights reserved.
+          </span>
+          <span>
+            twitter-logo; github-logo; linkedin-logo;
+          </span>
+        </footer>
+      </div>
+    </>
+  );
+}
+
+export default Layout;
diff --git a/components/Layout/styles.module.scss b/components/Layout/styles.module.scss
@@ -0,0 +1,64 @@
+$max-width: 72rem;
+
+.layout-container {
+  height: 100%;
+  width: 100%;
+
+  margin: 0 auto;
+  padding: 0;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  margin: 0;
+  border-radius: 5rem 5rem 0 0;
+
+  .headerImage {
+    width: 7rem;
+    height: 7rem;
+    margin: 0 auto;
+  }
+
+  .headerHomeImage {
+    width: 11rem;
+    height: 11rem;
+    margin: 0 auto;
+    border: 4px solid rgba(255, 255, 255, 0.5);
+  }
+
+  .backToHome {
+    margin: 3rem 0 0;
+  }
+}
+
+.main {
+  padding: 0.6rem 1.2rem;
+  margin: 0 auto;
+  max-width: $max-width;
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 5rem auto 3rem;
+  max-width: $max-width;
+}
+
+@media (max-width: 34rem) {
+  .container {
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+  }
+
+  .main {
+    padding: 1rem 2rem;
+    font-size: 20px;
+  }
+}
+
diff --git a/components/layout.module.css b/components/layout.module.css
diff --git a/components/layout.tsx b/components/layout.tsx
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,9 +1,12 @@
 import React from "react";
 import type { AppProps } from "next/app";
 
+import "../styles/global.css";
+import "../styles/colors.css";
+import "../styles/dracula-clone/index.css";
+
 // Para o Highligh.js
 import "highlight.js/styles/agate.css";
-import "../styles/global.css";
 
 const App: React.FC<AppProps> = ({ Component, pageProps }) => {
   return <Component {...pageProps} />;

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import Head from "next/head";
 import Link from "next/link";
 
-import Layout, { siteTitle } from "../components/layout";
+import Layout, { siteTitle } from "../components/Layout";
 import { getSortedPostData } from "../lib/posts";
-import Date from "../components/date";
+import Date from "../components/Date";
 
 import utilStyles from "../styles/utils.module.css";
 
@@ -35,18 +35,22 @@ const Home: React.FC<{ allPostsData: AllPostsData[]; }> = ({ allPostsData }) =>
 
       <div className={utilStyles.mainContent}>
         <section className={utilStyles.headingMd}>
-          <p className={utilStyles.adjustText}>
+          <p className={`${utilStyles.adjustText} drac-text-white`}>
             Formado em engenharia mecatrônica no CEFET-MG, desenvolvedor WEB focado na stack JS (React, Vue, Next.js e Node.js, principalmente) atualmente trabalhando na <a href="https://jmvtechnology.com/">JMV Technology</a>.
           </p>
         </section>
         <section className={utilStyles.headingMd}>
-          <h2 className={utilStyles.headingLg}>Posts</h2>
-          <ul className={utilStyles.list}>
+          <h2 className={`${utilStyles.headingLg} drac-text-yellow`}>
+            Posts
+          </h2>
+          <ul className={`${utilStyles.list} drac-text-white`}>
             {
               allPostsData.map(({ id, date, title }: AllPostsData) => (
                 <li className={utilStyles.listItem} key={id}>
                   <Link href="/posts/[id]" as={`/posts/${id}`}>
-                    <a>{title}</a>
+                    <a className="drac-text-purple-cyan">
+                      {title}
+                    </a>
                   </Link>
                   <br />
                   <small className={utilStyles.lightText}>

diff --git a/pages/posts/[id].tsx b/pages/posts/[id].tsx
@@ -4,8 +4,8 @@ import { GetStaticPaths, GetStaticProps } from "next";
 import Head from "next/head";
 import hljs from "highlight.js";
 
-import Layout from "../../components/layout";
-import Date from "../../components/date";
+import Layout from "../../components/Layout";
+import Date from "../../components/Date";
 
 import { getAllPostIds, getPostData } from "../../lib/posts";