Changed footer middle side, added info/social to the left and a menu to the right.

src/components/Bio.js

@@ -1,29 +1,22 @@
-import React from 'react'
+import React from 'react';
 
-// Import typefaces
-import 'typeface-montserrat'
-import 'typeface-merriweather'
+import profilePic from './profile-pic.jpg';
 
-import profilePic from './profile-pic.jpg'
-import { rhythm } from '../utils/typography'
+import styles from './Bio.module.css';
 
 class Bio extends React.Component {
   render() {
     return (
       <div
         style={{
           display: 'flex',
-          marginBottom: rhythm(2.5),
         }}
       >
         <img
           src={profilePic}
-          alt={`Kyle Mathews`}
+          alt="Kyle Mathews"
           style={{
-            marginRight: rhythm(1 / 2),
             marginBottom: 0,
-            width: rhythm(2),
-            height: rhythm(2),
           }}
         />
         <p>
@@ -34,8 +27,8 @@ class Bio extends React.Component {
           </a>
         </p>
       </div>
-    )
+    );
   }
 }
 
-export default Bio
+export default Bio;

src/components/Footer/Footer.js

@@ -1,25 +1,21 @@
 import React from 'react';
-import MainContainer from '../MainContainer/MainContainer';
+import FooterTop from '../Footer/FooterTop/FooterTop';
+import FooterMiddle from '../Footer/FooterMiddle/FooterMiddle';
 import FooterBottom from '../Footer/FooterBottom/FooterBottom';
-import './Footer.css';
+
+import styles from './Footer.module.css';
 
 export default function Footer() {
   return (
     <div>
-      <div className="footerTop">
-        <MainContainer>
-          Miss
-        </MainContainer>
+      <div className={styles.footerTop}>
+        <FooterTop />
       </div>
-      <div className="footerMid">
-        <MainContainer>
-          Muss
-        </MainContainer>
+      <div className={styles.footerMiddle}>
+        <FooterMiddle />
       </div>
-      <div className="footerBottom">
-        <MainContainer>
-          <FooterBottom />
-        </MainContainer>
+      <div className={styles.footerBottom}>
+        <FooterBottom />
       </div>
     </div>
   );

src/components/Footer/Footer.css → src/components/Footer/Footer.module.css

@@ -2,7 +2,7 @@
     background-color: #1d73be;
     height: 300px;
 }
