diff --git a/web/src/App.js b/web/src/App.js
index fbc0f72..c1afec3 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -25,18 +25,20 @@ export default function App() {
setQuery(e.target.value)
}
+ const queryGiven = query && query.length > 0
+
return (
<>
-
+
- {query && query.length > 0 ? (
+ {queryGiven && (
Result for {query}
@@ -53,7 +55,7 @@ export default function App() {
- ) : null}
+ )}
>
@@ -74,12 +76,13 @@ const Content = styled.div``
const Header = styled.header`
margin-bottom: 100px;
- padding: 0 40px;
+ padding: ${({ queryGiven }) => (queryGiven ? '0 40px' : '40vh 40px 0')};
background-image: linear-gradient(180deg, #a2d4ff 0%, #ac57ff 99%);
+ transition: padding 0.6s cubic-bezier(0.19, 1, 0.22, 1);
${mobile} {
margin-bottom: 60px;
- padding: 0 20px;
+ padding: ${({ queryGiven }) => (queryGiven ? '0 20px' : '40vh 20px 0')};
}
`