~spacekookie/public-inbox

initial styling v1 APPLIED

Milan Pässler
Milan Pässler: 1
 initial styling

 4 files changed, 146 insertions(+), 35 deletions(-)
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~spacekookie/public-inbox/patches/9303/mbox | git am -3
Learn more about email & git
View this thread in the archives

[PATCH] initial styling Export this patch

Milan Pässler
---
 src/main.rs                           |   8 ++
 static/main.css                       | 115 ++++++++++++++++++++++++--
 templates/logo.png => static/rust.png | Bin
 templates/repo.html                   |  58 ++++++-------
 4 files changed, 146 insertions(+), 35 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..617a8f5 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..8c2388e 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="">spacekookie</a> / <a href="">{{ project_name }}</a></h1>
          <h1>/ <a href="">{{ project_owner }}</a> / <a href="">{{ project_name }}</a></h1>

          <p>
            A lightweight web frontend for git repositories
            {{ project_summary }}
          </p>
        </div>

        <div>
          <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>
        <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>
      <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>
      <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