Add the very basic styles

debian/copyright

@@ -8,3 +8,106 @@ Files:
 Copyright:
  2023 jordi fita mas
 License: AGPL-3.0-only
+
+Files:
+ web/static/fonts/*
+Copyright:
+ 2020 Philipp Nurullin
+ 2020 Konstantin Bulenkov
+ 2020 The JetBrains Mono Project Authors
+License: OFL-1.1
+
+License: OFL-1.1
+ Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+ .
+ This Font Software is licensed under the SIL Open Font License, Version 1.1.
+ This license is copied below, and is also available with a FAQ at:
+ https://scripts.sil.org/OFL
+ .
+ .
+ -----------------------------------------------------------
+ SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+ -----------------------------------------------------------
+ .
+ PREAMBLE
+ The goals of the Open Font License (OFL) are to stimulate worldwide
+ development of collaborative font projects, to support the font creation
+ efforts of academic and linguistic communities, and to provide a free and
+ open framework in which fonts may be shared and improved in partnership
+ with others.
+ .
+ The OFL allows the licensed fonts to be used, studied, modified and
+ redistributed freely as long as they are not sold by themselves. The
+ fonts, including any derivative works, can be bundled, embedded,
+ redistributed and/or sold with any software provided that any reserved
+ names are not used by derivative works. The fonts and derivatives,
+ however, cannot be released under any other type of license. The
+ requirement for fonts to remain under this license does not apply
+ to any document created using the fonts or their derivatives.
+ .
+ DEFINITIONS
+ "Font Software" refers to the set of files released by the Copyright
+ Holder(s) under this license and clearly marked as such. This may
+ include source files, build scripts and documentation.
+ .
+ "Reserved Font Name" refers to any names specified as such after the
+ copyright statement(s).
+ .
+ "Original Version" refers to the collection of Font Software components as
+ distributed by the Copyright Holder(s).
+ .
+ "Modified Version" refers to any derivative made by adding to, deleting,
+ or substituting -- in part or in whole -- any of the components of the
+ Original Version, by changing formats or by porting the Font Software to a
+ new environment.
+ .
+ "Author" refers to any designer, engineer, programmer, technical
+ writer or other person who contributed to the Font Software.
+ .
+ PERMISSION & CONDITIONS
+ Permission is hereby granted, free of charge, to any person obtaining
+ a copy of the Font Software, to use, study, copy, merge, embed, modify,
+ redistribute, and sell modified and unmodified copies of the Font
+ Software, subject to the following conditions:
+ .
+ 1) Neither the Font Software nor any of its individual components,
+ in Original or Modified Versions, may be sold by itself.
+ .
+ 2) Original or Modified Versions of the Font Software may be bundled,
+ redistributed and/or sold with any software, provided that each copy
+ contains the above copyright notice and this license. These can be
+ included either as stand-alone text files, human-readable headers or
+ in the appropriate machine-readable metadata fields within text or
+ binary files as long as those fields can be easily viewed by the user.
+ .
+ 3) No Modified Version of the Font Software may use the Reserved Font
+ Name(s) unless explicit written permission is granted by the corresponding
+ Copyright Holder. This restriction only applies to the primary font name as
+ presented to the users.
+ .
+ 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+ Software shall not be used to promote, endorse or advertise any
+ Modified Version, except to acknowledge the contribution(s) of the
+ Copyright Holder(s) and the Author(s) or with their explicit written
+ permission.
+ .
+ 5) The Font Software, modified or unmodified, in part or in whole,
+ must be distributed entirely under this license, and must not be
+ distributed under any other license. The requirement for fonts to
+ remain under this license does not apply to any document created
+ using the Font Software.
+ .
+ TERMINATION
+ This license becomes null and void if any of the above conditions are
+ not met.
+ .
+ DISCLAIMER
+ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+ OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+ COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+ DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+ OTHER DEALINGS IN THE FONT SOFTWARE.

pkg/router.go

@@ -7,6 +7,7 @@ import (
 
 func NewRouter(db *Db) http.Handler {
 	router := http.NewServeMux()
+	router.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static"))))
 	router.Handle("/login", LoginHandler(db))
 	router.Handle("/logout", LogoutHandler(db))
 	router.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {

web/static/numerus.css

@@ -0,0 +1,266 @@
+/**
+ * SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
+ *
+ * SPDX-License-Identifier: GPL-3.0-only
+ */
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+* {
+	margin: 0;
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: italic;
+	font-weight: 100;
+	font-display: swap;
+	src: local('JetBrains Mono Thin'), url('./fonts/JetBrainsMono-ThinItalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: italic;
+	font-weight: 200;
+	font-display: swap;
+	src: local('JetBrains Mono ExtraLight'), url('./fonts/JetBrainsMono-ExtraLightItalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: italic;
+	font-weight: 300;
+	font-display: swap;
+	src: local('JetBrains Mono Light'), url('./fonts/JetBrainsMono-LightItalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: local('JetBrains Mono'), url('./fonts/JetBrainsMono-Italic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: italic;
+	font-weight: 500;
+	font-display: swap;
+	src: local('JetBrains Mono Medium'), url('./fonts/JetBrainsMono-MediumItalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: italic;
+	font-weight: 600;
+	font-display: swap;
+	src: local('JetBrains Mono SemiBoldItalic'), url('./fonts/JetBrainsMono-SemiBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: local('JetBrains Mono Bold'), url('./fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: italic;
+	font-weight: 800;
+	font-display: swap;
+	src: local('JetBrains Mono ExtraBold'), url('./fonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: normal;
+	font-weight: 100;
+	font-display: swap;
+	src: local('JetBrains Mono Thin'), url('./fonts/JetBrainsMono-Thin.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: normal;
+	font-weight: 200;
+	font-display: swap;
+	src: local('JetBrains Mono ExtraLight'), url('./fonts/JetBrainsMono-ExtraLight.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: normal;
+	font-weight: 300;
+	font-display: swap;
+	src: local('JetBrains Mono Light'), url('./fonts/JetBrainsMono-Light.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src:
+	local('JetBrains Mono'), url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: normal;
+	font-weight: 500;
+	font-display: swap;
+	src: local('JetBrains Mono Medium'), url('./fonts/JetBrainsMono-Medium.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: normal;
+	font-weight: 600;
+	font-display: swap;
+	src: local('JetBrains Mono SemiBold'), url('./fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src:
+	local('JetBrains Mono Bold'), url('./fonts/JetBrainsMono-Bold.woff2') format('woff2'); }
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: normal;
+	font-weight: 800;
+	font-display: swap;
+	src: local('JetBrains Mono ExtraBold'), url('./fonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
+}
+
+:root {
+	--numerus--color--black: #3f3b37;
+	--numerus--color--dark-gray: #8a8885;
+	--numerus--color--light-gray: #e1dbd6;
+	--numerus--color--white: #ffffff;
+	--numerus--color--yellow: #ffd200;
+	--numerus--color--red: #ff7a53;
+	--numerus--color--green: #5ae487;
+	--numerus--color--blue: #55bfff;
+	--numerus--color--hay: #ffe673;
+
+	--numerus--text-color: var(--numerus--color--black);
+	--numerus--background-color: var(--numerus--color-white);
+	--numerus--font-family: 'JetBrains Mono';
+
+	--numerus--header--background-color: #ede9e5;
+}
+
+html, body {
+	height: 100%;
+}
+
+html {
+	font-family: var(--numerus--font-family), monospace;
+}
+
+body {
+	color: var(--numerus--text-color);
+	background-color: var(--numerus--background-color);
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+	display: block;
+	max-width: 100%;
+}
+
+input, button, textarea, select {
+	font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+	overflow-wrap: break-word;
+}
+
+input[type="submit"], button {
+	background-color: var(--numerus--color--white);
+	border: 2px solid var(--numerus--color--black);
+	text-transform: uppercase;
+}
+
+input[type="submit"]:hover, button:hover {
+	background-color: var(--numerus--color--light-gray);
+}
+
+input[type="submit"]:active, button:active {
+	background-color: var(--numerus--color--black);
+	border-color: var(--numerus--color--white);
+	text-color: var(--numerus--color--white);
+}
+
+.web {
+	margin: 5.3125rem 2.5rem;
+	background-color: var(--numerus--header--background-color);
+}
+
+.web h1 {
+	margin-bottom: 1.875em;
+}
+
+#login {
+	background-color: var(--numerus--color--hay);
+	padding: 1.5625em;
+}
+
+#login h2 {
+	margin-bottom: 1em;
+}
+
+div[role="alert"].error {
+	padding: 1.3125em;
+	background-color: var(--numerus--color--red);
+}
+
+header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: var(--numerus--header--background-color);
+	padding: .625rem 1.875rem;
+}
+
+nav {
+	position: relative;
+}
+
+nav > button {
+	width: 4.375rem;
+	height: 4.375rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 50%;
+	border: none;
+}
+
+nav button {
+	cursor: pointer;
+}
+
+nav ul {
+	list-style: none;
+	padding: none;
+	position: absolute;
+	right: -1.875em;
+	top: calc(100% + .625rem);
+}
+
+nav ul button {
+	border: 0;
+	width: 31.25rem;
+	height: 5.25rem;
+}

web/template/index.html

@@ -4,12 +4,21 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>Numerus</title>
+		<link rel="stylesheet" type="text/css" media="screen" href="/static/numerus.css">
 	</head>
 	<body>
-		<h1>Numerus</h1>
+		<header>
+			<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
+			<nav role="navigation">
+				<button aria-haspopup="true">
+				<svg role="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="50" height="50"><path fill="none" d="M0 0h24v24H0z"/><path d="M9.342 18.782l-1.931-.518.787-2.939a10.988 10.988 0 0 1-3.237-1.872l-2.153 2.154-1.415-1.415 2.154-2.153a10.957 10.957 0 0 1-2.371-5.07l1.968-.359C3.903 10.812 7.579 14 12 14c4.42 0 8.097-3.188 8.856-7.39l1.968.358a10.957 10.957 0 0 1-2.37 5.071l2.153 2.153-1.415 1.415-2.153-2.154a10.988 10.988 0 0 1-3.237 1.872l.787 2.94-1.931.517-.788-2.94a11.072 11.072 0 0 1-3.74 0l-.788 2.94z"/></svg></button>
+				<ul>
+					<li><form method="POST" action="/logout"><button type="submit">Logout</button></form></li>
+				</ul>
+			</nav>
+		</header>
+		<main>
 			<h2>Welcome</h2>
-		<form method="POST" action="/logout">
+		</main>
-			<button type="submit">Logout</button>
-		</form>
 	</body>
 </html>

web/template/login.html

@@ -4,13 +4,19 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>Login — Numerus</title>
+		<link rel="stylesheet" type="text/css" media="screen" href="/static/numerus.css">
 	</head>
-	<body>
+	<body class="web">
-		<h1>Numerus</h1>
+		<h1><img src="/static/numerus.svg" alt="Numerus" width="620" height="77"></h1>
-		<h2>Login</h2>
+
 		{{ if .LoginError }}
+		<div class="error" role="alert">
 			<p>{{ .LoginError }}</p>
+		</div>
 		{{ end }}
+
+		<section id="login">
+			<h2>Login</h2>
 			<form method="POST" action="/login">
 				<label for="user_email">Email</label>
 				<input id="user_email" type="email" required autofocus name="email" autocapitalize="none" value="{{ .Email }}">
@@ -20,5 +26,6 @@
 
 				<button type="submit">Login</button>
 			</form>
+		</section>
 	</body>
 </html>