diff --git a/CHANGELOG.md b/CHANGELOG.md index 6025b1d..d097ab3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - License changed from MIT to AGPL-3.0 - Add new, Mastodon-like logo (#6) +- Change "Mastodon" text to Mastodon's logo (#6) ## [1.0.0] - 2021-01-29 diff --git a/src/index.pug b/src/index.pug index d13a52a..7bc4cac 100644 --- a/src/index.pug +++ b/src/index.pug @@ -39,12 +39,14 @@ html(lang="en") header h1 img(src="/icon.svg" width=72 height=72 alt="toot") - p Quickly post on any Mastodon instance + p + | for + img(src="/mastodon.svg" width=95.5 height=27) main form#form section label(for="text") Post text - textarea#text(rows=6, name="text", required) + textarea#text(rows=6, name="text", placeholder="What's on your mind?",required) section datalist#instances_list label(for="choose_instance") Choose your Mastodon instance @@ -55,11 +57,11 @@ html(lang="en") label(for="remember") Remember my instance on this device section.submit - input(type="submit", value="Toot!") + input(type="submit", value="TOOT!") footer section a(href="https://joinmastodon.org/") What is Mastodon? section - a(href="https://github.com/NickKaramoff/toot") This project on GitHub + a(href="https://github.com/NickKaramoff/toot") toot on GitHub script(src="index.js") diff --git a/src/static/mastodon.svg b/src/static/mastodon.svg new file mode 100644 index 0000000..90a59b5 --- /dev/null +++ b/src/static/mastodon.svg @@ -0,0 +1 @@ + diff --git a/src/style/_variables.scss b/src/style/_variables.scss index 49e7d7a..e24079f 100644 --- a/src/style/_variables.scss +++ b/src/style/_variables.scss @@ -22,10 +22,10 @@ $bg: #1F232B; $text: #9baec8; $title:#d9e1e8; -$footer-bg: #16191F; - -$button-bg: #3c99dc; -$button-hover-bg: #4ea2df; +$button-bg: #2b90d9; +$button-hover-bg: #56a7e1; $button-text: white; $input-bg: #131419; + +$border-color: #303643; diff --git a/src/style/main.scss b/src/style/main.scss index 58de061..a7256d1 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -46,15 +46,27 @@ body { } header { + border-bottom: 1px solid $border-color; + padding: 1.5rem 0; text-align: center; - padding-top: 2rem; + width: 100%; h1 { - margin: 0 0 8px; + display: inline-block; + margin: 0 1rem 0 0; + vertical-align: middle; } p { - margin: 0 0 26px; + display: inline-block; + line-height: 1.2rem; + margin: 0; + text-align: left; + vertical-align: middle; + + img { + vertical-align: middle; + } } } @@ -100,7 +112,8 @@ main { color: $button-text; font-weight: 500; font-family: inherit; - padding: 4px 16px; + height: 2.5rem; + padding: 0 1rem; line-height: 36px; border: 0; cursor: pointer; @@ -139,8 +152,8 @@ main { } footer { - background-color: $footer-bg; - padding: 0.5rem 0; + border-top: 1px solid $border-color; + padding: 1rem 0; width: 100%; display: flex; flex-direction: row; @@ -153,12 +166,11 @@ footer { a { color: inherit; + text-decoration: none; &:hover { - color: $title; + text-decoration: underline; } - - transition: color 300ms ease; } } }