add dark mode, css reset and normalise links

Implements: https://todo.sr.ht/~amolith/willow/11
Implements: https://todo.sr.ht/~amolith/willow/10
This commit is contained in:
Amolith 2023-10-28 13:02:15 -04:00
parent 1755dcd526
commit cbcbaca124
Signed by: Amolith
GPG Key ID: 8AE30347CE28D101
8 changed files with 192 additions and 54 deletions

View File

@ -105,11 +105,11 @@ func main() {
} }
mux := http.NewServeMux() mux := http.NewServeMux()
mux.HandleFunc("/", wsHandler.RootHandler) mux.HandleFunc("/static/", ws.StaticHandler)
mux.HandleFunc("/static", ws.StaticHandler)
mux.HandleFunc("/new", wsHandler.NewHandler) mux.HandleFunc("/new", wsHandler.NewHandler)
mux.HandleFunc("/login", wsHandler.LoginHandler) mux.HandleFunc("/login", wsHandler.LoginHandler)
mux.HandleFunc("/logout", wsHandler.LogoutHandler) mux.HandleFunc("/logout", wsHandler.LogoutHandler)
mux.HandleFunc("/", wsHandler.RootHandler)
httpServer := &http.Server{ httpServer := &http.Server{
Addr: config.Server.Listen, Addr: config.Server.Listen,

View File

@ -4,39 +4,29 @@
<title>Willow</title> <title>Willow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="Willow"> <meta name="title" content="Willow">
<meta name="description" content="Willow"> <meta name="description" content="Forge-agnostic software release tracker">
<style>
html { <!-- Indicate that we support both light and dark mode -->
max-width: 500px; <meta name="color-scheme" content="dark light">
margin: auto auto;
} <!-- Preload CSS reset -->
.project { <link rel="preload" href="/static/reset.css" as="style" />
border: 2px solid #ccc; <link rel="stylesheet" href="/static/reset.css" />
border-radius: 5px;
padding: 10px; <!-- Preload CSS styles -->
margin-bottom: 10px; <link rel="preload" href="/static/styles.css" as="style" />
background: #f8f8f8; <link rel="stylesheet" href="/static/styles.css" />
}
.project > h2 {
margin: 16px 0 0 0;
}
.project > h2 > span {
float: right;
}
.project > details > pre {
overflow: scroll;
}
</style>
</head> </head>
<body> <body>
<h1>Willow</h1> <h1>Willow</h1>
<p><a href="/new">Track a new project</a></p> <p><a href="/new">Track a new project</a></p>
<div class="projects">
{{- range . -}} {{- range . -}}
<div class="project"> <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> <p>Currently running {{ .Running }}.</p>
{{- if ne .Running (index .Releases 0).Tag -}} {{- 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> <p>
<details> <details>
<summary>Expand release notes</summary> <summary>Expand release notes</summary>
@ -49,7 +39,8 @@ html {
{{- end -}} {{- end -}}
</details> </details>
</p> </p>
{{- end -}} {{- end -}}
</div>
</div> </div>
{{- end -}} {{- end -}}
</body> </body>

View File

@ -4,17 +4,22 @@
<title>Willow</title> <title>Willow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="Willow"> <meta name="title" content="Willow">
<meta name="description" content="Willow"> <meta name="description" content="Forge-agnostic software release tracker">
<style>
html { <!-- Indicate that we support both light and dark mode -->
max-width: 500px; <meta name="color-scheme" content="dark light">
margin: auto auto;
} <!-- Preload CSS reset -->
</style> <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> </head>
<body> <body>
<h1>Willow</h1> <h1>Willow</h1>
<form method="POST"> <form method="post">
<div class="input"> <div class="input">
<label for="username">Username:</label> <label for="username">Username:</label>
<input type="text" id="username" name="username"> <input type="text" id="username" name="username">

View File

@ -4,13 +4,18 @@
<title>Willow</title> <title>Willow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="Willow"> <meta name="title" content="Willow">
<meta name="description" content="Willow"> <meta name="description" content="Forge-agnostic software release tracker">
<style>
html { <!-- Indicate that we support both light and dark mode -->
max-width: 500px; <meta name="color-scheme" content="dark light">
margin: auto auto;
} <!-- Preload CSS reset -->
</style> <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> </head>
<body> <body>
<h1>Willow</h1> <h1>Willow</h1>

70
ws/static/reset.css Normal file
View File

@ -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;
}

View File

@ -4,13 +4,18 @@
<title>Willow</title> <title>Willow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="Willow"> <meta name="title" content="Willow">
<meta name="description" content="Willow"> <meta name="description" content="Forge-agnostic software release tracker">
<style>
html { <!-- Indicate that we support both light and dark mode -->
max-width: 500px; <meta name="color-scheme" content="dark light">
margin: auto auto;
} <!-- Preload CSS reset -->
</style> <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> </head>
<body> <body>
<h1>Willow</h1> <h1>Willow</h1>

63
ws/static/styles.css Normal file
View File

@ -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;
}
}

View File

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