Initial structure

Author: marcoacierno

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

gatsby-config.js

@@ -1,8 +1,8 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
+    title: `Python Pizza`,
+    description: `AAA`,
+    author: `@pythonpizzaconf`,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
@@ -18,17 +18,31 @@ module.exports = {
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
-        start_url: `/`,
-        background_color: `#663399`,
-        theme_color: `#663399`,
+        name: `python.pizza`,
+        short_name: `python.pizza`,
+        start_url: `/?homepage=1`,
+        background_color: `#fff`,
+        theme_color: `#ed4337`,
         display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        icon: `src/images/favicon.png`, // This path is relative to the root of the site.
       },
     },
+    {
+      resolve: 'gatsby-plugin-favicon',
+      options: {
+        logo: './src/images/favicon.png',
+      },
+    },
+    `gatsby-transformer-yaml`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `./src/data/`,
+      },
+    },
+    'gatsby-plugin-postcss',
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,
   ],
-}
+};

package.json

@@ -5,14 +5,20 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
+    "classnames": "^2.2.6",
     "gatsby": "^2.5.5",
     "gatsby-image": "^2.1.0",
+    "gatsby-plugin-favicon": "^3.1.6",
     "gatsby-plugin-manifest": "^2.1.1",
     "gatsby-plugin-offline": "^2.1.1",
+    "gatsby-plugin-postcss": "^2.0.7",
     "gatsby-plugin-react-helmet": "^3.0.12",
     "gatsby-plugin-sharp": "^2.0.37",
     "gatsby-source-filesystem": "^2.0.36",
     "gatsby-transformer-sharp": "^2.1.19",
+    "gatsby-transformer-yaml": "^2.1.12",
+    "postcss-custom-media": "^7.0.8",
+    "postcss-nested": "^4.1.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-nested': {},
+    'postcss-custom-media': {
+      importFrom: './src/components/layout/breakpoints.css',
+    },
+  },
+};

src/components/container/index.css

@@ -0,0 +1,21 @@
+.Container {
+  margin: 0 auto;
+  padding: 0 3rem;
+  max-width: var(--container-size);
+
+  &--small {
+    --container-size: 72rem;
+  }
+
+  &--medium {
+    --container-size: 96rem;
+  }
+
+  &--large {
+    --container-size: 120rem;
+  }
+
+  h1 {
+    text-align: center;
+  }
+}

src/components/container/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import './index.css';
+
+export default props => {
+  const { size, children, className } = props;
+
+  return (
+    <div className={classnames('Container', `Container--${size}`, className)}>
+      {children}
+    </div>
+  );
+};

src/components/events-slider/index.css

@@ -0,0 +1,35 @@
+.EventsSlider {
+  &--wrapper {
+    width: 100%;
+    margin: auto;
+    z-index: 10;
+  }
+
+  display: flex;
+  overflow: hidden;
+
+  &--item {
+    flex: 0 0 33.3333%;
+
+    text-align: center;
+    font-family: var(--font-name--heading);
+    font-weight: bold;
+    color: var(--white);
+    opacity: 0.3;
+    cursor: pointer;
+
+    &.active {
+      opacity: 1;
+    }
+  }
+
+  &--description {
+    margin-top: 5rem;
+    text-align: center;
+
+    li,
+    a {
+      color: var(--white);
+    }
+  }
+}

src/components/events-slider/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useStaticQuery, graphql } from 'gatsby';
+
+import './index.css';
+
+export default props => {
+  const {
+    allFutureEventsYaml: { edges: events },
+  } = useStaticQuery(graphql`
+    {
+      allFutureEventsYaml {
+        edges {
+          node {
+            city
+            where
+          }
+        }
+      }
+    }
+  `);
+  console.log('allFutureEventsYaml:', events);
+  return (
+    <div className="EventsSlider--wrapper">
+      <ul className="EventsSlider">
+        {events.map(({ node: event }, i) => {
+          return (
+            <li key={i} className="EventsSlider--item">
+              {event.city}
+            </li>
+          );
+        })}
+      </ul>
+      <div className="EventsSlider--description">
+        <ul>
+          <li>
+            <strong>Where?</strong>
+            SinnerSchrader
+          </li>
+          <li>
+            <strong>When?</strong>
+            20 December 2018
+          </li>
+          <li>
+            <a href="/">Find out more here!</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};

src/components/footer/index.css

@@ -0,0 +1,57 @@
+.footer {
+  background: var(--primary-color);
+
+  .wave {
+    transform: scale(-1);
+  }
+
+  &--socials {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6rem 0;
+
+    a {
+      display: inline-block;
+
+      width: 3.2rem;
+      height: 3.2rem;
+      margin: 0 1rem;
+
+      transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      &:hover {
+        perspective: 24rem;
+
+        transform: scale(1.1);
+        img {
+          animation: lollipop 1.6s linear infinite alternate both;
+        }
+      }
+    }
+  }
+}
+
+@keyframes lollipop {
+  0% {
+    transform: rotateX(0) rotateY(0) rotateZ(0);
+  }
+  25% {
+    transform: rotateX(15deg) rotateY(0) rotateZ(5deg);
+  }
+  50% {
+    transform: rotateX(-15deg) rotateY(15deg) rotateZ(-5deg);
+  }
+  75% {
+    transform: rotateX(15deg) rotateY(-15deg) rotateZ(-5deg);
+  }
+  100% {
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(5deg);
+  }
+}

src/components/footer/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import Wave from '../wave';
+import Container from '../container';
+
+import './index.css';
+
+const SOCIALS = [
+  {
+    name: 'facebook',
+    icon: require('../../images/socials/facebook.png'),
+    link: 'https://www.facebook.com/pythonpizza/',
+  },
+  {
+    name: 'twitter',
+    icon: require('../../images/socials/twitter.png'),
+    link: 'https://twitter.com/pythonpizzaconf/',
+  },
+  {
+    name: 'instagram',
+    icon: require('../../images/socials/instagram.png'),
+    link: 'https://www.instagram.com/python.pizza/',
+  },
+  {
+    name: 'youtube',
+    icon: require('../../images/socials/youtube.png'),
+    link: 'https://www.youtube.com/channel/UCdtynhT6G97JwdDPsiKbx8Q/',
+  },
+];
+
+export default props => {
+  return (
+    <footer className="footer">
+      <Wave />
+
+      <Container size="large">
+        <div className="footer--socials">
+          {SOCIALS.map(social => (
+            <a
+              key={social.name}
+              id={social.name}
+              href={social.link}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img alt={social.name} src={social.icon} />
+            </a>
+          ))}
+        </div>
+      </Container>
+    </footer>
+  );
+};