website: ui tweaks

packages/website/404.html

@@ -0,0 +1,14 @@
+---
+title: 404
+layout: default
+permalink: /404.html
+excludeFromSitemap: true
+---
+
+<div class="ta-c">
+	<figure>
+		<img src="/images/404.png" style="width:65vh" />
+		<figcaption>Image by https://icons8.com</figcaption>
+	</figure>
+	<p>Uh oh, the page you wanted to see isn't here. How about <a href="/">going to the homepage</a>?</p>
+</div>

packages/website/_includes/default.html

@@ -22,7 +22,7 @@
 		}
 
 		body {
-			font-family: Arial;
+			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 			background: white;
 			min-height: 100vh;
 			line-height: 1.4;
@@ -63,6 +63,10 @@
 			font-size: inherit;
 		}
 
+		figcaption {
+			color: #6a6a6a;
+		}
+
 		.homepage-title {
 			font-size: 3.1em;
 			margin: 0;
@@ -75,6 +79,7 @@
 			padding: 0.7em;
 			max-width: 1200px;
 			margin: 0 auto;
+			min-height: 55vh;
 		}
 
 		@media screen and (max-width: 400px) {
@@ -120,7 +125,7 @@
 
 		.btn {
 			background: rgba(0, 0, 0, 0.2);
-			padding: 10px 20px;
+			padding: 10px 2em;
 			display: inline-block;
 			border-radius: 8px;
 			text-transform: uppercase;
@@ -134,11 +139,12 @@
 
 		.download-btn {
 			color: white;
-			background-color: #4d7bd6;
+			background: linear-gradient(to bottom, #4d7bd6, #3c5d9e);
-			border: 2px solid #4569b1;
+			border: 2px solid #32508b;
+			border-bottom-color: #4870b3;
 			line-height: 2.5rem;
 			margin: 1rem 0 0;
-			width: 80%;
+			/* width: 80%; */
 			text-decoration: none;
 		}
 
@@ -175,6 +181,10 @@
 			padding: 0.5em;
 		}
 
+		.site-header__logo {
+			width: 50px;
+			height: 20px
+		}
 
 		.site-footer {
 			text-align: center;
@@ -232,6 +242,7 @@
 
 		.info {
 			display: none;
+			visibility: hidden;
 		}
 
 		.people-say {
@@ -366,7 +377,6 @@
 			}
 
 			.info {
-				display: block;
 				background: white;
 				box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.15);
 				padding: 2rem;
@@ -383,6 +393,8 @@
 			}
 
 			.info.show {
+				display: block;
+				visibility: visible;
 				transform: translateY(0);
 			}
 
@@ -451,9 +463,11 @@
 	<header class="site-header">
 		<div>
 			<h2 style="display: inline;">
-				<a href="/"><svg width="100" height="40">
+				<a href="/">
+					<svg class="site-header__logo">
 						<use xlink:href="#logo"></use>
-					</svg> Web Maker</a>
+					</svg> Web Maker
+				</a>
 			</h2>
 		</div>
 		<div>

packages/website/index.html

@@ -2,7 +2,7 @@
 layout: default.html
 ---
 
-<h2 style="font-size: 2em; " class="ta-c">What you get</h2>
+<h2 style="font-size: 2em; " class="ta-c">Awesome Features</h2>
 
 <div class="flex feature-box">
 	<div class="feature">