From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 21 Aug 2023 03:25:59 +0000 (-0700)
Subject: Add basic styling
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=aa22d477af133e16ff379384bcc3daa7b36d477c;p=erc-165-calculator

Add basic styling
---

diff --git a/index.html b/index.html
index 8862a43..1687656 100644
--- a/index.html
+++ b/index.html
@@ -12,20 +12,64 @@
       background: hsl(216deg 50% 90%);
       color: hsl(216deg 50% 10%);
     }
+
+    header {
+      display: flex;
+      justify-content: center;
+    }
+
+    main {
+      display: flex;
+      inline-size: min(720px, 100% - 16px);
+      margin-inline: auto;
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      gap: 8px;
+    }
+
+    label {
+      font-weight: 700;
+      font-size: 1.25rem;
+    }
+
+    textarea,
+    button {
+      font-size: 1rem;
+      border-radius: 4px;
+      border: 1px solid hsl(216deg 50% 50%);
+    }
+
+    textarea {
+      min-inline-size: 80ch;
+      min-block-size: 5rem;
+      padding: 8px;
+    }
+
+    button {
+      padding: 4px 8px;
+    }
   </style>
 </head>
 
 <body>
-  <h1>ERC-165 Calculator</h1>
+  <header>
+    <h1>ERC-165 Calculator</h1>
+  </header>
 
-  <form>
-    <label for="functions">Functions</label>
-    <textarea name="functions" id="functions"></textarea>
+  <main>
+    <form>
+      <label for="functions">Functions</label>
+      <textarea name="functions" id="functions"></textarea>
 
-    <button>Calculate</button>
+      <button>Calculate</button>
 
-    <output></output>
-  </form>
+      <output></output>
+    </form>
+  </main>
 
   <script type="module">
     // From noble-hashes v1.3.1