diff --git a/public/style.css b/public/style.css index 2ee0851..615d8b9 100755 --- a/public/style.css +++ b/public/style.css @@ -1,3 +1,7 @@ +:root { + font-size: 2.0rem; +} + body { margin: 0; } @@ -15,11 +19,10 @@ h1 { display:flex; align-items: center; justify-content: center; + flex-flow: column; } #top a { - position: fixed; - right: 2em; font-size: .8em; } @@ -30,13 +33,37 @@ h1 { #content { display: grid; grid-template-areas: - "query query query query" - "input input output output"; + "query" + "input" + "output"; gap: 1em; - grid-template-rows: auto 1fr; + grid-template-rows: auto 1fr 1fr; padding: 1em; - height: 80vh; + height: 90vh; +} + +@media only screen and (min-width: 1000px) { + /* For Desktops */ + :root { + font-size: 1.2rem; + } + + #content { + grid-template-areas: + "query query query query" + "input input output output"; + grid-template-rows: auto 1fr; + } + + #top { + flex-flow: row; + } + + #top a { + position: fixed; + right: 2em; + } } textarea { @@ -100,6 +127,10 @@ textarea { font-weight: normal; } +input[type=checkbox] { + transform: scale(1.3); +} + #input { grid-area: input;