add resp layout

This commit is contained in:
madarsbiss 2021-07-21 13:12:39 +03:00
parent b7e0e0a24c
commit 04583743dd
3 changed files with 15 additions and 8 deletions

View File

@ -11,7 +11,7 @@ export default function Home() {
const res = await fetch("/api/data", { const res = await fetch("/api/data", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ input, systemUsed }), body: JSON.stringify({ input }),
}); });
const data = await res.json(); const data = await res.json();

View File

@ -1,6 +1,5 @@
.wrapper { .wrapper {
max-width: 1200px; max-width: 1200px;
/* margin: 0px auto; */
text-align: center; text-align: center;
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
box-shadow: 0 8px 32px 0 rgba(83, 89, 179, 0.37); box-shadow: 0 8px 32px 0 rgba(83, 89, 179, 0.37);
@ -9,6 +8,7 @@
border-radius: 30px; border-radius: 30px;
display: grid; display: grid;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
margin: 0 20px;
} }
.weatherWrapper { .weatherWrapper {
@ -63,7 +63,6 @@
.searchInput { .searchInput {
margin-bottom: 20px; margin-bottom: 20px;
height: 40px; height: 40px;
/* border: 2px solid rgb(34, 34, 34); */
border: none; border: none;
padding: 0 10px; padding: 0 10px;
color: #303030; color: #303030;
@ -73,3 +72,10 @@
font-family: "Varela Round", sans-serif; font-family: "Varela Round", sans-serif;
font-size: 18px; font-size: 18px;
} }
@media only screen and (max-width: 950px) {
.wrapper {
display: grid;
grid-template-columns: 1fr;
}
}

View File

@ -8,8 +8,6 @@
html, html,
body { body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background-image: radial-gradient( background-image: radial-gradient(
circle 993px at 0.5% 50.5%, circle 993px at 0.5% 50.5%,
rgba(137, 171, 245, 0.37) 0%, rgba(137, 171, 245, 0.37) 0%,
@ -23,7 +21,10 @@ body {
align-items: center; align-items: center;
} }
a { @media only screen and (max-width: 950px) {
color: inherit; html,
text-decoration: none; body {
min-height: 100vh;
display: block;
}
} }