Improve layout for mobile mostly

sergv · sergv · commit 3432adc18cd7 · 2024-10-12T12:02:32.000+01:00
diff --git a/index.html b/index.html
@@ -12,10 +12,11 @@
         padding: 0;
         margin: 0;
         font-family: sans-serif;
+        border-radius: 0;
       }
 
       body {
-        padding-top: 2em;
+        padding-top: 2rem;
 
         display: flex;
         flex-direction: column;
@@ -30,19 +31,21 @@
       }
 
       #input, #output {
-        margin-top: 1em;
-        padding: 0.5em;
-        width: 100%;
+        margin-top: 1rem;
+        padding: 0.5rem;
+        width: min(80vw, 35rem);
         font-family: monospace;
         font-size: 1rem;
         border: 0;
       }
 
       #input-process {
-        margin-top: 0.8333333333333333em;
-        padding: 0.4166666666666667em;
+        margin-top: 1rem;
+        padding: 0.5rem;
         font-family: sans-serif;
         font-size: 120%;
+        color: #000;
+        border-radius: 0 !important;
       }
 
       a {
@@ -53,19 +56,41 @@
         color: #d5c5ff;
       }
 
+      @media (pointer:fine) {
+
+        h1 {
+          font-size: 300%;
+        }
+
+        #input, #output {
+          margin-top: 2rem;
+          width: max(95vw, 35rem);
+          font-size: 200%;
+          padding: 2rem 1.5rem;
+          box-sizing: border-box;
+        }
+
+        #input-process {
+          font-size: 200%;
+          padding: 2rem !important;
+          margin: 3rem 0 1rem 0;
+        }
+
+      }
+
     </style>
   </head>
 
   <body>
     <main>
-      <h1 class="title">Pointfree.wasm</h1>
+      <h1>Pointfree.wasm</h1>
       <input id="input" type="text" autofocus="true" value="\xs ys -> sum (zipWith (*) xs ys)" spellcheck="false" />
       <br/>
       <button id="input-process" onclick="process()">
         Convert to pointfree
       </button>
       <br/>
-      <textarea id="output" type="text" readonly="true" placeholder="pointfree result" spellcheck="false"></textarea>
+      <textarea id="output" type="text" readonly="true" placeholder="pointfree result" spellcheck="false" rows="1"></textarea>
       <br/>
       <br/>
       <p>
