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:
		
							parent
							
								
									1755dcd526
								
							
						
					
					
						commit
						cbcbaca124
					
				| 
						 | 
					@ -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,
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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>   <span style="font-size: 12px;"><a href="/new?action=delete&url={{ .URL }}">Delete?</a></span></h2>
 | 
					                <h2><a href="{{ .URL }}">{{ .Name }}</a>   <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>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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">
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
| 
						 | 
					@ -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>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										1
									
								
								ws/ws.go
								
								
								
								
							
							
						
						
									
										1
									
								
								ws/ws.go
								
								
								
								
							| 
						 | 
					@ -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") {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue