material-ish design with gitea-style tabs

1 files changed, 142 insertions, 77 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;
+    }
 }