lyrics

commit cf34dd56f31ef6579561b61e2c06f8c1ad685544
parent 5793df9e357b0b622d0f87cfd27ee9b9efb23c2e
Author: brookjeynes <me@brookjeynes.dev>
Date:   Tue, 12 May 2026 18:12:27 +1000

chore: add minimal stylesheet

Signed-off-by: brookjeynes <me@brookjeynes.dev>

Diffstat:
M
internal/server/ui/layouts/base/base.templ
 | 
1
+
A
static/minimal.css
 | 
218
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

2 files changed, 219 insertions(+), 0 deletions(-)
diff --git a/internal/server/ui/layouts/base/base.templ b/internal/server/ui/layouts/base/base.templ
@@ -13,6 +13,7 @@ templ Base(params BaseParams) {
 			<script src="/static/js/toast.js" defer></script>
 			<script src="/static/js/string-utils.js" defer></script>
 			<link rel="stylesheet" href="/static/styles.css" type="text/css"/>
+			<link rel="stylesheet" href="/static/minimal.css" type="text/css"/>
 			<link rel="stylesheet" href="/static/toast.css" type="text/css"/>
 			<title>{ params.Title }</title>
 		</head>
diff --git a/static/minimal.css b/static/minimal.css
@@ -0,0 +1,218 @@
+/*
+BSD Zero Clause License
+
+Copyright (c) 2026 Brook Jeynes <me@brookjeynes.dev>
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+*/
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:root {
+	--primary: #4070a0;
+	--text: #1a1a1a;
+	--secondary: #808080;
+	--light-gray: #e8e8e8;
+	--dark-gray: #c0c0c0;
+	--red: #a05050;
+	--green: #5a9060;
+}
+
+body {
+	font-family: 'Georgia', serif;
+	font-size: 16px;
+	color: var(--text);
+	margin: 0;
+	padding: 0.5rem 1.5rem;
+	max-width: 900px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+h1 {
+	font-size: 32px;
+	font-weight: normal;
+	line-height: 40px;
+	margin-top: 40px;
+}
+
+h2 {
+	font-size: 16px;
+	font-weight: bold;
+	margin-top: 24px;
+}
+
+a,
+a:visited {
+	color: inherit;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 3px;
+
+	&:hover {
+		color: var(--primary);
+	}
+}
+
+footer {
+	margin: 2rem 0;
+	font-size: 75%;
+	color: var(--secondary);
+}
+
+button {
+	font: inherit;
+	cursor: pointer;
+	background: none;
+	border: none;
+	padding: 0;
+	color: inherit;
+
+	&:disabled {
+		opacity: 0.35;
+		cursor: default;
+	}
+
+	&:hover:not(:disabled) {
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 3px;
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--primary);
+		outline-offset: 2px;
+	}
+
+	&.-primary {
+		font-weight: bold;
+	}
+
+	&.-secondary {
+		color: var(--secondary);
+	}
+}
+
+.section-label {
+	font-size: 14px;
+	font-weight: bold;
+
+	&.-muted {
+		color: var(--secondary);
+	}
+}
+
+.alert-box {
+	font-size: 14px;
+
+	&.-error {
+		color: var(--red);
+	}
+
+	&.-success {
+		color: var(--green);
+	}
+
+	&.-info {
+		color: var(--primary);
+	}
+}
+
+select {
+	font: inherit;
+	border: none;
+	border-bottom: 1px solid var(--dark-gray);
+	background: none;
+	padding: 2px 0;
+	cursor: pointer;
+
+	&:focus {
+		outline: none;
+		border-bottom-color: var(--primary);
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--primary);
+		outline-offset: 2px;
+		border-bottom-color: transparent;
+	}
+}
+
+input {
+
+	&[type="radio"],
+	&[type="checkbox"] {
+		cursor: pointer;
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--primary);
+		outline-offset: 2px;
+	}
+
+	&[type="text"],
+	&[type="email"],
+	&[type="password"],
+	&[type="search"],
+	&[type="tel"],
+	&[type="url"],
+	&[type="number"] {
+		font: inherit;
+		border: none;
+		border-bottom: 1px solid var(--dark-gray);
+		background: none;
+		padding: 2px 0;
+
+		&:focus {
+			outline: none;
+			border-bottom-color: var(--primary);
+		}
+	}
+}
+
+fieldset {
+	border: none;
+	padding: 0;
+	margin: 12px 0;
+}
+
+legend {
+	font-weight: bold;
+	padding: 0;
+	margin-bottom: 8px;
+}
+
+hr {
+	margin: 20px 0;
+	border: none;
+	border-top: 1px solid var(--light-gray);
+}
+
+label {
+	& input {
+		margin: 8px 0;
+	}
+}
+
+[role="tablist"] {
+	display: flex;
+	gap: 15px;
+
+	[role="tab"][aria-selected="true"] {
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 3px;
+	}
+}