initial styling

author: Milan Pässler <me@pbb.lc> 2019-12-12 03:16:40 +0100
committer: Katharina Fey <kookie@spacekookie.de> 2019-12-13 14:21:21 +0100
commit: baf496acf0640fecdc01864989f2142a9757ba14 (patch)
tree: 7c0d076097c1f14f5a8eae0a541d1e4cfef78f11
parent: d43a02e05a9341325c4b09d810775678d14cc5b0 (diff)
4 files changed, 149 insertions, 38 deletions
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
index a706d7c..a706d7c 100644
--- a/templates/logo.png
+++ b/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>
author	Milan Pässler <me@pbb.lc>	2019-12-12 03:16:40 +0100
committer	Katharina Fey <kookie@spacekookie.de>	2019-12-13 14:21:21 +0100
commit	baf496acf0640fecdc01864989f2142a9757ba14 (patch)
tree	7c0d076097c1f14f5a8eae0a541d1e4cfef78f11
parent	d43a02e05a9341325c4b09d810775678d14cc5b0 (diff)