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

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() {
return (
<footer className="mt-5 mb-2">
<footer className="footer">
<p>i.A. des Freundeskreis des VCP Rosenfeld</p>
<p>
Hier sollte es irgendwann ein Impressum, Datenschutzhinweise usw. geben.

4
components/wizard/index.tsx
View File

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

4
pages/index.tsx
View File

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

27
styles/index.css
View File

@@ -12,6 +12,28 @@
/* 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 {
@apply flex flex-wrap -mx-3 mb-2;
}
@@ -92,11 +114,6 @@
@apply text-blue-700;
}
@screen sm {
.fs {
@apply w-1/2 mb-0;
}
}
.DayPickerInput .input-text {
@apply w-full;
}