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

improve styling for bigger screens

Browse Source
This commit is contained in:
Thomas Ruoff
2020-08-31 21:52:18 +02:00
committed by Thomas Ruoff
parent aeb03f3330
commit 96060d1415
4 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/footer.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react'
export default function Footer() { export default function Footer() {
return ( return (
<footer className="mt-5 mb-2"> <footer className="footer">
<p>i.A. des Freundeskreis des VCP Rosenfeld</p> <p>i.A. des Freundeskreis des VCP Rosenfeld</p>
<p> <p>
Hier sollte es irgendwann ein Impressum, Datenschutzhinweise usw. geben. Hier sollte es irgendwann ein Impressum, Datenschutzhinweise usw. geben.

4
components/wizard/index.tsx
View File

@@ -53,14 +53,14 @@ function WizardInternal() {
return ( return (
<form <form
className="w-full max-w-lg" className="form"
onSubmit={(event) => { onSubmit={(event) => {
event.preventDefault() event.preventDefault()
onSubmit() onSubmit()
}} }}
> >
{dataStoredLoaded && ( {dataStoredLoaded && (
<p className="my-12"> <p className="mb-12">
Gespeicherte Daten wurden aus Deinem Browser geladen.{' '} Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
<a className="link" onClick={forgetData} href=""> <a className="link" onClick={forgetData} href="">
Daten wieder vergessen Daten wieder vergessen

4
pages/index.tsx
View File

@@ -6,14 +6,14 @@ import Wizard from '../components/wizard/index'
export default function Home() { export default function Home() {
return ( return (
<div className="mx-3 flex flex-col min-h-screen"> <div className="wrapper">
<Head> <Head>
<title>Pfadi Bussle Buchen</title> <title>Pfadi Bussle Buchen</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Header /> <Header />
<main className="flex-grow"> <main className="main">
<Wizard /> <Wizard />
</main> </main>
<Footer /> <Footer />

27
styles/index.css
View File

@@ -12,6 +12,28 @@
/* Your own custom utilities */ /* Your own custom utilities */
.wrapper {
@apply mx-3 flex flex-col min-h-screen;
}
@screen sm {
.wrapper {
@apply w-3/4 max-w-xl m-auto;
}
}
.main {
@apply flex-grow;
}
.footer {
@apply mt-5 mb-2;
}
.form {
@apply w-full bg-blue-100 p-6 rounded;
}
.fsw { .fsw {
@apply flex flex-wrap -mx-3 mb-2; @apply flex flex-wrap -mx-3 mb-2;
} }
@@ -92,11 +114,6 @@
@apply text-blue-700; @apply text-blue-700;
} }
@screen sm {
.fs {
@apply w-1/2 mb-0;
}
}
.DayPickerInput .input-text { .DayPickerInput .input-text {
@apply w-full; @apply w-full;
} }