www.spaceplanner.app

commit 9c1de8bb7d321fdae42c8c4d1e7b1ddec03e8927
parent 976471dc3b7a218a5687ec8ae1b5910c5ca9ac12
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date:   Tue, 17 Sep 2024 10:35:35 -0700

Update styles, mainly for the landing page

Added a few paragraphs of possible selling points and prominent
signup buttons. The login button used to be an icon, but now it's
text as the icon wasn't conveying the purpose of the button easily
enough in my opinion.

I'v added two classes for anchor tags: button and pop.  The button
class styles the element as a button and the pop tag gives the link
high contrast colors (and is really only meant to be used in concert
with the button class).

Diffstat:
M
files/css/main.css
 | 
47
+++++++++++++++++++++++++++++++++++------------
M
files/index.html
 | 
8
+++++---
M
files/lib/etc.js
 | 
8
+++++++-

3 files changed, 47 insertions(+), 16 deletions(-)
diff --git a/files/css/main.css b/files/css/main.css
@@ -1,5 +1,5 @@
 :root {
-	--bar-height: 2em;
+	--bar-height: 2.5em;
 }
 
 body {
@@ -9,19 +9,19 @@ body {
 }
 
 #bar {
-        position: absolute;
+	position: absolute;
 	box-sizing: border-box;
 	top: 0;
 	left: 0;
 	width: 100vw;
 	max-width: 100%;
-        height: var(--bar-height);
+	height: var(--bar-height);
 	display: flex;
 	align-items: center;
 	padding: .4em;
 
-        background-color: #EEE;
-	border-bottom: medium ridge #EEE;
+	background-color: white;
+	border-bottom: thin solid black;
 }
 
 #bar > ul {
@@ -40,12 +40,10 @@ body {
 	display: inline-block;
 }
 
-#bar > ul > li > a {
-	padding: 0.1em;
-}
-
 #bar > ul > li > a > img.icon {
-	width: 1.5em;
+	margin: 0.15em;
+	padding: 0.1em;
+	width: calc(var(--bar-height) - .8em);
 	border-radius: .2em;
 }
 
@@ -118,7 +116,7 @@ input:not([type]), input[type="password"], input[type="email"] {
 }
 
 button, input[type="submit"] {
-        font-size: large;
+	font-size: large;
 	background-color: #EEE;
 	border: .15em outset #BBB;
 	border-radius: .2em;
@@ -140,7 +138,7 @@ form.credentials {
 }
 
 form.credentials > label, form.credentials > input {
-        display: block;
+	display: block;
 }
 
 form.credentials > input {
@@ -158,3 +156,28 @@ form.credentials > input {
 .small {
 	font-size: smaller;
 }
+
+a.button:hover {
+	background-color: #FAFAFA;
+}
+
+a.button {
+	margin: .2em;
+	padding: .25em;
+	border-radius: .15em;
+	text-decoration: none;
+	font-weight: bold;
+	color: black;
+	border: thin solid lightgrey;
+}
+
+a.pop:hover {
+	background-color: #0000D0;
+}
+
+a.pop {
+	font-weight: bold;
+	background-color: blue;
+	color: white;
+	border: thin solid black;
+}
diff --git a/files/index.html b/files/index.html
@@ -8,8 +8,10 @@
 	<h1>Spaceplanner</h1>
 	<p>Easy. Fast. Simple.</p>
 
-        <p>Create accurate floorplans quickly and plan the furnature
-        placement for your new home.</p>
+        <p>Quickly create accurate floorplans for you or your client's new home.</p>
+	<p>Plan furniture placement.</p>
+	<p>Instantly switch between furniture layouts.</p>
+	<p>Seamlessly switch between your touch device and laptop.</p>
 
-	<p><a href="/register">Signup</a> now!</p>
+	<a class="pop button" href="/register">Signup now!</a>
 </html>
diff --git a/files/lib/etc.js b/files/lib/etc.js
@@ -37,7 +37,13 @@ export function bar(on) {
 	right.classList.add("right")
 
 	if (!api.authorized()) {
-		additem(right, link("Login", "/login", "log-in"))
+		let l = link("Login", "/login")
+		l.classList.add("button")
+		additem(right, l)
+		l = link("Signup", "/register")
+		l.classList.add("button")
+		l.classList.add("pop")
+		additem(right, l)
 	} else {
 		additem(left, link("Floorplans", "/floorplans"))