material-ish design with gitea-style tabs

2 files changed, 169 insertions, 102 deletions

diff --git a/static/main.css b/static/main.css
index d2b423e..36940a4 100644
--- a/static/main.css
+++ b/static/main.css
@@ -5,7 +5,7 @@ body {
 
 a {
     text-decoration: none;
-		color: #800000;
+    color: #800000;
 }
 
 a:hover {
@@ -20,9 +20,9 @@ a:hover {
 }
 
 .title {
-	align-items: center;
-	display: flex;
-	flex-direction: column;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
     display: flex;
     max-width: 120ch;
 }
@@ -33,108 +33,173 @@ a:hover {
 }
 
 .title .logo {
-  padding-top: 15px;
+    padding-top: 15px;
 }
 
 .title>div>:first-child {
-  margin-top: 0;
+    margin-top: 0;
 }
 .title>div>:last-child {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 .header .links {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
 }
 .header .links>* {
-	margin: .5em 1em;
+    height: 1em;
+    padding: .5em;
+    margin: .5em 1em;
+    box-shadow: 0 0 5px #aaa;
+    border-radius: 5px;
+    background: #4060a0;
+    color: white;
+}
+.header .links>*:hover {
+    box-shadow: 0 0 10px #555;
 }
 
 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;
+    display: flex;
+    flex-direction: column;
+    /*background: linear-gradient(to bottom, #cc2020, #cc4040);*/ /* red */
+    /*background: linear-gradient(to bottom, #f3f0ff, #c0c0f0);*/ /* blue */
+    background: #f4f4f4;
+    box-sizing: border-box;
+    min-height: 100vh;
 }
 .header {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	padding: 1em;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 1em;
+    border-bottom: 1px solid grey;
+    box-shadow: 0 0 20px #ccc;
 }
 .content {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	padding-top: 1.5em;
-	margin-top: 3px;
+    border-bottom: 1px solid #ccc;
+    box-shadow: 0 0 10px #ccc;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-top: 1.5em;
+    background: white;
+    width: 100%;
+    max-width: 1000px;
+    padding: 0;
+    padding-left: max(10%, calc(50vw - 400px));
 }
 .content>p::before {
-	content: '\1f6c8';
-	display: block;
-	position: absolute;
-	margin-left: -1.3em;
+    content: '\1f6c8';
+    display: block;
+    position: absolute;
+    margin-left: -1.3em;
 }
 .content>p {
-	border: 1px solid #ccc;
-	background: white;
-	padding: .5em;
-	padding-left: 2.1em;
+    border: 1px solid #ccc;
+    background: white;
+    padding: .5em;
+    margin: 1em;
+    padding-left: 2.1em;
 }
 body>* {
-	padding: 0 .8em;
-	box-sizing: border-box;
-	background-color: rgba(255, 255, 255, .8);
+    padding: 0 .8em;
+    box-sizing: border-box;
 }
 
 .nav {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	flex-wrap: wrap;
+    padding: 0;
+    width: 100%;
+    max-width: 1000px;
+    text-align: center;
+}
+.nav-tabs {
+    margin-top: 1em;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.nav .nav-item:hover {
 }
 .nav .nav-item {
-	margin: 0 .5em;
+    width: 100%;
+    display: block;
+    padding: .7em 0;
+}
+.nav .nav-item.active::after {
+    content: ' ';
+    display: block;
+    height: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    background: white;
+    margin-bottom: -20px;
+}
+.nav .nav-item.active {
+    background: white;
+    box-shadow: 0 0 10px #ccc;
+    z-index: 5;
+    border: 1px solid #ccc;
+    border-bottom: none;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+}
+.nav .nav-item:not(.active) {
+    border-bottom: 1px solid #ccc;
 }
 
+@media (min-width: 1000px) {
+    .header {
+        border: 1px solid #ccc;
+    }
+}
 @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;
-	}
+    body {
+        align-items: center;
+    }
+    body>*:first-child {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    .header {
+        width: 100%;
+        max-width: 1000px;
+    }
+    .content {
+        border: 1px solid #ccc;
+
+        border-top: none;
+    }
+
+    body>:nth-child(2) {
+        /*margin-top: 7vh;*/
+    }
+    body>*:last-child {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    .title {
+        flex-direction: row;
+    }
+    .header {
+        flex-direction: row;
+    }
+    .header .links>*{
+    }
+    .header .links {
+        justify-content: center;
+        align-items: center;
+    }
+    .header .links>* {
+        margin: .1em .25em;
+    }
+    .title .logo {
+        padding-top: 0;
+        padding-right: 15px;
+    }
 }
diff --git a/templates/repo.html b/templates/repo.html
index 156c48a..da297f6 100644
--- a/templates/repo.html
+++ b/templates/repo.html
@@ -4,40 +4,42 @@
     <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 }}">
+    <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" alt="{{ project_logo_alt_text }}" src="../static/{{ project_logo }}" />
-				<div>
-					<h1>/ <a href="">{{ project_owner }}</a> / <a href="">{{ project_name }}</a></h1>
+        <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>
 
-					<p>
-					  {{ project_summary }}
-					</p>
+          <p>
+            {{ project_summary }}
+          </p>
 
-				</div>
+        </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="links">
+        <a href="">RSS</a><a href="">Clone</a> <a href="">Star</a>
+      </div>
+    </div>
+    <div class="nav">
+    <div class="nav-tabs">
+      <a class="nav-item" href="">readme</a>
+      <a class="nav-item active" 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>
+    <div class="content">
       <p>
-  			<strong>{{ project_name }}</strong> was created on 2019-11-29 at 21:20
+        <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>.