~spacekookie/public-inbox

material-ish design with gitea-style tabs v1 PROPOSED

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

 2 files changed, 90 insertions(+), 39 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/9413/mbox | git am -3
Learn more about email & git
View this thread in the archives

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

Milan Pässler
---
 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