frontend: add custom design

assets/sass/app.scss

@@ -1,5 +1,11 @@
 @import "layout";
 
+a {
+	&:hover {
+		color: lighten($secondary, 30%);
+	}
+}
+
 td.actions {
 	display: flex;
 	flex-direction: row;
@@ -24,3 +30,77 @@ td.actions {
 		}
 	}
 }
+
+body > header {
+	background: transparent;
+	line-height: 16px;
+
+	@include container;
+	padding-top: 8px;
+	padding-bottom: 8px;
+	align-items: center;
+
+	@media (max-width: $mobileThreshold) {
+		padding: 0;
+	}
+
+	.logo {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		max-width: 148px;
+		padding: 8px;
+
+		font-size: 18px;
+		line-height: 18px;
+
+		> img {
+			margin: 0 8px 0 0;
+			width: initial;
+			height: 48px;
+			flex-shrink: 0;
+		}
+	}
+
+	nav {
+		ul {
+			li {
+				margin-left: 8px;
+
+				a, button {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					height: auto;
+					padding: 8px;
+
+					border-radius: 3px;
+
+					.feather {
+						--icon-size: 16px;
+					}
+
+					.tip {
+						position: static;
+						display: block;
+						visibility: visible;
+						height: auto;
+						padding: 0 0 0 4px;
+						transform: none;
+						color: inherit;
+
+						opacity: 1;
+						background: transparent;
+						text-transform: uppercase;
+						font-size: 16px;
+						line-height: 16px;
+					}
+				}
+			}
+		}
+	}
+}
+
+body > footer {
+	background: transparent;
+}

views/about.njk

@@ -3,9 +3,9 @@
 {% set title = app.name + ': it\'s not just emails' %}
 
 {% block body %}
-    <h1>{{ title }}</h1>
-
     <div class="container">
+        <h1>{{ title }}</h1>
+
         <section class="panel">
             <h2><i data-feather="help-circle"></i> What is Rainbox Email?</h2>
             <p>Rainbox Email is a <abbr title="Free and Open Source Software">FOSS</abbr> service that allows anyone to