Update layout to a more "traditional" form

Instead of using one column layout, it's now switched to two column
layout with source on one side and translation on the other side.

One column layout is still used on smaller screens.

static/style.css

@@ -11,9 +11,9 @@ body {
   margin: 5px auto;
 }
 
-.form {
+.form__line {
   display: flex;
-  flex-direction: column;
+  width: 100%;
 }
 
 .form__field {
@@ -21,6 +21,7 @@ body {
   align-items: center;
 
   margin: 4px;
+  flex: 0.5;
 }
 
 .form__field .form__label {
@@ -28,7 +29,7 @@ body {
 }
 
 .form__input,
-.textarea {
+.form__textarea {
   font-size: 1rem;
   padding: 4px;
   border: 2px solid #888888;
@@ -40,17 +41,14 @@ body {
 }
 
 .form__input:focus,
-.textarea:focus,
+.form__textarea:focus,
 .form__button:focus {
   outline: 2px solid #5d94ff;
 }
 
-.translation {
-  font-size: 1rem;
-  padding: 4px;
-}
+.form__textarea {
+  box-sizing: border-box;
 
-.textarea {
   resize: vertical;
   height: 5rem;
 
@@ -58,6 +56,21 @@ body {
   width: 100%;
 }
 
+.form__translation {
+  resize: none;
+  height: 100%;
+}
+
+@media screen and (max-width: 560px) {
+  .form__line {
+    display: block;
+  }
+
+  .form__translation {
+    height: 10rem;
+  }
+}
+
 @media screen and (prefers-color-scheme: dark) {
   body {
     background-color: #212529;
@@ -66,7 +79,7 @@ body {
 
   .form__input,
   .form__button,
-  .textarea {
+  .form__textarea {
     background-color: #131618;
     border-color: #495057;
     color: #f8f9fa;

templates/index.html

@@ -12,9 +12,10 @@
 
     <section class="main-section">
       <form action="/" method="POST" class="form">
+        <div class="form__line">
           <div class="form__field">
             <label for="from" class="item form__label">
-            Source language:
+              From:
             </label>
             <select name="from" id="from" class="form__input">
               {{range $code, $name := $.Languages}}
@@ -23,12 +24,11 @@
               </option>
               {{end}}
             </select>
-          <!-- <input id="from" name="from" class="form__input" placeholder="en,de" value="{{.From}}"> -->
           </div>
 
           <div class="form__field">
             <label for="to" class="item form__label">
-            Translate to:
+              To:
             </label>
             <select name="to" id="to" class="form__input">
               {{range $code, $name := $.Languages}}
@@ -37,19 +37,22 @@
               </option>
               {{end}}
             </select>
-          <!-- <input id="to" name="to" class="form__input" placeholder="fr,ru" value="{{.To}}"> -->
+          </div>
         </div>
 
+        <div class="form__line">
           <div class="form__field">
-          <textarea name="text" class="textarea" placeholder="Text to translate">{{.Text}}</textarea>
+            <textarea name="text" class="form__textarea" placeholder="Text to translate">{{.Text}}</textarea>
+          </div>
+          <div class="form__field">
+            <textarea class="form__textarea form__translation" readonly>{{.Translation}}</textarea>
+          </div>
         </div>
 
         <div class="form__field">
           <button type="submit" class="form__button">Translate!</button>
         </div>
       </form>
-
-      <pre class="translation">{{.Translation}}</pre>
     </section>
   </body>
 </html>