-.footerMid {
+.footerMiddle {
     background-color: #2b5aa2;
     height: 180px;
 }

src/components/Footer/FooterBottom/FooterBottom.js

@@ -1,17 +1,18 @@
 import React from 'react';
 import MainContainer from '../../MainContainer/MainContainer';
-import './FooterBottom.css';
+
+import styles from './FooterBottom.module.css';
 
 export default function FooterBottom() {
   return (
     <MainContainer>
-      <div className="footerBottomContainer">
-        <div className="links">
+      <div className={styles.footerBottomContainer}>
+        <div className={styles.links}>
           <a>FAQ</a>
           <a>Privacy</a>
           <a>Terms</a>
         </div>
-        <div className="links">
+        <div className={styles.links}>
           <a>Hosted by GitHub Pages</a>
           <a>All rights reserved</a>
         </div>

src/components/Footer/FooterBottom/FooterBottom.css → src/components/Footer/FooterBottom/FooterBottom.module.css

@@ -7,10 +7,13 @@
     font-weight: 300;
 }
 
-.links {
+.footerBottomContainer > .links {
     display: flex;
     align-self: center;
 }
-.links > a {
+.footerBottomContainer > .links > a {
     margin-right: 1.5em;
+}
+.footerBottomContainer > .links > a:last-child {
+    margin-right: 0;
 }

src/components/Footer/FooterMiddle/FooterMiddle.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import MainContainer from '../../MainContainer/MainContainer';
+
+import styles from './FooterMiddle.module.css';
+import logoMini from './../../../assets/logoMini.png';
+import githubLogo from './../../../assets/githubLogo.png';
+import facebookLogo from './../../../assets/facebookLogo.png';
+import slackLogo from './../../../assets/slackLogo.png';
+
+export default function FooterMiddle() {
+  return (
+    <MainContainer>
+      <div className={styles.footerMiddleContainer}>
+        <div className={styles.info}>
+          <div className={styles.infoTitle}>
+            <div style={{ width: '50px' }}>
+              <img src={logoMini} alt="logo" style={{ height: '50px' }} />
+            </div>
+            <div style={{ marginTop: '.6em' }}>
+              <span style={{ fontSize: '1.5em', marginLeft: '.6em' }}>ItalianCoders</span>
+            </div>
+          </div>
+          <div className={styles.infoDescription}>
+            <span>Il blog italiano per eccellenza<br />sullo sviluppo software</span>
+          </div>
+          <div className={styles.infoSocial}>
+            <a href="https://github.com/ItalianCoders/italiancoders.github.io" target="_blank" rel="noopener noreferer"><img src={githubLogo} alt="logo" /></a>
+            <a href="https://www.facebook.com/italiancoders/" target="_blank" rel="noopener noreferer"><img src={facebookLogo} alt="logo" /></a>
+            <a href="http://italiancoders.slack.com/" target="_blank" rel="noopener noreferer"><img src={slackLogo} alt="logo" /></a>
+          </div>
+        </div>
+        <div className={styles.info}>
+          <nav className={styles.infoNav}>
+            <div>
+              <strong>ItalianCoders</strong>
+              <div className={styles.infoMenu}>
+                <a href="#1">Chi siamo</a>
+                <a href="#2">Autori</a>
+                <a href="#3">Contattaci</a>
+              </div>
+            </div>
+            <div>
+              <strong>Community</strong>
+              <div className={styles.infoMenu}>
+                <a href="#4">Sottomiss</a>
+                <a href="#5">Sottomuss</a>
+              </div>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </MainContainer>
+  );
+}

src/components/Footer/FooterMiddle/FooterMiddle.module.css

@@ -0,0 +1,64 @@
+.footerMiddleContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 180px;
+    color: #fff;
+    text-align: center;
+}
+
+.info {
+}
+
+.infoTitle {
+    display: flex;
+    justify-content: center;
+}
+
+.infoDescription {
+    font-weight: 300;
+    line-height: 1.3em;
+}
+
+.infoSocial {
+    margin-top: 1em;
+}
+.infoSocial > a {
+    margin-right: 1em;
+}
+.infoSocial > a:last-child {
+    margin-right: 0;
+}
+.infoSocial > a > img {
+    height: 30px;
+}
+
+.infoNav {
+    display: flex;
+    flex-direction: row;
+    font-weight: 300;
+}
+.infoNav > div {
+    margin-right: 5em;
+}
+.infoNav > div:last-child {
+    margin-right: 0;
+}
+
+.infoMenu {
+    display: flex;
+    flex-direction: column;
+    margin-top: .5em;
+}
+.infoMenu > a {
+    line-height: 1.3em;
+    margin-top: .5em;
+    text-align: right;
+    -webkit-transition: color .2s ease-out;
+    -moz-transition: color .2s ease-out;
+    -o-transition: color .2s ease-out;
+    transition: color .2s ease-out;
+}
+.infoMenu > a:hover {
+    color: #d5e8ff;
+}

src/components/Footer/FooterTop/FooterTop.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import MainContainer from '../../MainContainer/MainContainer';
+
+import styles from './FooterTop.module.css';
+
+export default function FooterMiddle() {
+  return (
+    <MainContainer>
+      Miss
+    </MainContainer>
+  );
+}

src/components/Footer/FooterTop/FooterTop.module.css

@@ -0,0 +1,8 @@
+.footerTopContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 180px;
+    color: #fff;
+    text-align: center;
+}

src/components/Header/Header.js

@@ -1,21 +1,21 @@
 import React from 'react';
-import './Header.css';
 
+import styles from './Header.module.css';
 import logo from './../../assets/logo.png';
 
 export default function () {
   return (
-    <div className="headerBackground">
-      <div className="headerContainer">
-        <div className="menu">
-          <a style={{ alignItems: 'center', display: 'flex' }}><span className="personalIcon">;</span>Programmazione</a>
-          <a href="authors" style={{ alignItems: 'center', display: 'flex' }}><i className="material-icons" style={{ marginRight: '10px' }}>people</i>Autori</a>
+    <div className={styles.headerBackground}>
+      <div className={styles.headerContainer}>
+        <div className={styles.menu}>
+          <a style={{ alignItems: 'center', display: 'flex' }}><span className={styles.personalIcon}>;</span>Programmazione</a>
+          <a href="authors" style={{ alignItems: 'center', display: 'flex' }}><i className="materialIcons" style={{ marginRight: '10px' }}>people</i>Autori</a>
         </div>
-        <div className="logo">
+        <div className={styles.logo}>
           <img src={logo} alt="logo" style={{ height: '75px' }} />
         </div>
-        <div className="search">
-          <input type="text" className="searchBox" placeholder="Cerca" />
+        <div className={styles.search}>
+          <input type="text" className={styles.searchBox} placeholder="Cerca" />
         </div>
       </div>
     </div>

src/components/MainContainer/MainContainer.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import './MainContainer.css';
+
+import styles from './MainContainer.module.css';
 
 export default function MainContainer({ children }) {
   return (
-    <div className="container">
+    <div className={styles.container}>
       {children}
     </div>
   );

src/layouts/index.css

@@ -24,7 +24,7 @@ input {
     padding: 5px;
 }
 
-.material-icons {
+.materialIcons {
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;

src/layouts/index.js

@@ -4,10 +4,10 @@
 import React from 'react';
 import Helmet from 'react-helmet';
 
-import './index.css';
 import Header from '../components/Header/Header';
 import Footer from '../components/Footer/Footer';
 
+import './index.css';
 import favicon from '../assets/favicon.png';
 
 class Template extends React.Component {

src/templates/blog-post.js

@@ -4,7 +4,6 @@ import Link from 'gatsby-link'
 import get from 'lodash/get'
 
 import Bio from '../components/Bio'
-import { rhythm, scale } from '../utils/typography'
 
 class BlogPostTemplate extends React.Component {
   render() {

src/utils/typography.js

@@ -1,19 +1,19 @@
-import Typography from 'typography'
-import Wordpress2016 from 'typography-theme-wordpress-2016'
+import Typography from 'typography';
+import Wordpress2016 from 'typography-theme-wordpress-2016';
 
 Wordpress2016.overrideThemeStyles = () => ({
   'a.gatsby-resp-image-link': {
     boxShadow: 'none',
   },
-})
+});
 
-delete Wordpress2016.googleFonts
+delete Wordpress2016.googleFonts;
 
-const typography = new Typography(Wordpress2016)
+const typography = new Typography(Wordpress2016);
 
 // Hot reload typography in development.
 if (process.env.NODE_ENV !== 'production') {
-  typography.injectStyles()
+  typography.injectStyles();
 }
 
-export default typography
+export default typography;