static frontend changes

3 files changed, 33 insertions, 16 deletions

diff --git a/frontend/start.ts b/frontend/start.ts
index d686b27..5e006de 100644
--- a/frontend/start.ts
+++ b/frontend/start.ts
@@ -6,9 +6,12 @@ export function section_info_start() {
     return e("section", { class: "info" },
         e("h1", {}, "Fastbangs"),
         e("p", {}, `
-            This application provides a way to (mostly) locally handle search bangs.
-            First select a default engine to use, then register this page as a search in your browser
-        `),
+            This application provides a way to (mostly) locally handle search bangs. To use it:
+		`),
+		e("ul", {},
+			e("li", {}, "Select a fallback search engine, used when a search doesn't contain a bang"),
+			e("li", {}, "Add this search engine to your browser, or bookmark this page"),
+        ),
         e("a", { href: "#~submit" }, "Propose or change a bang"),
     )
 }
diff --git a/frontend/style.sass b/frontend/style.sass
index eac7239..b804f37 100644
--- a/frontend/style.sass
+++ b/frontend/style.sass
@@ -1,8 +1,10 @@
-$ac-dark: rgb(29, 24, 29)
-$ac-light: rgb(255, 116, 227)
+$dark:    #1a101a
+$ac-dark: #452273
+$light:    rgb(255, 116, 227)
+$ac-light: rgb(217,  99, 193)
 
 body
-    background-color: $ac-dark
+    background-color: $dark
     margin: 0px
 
 p, h1, h2, h3, h4, h5, h6, input, button, label, li
@@ -39,7 +41,7 @@ section.engine-select
         flex-direction: row
         flex-wrap: wrap
     li
-        background-color: #00000040
+        background-color: #000000
         border-radius: 0.5em
         padding: 1em
         margin: 0.5em
@@ -48,7 +50,7 @@ section.engine-select
             cursor: pointer
             transition: background-color 0.1s ease-out
             &:hover
-                background-color: #00000080
+                background-color: $ac-dark
 
 section.search
     width: 100vw
@@ -67,20 +69,30 @@ input, button
 
 input
     width: 25em
-    border: 0.15em solid $ac-light
+    border: 0.15em solid $light
     background-color: rgba(0, 0, 0, 0.3)
     outline: none
-    transition: background-color 0.1s ease-out, border-color 0.1s ease-out
+    transition: background-color 0.2s ease-out, border-color 0.2s ease-out
     &:focus
         background-color: rgba(0, 0, 0, 0.5)
-        border-color: lightgray !important
+        border-color: $ac-light
 
 button
     margin-left: 1em
-    background-color: $ac-light
+    color: white
+    background-color: $light
     backdrop-filter: blur(5px)
     border: 0
     cursor: pointer
+    transition: background-color 0.2s
+    &:hover
+        background-color: $ac-light
 
 label
     margin-right: 1em
+
+a
+  color: $light
+  transition: color 0.2s
+  &:hover
+    color: $ac-light
diff --git a/frontend/submit.ts b/frontend/submit.ts
index bdd9720..a380998 100644
--- a/frontend/submit.ts
+++ b/frontend/submit.ts
@@ -41,10 +41,12 @@ export function section_submit() {
             Proposals will come into effect after being approved by an administrator.
             If an email address is provided, you will be informed about the status of your proposal. (TODO email stuff not implemented)
         `),
-        e("div", {}, e("label", { for: "i-name" }, "Website Name"), name_input),
-        e("div", {}, e("label", { for: "i-bang" }, "Bang"), bang_input),
-        e("div", {}, e("label", { for: "i-url" }, "Search URL"), url_input),
-        e("div", {}, e("label", { for: "i-email" }, "Notification email (optional)"), email_input),
+        e("table", {},
+            e("tr", {}, e("td", {}, e("label", {for: "i-name" }, "Website Name:"                 )), e("td", {}, name_input )),
+            e("tr", {}, e("td", {}, e("label", {for: "i-bang" }, "Bang:"                         )), e("td", {}, bang_input )),
+            e("tr", {}, e("td", {}, e("label", {for: "i-url"  }, "Search URL:"                   )), e("td", {}, url_input  )),
+            e("tr", {}, e("td", {}, e("label", {for: "i-email"}, "Notification email (optional):")), e("td", {}, email_input))
+        ),
         submit_button
     )
 }