Added responsive login page

saturn/server/static/css/login.css

@@ -0,0 +1,88 @@
+form {
+	position: absolute;
+	width: 100%;
+	max-width: 32rem;
+	left: calc(50vw - 16rem);
+	text-align: right;
+}
+
+@media (max-width: 42rem) {
+	form {
+		box-sizing: border-box;
+		max-width: 100%;
+		left: 0;
+		padding: 2rem;
+	}
+}
+
+form h1 {
+	text-align: center;
+}
+
+form input,
+form button {
+	box-sizing: border-box;
+	margin-top: 1rem;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	text-align: left;
+	border: none;
+}
+
+form .fail {
+	font-size: .75rem;
+	line-height: 1rem;
+	color: var(--danger-02);
+	text-align: left;
+}
+
+form input {
+	display: block;
+	width: 100%;
+	background: var(--field-01);
+	border-top: 2px solid transparent;
+	border-bottom: 2px solid var(--ui-04);
+	color: var(--text-01);
+	height: 2.5rem;
+}
+form input::placeholder {
+	color: var(--text-03);
+}
+form input:focus {
+	outline: 2px solid var(--focus);
+	border-color: transparent;
+}
+
+form button {
+	height: 2.5rem;
+	padding: 0 1rem;
+	vertical-align: bottom;
+	background: none;
+	cursor: pointer;
+}
+form button:hover {
+	background: var(--hover-ui);
+}
+form button:active {
+	background: var(--active-ui);
+}
+form button:focus {
+	outline: 2px solid var(--focus);
+}
+form button.primary {
+	padding-right: 4rem;
+	color: var(--text-04);
+	background: var(--interactive-01);
+	position: relative;
+	border: 1px solid transparent;
+}
+form button.primary:hover {
+	background: var(--hover-primary);
+}
+form button.primary:active {
+	background: var(--active-primary);
+}
+form button.primary:focus {
+	border: 1px solid var(--ui-background);
+	outline: 2px solid var(--focus);
+}

saturn/server/templates/login.html

@@ -0,0 +1,23 @@
+{% extends 'base.html' %}
+
+{% block style %}
+{{ super() }}
+<link rel="stylesheet" href="/static/css/login.css" />
+<link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
+{% endblock %}
+
+{% block body %}
+<form action="/" method="post">
+	<h1>Saturn</h1>
+	{% if failed %}
+	<p class="fail">Login failed</p>
+	{% endif %}
+	<input class="txt" type="password" name="password" placeholder="Password" />
+	<button class="icon" type="reset">
+		<i class="ri-delete-back-2-line ri-fw"></i>
+	</button>
+	<button class="primary" type="submit">
+		Log In
+	</button>
+</form>
+{% endblock %}