new styling for frontpage, update login and authorize templates (#46)

* new styling for frontpage, update login and authorize templates

* run go fmt

* add AssetBaseDir to command flag parsing

* untested: move landing page to it's own router

* go fmt, fix typo

* fix package, adapt to proper Route structure

1 files changed, 191 insertions, 0 deletions

diff --git a/web/assets/bundle.css b/web/assets/bundle.css
new file mode 100644
index 000000000..768510764
--- /dev/null
+++ b/web/assets/bundle.css
@@ -0,0 +1,191 @@
+html, body {
+	padding: 0;
+	margin: 0;
+	background: #525c66;
+	color: #fafaff;
+	font-family: sans-serif;
+}
+
+body {
+	display: grid;
+	grid-template-columns: 1fr 50% 1fr;
+	grid-template-columns: 1fr 90ch 1fr;
+	line-height: 1.5em;
+
+	min-height: 100vh;
+	grid-auto-rows: auto;
+	grid-auto-flow: dense;
+}
+
+body > * {
+		align-self: start;
+		grid-column: 2;
+	}
+
+body header, body footer, body .fullWidth {
+		grid-column: 1/4;
+		grid-column: 1/-1;
+	}
+
+body aside.left {
+		grid-column: 1;
+	}
+
+body aside.right {
+		grid-column: 3;
+	}
+
+header {
+	background: rgb(70, 79, 88);
+	padding: 2rem;
+	margin-bottom: 4rem;
+}
+
+h1 {
+	/* color: $acc1; */
+	margin: 0;
+	line-height: 2.4rem;
+}
+
+a {
+	color: #de8957;
+}
+
+a.button, button {
+	border-radius: 0.2rem;
+	background: #de8957;
+	color: #fafaff;
+	text-decoration: none;
+	font-size: 1.2rem;
+	font-weight: bold;
+	padding: 0.5rem;
+}
+
+a.button:hover, button:hover {
+		background: #c76d33;
+	}
+
+button {
+	border: none;
+	cursor: pointer;
+}
+
+.count {
+	background: rgb(70, 79, 88);
+	border-radius: 0.3rem;
+	padding: 0.2rem;
+}
+
+.nounderline {
+	text-decoration: none;
+}
+
+.accent {
+	color: #de8957;
+}
+
+aside.logo {
+	justify-self: center;
+}
+
+aside.logo img {
+		height: 30vh;
+	}
+
+section.apps {
+	align-self: start;
+}
+
+section.apps .applist {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 0.5rem;
+		align-content: start;
+	}
+
+section.apps .applist .entry {
+			display: grid;
+			grid-template-columns: 30% 1fr;
+			gap: 0.5rem;
+			padding: 0.5rem;
+			background: rgb(70, 79, 88);
+			border-radius: 0.5rem;
+		}
+
+section.apps .applist .entry .logo {
+				align-self: center;
+				width: 100%;
+				object-fit: contain;
+				flex: 1 1 auto;
+			}
+
+section.apps .applist .entry .logo.redraw {
+				fill: #fafaff;
+				stroke: #fafaff;
+			}
+
+section.apps .applist .entry div {
+				padding: 1rem 0;
+			}
+
+section.apps .applist .entry div h3 {
+					margin-top: 0;
+				}
+
+section.login form {
+		display: inline-grid;
+		grid-template-columns: auto 100%;
+		grid-gap: 0.7rem;
+	}
+
+section.login form input {
+			border: 1px solid #fafaff;
+			color: #fafaff;
+			background: #525c66;
+			width: 100%;
+		}
+
+section.login form button {
+			place-self: center;
+			grid-column: 2;
+		}
+
+footer {
+	align-self: end;
+
+	padding: 2rem;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+footer a {
+		font-weight: bold;
+	}
+
+@media screen and (orientation: portrait) {
+	body {
+		grid-template-columns: 1fr 92% 1fr;
+	}
+
+		body footer, body aside.left, body aside.right {
+			grid-column: 2;
+		}
+
+	header {
+		text-align: center;
+	}
+
+	footer {
+		padding: 0;
+		margin-top: 2rem;
+		grid-template-columns: 1fr;
+	}
+
+		footer div {
+			margin: 1rem 0;
+		}
+
+	section.apps .applist {
+		grid-template-columns: 1fr;
+	}
+}
\ No newline at end of file