Split off footer into separate component, fix CSS properties.

src/App.jsx

@@ -5,6 +5,7 @@ import 'react-fontawesome';
 import WebFont from 'webfontloader';
 import Countdown from './Countdown';
 import Header from './Header';
+import Footer from './Footer';
 import getUpcomingDate from './getUpcomingDate';
 
 import style from './App.sass';
@@ -79,9 +80,10 @@ class App extends React.Component {
           </p>
           <Countdown date={nextUpcomingDate} />
         </div>
-        <div className={style.footer}>
+
+        <Footer>
           Made by Icedream & MAGIC
-        </div>
+        </Footer>
       </div>
     );
   }

src/App.sass

@@ -6,8 +6,6 @@
   font-family: 'Titillium Web', sans-serif
   display: flex
   flex-direction: column
-  justify-content: stretch
-  align-items: center
 
 .content
   color: #838383
@@ -15,21 +13,7 @@
   width: 100%
   max-width: 1024px
   padding: 1em 0
-  box-sizing: content-box
-  flex-grow: 1
   text-align: center
-
-.footer
-  color: #fff
-  right: 0
-  bottom: 0
-  left: 0
-  padding: 5px 0
-  border: 0
-  border-top: 1px solid white
-  opacity: .1
-  font-size: 20px
-  text-align: right
-  width: 100%
+  flex: 1 0 auto
 
 // @FIXME - known issue: padding will be treated like outer margins, causes scrollbars to appear

src/Footer.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import style from './Footer.sass';
+
+export default function Footer({ className, children }) {
+  return (
+    <footer className={[style.footer, className].join(' ')}>
+      {children}
+    </footer>
+  );
+}
+
+Footer.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+
+Footer.defaultProps = {
+  children: null,
+  className: null,
+};

src/Footer.sass

@@ -0,0 +1,10 @@
+.footer
+  color: #fff
+  padding: 5px 0
+  border: 0
+  border-top: 1px solid white
+  opacity: .1
+  font-size: 0.9em
+  text-align: right
+  width: 100%
+  flex: 0 0 content

src/Header.sass

@@ -3,6 +3,6 @@
   font-family: 'Colaborate', sans-serif
   font-size: 1.5em
   text-align: center
-  z-index: 2
   padding: 12px 0
   width: 100%
+  flex: 0 0 content