From 7415bb209346a12c6e6c4834be889b576299a88b Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Sat, 30 Jan 2021 14:56:17 +0100 Subject: [PATCH 1/5] Add Mastodon logo to site's description See #6 --- CHANGELOG.md | 1 + src/index.pug | 5 ++++- src/static/mastodon.svg | 1 + src/style/main.scss | 5 +++++ 4 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 src/static/mastodon.svg 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..964fb7d 100644 --- a/src/index.pug +++ b/src/index.pug @@ -39,7 +39,10 @@ html(lang="en") header h1 img(src="/icon.svg" width=72 height=72 alt="toot") - p Quickly post on any Mastodon instance + p + | Quickly post on any + img(src="/mastodon.svg" width=95.5 height=27) + | instance main form#form section 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/main.scss b/src/style/main.scss index 58de061..7dce27f 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -55,6 +55,11 @@ header { p { margin: 0 0 26px; + + img { + display: inline; + margin-bottom: -11px; + } } } From c6a92c3046a42843ead25a72809d17270351c416 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Fri, 12 Mar 2021 21:08:53 +0100 Subject: [PATCH 2/5] New, more Mastodon-like header --- src/index.pug | 3 +-- src/style/_variables.scss | 2 ++ src/style/main.scss | 17 ++++++++++++----- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/index.pug b/src/index.pug index 964fb7d..a73276f 100644 --- a/src/index.pug +++ b/src/index.pug @@ -40,9 +40,8 @@ html(lang="en") h1 img(src="/icon.svg" width=72 height=72 alt="toot") p - | Quickly post on any + | for img(src="/mastodon.svg" width=95.5 height=27) - | instance main form#form section diff --git a/src/style/_variables.scss b/src/style/_variables.scss index 49e7d7a..7216bc4 100644 --- a/src/style/_variables.scss +++ b/src/style/_variables.scss @@ -29,3 +29,5 @@ $button-hover-bg: #4ea2df; $button-text: white; $input-bg: #131419; + +$border-color: #303643; diff --git a/src/style/main.scss b/src/style/main.scss index 7dce27f..e23a03a 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -46,19 +46,26 @@ 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 { - display: inline; - margin-bottom: -11px; + vertical-align: middle; } } } From eedb55459d48f8d4131d680fc9249fd36b34c3d6 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Fri, 12 Mar 2021 21:16:02 +0100 Subject: [PATCH 3/5] Add more Mastodon-like footer --- src/index.pug | 2 +- src/style/_variables.scss | 2 -- src/style/main.scss | 9 ++++----- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/index.pug b/src/index.pug index a73276f..a57d3b1 100644 --- a/src/index.pug +++ b/src/index.pug @@ -62,6 +62,6 @@ html(lang="en") 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/style/_variables.scss b/src/style/_variables.scss index 7216bc4..e8b372c 100644 --- a/src/style/_variables.scss +++ b/src/style/_variables.scss @@ -22,8 +22,6 @@ $bg: #1F232B; $text: #9baec8; $title:#d9e1e8; -$footer-bg: #16191F; - $button-bg: #3c99dc; $button-hover-bg: #4ea2df; $button-text: white; diff --git a/src/style/main.scss b/src/style/main.scss index e23a03a..87ea0db 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -151,8 +151,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; @@ -165,12 +165,11 @@ footer { a { color: inherit; + text-decoration: none; &:hover { - color: $title; + text-decoration: underline; } - - transition: color 300ms ease; } } } From 9f8bdbfb44c06676ff7a7906db7ad762e3b0ac5d Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Fri, 12 Mar 2021 21:20:25 +0100 Subject: [PATCH 4/5] Style button like the Mastodon version of it --- src/index.pug | 2 +- src/style/_variables.scss | 4 ++-- src/style/main.scss | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/index.pug b/src/index.pug index a57d3b1..ecf26c2 100644 --- a/src/index.pug +++ b/src/index.pug @@ -57,7 +57,7 @@ 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? diff --git a/src/style/_variables.scss b/src/style/_variables.scss index e8b372c..e24079f 100644 --- a/src/style/_variables.scss +++ b/src/style/_variables.scss @@ -22,8 +22,8 @@ $bg: #1F232B; $text: #9baec8; $title:#d9e1e8; -$button-bg: #3c99dc; -$button-hover-bg: #4ea2df; +$button-bg: #2b90d9; +$button-hover-bg: #56a7e1; $button-text: white; $input-bg: #131419; diff --git a/src/style/main.scss b/src/style/main.scss index 87ea0db..a7256d1 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -112,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; From ece0b9a865c66744561f036b506db33bebd39ec5 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Fri, 12 Mar 2021 21:20:34 +0100 Subject: [PATCH 5/5] Add placeholder for