Refactoring structure and styles

gatsby-config.js

@@ -27,6 +27,10 @@ module.exports = {
         icon: `src/images/logo.svg`, // This path is relative to the root of the site.
       },
     },
+    // SASS config
+    {
+      resolve: `gatsby-plugin-sass`,
+    },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

package.json

@@ -10,9 +10,11 @@
     "gatsby-plugin-manifest": "^2.1.1",
     "gatsby-plugin-offline": "^2.1.1",
     "gatsby-plugin-react-helmet": "^3.0.12",
+    "gatsby-plugin-sass": "^2.0.11",
     "gatsby-plugin-sharp": "^2.0.37",
     "gatsby-source-filesystem": "^2.0.37",
     "gatsby-transformer-sharp": "^2.1.19",
+    "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/components/Header/header.js

@@ -0,0 +1,48 @@
+import { Link } from "gatsby"
+import React from "react"
+import styles from "./header.module.scss"
+import logo from "../../images/logo.svg"
+
+const Header = () => {
+  const menuItems = [
+    { title: "Apresentação", tag: "apresentacao" },
+    { title: "Últimos Artigos", tag: "ultimos-artigos" },
+    { title: "Comunidade", tag: "comunidade" },
+    { title: "Meetup", tag: "meetup" },
+    { title: "Open-source", tag: "open-source" },
+    { title: "Vídeos", tag: "videos" },
+    { title: "Ajude", tag: "ajude", className: "button" },
+  ]
+
+  return (
+    <header>
+      <div className={styles.container}>
+        <Link to="/">
+          <img src={logo} alt="Logotipo do FloripaJS" className={styles.logo} />
+        </Link>
+
+        <nav class={styles.menu}>
+          <ul class={styles.menuList}>
+            {menuItems.map(item => (
+              <li>
+                <a href={`#${item.tag}`} className={item.className}>
+                  {item.title}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+      <div className={styles.wrapper}>
+        <h1 className={styles.headerTitle}>
+          A maior comunidade front-end de Florianópolis
+        </h1>
+        <a href="#conheca" className="button">
+          Conheça
+        </a>
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/Header/header.module.scss

@@ -0,0 +1,69 @@
+header {
+  height: 105%;
+  padding-top: 6em;
+  background: #fff;
+  box-shadow: 0 -10px 20px 20px #fff;
+
+  .container {
+    margin: 0 auto;
+    max-width: 1100px;
+    padding: 1.45rem 1.0875rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .logo {
+      display: flex;
+      position: fixed;
+      max-width: 130px;
+      top: 5.63em;
+      left: 50%;
+      margin-left: -500px;
+      z-index: 20;
+    }
+
+    .menu {
+      justify-content: flex-end;
+      position: fixed;
+      top: 8.5em;
+      right: 50%;
+      margin-right: -500px;
+      z-index: 30;
+
+      .menu-list {
+        list-style: none;
+        display: flex;
+        font-size: 0.77rem;
+        font-family: "OdudoMono", monospace;
+        font-weight: bold;
+        margin-bottom: 0;
+
+        li {
+          margin-left: 2em;
+
+          a {
+            text-decoration: none;
+            color: #000;
+          }
+        }
+      }
+    }
+  }
+
+  .wrapper {
+    max-width: 1100px;
+    padding: 0 1em 0 15em;
+    margin: 0 auto;
+    flex-direction: column;
+    height: 100%;
+
+    .header-title {
+      font-family: "GreycliffCF", sans-serif;
+      font-weight: 800;
+      font-size: 2.7rem;
+      margin: 0 0 0.5em 0;
+      line-height: 1.2;
+      max-width: 700px;
+    }
+  }
+}

src/components/layout.css

@@ -1,10 +1,14 @@
 html {
-  font-family: sans-serif;
+  font-family: "GreycliffCF", sans-serif !important;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
 body {
   margin: 0;
+  padding-top: 10em;
+  background-attachment: fixed;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23ececec' fill-opacity='0.70' fill-rule='evenodd'/%3E%3C/svg%3E");
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -218,7 +222,7 @@ img {
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
-  margin-bottom: 1.45rem;
+  /* margin-bottom: 1.45rem; */
 }
 h1 {
   margin-left: 0;
@@ -620,3 +624,13 @@ pre tt:after {
     font-size: 100%;
   }
 }
+
+.button {
+  font-family: "OdudoMono", monospace;
+  font-weight: 800;
+  text-decoration: none;
+  color: #000;
+  background-color: #40db4e;
+  padding: 0.5em 1.5em;
+  text-transform: uppercase;
+}

src/components/layout.js

@@ -9,7 +9,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import { StaticQuery, graphql } from "gatsby"
 
-import Header from "./header"
+import Header from "./Header/header"
 import "./layout.css"
 
 const Layout = ({ children }) => (
@@ -25,11 +25,11 @@ const Layout = ({ children }) => (
     `}
     render={data => (
       <>
-        <Header siteTitle={data.site.siteMetadata.title} />
+        <Header />
         <div
           style={{
             margin: `0 auto`,
-            maxWidth: 960,
+            maxWidth: 1100,
             padding: `0px 1.0875rem 1.45rem`,
             paddingTop: 0,
           }}

src/pages/index.js

@@ -7,7 +7,7 @@ import SEO from "../components/seo"
 const IndexPage = () => (
   <Layout>
     <SEO title="FloripaJS • A maior comunidade front-end de Florianópolis" />
-    <h1>A maior comunidade front-end de Florianópolis</h1>
+    {/* <h1>A maior comunidade front-end de Florianópolis</h1> */}
     <Link to="/page-2/">Go to page 2</Link>
   </Layout>
 )