minor HTML chagnes

static/css/site.css

@@ -1,7 +1,19 @@
+/* CSS */
+:root {
+    font-family: Inter, sans-serif;
+    /* fix for Chrome */
+    font-feature-settings: 'liga' 1, 'calt' 1;
+}
+
+@supports (font-variation-settings: normal) {
+    :root {
+        font-family: InterVariable, sans-serif;
+    }
+}
+
 body {
     width: 100%;
     height: 100%;
-    font-family: arial;
     background-color: #111;
     color: #CCC;
     tab-size: 4;
@@ -67,4 +79,17 @@ li {
 
 ul {
     margin: 0.5em 0 0 0;
+}
+
+.input_label {
+    color: #8EB;
+}
+
+.row {
+    display: flex;
+}
+
+.column {
+    padding: 0.5em;
+    border-color: #E8B;
 }

templates/index.html

@@ -7,6 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>First page</title>
     <script src="https://unpkg.com/htmx.org@latest"></script>
+
+    <link rel="preconnect" href="https://rsms.me/">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <link rel="icon" type="image/x-icon" href="static/favicon.ico">
     <link rel="stylesheet" type="text/css" href="static/css/site.css" />
 </head>
@@ -15,17 +18,24 @@
     <div class="main-container">
         <div class="content">
             <h1> This is an input </h1>
-            <div class="row" style="display: flex;">
-                <div class="column" style="flex: 50%;">
+            <div class="row">
+                <div class="column">
+                    <div style="display: flex; justify-content: space-between;">
+                        <span class="input_label">Subject:</span>
+                        <input name="subject" type="text" id="subject">
+                    </div><br>
                     <textarea name="email_input" id="typebox" rows="32" cols="64" style="resize: none;"
                         hx-trigger="keyup changed delay:1000ms" hx-post="/mail-content" hx-target="#email-preview"
                         placeholder="Type out your email here..."></textarea>
                 </div>
 
-                <div class=" column" id="email-preview" style="flex: 50%;"></div>
+                <div class="column">
+                    <div id="subject-preview">Subject preview here</div><br>
+                    <div id="email-preview"></div>
+                </div>
             </div>
 
-            <div class="row" style="display: flex; align-items: center; justify-content: space-between;">
+            <div class="row" style="align-items: center; justify-content: space-between;">
                 <div class="column">
                     <h1>Current Mailing List Subscribers</h1>
                 </div>