diff --git a/src/public/style.css b/src/public/style.css index 8a6c6a7..d39f9ba 100644 --- a/src/public/style.css +++ b/src/public/style.css @@ -29,7 +29,7 @@ html { padding: 0 0; width: 100vw; display: grid; - grid-template-columns: auto minmax(50vw, 650px) auto; + grid-template-columns: auto minmax(50vw, 850px) auto; background-color: var(--c-dark); } diff --git a/src/views/form.ejs b/src/views/form.ejs index 17e5896..285d262 100644 --- a/src/views/form.ejs +++ b/src/views/form.ejs @@ -14,7 +14,7 @@ div { } .title { display: grid; - grid-template-columns: auto auto 1fr; + grid-template-columns: auto max-content; align-content: center; justify-content: center; padding: 1rem; @@ -35,15 +35,16 @@ div { background-position: center center; background-repeat: no-repeat; background-image: url("/public/invalid-content.png"); - margin: 2rem; + min-height: 210px; + min-width: 210px; } -.card { - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - grid-template-rows: auto auto; +@media screen and (min-width: 700px) { + .card { + grid-template-columns: min-content 1fr; + column-gap: 1rem; + } + .title { grid-column: span 2; } } -.title { grid-row: 1; grid-column: 1 / -1; } -.code { grid-row: 2; grid-column: 1; } -.form { grid-row: 2; grid-column: 2 / -1; }