make footer sticky

pages/index.js

@@ -3,6 +3,7 @@ import React from 'react'
 import Head from 'next/head'
 
 import Wizard from '../components/wizard'
+import Footer from '../components/footer'
 
 export default function Home() {
   return (
@@ -12,7 +13,7 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main>
+      <main className="main">
         <h1>Pfadi Bussle Buchen</h1>
 
         <p>Du willst das Pfadi Bussle buchen? Hier bist du richtig!</p>
@@ -20,9 +21,7 @@ export default function Home() {
         <Wizard />
       </main>
 
-      <footer>
-        <a>Freundeskreis des VCP Rosenfeld</a>
-      </footer>
+      <Footer />
 
       <style jsx global>{`
         html,
@@ -38,23 +37,33 @@ export default function Home() {
           box-sizing: border-box;
         }
 
-        .Selectable
+        .container {
+          display: flex;
+          min-height: 100vh;
+          flex-direction: column;
+        }
+
+        .main {
+          flex: 1;
+        }
+
+        .datepicker
           .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
           background-color: #f0f8ff !important;
           color: #4a90e2;
         }
-        .Selectable .DayPicker-Day {
+        .datepicker .DayPicker-Day {
           border-radius: 0 !important;
         }
-        .Selectable .DayPicker-Day--start {
+        .datepicker .DayPicker-Day--start {
           border-top-left-radius: 50% !important;
           border-bottom-left-radius: 50% !important;
         }
-        .Selectable .DayPicker-Day--end {
+        .datepicker .DayPicker-Day--end {
           border-top-right-radius: 50% !important;
           border-bottom-right-radius: 50% !important;
         }
-        .Selectable .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
+        .datepicker .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
           color: #505050;
           background-color: #fcc;
         }