diff options
| -rw-r--r-- | frontend/start.ts | 9 | ||||
| -rw-r--r-- | frontend/style.sass | 30 | ||||
| -rw-r--r-- | frontend/submit.ts | 10 |
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 ) } |