material-ish design with gitea-style tabs v1 PROPOSED

Milan Pässler: 1
 material-ish design with gitea-style tabs

 2 files changed, 90 insertions(+), 39 deletions(-)

[PATCH] material-ish design with gitea-style tabs Export this patch

---
 static/main.css     | 107 ++++++++++++++++++++++++++++++++------------
 templates/repo.html |  22 ++++-----
 2 files changed, 90 insertions(+), 39 deletions(-)

diff --git a/static/main.css b/static/main.css
index c2ddef3..36940a4 100644
--- a/static/main.css
+++ b/static/main.css
@@ -9,7 +9,8 @@ a {
 }
 
 a:hover {
-    text-decoration: underline;
+    color: black;
+    text-decoration: none;
 }
 
 .logo {
@@ -48,29 +49,49 @@ a:hover {
     justify-content: center;
 }
 .header .links>* {
+    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 */
+    /*background: linear-gradient(to bottom, #f3f0ff, #c0c0f0);*/ /* blue */
+    background: #f4f4f4;
     box-sizing: border-box;
     min-height: 100vh;
 }
 .header {
+    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 {
+    border-bottom: 1px solid #ccc;
+    box-shadow: 0 0 10px #ccc;
+
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding-top: 1.5em;
-    margin-top: 3px;
+    background: white;
+    width: 100%;
+    max-width: 1000px;
+    padding: 0;
+    padding-left: max(10%, calc(50vw - 400px));
 }
 .content>p::before {
     content: '\1f6c8';
@@ -82,24 +103,60 @@ body {
     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);
 }
 
 .nav {
+    padding: 0;
+    width: 100%;
+    max-width: 1000px;
+    text-align: center;
+}
+.nav-tabs {
+    margin-top: 1em;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    flex-wrap: wrap;
+}
+.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 {
         align-items: center;
@@ -109,26 +166,23 @@ body>* {
         border-top-right-radius: 0;
     }
 
-		.header {
-			width: 100%;
-			max-width: 100%;
-		}
-		.content {
-		}
+    .header {
+        width: 100%;
+        max-width: 1000px;
+    }
+    .content {
+        border: 1px solid #ccc;
+
+        border-top: none;
+    }
 
-		body>:nth-child(2) {
-        margin-top: 7vh;
-		}
+    body>:nth-child(2) {
+        /*margin-top: 7vh;*/
+    }
     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;
     }
@@ -136,18 +190,13 @@ body>* {
         flex-direction: row;
     }
     .header .links>*{
-			height: 1em;
-			color: black;
-			background-color: white;
-			padding: .5em;
-			border: 1px solid #ccc;
-		}
+    }
     .header .links {
         justify-content: center;
-				align-items: center;
+        align-items: center;
     }
     .header .links>* {
-        margin: .1em 0;
+        margin: .1em .25em;
     }
     .title .logo {
         padding-top: 0;
diff --git a/templates/repo.html b/templates/repo.html
index 8c2388e..da297f6 100644
--- a/templates/repo.html
+++ b/templates/repo.html
@@ -25,17 +25,19 @@
         <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">
-      <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 }}
-- 
2.24.1