From babc178e841443e1906e7a1f5136d896ab8bf611 Mon Sep 17 00:00:00 2001
From: Nick Playfair <nick@playfair.dev>
Date: Mon, 22 Feb 2021 21:59:53 +0000
Subject: [PATCH] Basic 2 column layout

---
 src/index.html | 45 ++++++++++++++++++++++++++-------------------
 src/style.css  | 18 ++++++++++++++++++
 2 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 src/style.css
diff --git a/src/index.html b/src/index.html
index db1b5ef..7622213 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,22 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>BOM2Table</title>
-</head>
-<body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css">
+    <title>BOM2Table</title>
+  </head>
+  <body>
+    <header>
+      <h1>BOM to Table</h1>
+    </header>
+    <main>
+      <section>
+        <h2>Upload BOM csv file</h2>
+        <input id="csvFile" type="file" accept=".csv" />
+        <hr />
+        <table></table>
+      </section>
+      <section>
+        <h2>Table HTML</h2>
+        <!-- <textarea id="markup" cols="30" rows="10"></textarea> -->
+        <pre><code id="markup" class="language-html"></code></pre>
+      </section>
+    </main>
 
-  <h1>BOM to table</h1>
-  
-  <input id="csvFile" type="file" accept=".csv" />
-  <hr>
-  <table></table>
-
-  <h2>Table HTML</h2>
-  <!-- <textarea id="markup" cols="30" rows="10"></textarea> -->
-  <pre><code id="markup" class="language-html"></code></pre>
-
-  <script src="bundle.js" defer></script>
-</body>
-</html>
\ No newline at end of file
+    <script src="bundle.js" defer></script>
+  </body>
+</html>
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..fccbbdf
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,18 @@
+header {
+  margin: 1.5rem;
+}
+header h1 {
+  text-align: center;
+}
+main {
+  display: flex;
+  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 500px;
+  max-width: 80vw;
+  justify-content: space-evenly;
+}
+
+section {
+  flex 0 0 50%;
+}
\ No newline at end of file
