Milan Pässler: 1 initial styling 4 files changed, 149 insertions(+), 38 deletions(-)
Copy & paste the following snippet into your terminal to import this patchset into git:
curl -s https://lists.sr.ht/~spacekookie/public-inbox/patches/9299/mbox | git am -3Learn more about email & git
--- src/main.rs | 8 ++ static/main.css | 115 ++++++++++++++++++++++++-- templates/logo.png => static/rust.png | Bin templates/repo.html | 64 +++++++------- 4 files changed, 149 insertions(+), 38 deletions(-) rename templates/logo.png => static/rust.png (100%) diff --git a/src/main.rs b/src/main.rs index d516d66..44588b2 100644 --- a/src/main.rs +++ b/src/main.rs @@ -37,7 +37,11 @@ impl Repository { #[derive(Template)] #[template(path = "repo.html")] struct Repo<'a> { + project_owner: &'a str, + project_summary: &'a str, project_name: &'a str, + project_logo: &'a str, + project_logo_alt_text: &'a str, first_commit: &'a str, num_commits: usize, num_contributors: usize, @@ -48,7 +52,11 @@ fn repo(req: HttpRequest, path: web::Path<(String)>) -> Result<HttpResponse> { dbg!(req); let repo = Repo { + project_owner: "spacekookie", + project_summary: "A lightweight web frontend for git repositories", project_name: "webgit", + project_logo: "rust.png", + project_logo_alt_text: "Rust logo", first_commit: "f6ca929", num_commits: 123, num_contributors: 3, diff --git a/static/main.css b/static/main.css index a8eea22..b7aae97 100644 --- a/static/main.css +++ b/static/main.css @@ -5,6 +5,7 @@ body { a { text-decoration: none; + color: #800000; } a:hover { @@ -17,12 +18,10 @@ a:hover { max-height:75px; } -.content { - padding: 15px; -} - .title { - margin: 0 auto; + align-items: center; + display: flex; + flex-direction: column; display: flex; max-width: 120ch; } @@ -33,6 +32,108 @@ a:hover { } .title .logo { - padding: 15px; - flex-shrink: 0; + padding-top: 15px; +} + +.title>div>:first-child { + margin-top: 0; +} +.title>div>:last-child { + margin-bottom: 0; +} + +.header .links { + display: flex; + flex-direction: row; + justify-content: center; +} +.header .links>* { + margin: .5em 1em; +} + +body { + display: flex; + flex-direction: column; + /*background: linear-gradient(to bottom, #cc2020, #cc4040);*/ /* red */ + background: linear-gradient(to bottom, #101070, #101040); /* blue */ + box-sizing: border-box; + min-height: 100vh; +} +.header { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 1em; +} +.content { + display: flex; + flex-direction: column; + justify-content: space-between; + padding-top: 1.5em; + margin-top: 3px; +} +.content>p::before { + content: '\1f6c8'; + display: block; + position: absolute; + margin-left: -1.3em; +} +.content>p { + border: 1px solid #ccc; + background: white; + padding: .5em; + padding-left: 2.1em; +} +body>* { + padding: 0 .8em; + box-sizing: border-box; + background-color: rgba(255, 255, 255, .8); +} + +.nav { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; +} +.nav .nav-item { + margin: 0 .5em; +} + +@media (min-width: 600px) { + body { + padding: 7vh 0; + align-items: center; + } + body>*:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + body>*:last-child { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + body>* { + /*box-shadow: 0 0 10px #ccc;*/ + /*border: 1px solid #ccc;*/ + width: 80%; + max-width: 800px; + } + .title { + flex-direction: row; + } + .header { + flex-direction: row; + } + .header .links { + justify-content: center; + flex-direction: column; + } + .header .links>* { + margin: .1em 0; + } + .title .logo { + padding-top: 0; + padding-right: 15px; + } } diff --git a/templates/logo.png b/static/rust.png similarity index 100% rename from templates/logo.png rename to static/rust.png diff --git a/templates/repo.html b/templates/repo.html index aefa962..156c48a 100644 --- a/templates/repo.html +++ b/templates/repo.html @@ -1,47 +1,49 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="utf-8" /> <title>{{ project_name }} | /{{ project_name }}</title> <link href="../static/main.css" rel="stylesheet"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="Description" content="{{ project_owner }} by {{ project_owner }}; {{ project_summary }}"> </head> <body> <div class="header"> <div class="title"> - <img class="logo" src="logo.png" /> + <img class="logo" alt="{{ project_logo_alt_text }}" src="../static/{{ project_logo }}" /> + <div> + <h1>/ <a href="">{{ project_owner }}</a> / <a href="">{{ project_name }}</a></h1> - <div> - <h1>/ <a href="">spacekookie</a> / <a href="">{{ project_name }}</a></h1> + <p> + {{ project_summary }} + </p> - <p> - A lightweight web frontend for git repositories - </p> - </div> + </div> - <div> - <a href="">RSS</a> <a href="">Clone</a> <a href="">Star</a> - - </div> + </div> + <div class="links"> + <a href="">RSS</a><a href="">Clone</a> <a href="">Star</a> + </div> + </div> + <div class="content"> + <div class="nav"> + <a class="nav-item" href="">readme</a> + <a class="nav-item" href="">summary</a> + <a class="nav-item" href="">tree</a> + <a class="nav-item" href="">log</a> + <a class="nav-item" href="">tags</a> + <a class="nav-item" href="">branches</a> + <a class="nav-item" href="">stats</a> + <a class="nav-item" href="">contribute</a> </div> - <div class="content"> - <div class="nav"> - <a class="nav-item" href="">readme</a> - <a class="nav-item" href="">summary</a> - <a class="nav-item" href="">tree</a> - <a class="nav-item" href="">log</a> - <a class="nav-item" href="">tags</a> - <a class="nav-item" href="">branches</a> - <a class="nav-item" href="">stats</a> - <a class="nav-item" href="">contribute</a> - </div> - <p> - <strong>webgit</strong> was created on 2019-11-29 at 21:20 - with commit <a href="">{{ first_commit }}</a>. Since then, <a href="">{{ num_commits }} - commits</a> have been authered by - <a href="">{{ num_contributors }} contributers</a>. - </p> - <div> - </div> + <p> + <strong>{{ project_name }}</strong> was created on 2019-11-29 at 21:20 + with commit <a href="">{{ first_commit }}</a>. Since then, <a href="">{{ num_commits }} + commits</a> have been authered by + <a href="">{{ num_contributors }} contributers</a>. + </p> + <div> </div> + </div> </body> </html> -- 2.24.0
