improved styling

Evoniuk · Jun 14, 2020 · 0f2ce86 · 0f2ce86
1 parent 61197b5
commit 0f2ce86
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -14,19 +14,15 @@ <h2>Hack Assembler</h2>
 
   <p>You can view the <a href="https://github.com/Evoniuk/Hack-Assembler">source code here</a>.</p>
 
-  <hr>
-
-  <h5>Upload File</h5>
-  <label for="myfile">Select a file:</label>
-  <input type="file" accept=".asm" id="fileInput" name="myfile">
-
-  <h5>Enter Code</h5>
   <textarea placeholder="enter code here" id="codeInput"></textarea>
   <button type="button" id="inputCode">submit</button>
 
-  <hr>
+  <p>Or enter a file:</p>
+
+  <input type="file" accept=".asm" id="fileInput" name="myfile">
+
+  <br>
 
-  <h5>Assembled Code</h5>
   <pre id="outputOriginal"></pre>
   <pre id="output"></pre>
 

diff --git a/style.css b/style.css
@@ -1,7 +1,7 @@
 * {box-sizing: border-box}
 
 body {
-  max-width: 36rem;
+  max-width: 32rem;
   margin: auto;
   font-family: sans-serif;
   padding: 0 5px;
@@ -29,6 +29,26 @@ textarea {
   padding-left: 5px;
 }
 
+h4 {text-align: center}
+
+button, input {
+  font-size: 1rem;
+  outline: none;
+  background-color: rgb(244, 247, 250);
+  border: none;
+  padding: 8px;
+  border-radius: 4px;
+  display: block;
+  margin: 5px auto;
+  color: rgb(14, 67, 117);
+}
+
+button:hover {
+  font-style: italic;
+  background-color: rgb(244, 247, 250);
+  cursor: pointer;
+}
+
 #output, #outputOriginal {
   margin: 0;
   display: inline;