add dark mode, css reset and normalise links

Implements: https://todo.sr.ht/~amolith/willow/11 Implements: https://todo.sr.ht/~amolith/willow/10
2023-10-28 13:02:15 -04:00 · 2023-10-28 13:02:15 -04:00 · cbcbaca124
parent 1755dcd526
commit cbcbaca124
8 changed files with 192 additions and 54 deletions
--- a/cmd/willow.go
+++ b/cmd/willow.go
@ -105,11 +105,11 @@ func main() {
 	}

 	mux := http.NewServeMux()
-	mux.HandleFunc("/", wsHandler.RootHandler)
-	mux.HandleFunc("/static", ws.StaticHandler)
+	mux.HandleFunc("/static/", ws.StaticHandler)
 	mux.HandleFunc("/new", wsHandler.NewHandler)
 	mux.HandleFunc("/login", wsHandler.LoginHandler)
 	mux.HandleFunc("/logout", wsHandler.LogoutHandler)
+	mux.HandleFunc("/", wsHandler.RootHandler)

 	httpServer := &http.Server{
 		Addr:    config.Server.Listen,
--- a/ws/static/home.html
+++ b/ws/static/home.html
@ -4,39 +4,29 @@
        <title>Willow</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="title" content="Willow">
-        <meta name="description" content="Willow">
-        <style>
-html {
-  max-width: 500px;
-  margin: auto auto;
-}
-.project {
-  border: 2px solid #ccc;
-  border-radius: 5px;
-  padding: 10px;
-  margin-bottom: 10px;
-  background: #f8f8f8;
-}
-.project > h2 {
-  margin: 16px 0 0 0;
-}
-.project > h2 > span {
-  float: right;
-}
-.project > details > pre {
-  overflow: scroll;
-}
-    </style>
+        <meta name="description" content="Forge-agnostic software release tracker">
+
+        <!-- Indicate that we support both light and dark mode -->
+        <meta name="color-scheme" content="dark light">
+
+        <!-- Preload CSS reset -->
+        <link rel="preload" href="/static/reset.css" as="style" />
+        <link rel="stylesheet" href="/static/reset.css" />
+
+        <!-- Preload CSS styles -->
+        <link rel="preload" href="/static/styles.css" as="style" />
+        <link rel="stylesheet" href="/static/styles.css" />
    </head>
    <body>
        <h1>Willow</h1>
        <p><a href="/new">Track a new project</a></p>
+        <div class="projects">
        {{- range . -}}
            <div class="project">
-            <h2><a href="{{ .URL }}">{{ .Name }}</a>&nbsp;&nbsp;&nbsp;<span style="font-size: 12px;"><a href="/new?action=delete&url={{ .URL }}">Delete?</a></span></h2>
+                <h2><a href="{{ .URL }}">{{ .Name }}</a>&nbsp;&nbsp;&nbsp;<span style="font-size: 12px;"><a href="/new?action=delete&url={{ .URL }}" class="normal-link">Delete?</a></span></h2>
                <p>Currently running {{ .Running }}.</p>
                {{- if ne .Running (index .Releases 0).Tag -}}
-                <p>New release available: <a href="{{ (index .Releases 0).URL }}">{{ (index .Releases 0).Tag }}</a>. <a href="/new?action=update&url={{ .URL }}&forge={{ .Forge }}&name={{ .Name }}">Update?</a></p>
+                <p>New release available: <a href="{{ (index .Releases 0).URL }}" class="normal-link">{{ (index .Releases 0).Tag }}</a>. <a href="/new?action=update&url={{ .URL }}&forge={{ .Forge }}&name={{ .Name }}" class="normal-link">Update?</a></p>
                <p>
                    <details>
                        <summary>Expand release notes</summary>
@ -51,6 +41,7 @@ html {
                </p>
                {{- end -}}
            </div>
+        </div>
        {{- end -}}
    </body>
 </html>
--- a/ws/static/login.html
+++ b/ws/static/login.html
@ -4,17 +4,22 @@
        <title>Willow</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="title" content="Willow">
-        <meta name="description" content="Willow">
-        <style>
-html {
-  max-width: 500px;
-  margin: auto auto;
-}
-        </style>
+        <meta name="description" content="Forge-agnostic software release tracker">
+
+        <!-- Indicate that we support both light and dark mode -->
+        <meta name="color-scheme" content="dark light">
+
+        <!-- Preload CSS reset -->
+        <link rel="preload" href="/static/reset.css" as="style" />
+        <link rel="stylesheet" href="/static/reset.css" />
+
+        <!-- Preload CSS styles -->
+        <link rel="preload" href="/static/styles.css" as="style" />
+        <link rel="stylesheet" href="/static/styles.css" />
    </head>
    <body>
        <h1>Willow</h1>
-        <form method="POST">
+        <form method="post">
            <div class="input">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username">
--- a/ws/static/new.html
+++ b/ws/static/new.html
@ -4,13 +4,18 @@
        <title>Willow</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="title" content="Willow">
-        <meta name="description" content="Willow">
-        <style>
-html {
-  max-width: 500px;
-  margin: auto auto;
-}
-        </style>
+        <meta name="description" content="Forge-agnostic software release tracker">
+
+        <!-- Indicate that we support both light and dark mode -->
+        <meta name="color-scheme" content="dark light">
+
+        <!-- Preload CSS reset -->
+        <link rel="preload" href="/static/reset.css" as="style" />
+        <link rel="stylesheet" href="/static/reset.css" />
+
+        <!-- Preload CSS styles -->
+        <link rel="preload" href="/static/styles.css" as="style" />
+        <link rel="stylesheet" href="/static/styles.css" />
    </head>
    <body>
        <h1>Willow</h1>
--- a/ws/static/reset.css
+++ b/ws/static/reset.css
@ -0,0 +1,70 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body, h1, h2, h3, h4, p,
+figure, blockquote, dl, dd {
+    margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+    list-style: none;
+}
+
+/* Set core body defaults */
+body {
+    line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1, h2, h3, h4,
+button, input, label {
+    line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1, h2,
+h3, h4 {
+    text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+    max-width: 100%;
+    display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input, button,
+textarea, select {
+    font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+    min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+    scroll-margin-block: 5ex;
+}
--- a/ws/static/select-release.html
+++ b/ws/static/select-release.html
@ -4,13 +4,18 @@
        <title>Willow</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="title" content="Willow">
-        <meta name="description" content="Willow">
-        <style>
-html {
-  max-width: 500px;
-  margin: auto auto;
-}
-        </style>
+        <meta name="description" content="Forge-agnostic software release tracker">
+
+        <!-- Indicate that we support both light and dark mode -->
+        <meta name="color-scheme" content="dark light">
+
+        <!-- Preload CSS reset -->
+        <link rel="preload" href="/static/reset.css" as="style" />
+        <link rel="stylesheet" href="/static/reset.css" />
+
+        <!-- Preload CSS styles -->
+        <link rel="preload" href="/static/styles.css" as="style" />
+        <link rel="stylesheet" href="/static/styles.css" />
    </head>
    <body>
        <h1>Willow</h1>
--- a/ws/static/styles.css
+++ b/ws/static/styles.css
@ -0,0 +1,63 @@
+html {
+    max-width: 500px;
+    margin: auto auto;
+    color: #2f2f2f;
+    background: white;
+}
+
+a {
+    color: #0640e0;
+}
+
+a:visited {
+    color: #0640e0;
+}
+
+.project {
+    max-width: 500px;
+    border: 2px solid #ccc;
+    background: #f8f8f8;
+    border-radius: 5px;
+    margin-top: 20px;
+    padding: 20px 20px 0 20px;
+}
+
+.project > h2 {
+    margin-top: 0;
+}
+
+.project > h2 > span {
+    float: right;
+}
+
+.project > details > pre {
+    overflow: scroll;
+}
+
+summary {
+    cursor: pointer;
+}
+
+details summary > * {
+    display: inline;
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        background: #171717;
+        color: #ccc;
+    }
+
+    a {
+        color: #5582ff;
+    }
+
+    a:visited {
+        color: #5582ff;
+    }
+
+    .project {
+        border: 2px solid #444;
+        background: #1c1c1c;
+    }
+}
--- a/ws/ws.go
+++ b/ws/ws.go
@ -271,7 +271,6 @@ func (h Handler) isAuthorised(r *http.Request) bool {

 func StaticHandler(writer http.ResponseWriter, request *http.Request) {
 	resource := strings.TrimPrefix(request.URL.Path, "/")
-	// if path ends in .css, set content type to text/css
 	if strings.HasSuffix(resource, ".css") {
 		writer.Header().Set("Content-Type", "text/css")
 	} else if strings.HasSuffix(resource, ".js") {