From 78e2b852f5daf0219ac98780b0a9ee9f6535c31d Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Wed, 31 Jul 2019 03:52:17 +0900 Subject: [PATCH] fix: centerize form --- src/App.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index c219b1a..5712962 100644 --- a/src/App.js +++ b/src/App.js @@ -104,10 +104,16 @@ const Input = styled.input` margin-top: 20px; padding: 20px; outline: none; + text-align: center; font-size: 4rem; font-family: monospace; border: none; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + + transition: box-shadow 0.5s ease-out; + + &:hover { + box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); + } @media screen and (max-width: 800px) { font-size: 2rem; @@ -126,7 +132,7 @@ const ResultHeader = styled.div` ` const Footer = styled.footer` - margin-top: 40px; + margin: 40px 0; text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;