tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 06:27:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

ditch boostrap and use tailwind instead

Browse Source
This commit is contained in:
Thomas Ruoff
2020-08-13 23:45:44 +02:00
parent 9554793520
commit 9485d936b3
13 changed files with 1102 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pages/_app.js
View File

@@ -1,6 +1,7 @@
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import '../styles/index.css'
import 'react-day-picker/lib/style.css'
import 'moment'

56
pages/index.js
View File

@@ -7,67 +7,23 @@ import Footer from '../components/footer'
export default function Home() {
return (
<div className="container">
<div className="mx-3 flex flex-col min-h-screen">
<Head>
<title>Pfadi Bussle Buchen</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="main">
<h1>Pfadi Bussle Buchen</h1>
<main className="flex-grow">
<h1 className="text-3xl">Pfadi Bussle Buchen</h1>
<p>Du willst das Pfadi Bussle buchen? Hier bist du richtig!</p>
<p className="mb-8">
Du willst das Pfadi Bussle buchen? Hier bist du richtig!
</p>
<Wizard />
</main>
<Footer />
<style jsx global>{`
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
}
* {
box-sizing: border-box;
}
.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;
}
.datepicker .DayPicker-Day {
border-radius: 0 !important;
}
.datepicker .DayPicker-Day--start {
border-top-left-radius: 50% !important;
border-bottom-left-radius: 50% !important;
}
.datepicker .DayPicker-Day--end {
border-top-right-radius: 50% !important;
border-bottom-right-radius: 50% !important;
}
.datepicker .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
color: #505050;
background-color: #fcc;
}
`}</style>
</div>
)
}