From b11fc5fe67dfec24e3a27113f5119ec3da1f6a25 Mon Sep 17 00:00:00 2001
From: Ben Busby <ben.busby7@gmail.com>
Date: Wed, 22 Jan 2020 07:15:29 +0000
Subject: [PATCH] Improved homepage styling

---
 app/static/css/main.css  | 56 ++++++++++++++++++++++++++++++++++++++++
 app/templates/index.html | 11 ++++----
 2 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 app/static/css/main.css

diff --git a/app/static/css/main.css b/app/static/css/main.css
new file mode 100644
index 0000000..d514443
--- /dev/null
+++ b/app/static/css/main.css
@@ -0,0 +1,56 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans);
+
+body {
+    background: #fff;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.search-container {
+    width: 80%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 600px;
+}
+
+.search-items {
+    width: 100%;
+    position: relative;
+    display: flex;
+}
+
+#search-bar {
+    width: 100%;
+    border: 3px solid #0000FF;
+    padding: 5px;
+    height: 40px;
+    border-radius: 10px;
+    outline: none;
+    font-size: 24px;
+    color: #0000FF;
+    border-radius: 10px 10px 0 0;
+    max-width: 600px;
+}
+
+#search-bar:focus{
+    color: #0000FF;
+}
+
+#search-submit {
+    width: 100%;
+    height: 40px;
+    border: 1px solid #0000FF;
+    background: #0000FF;
+    text-align: center;
+    color: #fff;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 20px;
+    align-content: center;
+    align-items: center;
+    margin: auto;
+    border-radius: 0 0 10px 10px;
+    max-width: 600px;
+}
+
diff --git a/app/templates/index.html b/app/templates/index.html
index 7343f77..a81c784 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,9 +1,10 @@
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="/static/js/controller.js"></script>
 <link rel="stylesheet" href="/static/css/main.css">
 
-<div>
-    <h1>No-AMP Search</h1>
-
-    <input type="text" id="search-bar" name="search-bar"/>
-    <button id="search-submit" type="submit">Go</button>
+<div class="search-container">
+    <div class="search-fields">
+        <input type="text" id="search-bar">
+        <button type="submit" id="search-submit">Search</button>
+    </div>
 </div>