Add Mastodon branding (#8)

from NickKaramoff/mastodon-branding

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
 

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")

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;

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;
-			}
-
-			transition: color 300ms ease;
+				text-decoration: underline;
+			}
 		}
 	}
 }